ttrpg-tools/src/App.tsx

import { Component, createEffect, createMemo, createSignal } from "solid-js";
import { useLocation } from "@solidjs/router";
import { useJournalStream } from "./components/stores/journalStream";

// 导入组件以注册自定义元素
import "./components";
import {
  Article,
  MobileSidebar,
  DesktopSidebar,
  DocDialog,
  DataSourceDialog,
  RevealManager,
} from "./components";
import { generateToc, type FileNode, type TocNode } from "./data-loader";
import { JournalPanel } from "./components/journal";

const App: Component = () => {
  const location = useLocation();
  const stream = useJournalStream();
  const [isSidebarOpen, setIsSidebarOpen] = createSignal(false);
  const [isDocOpen, setIsDocOpen] = createSignal(false);
  const [isDataSourceOpen, setIsDataSourceOpen] = createSignal(false);
  const [isJournalOpen, setIsJournalOpen] = createSignal(false);

  // Sidebar and TOC data — reload when source changes
  const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
  const [pathHeadings, setPathHeadings] = createSignal<
    Record<string, TocNode[]>
  >({});
  const [tocKey, setTocKey] = createSignal(0);

  const loadToc = async () => {
    const toc = await generateToc();
    setFileTree(toc.fileTree);
    setPathHeadings(toc.pathHeadings);
  };

  // Load TOC on mount and when source changes
  createEffect(() => {
    void tocKey();
    void loadToc();
  });

  const handleSourceChanged = () => {
    setTocKey((k) => k + 1);
  };

  const currentPath = createMemo(() => {
    // 根据路由加载对应的 markdown 文件
    let path = decodeURIComponent(location.pathname);

    if (!path) path = "/content/";
    if (path.endsWith("/")) path += "index";
    if (!path.endsWith(".md")) path += ".md";

    return path;
  });

  return (
    <div class="min-h-screen bg-gray-50">
      {/* 桌面端固定侧边栏 */}
      <DesktopSidebar
        fileTree={fileTree()}
        pathHeadings={pathHeadings()}
        onDataSourceOpen={() => setIsDataSourceOpen(true)}
      />
      {/* 移动端抽屉式侧边栏 */}
      <MobileSidebar
        isOpen={isSidebarOpen()}
        onClose={() => setIsSidebarOpen(false)}
        fileTree={fileTree()}
        pathHeadings={pathHeadings()}
        onDataSourceOpen={() => setIsDataSourceOpen(true)}
      />
      <header class="fixed top-0 left-0 right-0 bg-white shadow z-30">
        <div class="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
          {/* 仅在移动端显示菜单按钮 */}
          <button
            onClick={() => setIsSidebarOpen(true)}
            class="md:hidden text-gray-600 hover:text-gray-900 p-1 rounded hover:bg-gray-100"
            title="目录"
          >
            ☰
          </button>
          <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
          <div class="flex-1" />
          <button
            onClick={() => setIsJournalOpen((v) => !v)}
            class={`relative w-8 h-8 rounded flex items-center justify-center text-sm ${
              isJournalOpen()
                ? "bg-blue-100 text-blue-600"
                : "text-gray-500 hover:bg-gray-100"
            }`}
            title={`Journal (${stream.connectionStatus})`}
          >
            <span
              class="absolute top-0.5 right-0.5 w-2 h-2 rounded-full border border-white"
              classList={{
                "bg-gray-400": stream.connectionStatus === "disconnected",
                "bg-yellow-400 animate-pulse":
                  stream.connectionStatus === "connecting",
                "bg-green-500": stream.connectionStatus === "connected",
                "bg-red-500": stream.connectionStatus === "error",
              }}
            />
            📋
          </button>
          <button
            onClick={() => setIsDocOpen(true)}
            class="w-8 h-8 rounded-full border border-gray-300 text-gray-500 hover:text-gray-700 hover:border-gray-400 flex items-center justify-center text-sm font-medium"
            title="指令文档"
          >
            ?
          </button>
        </div>
      </header>
      {/* fill the rest of the space */}
      <div
        class="fixed top-16 left-0 right-0 bottom-0 overflow-auto transition-all duration-300"
        classList={{ "md:pr-[420px]": isJournalOpen() }}
      >
        <main class="max-w-4xl mx-auto px-4 py-8 pt-4 md:ml-64 2xl:ml-auto flex justify-center items-center">
          <Article
            class="prose text-black prose-sm max-w-full flex-1"
            src={currentPath()}
          >
            <RevealManager />
          </Article>
        </main>
      </div>
      <DocDialog isOpen={isDocOpen()} onClose={() => setIsDocOpen(false)} />
      <DataSourceDialog
        isOpen={isDataSourceOpen()}
        onClose={() => setIsDataSourceOpen(false)}
        onSourceChanged={handleSourceChanged}
      />
      <JournalPanel
        open={isJournalOpen()}
        onClose={() => setIsJournalOpen(false)}
      />
    </div>
  );
};

export default App;