Update src/addons/addons/save-to-google/userscript.js

src/addons/addons/save-to-google/userscript.js

@@ -14,7 +14,8 @@ export default async ({ addon, console, msg }) => {
     const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
     const SHORT_URL = "https://s4.rf.gd/";
 
-    let accessToken = null;
+    let accessToken = localStorage.getItem('googleDriveAccessToken') || null;
+    let currentAccountEmail = localStorage.getItem('googleDriveAccountEmail') || null;
 
     while (true) {
         const targetElem = await addon.tab.waitForElement(
@@ -37,24 +38,37 @@ export default async ({ addon, console, msg }) => {
     }
 
     function showMainModal(addon) {
-        const modal = addon.tab.createModal("Googleドライブに保存", { isOpen: true, useEditorClasses: true });
+        const modal = addon.tab.createModal("Googleドライブに保存", { 
+            isOpen: true, 
+            useEditorClasses: true,
+            maxWidth: "800px",
+            maxHeight: "80vh"
+        });
         
         modal.content.innerHTML = `
-            <div style="padding: 1rem;">
-                <h1>Googleドライブに接続</h1>
-                <p>Googleでログインして、プロジェクトを保存または更新します。</p>
-                <button id="google-login-button" class="button">Googleでログイン</button>
-                <div id="file-list-container" style="margin-top: 1rem; display: none;">
+            <div style="padding: 1rem; max-height: 70vh; overflow-y: auto;">
+                <h1 style="font-size: 1.5rem; margin-bottom: 1rem;">Googleドライブに接続</h1>
+                ${accessToken ? `
+                    <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
+                        <div>ログイン中: ${currentAccountEmail || 'Googleアカウント'}</div>
+                        <button id="change-account-button" class="button" style="padding: 0.25rem 0.5rem; font-size: 0.9rem;">アカウントを変更</button>
+                    </div>
+                ` : `
+                    <p style="margin-bottom: 1rem;">Googleでログインして、プロジェクトを保存または更新します。</p>
+                    <button id="google-login-button" class="button">Googleでログイン</button>
+                `}
+                <div id="file-list-container" style="margin-top: 1rem; ${accessToken ? '' : 'display: none;'}">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                        <h2 style="margin: 0;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000;">${window.vm.runtime.projectName || "無題"}</span></h2>
+                        <h2 style="margin: 0; font-size: 1.2rem;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000;">${window.vm.runtime.projectName || "無題"}</span></h2>
                         <button id="new-file-button" class="button">新規保存</button>
                     </div>
-                    <div id="file-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem;"></div>
+                    <div id="file-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;"></div>
                 </div>
             </div>
         `;
 
         const loginButton = modal.content.querySelector("#google-login-button");
+        const changeAccountButton = modal.content.querySelector("#change-account-button");
         const fileListContainer = modal.content.querySelector("#file-list-container");
         const fileList = modal.content.querySelector("#file-list");
         const newFileButton = modal.content.querySelector("#new-file-button");
@@ -84,35 +98,22 @@ export default async ({ addon, console, msg }) => {
             });
         });
 
-        loginButton?.addEventListener("click", () => {
-            const messageListener = (event) => {
-                if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
-                    window.removeEventListener("message", messageListener);
-                    accessToken = event.data.token;
-                    
-                    loginButton.style.display = "none";
-                    
-                    fetchDriveFiles(accessToken)
-                        .then(files => {
-                            displayFileList(files, accessToken, modal, addon);
-                            fileListContainer.style.display = "block";
-                        })
-                        .catch(error => {
-                            console.error("ファイル一覧取得エラー:", error);
-                            showAlert(addon, "error", "ファイル一覧の取得に失敗しました");
-                        });
-                }
-            };
-            window.addEventListener("message", messageListener);
+        if (loginButton) {
+            loginButton.addEventListener("click", () => {
+                startGoogleLogin(modal, addon);
+            });
+        }
 
-            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");
-        });
+        if (changeAccountButton) {
+            changeAccountButton.addEventListener("click", () => {
+                accessToken = null;
+                currentAccountEmail = null;
+                localStorage.removeItem('googleDriveAccessToken');
+                localStorage.removeItem('googleDriveAccountEmail');
+                showMainModal(addon);
+                modal.remove();
+            });
+        }
 
         newFileButton?.addEventListener("click", async () => {
             try {
@@ -123,10 +124,49 @@ export default async ({ addon, console, msg }) => {
             }
         });
 
+        if (accessToken) {
+            fetchDriveFiles(accessToken)
+                .then(files => {
+                    displayFileList(files, accessToken, modal, addon);
+                    fileListContainer.style.display = "block";
+                })
+                .catch(error => {
+                    console.error("ファイル一覧取得エラー:", error);
+                    showAlert(addon, "error", "ファイル一覧の取得に失敗しました");
+                });
+        }
+
         modal.backdrop.addEventListener("click", modal.remove);
         modal.closeButton.addEventListener("click", modal.remove);
     }
 
