Issue #360: 🎯 feat: 目次表示設定のカスタマイズ機能実装

🎯 feat: ユーザー中心の目次表示制御システム

Priority: LOW

Impact: ユーザーカスタマイゼーション・個人設定

Component: ユーザー設定・ローカルストレージ

Files:

• src/components/docs/DocsLayout.astro
• src/lib/settings.ts

Problem Description

現在は開発者が設定した目次表示設定に全ユーザーが従う必要があり、個人の読書スタイルや好みに応じたカスタマイズができません。ユーザーによっては目次を常に非表示にしたい、特定の表示形式を好む、などの個別ニーズがあります。

現在の問題

• 目次表示のオン・オフがユーザー制御できない
• 表示形式の選択肢がない
• 個人設定の永続化なし
• 読書スタイルに合わせた調整不可

Recommended Solution

柔軟な目次表示カスタマイゼーション:

1. 表示モード選択: サイドバー・インライン・非表示の切り替え
2. ローカルストレージ保存: ユーザー設定の永続化
3. クイック切り替え: ツールバーでの即座変更
4. デフォルト設定継承: プロジェクト設定との統合

設定オプション設計

interface TOCUserSettings {
  enabled: boolean;           // 目次表示の有効・無効
  position: 'sidebar' | 'inline' | 'floating' | 'hidden';
  autoCollapse: boolean;      // 自動折りたたみ
  showProgress: boolean;      // 進捗表示
  compactMode: boolean;       // コンパクト表示
  maxDepth: number;          // 表示する見出しレベル上限
}

// 設定管理クラス
class TOCSettings {
  private readonly STORAGE_KEY = 'beaver_toc_settings';
  
  save(settings: Partial<TOCUserSettings>) {
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(settings));
  }
  
  load(): TOCUserSettings {
    const stored = localStorage.getItem(this.STORAGE_KEY);
    return stored ? { ...this.getDefaults(), ...JSON.parse(stored) } : this.getDefaults();
  }
}

UI/UX設計

<\!-- 目次設定パネル -->
<div class="toc-settings-panel">
  <button class="settings-toggle" aria-label="目次設定">⚙️</button>
  
  <div class="settings-dropdown hidden">
    <h4>目次表示設定</h4>
    
    <div class="setting-group">
      <label class="setting-label">
        <input type="checkbox" id="toc-enabled" checked>
        目次を表示
      </label>
    </div>
    
    <div class="setting-group">
      <label>表示位置</label>
      <select id="toc-position">
        <option value="sidebar">サイドバー</option>
        <option value="inline">コンテンツ上部</option>
        <option value="floating">フローティング</option>
        <option value="hidden">非表示</option>
      </select>
    </div>
    
    <div class="setting-group">
      <label class="setting-label">
        <input type="checkbox" id="auto-collapse">
        自動折りたたみ
      </label>
    </div>
    
    <div class="setting-group">
      <label>見出しレベル</label>
      <input type="range" id="max-depth" min="1" max="6" value="3">
      <span>H1-H<span id="depth-display">3</span></span>
    </div>
  </div>
</div>

設定統合システム

<\!-- DocsLayout.astroでの設定適用 -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tocSettings = new TOCSettings();
    const settings = tocSettings.load();
    
    // 設定に応じた目次表示の調整
    appleTOCSettings(settings);
    
    // 設定変更のリスナー
    document.addEventListener('toc-settings-change', (event) => {
      const newSettings = event.detail;
      tocSettings.save(newSettings);
      appleTOCSettings(newSettings);
    });
  });
  
  function appleTOCSettings(settings) {
    const tocContainer = document.querySelector('.toc-container');
    
    // 表示・非表示
    tocContainer.style.display = settings.enabled ? 'block' : 'none';
    
    // 表示位置の調整
    tocContainer.className = `toc-container toc-${settings.position}`;
    
    // 見出しレベルフィルタリング
    filterTOCByDepth(settings.maxDepth);
  }
</script>

Acceptance Criteria

• 目次表示のオン・オフをユーザーが制御可能
• 表示位置（サイドバー・インライン・フローティング）の選択
• 見出しレベル（H1-H6）の表示範囲設定
• 設定のローカルストレージ永続化
• デフォルト設定からの個人カスタマイズ
• 設定パネルのアクセシブルなUI
• 設定変更の即座反映（リロード不要）

ユーザー個人の読書習慣や好みに合わせた柔軟な目次カスタマイゼーションにより、パーソナライズされたドキュメント閲覧体験を提供