Menuボタンを表示切替できるようにする

[tegnike]

左上にある設定を開く歯車アイコン（Menuコンポーネント）を表示ON/OFFできるようにする。
非表示の場合は設定画面を開けなくなるので、特定のコマンドで開けるようにするとよいかも

[github-actions]

Issue分析結果:

[
  {
    "file_path": "src/components/menu.tsx",
    "reason": "このファイルはメニューコンポーネントを定義しており、Menuボタンの表示や動作を制御している可能性が高いです。Issueで要求されている表示切替機能を実装するのに適しています。"
  },
  {
    "file_path": "src/pages/index.tsx",
    "reason": "アプリケーションのメインページコンポーネントであり、Menuコンポーネントの表示状態を管理する状態変数を追加する必要があるかもしれません。"
  },
  {
    "file_path": "src/components/iconButton.tsx",
    "reason": "Menuボタンが歯車アイコンを使用していることから、このコンポーネントを使用または拡張して新しいMenuボタンを作成する可能性があります。"
  },
  {
    "file_path": "src/styles/globals.css",
    "reason": "Menuボタンの表示/非表示を制御するためのグローバルスタイルや新しいユーティリティクラスを追加する必要があるかもしれません。"
  },
  {
    "file_path": "src/components/settings.tsx",
    "reason": "設定画面のコンポーネントであり、Menuボタンの表示/非表示を制御する新しい設定オプションを追加する必要があるかもしれません。"
  },
  {
    "file_path": "src/features/constants/systemPromptConstants.ts",
    "reason": "システムプロンプトの定義ファイルであり、Menuボタンが非表示の場合に設定画面を開くためのコマンドを追加する可能性があります。"
  },
  {
    "file_path": "src/components/messageInputContainer.tsx",
    "reason": "ユーザー入力を処理するコンポーネントであり、Menuボタンが非表示の場合に特定のコマンドを認識して設定画面を開く機能を追加する可能性があります。"
  },
  {
    "file_path": "src/components/messageInput.tsx",
    "reason": "メッセージ入力コンポーネントであり、特定のコマンドを入力して設定画面を開く機能を実装する可能性があります。"
  },
  {
    "file_path": "src/features/chat/aiChatFactory.ts",
    "reason": "AIチャットの処理を行うファイルであり、特定のコマンドを認識して設定画面を開く機能を実装する可能性があります。"
  },
  {
    "file_path": "src/components/chatLog.tsx",
    "reason": "チャットログを表示するコンポーネントであり、Menuボタンが非表示の場合にシステムメッセージとして設定画面を開くための指示を表示する可能性があります。"
  },
  {
    "file_path": "src/features/messages/messages.ts",
    "reason": "メッセージの型定義や処理を行うファイルであり、設定画面を開くための特殊なメッセージタイプを追加する可能性があります。"
  },
  {
    "file_path": "src/components/introduction.tsx",
    "reason": "アプリケーションの導入画面コンポーネントであり、Menuボタンの使用方法や表示/非表示の設定について説明を追加する可能性があります。"
  },
  {
    "file_path": "package.json",
    "reason": "新しい機能の実装に伴い、新しいパッケージやスクリプトの追加が必要になる可能性があります。"
  },
  {
    "file_path": "src/pages/_app.tsx",
    "reason": "アプリケーションのルートコンポーネントであり、Menuボタンの表示状態をグローバルに管理するための状態やコンテキストを追加する可能性があります。"
  },
  {
    "file_path": "src/lib/i18n.js",
    "reason": "国際化ファイルであり、Menuボタンの表示/非表示に関連する新しい翻訳キーを追加する必要があるかもしれません。"
  }
]

コード改善案:

Issueの内容とコードを分析した結果、以下の点が明らかになりました：

1. 現在のコードでは、Menuボタン（設定を開く歯車アイコン）の表示/非表示を切り替える機能が実装されていません。
2. Menuコンポーネントは常に表示されており、ユーザーが非表示にする選択肢がありません。
3. 設定画面を開くための代替手段（特定のコマンド）も実装されていません。