+    function startGoogleLogin(modal, addon) {
+        const messageListener = (event) => {
+            if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
+                window.removeEventListener("message", messageListener);
+                accessToken = event.data.token;
+                currentAccountEmail = event.data.email || null;
+                
+                localStorage.setItem('googleDriveAccessToken', accessToken);
+                if (currentAccountEmail) {
+                    localStorage.setItem('googleDriveAccountEmail', currentAccountEmail);
+                }
+                
+                showMainModal(addon);
+                modal.remove();
+            }
+        };
+        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");
+    }
+
     async function fetchDriveFiles(accessToken) {
         const response = await fetch("https://www.googleapis.com/drive/v3/files?q=(mimeType='application/x-scratch' or mimeType='image/png')", {
             headers: {
@@ -169,11 +209,14 @@ export default async ({ addon, console, msg }) => {
             fileItem.style.flexDirection = "column";
             fileItem.style.gap = "0.75rem";
             fileItem.style.background = "#fff";
+            fileItem.style.height = "100%";
 
             // サムネイル表示
             const thumbnailContainer = document.createElement("div");
             thumbnailContainer.style.position = "relative";
             thumbnailContainer.style.aspectRatio = "4/3";
+            thumbnailContainer.style.maxHeight = "150px";
+            thumbnailContainer.style.overflow = "hidden";
             
             if (thumbnail) {
                 const thumbnailImg = document.createElement("img");
@@ -181,7 +224,8 @@ export default async ({ addon, console, msg }) => {
                 thumbnailImg.style.width = "100%";
                 thumbnailImg.style.height = "100%";
                 thumbnailImg.style.borderRadius = "4px";
-                thumbnailImg.style.objectFit = "cover";
+                thumbnailImg.style.objectFit = "contain";
+                thumbnailImg.style.backgroundColor = "#f0f0f0";
                 thumbnailContainer.appendChild(thumbnailImg);
             } else {
                 const thumbnailPlaceholder = document.createElement("div");
@@ -209,23 +253,28 @@ export default async ({ addon, console, msg }) => {
             // 共有リンク
             const linkContainer = document.createElement("div");
             linkContainer.style.display = "flex";
-            linkContainer.style.gap = "0.5rem";
-            linkContainer.style.alignItems = "center";
-            linkContainer.style.justifyContent = "center";
-
-            const link = document.createElement("a");
-            link.href = `${SHORT_URL}${project.id}`;
-            link.textContent = "共有リンク";
-            link.target = "_blank";
-            link.rel = "noopener noreferrer";
-            link.style.fontSize = "0.9em";
-            link.style.color = "#4d97ff";
+            linkContainer.style.flexDirection = "column";
+            linkContainer.style.gap = "0.25rem";
+            linkContainer.style.marginBottom = "0.5rem";
+
+            const linkLabel = document.createElement("div");
+            linkLabel.textContent = "共有リンク:";
+            linkLabel.style.fontSize = "0.8em";
+            linkLabel.style.color = "#666";
+            linkContainer.appendChild(linkLabel);
+
+            const linkUrl = document.createElement("div");
+            linkUrl.textContent = `${SHORT_URL}${project.id}`;
+            linkUrl.style.fontSize = "0.9em";
+            linkUrl.style.wordBreak = "break-all";
+            linkContainer.appendChild(linkUrl);
 
             const copyButton = document.createElement("button");
-            copyButton.textContent = "コピー";
+            copyButton.textContent = "リンクをコピー";
             copyButton.className = "button";
             copyButton.style.fontSize = "0.8em";
             copyButton.style.padding = "0.2rem 0.5rem";
+            copyButton.style.width = "100%";
 
             copyButton.addEventListener("click", (e) => {
                 e.stopPropagation();
@@ -234,7 +283,6 @@ export default async ({ addon, console, msg }) => {
                     .catch(() => showAlert(addon, "error", "リンクのコピーに失敗しました"));
             });
 
-            linkContainer.appendChild(link);
             linkContainer.appendChild(copyButton);
             fileItem.appendChild(linkContainer);