Update src/components/menu-bar/google-drive-save.jsx

src/components/menu-bar/google-drive-save.jsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -15,7 +14,9 @@ class GoogleDriveSave extends React.Component {
             currentAccountName: localStorage.getItem('googleDriveAccountName') || null,
             files: [],
             isModalOpen: false,
-            isLoading: false
+            isLoading: false,
+            newFileName: window.vm.runtime.projectName || '無題',
+            showNewFileInput: false
         };
         this.modalContentRef = React.createRef();
     }
@@ -29,47 +30,47 @@ class GoogleDriveSave extends React.Component {
     };
 
     handleCloseModal = () => {
-        this.setState({isModalOpen: false});
+        this.setState({isModalOpen: false, showNewFileInput: false});
     };
+
     handleOverlayClick = (e) => {
-        // モーダルコンテンツ内をクリックした場合は閉じない
         if (this.modalContentRef.current && !this.modalContentRef.current.contains(e.target)) {
             this.handleCloseModal();
         }
     };
-startGoogleLogin = () => {
-    // 既存のトークン情報をクリア
-    localStorage.removeItem('googleDriveAccessToken');
-    localStorage.removeItem('googleDriveAccountEmail');
-    localStorage.removeItem('googleDriveAccountName');
-    
-    const CLIENT_ID = "169451419993-v1b3s315s8dkui950j2nm15hetr5i0qk.apps.googleusercontent.com";
-    const REDIRECT_URI = "https://soiz1-s4s-upload.hf.space/close2";
-    const SCOPES = "https://www.googleapis.com/auth/drive.file";
-    
-    const messageListener = (event) => {
-        if (event.data.token) {
-            window.removeEventListener("message", messageListener);
-            this.setState({
-                accessToken: event.data.token,
-                currentAccountEmail: event.data.email || null,
-                currentAccountName: event.data.name || null,
-                isModalOpen: true
-            });
-            
-            this.fetchDriveFiles(event.data.token);
-        }
+
+    startGoogleLogin = () => {
+        localStorage.removeItem('googleDriveAccessToken');
+        localStorage.removeItem('googleDriveAccountEmail');
+        localStorage.removeItem('googleDriveAccountName');
+        
+        const CLIENT_ID = "169451419993-v1b3s315s8dkui950j2nm15hetr5i0qk.apps.googleusercontent.com";
+        const REDIRECT_URI = "https://sc4sc-redirect-auth.hf.space/close2";
+        const SCOPES = "https://www.googleapis.com/auth/drive.file";
+        
+        const messageListener = (event) => {
+            if (event.data.token) {
+                window.removeEventListener("message", messageListener);
+                this.setState({
+                    accessToken: event.data.token,
+                    currentAccountEmail: event.data.email || null,
+                    currentAccountName: event.data.name || null,
+                    isModalOpen: true
+                });
+                
+                this.fetchDriveFiles(event.data.token);
+            }
+        };
+        window.addEventListener("message", messageListener);
+
+        const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
+            `client_id=${CLIENT_ID}` +
+            `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+            `&response_type=token` +
+            `&scope=${encodeURIComponent(SCOPES)}`;
+        
+        window.open(authUrl, "_blank", "width=500,height=600");
     };
-    window.addEventListener("message", messageListener);
-
-    const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
-        `client_id=${CLIENT_ID}` +
-        `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
-        `&response_type=token` +
-        `&scope=${encodeURIComponent(SCOPES)}`;
-    
-    window.open(authUrl, "_blank", "width=500,height=600");
-};
 
     fetchDriveFiles = async (accessToken) => {
         this.setState({isLoading: true});
@@ -98,7 +99,7 @@ startGoogleLogin = () => {
 
         return (
             <div className={styles.modalOverlay} onClick={this.handleOverlayClick}>
-                <div className={styles.modalContent}>
+                <div className={styles.modalContent} ref={this.modalContentRef}>
                     <div className={styles.modalHeader}>
                         <h2>Googleドライブに保存</h2>
                         <button onClick={this.handleCloseModal} className={styles.closeButton}>×</button>
@@ -106,6 +107,7 @@ startGoogleLogin = () => {
                     
                     <div className={styles.modalBody}>
                         {this.renderAuthSection()}
+                        {this.state.accessToken && this.renderNewFileSection()}
                         {this.state.accessToken && this.renderFileList()}
                     </div>
                 </div>
@@ -143,12 +145,53 @@ startGoogleLogin = () => {
         );
     }
 
+    renderNewFileSection() {
+        if (this.state.showNewFileInput) {
+            return (
+                <div className={styles.newFileSection}>
+                    <div className={styles.newFileInputGroup}>
+                        <input
+                            type="text"
+                            value={this.state.newFileName}
+                            onChange={(e) => this.setState({newFileName: e.target.value})}
+                            className={styles.newFileNameInput}
+                            placeholder="ファイル名を入力"
+                        />
+                        <button
+                            onClick={this.handleNewFileSave}
+                            className={styles.newFileSaveButton}
+                            disabled={!this.state.newFileName.trim()}
+                        >
+                            保存
+                        </button>
+                        <button
+                            onClick={() => this.setState({showNewFileInput: false})}
+                            className={styles.newFileCancelButton}
+                        >
+                            キャンセル
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles.newFileSection}>
+                <button 
+                    onClick={() => this.setState({showNewFileInput: true, newFileName: window.vm.runtime.projectName || '無題'})}
+                    className={styles.newFileButton}
+                >
+                    新規保存
+                </button>
+            </div>
+        );
+    }
+
     renderFileList() {
         if (this.state.isLoading) {
             return <div className={styles.loading}>読み込み中...</div>;
         }
 
-        // プロジェクトファイルとサムネイルを関連付ける
         const projectFiles = this.state.files.filter(file => file.mimeType === 'application/x-scratch');
         const thumbnailFiles = this.state.files.filter(file => file.mimeType === 'image/png');
 
@@ -159,13 +202,7 @@ startGoogleLogin = () => {
         return (
             <div className={styles.fileListContainer}>
                 <div className={styles.fileListHeader}>
-                    <h3>プロジェクト: {this.renderProjectTitle()}</h3>
-                    <button 
-                        onClick={this.handleNewFile}
-                        className={styles.newFileButton}
-                    >
-                        新規保存
-                    </button>
+                    <h3>保存済みプロジェクト</h3>
                 </div>
                 
                 <div className={styles.fileList}>
@@ -175,19 +212,6 @@ startGoogleLogin = () => {
         );
     }
 
-    renderProjectTitle() {
-        const projectName = window.vm.runtime.projectName || "無題";
-        
-        return (
-            <span 
-                className={styles.projectTitle}
-                onDoubleClick={this.handleEditProjectTitle}
-            >
-                {projectName}
-            </span>
-        );
-    }
-
     renderFileItem(project, thumbnailFiles) {
         const thumbnail = thumbnailFiles.find(
             thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
@@ -245,37 +269,37 @@ startGoogleLogin = () => {
         );
     }
 
-renderShareLink(fileId) {
-    const SHORT_URL = "https://s4.rf.gd/";
-    
-    return (
-        <div className={styles.linkContainer}>
-            <div className={styles.linkHeader}>
-                <span>共有リンク:</span>
-                <button 
-                    onClick={() => this.copyToClipboard(`${SHORT_URL}${fileId}`)}
-                    className={styles.copyButton}
-                >
-                    リンクをコピー
-                </button>
-                <button 
-                    onClick={() => this.copyToClipboard(fileId)}
-                    className={styles.copyButton}
+    renderShareLink(fileId) {
+        const SHORT_URL = "https://s4.rf.gd/";
+        
+        return (
+            <div className={styles.linkContainer}>
+                <div className={styles.linkHeader}>
+                    <span>共有リンク:</span>
+                    <button 
+                        onClick={() => this.copyToClipboard(`${SHORT_URL}${fileId}`)}
+                        className={styles.copyButton}
+                    >
+                        リンクをコピー
+                    </button>
+                    <button 
+                        onClick={() => this.copyToClipboard(fileId)}
+                        className={styles.copyButton}
+                    >
+                        IDのみコピー
+                    </button>
+                </div>
+                <a 
+                    href={`${SHORT_URL}${fileId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={styles.linkUrl}
                 >
-                    IDのみコピー
-                </button>
+                    {`${SHORT_URL}${fileId}`}
+                </a>
             </div>
-            <a 
-                href={`${SHORT_URL}${fileId}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={styles.linkUrl}
-            >
-                {`${SHORT_URL}${fileId}`}
-            </a>
-        </div>
-    );
-}
+        );
+    }
 
     render() {
         return (
@@ -299,7 +323,6 @@ renderShareLink(fileId) {
         );
     }
 
-    // イベントハンドラメソッド
     handleChangeAccount = () => {
         this.setState({
             accessToken: null,
@@ -311,27 +334,18 @@ renderShareLink(fileId) {
         localStorage.removeItem('googleDriveAccountName');
     };
 
-    handleEditProjectTitle = () => {
-        const currentName = window.vm.runtime.projectName || "無題";
-        const newName = prompt("プロジェクト名を入力してください", currentName);
-        
-        if (newName !== null) {
-            window.vm.runtime.projectName = newName.trim() || "無題";
-            this.forceUpdate();
+    handleNewFileSave = async () => {
+        try {
+            await this.saveToGoogleDrive(null, `${this.state.newFileName}.s4s.txt`);
+            alert("success", "新規保存しました");
+            this.setState({showNewFileInput: false});
+            this.fetchDriveFiles(this.state.accessToken);
+        } catch (error) {
+            console.error("新規保存エラー:", error);
+            alert("error", "新規保存に失敗しました");
         }
     };
 
-handleNewFile = async () => {
-    try {
-        await this.saveToGoogleDrive(null, null);
-        alert("success", "新規保存しました");
-        this.fetchDriveFiles(this.state.accessToken);
-    } catch (error) {
-        console.error("新規保存エラー:", error);
-        alert("error", "新規保存に失敗しました");
-    }
-};
-
     handleLoadFile = (project) => {
         const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
         
@@ -362,10 +376,8 @@ handleNewFile = async () => {
     handleDeleteFile = async (project, thumbnailFiles) => {
         if (confirm(`"${project.name}"とそのサムネイルを完全に削除しますか？この操作は元に戻せません。`)) {
             try {
-                // プロジェクトファイルを削除
                 await this.deleteFile(project.id);
                 
-                // 対応するサムネイルを探して削除
                 const thumbnailToDelete = thumbnailFiles.find(
                     thumb => thumb.name === `Scratch-Thumbnail-${project.id}.png`
                 );
@@ -389,7 +401,6 @@ handleNewFile = async () => {
             .catch(() => alert("error", "リンクのコピーに失敗しました"));
     };
 
-    // API操作メソッド
     async deleteFile(fileId) {
         const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}`, {
             method: "DELETE",
@@ -404,13 +415,10 @@ handleNewFile = async () => {
     }
 
     async saveToGoogleDrive(fileId, fileName) {
-        // プロジェクトを保存
         const blob = await window.vm.saveProjectSb3();
-        const projectName = window.vm.runtime.projectName || "無題";
-        const nameToUse = fileName || `${projectName}.s4s.txt`;
         
         const metadata = {
-            name: nameToUse,
+            name: fileName,
             mimeType: "application/x-scratch",
         };
 
@@ -438,7 +446,6 @@ handleNewFile = async () => {
 
         const fileData = await uploadResponse.json();
 
-        // サムネイルを保存
         try {
             const thumbnailDataUrl = await this.getProjectThumbnail();
             const thumbnailBlob = await (await fetch(thumbnailDataUrl)).blob();