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

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

@@ -1,502 +1,197 @@
+/* google-drive-save.css */
+.saveButton {
+    /* ボタンのスタイル */
+}
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {FormattedMessage} from 'react-intl';
-import Button from '../button/button.jsx';
-import styles from './google-drive-save.css';
-
-class GoogleDriveSave extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            accessToken: localStorage.getItem('googleDriveAccessToken') || null,
-            currentAccountEmail: localStorage.getItem('googleDriveAccountEmail') || null,
-            currentAccountName: localStorage.getItem('googleDriveAccountName') || null,
-            files: [],
-            isModalOpen: false,
-            isLoading: false
-        };
-    }
-
-    componentDidMount() {
-        // 初期化処理
-    }
-
-    handleClick = () => {
-        this.setState({isModalOpen: true});
-    };
-
-    handleCloseModal = () => {
-        this.setState({isModalOpen: false});
-    };
-
-    startGoogleLogin = () => {
-        const CLIENT_ID = "1033286471224-n9mv8l869fqikubj2e8q92n8ige3qr6r.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.origin === "https://soiz1-penguin-upload.hf.space" && 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
-                });
-                
-                localStorage.setItem('googleDriveAccessToken', event.data.token);
-                if (event.data.email) {
-                    localStorage.setItem('googleDriveAccountEmail', event.data.email);
-                }
-                if (event.data.name) {
-                    localStorage.setItem('googleDriveAccountName', event.data.name);
-                }
-                
-                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");
-    };
-
-    fetchDriveFiles = async (accessToken) => {
-        this.setState({isLoading: true});
-        try {
-            const response = await fetch("https://www.googleapis.com/drive/v3/files?q=(mimeType='application/x-scratch' or mimeType='image/png')", {
-                headers: {
-                    Authorization: `Bearer ${accessToken}`,
-                },
-            });
-
-            if (!response.ok) {
-                throw new Error(await response.text());
-            }
-
-            const data = await response.json();
-            this.setState({files: data.files || [], isLoading: false});
-        } catch (error) {
-            console.error("ファイル一覧取得エラー:", error);
-            this.props.showAlert("error", "ファイル一覧の取得に失敗しました");
-            this.setState({isLoading: false});
-        }
-    };
-
-    renderModal() {
-        if (!this.state.isModalOpen) return null;
-
-        return (
-            <div className={styles.modalOverlay}>
-                <div className={styles.modalContent}>
-                    <div className={styles.modalHeader}>
-                        <h2>Googleドライブに保存</h2>
-                        <button onClick={this.handleCloseModal} className={styles.closeButton}>×</button>
-                    </div>
-                    
-                    <div className={styles.modalBody}>
-                        {this.renderAuthSection()}
-                        {this.state.accessToken && this.renderFileList()}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderAuthSection() {
-        if (this.state.accessToken) {
-            return (
-                <div className={styles.authSection}>
-                    <div className={styles.accountInfo}>
-                        ログイン中: {this.state.currentAccountName || this.state.currentAccountEmail || 'Googleアカウント'}
-                    </div>
-                    <button 
-                        onClick={this.handleChangeAccount}
-                        className={styles.changeAccountButton}
-                    >
-                        アカウントを変更
-                    </button>
-                </div>
-            );
-        }
-        
-        return (
-            <div className={styles.authSection}>
-                <p>Googleでログインして、プロジェクトを保存または更新します。</p>
-                <button 
-                    onClick={this.startGoogleLogin}
-                    className={styles.loginButton}
-                >
-                    Googleでログイン
-                </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');
-
-        if (projectFiles.length === 0) {
-            return <div className={styles.noFiles}>保存されたファイルが見つかりません</div>;
-        }
-
-        return (
-            <div className={styles.fileListContainer}>
-                <div className={styles.fileListHeader}>
-                    <h3>プロジェクト: {this.renderProjectTitle()}</h3>
-                    <button 
-                        onClick={this.handleNewFile}
-                        className={styles.newFileButton}
-                    >
-                        新規保存
-                    </button>
-                </div>
-                
-                <div className={styles.fileList}>
-                    {projectFiles.map(project => this.renderFileItem(project, thumbnailFiles))}
-                </div>
-            </div>
-        );
-    }
-
-    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 === `Penguin-Thumbnail-${project.id}.png`
-        );
-
-        return (
-            <div key={project.id} className={styles.fileItem}>
-                <div className={styles.thumbnailContainer}>
-                    {thumbnail ? (
-                        <img 
-                            src={`https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`}
-                            alt="プロジェクトサムネイル"
-                            className={styles.thumbnail}
-                        />
-                    ) : (
-                        <div className={styles.thumbnailPlaceholder}>
-                            サムネイルなし
-                        </div>
-                    )}
-                </div>
-                
-                <h3 className={styles.fileName}>
-                    {project.name.replace('.s4s.txt', '')}
-                </h3>
-                
-                {this.renderShareLink(project.id)}
-                
-                <div className={styles.buttonGroup}>
-                    <button 
-                        onClick={() => this.handleLoadFile(project)}
-                        className={styles.actionButton}
-                    >
-                        読み込む
-                    </button>
-                    <button 
-                        onClick={() => this.handleReplaceFile(project)}
-                        className={styles.actionButton}
-                    >
-                        上書き
-                    </button>
-                    <button 
-                        onClick={() => this.handleShareFile(project.id)}
-                        className={classNames(styles.actionButton, styles.shareButton)}
-                    >
-                        共有
-                    </button>
-                    <button 
-                        onClick={() => this.handleDeleteFile(project, thumbnailFiles)}
-                        className={classNames(styles.actionButton, styles.deleteButton)}
-                    >
-                        削除
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    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>
-                </div>
-                <a 
-                    href={`${SHORT_URL}${fileId}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={styles.linkUrl}
-                >
-                    {`${SHORT_URL}${fileId}`}
-                </a>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <Button
-                    className={classNames(
-                        this.props.className,
-                        styles.saveButton
-                    )}
-                    onClick={this.handleClick}
-                >
-                    <FormattedMessage
-                        defaultMessage="Googleドライブに保存"
-                        description="Label for Google Drive save button"
-                        id="google.drive.saveButton"
-                    />
-                </Button>
-                
-                {this.renderModal()}
-            </div>
-        );
-    }
-
-    // イベントハンドラメソッド
-    handleChangeAccount = () => {
-        this.setState({
-            accessToken: null,
-            currentAccountEmail: null,
-            currentAccountName: null
-        });
-        localStorage.removeItem('googleDriveAccessToken');
-        localStorage.removeItem('googleDriveAccountEmail');
-        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();
-        }
-    };
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
 
-    handleNewFile = async () => {
-        try {
-            await this.saveToGoogleDrive(null, null);
-            this.props.showAlert("success", "新規保存しました");
-        } catch (error) {
-            console.error("新規保存エラー:", error);
-            this.props.showAlert("error", "新規保存に失敗しました");
-        }
-    };
+.modalContent {
+    background-color: white;
+    border-radius: 8px;
+    width: 800px;
+    max-width: 90%;
+    max-height: 80vh;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
 
-    handleLoadFile = (project) => {
-        const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
-        
-        if (confirm(`"${project.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
-            const url = `${PROXY_URL}${project.id}`;
-            window.location.href = `?project_url=${encodeURIComponent(url)}`;
-        }
-    };
+.modalHeader {
+    padding: 1rem;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-    handleReplaceFile = async (project) => {
-        if (confirm(`"${project.name}"を現在のプロジェクトで上書きしますか？`)) {
-            try {
-                await this.saveToGoogleDrive(project.id, project.name);
-                this.props.showAlert("success", "上書き保存しました");
-                this.fetchDriveFiles(this.state.accessToken);
-            } catch (error) {
-                console.error("ファイル上書きエラー:", error);
-                this.props.showAlert("error", "ファイルの上書きに失敗しました");
-            }
-        }
-    };
+.closeButton {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
 
-    handleShareFile = (fileId) => {
-        const SHARE_URL = "https://scratch-school.ct.ws/upload?id=";
-        window.open(`${SHARE_URL}${fileId}`, "_blank");
-    };
+.modalBody {
+    padding: 1rem;
+    max-height: 70vh;
+    overflow-y: auto;
+}
 
-    handleDeleteFile = async (project, thumbnailFiles) => {
-        if (confirm(`"${project.name}"とそのサムネイルを完全に削除しますか？この操作は元に戻せません。`)) {
-            try {
-                // プロジェクトファイルを削除
-                await this.deleteFile(project.id);
-                
-                // 対応するサムネイルを探して削除
-                const thumbnailToDelete = thumbnailFiles.find(
-                    thumb => thumb.name === `Penguin-Thumbnail-${project.id}.png`
-                );
-                
-                if (thumbnailToDelete) {
-                    await this.deleteFile(thumbnailToDelete.id);
-                }
-                
-                this.props.showAlert("success", "ファイルを削除しました");
-                this.fetchDriveFiles(this.state.accessToken);
-            } catch (error) {
-                console.error("削除エラー:", error);
-                this.props.showAlert("error", "ファイルの削除に失敗しました");
-            }
-        }
-    };
+.authSection {
+    margin-bottom: 1rem;
+}
 
-    copyToClipboard = (text) => {
-        navigator.clipboard.writeText(text)
-            .then(() => this.props.showAlert("success", "リンクをクリップボードにコピーしました"))
-            .catch(() => this.props.showAlert("error", "リンクのコピーに失敗しました"));
-    };
+.accountInfo {
+    margin-bottom: 0.5rem;
+}
 
-    // API操作メソッド
-    async deleteFile(fileId) {
-        const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}`, {
-            method: "DELETE",
-            headers: {
-                Authorization: `Bearer ${this.state.accessToken}`,
-            },
-        });
+.loginButton, .changeAccountButton, .newFileButton {
+    padding: 0.5rem 1rem;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
 
-        if (!response.ok) {
-            throw new Error(await response.text());
-        }
-    }
+.changeAccountButton {
+    background-color: #f0ad4e;
+}
 
-    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,
-            mimeType: "application/x-scratch",
-        };
+.loading, .noFiles {
+    text-align: center;
+    padding: 2rem;
+    color: #666;
+}
 
-        const url = fileId 
-            ? `https://www.googleapis.com/upload/drive/v3/files/${fileId}?uploadType=multipart`
-            : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+.fileListContainer {
+    margin-top: 1rem;
+}
 
-        const form = new FormData();
-        form.append("metadata", new Blob([JSON.stringify(metadata)], { type: "application/json" }));
-        form.append("file", blob);
+.fileListHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
 
-        const method = fileId ? "PATCH" : "POST";
+.projectTitle {
+    cursor: pointer;
+    border-bottom: 1px dashed #000;
+    color: #333;
+}
 
-        const uploadResponse = await fetch(url, {
-            method,
-            headers: {
-                Authorization: `Bearer ${this.state.accessToken}`,
-            },
-            body: form,
-        });
+.fileList {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem;
+}
 
-        if (!uploadResponse.ok) {
-            throw new Error(await uploadResponse.text());
-        }
+.fileItem {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    background: #fff;
+    height: 100%;
+}
 
-        const fileData = await uploadResponse.json();
+.thumbnailContainer {
+    position: relative;
+    aspect-ratio: 4/3;
+    max-height: 150px;
+    overflow: hidden;
+}
 
-        // サムネイルを保存
-        try {
-            const thumbnailDataUrl = await this.getProjectThumbnail();
-            const thumbnailBlob = await (await fetch(thumbnailDataUrl)).blob();
-            const thumbnailMetadata = {
-                name: `Penguin-Thumbnail-${fileData.id}.png`,
-                mimeType: "image/png",
-            };
+.thumbnail {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    object-fit: contain;
+    background-color: #f0f0f0;
+}
 
-            const existingThumbnailResponse = await fetch(
-                `https://www.googleapis.com/drive/v3/files?q=name='${thumbnailMetadata.name}'`,
-                {
-                    headers: {
-                        Authorization: `Bearer ${this.state.accessToken}`,
-                    },
-                }
-            );
+.thumbnailPlaceholder {
+    width: 100%;
+    height: 100%;
+    background-color: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: #666;
+}
 
-            const existingThumbnailData = await existingThumbnailResponse.json();
-            const thumbnailFileId = existingThumbnailData.files?.[0]?.id;
+.fileName {
+    margin: 0;
+    text-align: center;
+    font-weight: bold;
+    color: #333;
+}
 
-            const thumbnailUrl = thumbnailFileId
-                ? `https://www.googleapis.com/upload/drive/v3/files/${thumbnailFileId}?uploadType=multipart`
-                : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+.linkContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+}
 
-            const thumbnailForm = new FormData();
-            thumbnailForm.append("metadata", new Blob([JSON.stringify(thumbnailMetadata)], { type: "application/json" }));
-            thumbnailForm.append("file", thumbnailBlob);
+.linkHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-            const thumbnailMethod = thumbnailFileId ? "PATCH" : "POST";
+.copyButton {
+    padding: 0.1rem 0.3rem;
+    font-size: 0.8em;
+    background-color: #e9e9e9;
+    color: #333;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
 
-            await fetch(thumbnailUrl, {
-                method: thumbnailMethod,
-                headers: {
-                    Authorization: `Bearer ${this.state.accessToken}`,
-                },
-                body: thumbnailForm,
-            });
-        } catch (thumbnailError) {
-            console.warn("サムネイルの保存に失敗しました:", thumbnailError);
-        }
+.linkUrl {
+    font-size: 0.9em;
+    word-break: break-all;
+    color: #1155cc;
+    text-decoration: none;
+    border-bottom: 1px solid #1155cc;
+}
 
-        if (!fileId) {
-            await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
-                method: "POST",
-                headers: {
-                    Authorization: `Bearer ${this.state.accessToken}`,
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    role: "reader",
-                    type: "anyone",
-                }),
-            });
-        }
-    }
+.buttonGroup {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
 
-    getProjectThumbnail() {
-        return new Promise(resolve => {
-            window.vm.renderer.requestSnapshot(uri => {
-                resolve(uri);
-            });
-        });
-    }
+.actionButton {
+    width: 100%;
+    padding: 0.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
 }
 
-GoogleDriveSave.propTypes = {
-    className: PropTypes.string,
-    showAlert: PropTypes.func.isRequired
-};
+.shareButton {
+    background-color: #4CAF50;
+    color: white;
+}
 
-export default GoogleDriveSave;
+.deleteButton {
+    background-color: #ff4444;
+    color: white;
+}