feat(journal): delete sessions from the ui

Add a confirmation dialog that spells out the removal is irreversible, and expose delete from the GM session dropdown and the lobby session list.

src/components/journal/ConnectDialog.tsx

@@ -16,6 +16,7 @@ import {
   setMyRole,
   useJournalStream,
 } from "../stores/journalStream";
+import { DeleteSessionDialog } from "./DeleteSessionDialog";
 
 export const ConnectDialog: Component = () => {
   const stream = useJournalStream();
@@ -28,6 +29,10 @@ export const ConnectDialog: Component = () => {
   const [busy, setBusy] = createSignal(false);
   const [error, setError] = createSignal<string | null>(null);
   const [autoJoined, setAutoJoined] = createSignal(false);
+  const [sessionToDelete, setSessionToDelete] = createSignal<{
+    id: string;
+    name: string;
+  } | null>(null);
 
   const ensureBroker = async () => {
     if (stream.connected) return;
@@ -145,13 +150,27 @@ export const ConnectDialog: Component = () => {
           <div class="max-h-40 overflow-y-auto border border-gray-200 rounded divide-y divide-gray-100">
             <For each={Object.entries(manifest().sessions)}>
               {([id, meta]) => (
-                <button
-                  onClick={() => handleJoin(id)}
-                  disabled={busy()}
-                  class="w-full text-left px-2 py-1.5 text-xs text-gray-700 hover:bg-gray-50 disabled:opacity-50"
-                >
-                  {meta.name || id}
-                </button>
+                <div class="flex items-center">
+                  <button
+                    onClick={() => handleJoin(id)}
+                    disabled={busy()}
+                    class="flex-1 min-w-0 text-left px-2 py-1.5 text-xs text-gray-700 hover:bg-gray-50 disabled:opacity-50 truncate"
+                  >
+                    {meta.name || id}
+                  </button>
+                  <Show when={role() === "gm"}>
+                    <button
+                      onClick={() =>
+                        setSessionToDelete({ id, name: meta.name || id })
+                      }
+                      disabled={busy()}
+                      class="shrink-0 px-2 py-1.5 text-[10px] text-gray-300 hover:text-red-500 disabled:opacity-50"
+                      title="删除会话"
+                    >
+                      🗑
+                    </button>
+                  </Show>
+                </div>
               )}
             </For>
             <Show when={Object.keys(manifest().sessions).length === 0}>
@@ -187,6 +206,17 @@ export const ConnectDialog: Component = () => {
         <Show when={error()}>
           <p class="text-red-500 text-sm text-center">{error()}</p>
         </Show>
+
+        <Show when={sessionToDelete()}>
+          {(target) => (
+            <DeleteSessionDialog
+              sessionId={target().id}
+              sessionName={target().name}
+              active={stream.sessionId === target().id}
+              onClose={() => setSessionToDelete(null)}
+            />
+          )}
+        </Show>
       </div>
     </Show>
   );