これらの問題に対処するため、コードの改善が必要です。主に src/components/menu.tsx ファイルを中心に変更を加える必要があります。

1. Menuボタンの表示/非表示を切り替える状態管理の追加 説明: ユーザーがMenuボタンを表示/非表示を切り替えられるようにするため、状態管理を追加します。これにより、ユーザーインターフェースの柔軟性が向上します。 改善後のコード例: ```typescript // src/components/menu.tsx import React, { useState } from 'react';

// ...existing imports...

type Props = {
// ...existing props...
showMenuButton: boolean;
onToggleMenuButton: () => void;
};

export const Menu = ({
// ...existing props...
showMenuButton,
onToggleMenuButton,
}: Props) => {
// ...existing code...

 return (
   <>
     {showMenuButton && (
       <div className="absolute z-10 m-24">
         <div className="grid grid-flow-col gap-[8px]">
           <IconButton
             iconName="24/Settings"
             isProcessing={false}
             onClick={() => setShowSettings(true)}
           />
           {/* ... other buttons ... */}
         </div>
       </div>
     )}
     {/* ... rest of the component ... */}
   </>
 );

};

2. 特定のコマンドで設定画面を開く機能の追加
説明: Menuボタンが非表示の場合でも設定画面にアクセスできるよう、キーボードショートカットを実装します。これにより、ユーザーの利便性が向上します。
改善後のコード例:
```typescript
// src/pages/index.tsx
import { useEffect } from 'react';

export default function Home() {
  const [showMenuButton, setShowMenuButton] = useState(true);
  const [showSettings, setShowSettings] = useState(false);

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.key === 'm') {
        setShowSettings(true);
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  // ...existing code...

  return (
    <>
      {/* ...existing JSX... */}
      <Menu
        // ...other props...
        showMenuButton={showMenuButton}
        onToggleMenuButton={() => setShowMenuButton(!showMenuButton)}
      />
      {showSettings && (
        <Settings
          // ...other props...
          onClickClose={() => setShowSettings(false)}
        />
      )}
    </>
  );
}

3. ユーザーがMenuボタンの表示/非表示を切り替えられる設定の追加
   説明: 設定画面内にMenuボタンの表示/非表示を切り替えるオプションを追加します。これにより、ユーザーが自分の好みに応じてインターフェースをカスタマイズできます。
   改善後のコード例:

   // src/components/settings.tsx
   export const Settings = ({
     // ...existing props...
     showMenuButton,
     onToggleMenuButton,
     onClickClose,
   }: Props) => {
     // ...existing code...
   
     return (
       <div className="absolute z-40 w-full h-full bg-white/80 backdrop-blur">
         {/* ...existing JSX... */}
         <div className="my-40">
           <div className="my-16 typography-20 font-bold">
             {t('ShowMenuButton')}
           </div>
           <div className="my-8">
             <TextButton onClick={onToggleMenuButton}>
               {showMenuButton ? t('StatusOn') : t('StatusOff')}
             </TextButton>
           </div>
         </div>
         {/* ...rest of the component... */}
       </div>
     );
   };

これらの改善を実装することで、以下の効果が期待できます：

1. ユーザーインターフェースの柔軟性が向上し、ユーザーが自分の好みに合わせてMenuボタンの表示/非表示を設定できるようになります。
2. キーボードショートカットを使用して設定画面にアクセスできるため、Menuボタンが非表示の場合でも設定画面を開くことができます。
3. 設定画面内でMenuボタンの表示/非表示を切り替えられるため、ユーザーが簡単にインターフェースをカスタマイズできます。

これらの変更により、アプリケーションの使いやすさが向上し、ユーザーエクスペリエンスが改善されることが期待されます。また、コードの構造も整理され、将来的な機能拡張や保守がしやすくなります。