ttrpg-tools/src/components/journal/ConnectionBar.tsx

/**
 * ConnectionBar — session picker, player info (connected state only)
 */

import { Component, createSignal, Show, For } from "solid-js";
import {
  hydrateFromServer,
  useJournalStream,
  sessions,
  createSession,
  deleteSession,
  disconnectStream,
  setSessionId,
} from "../stores/journalStream";
import { journalSetState } from "../stores/journalStream";

export const ConnectionBar: Component = () => {
  const stream = useJournalStream();
  const [newSessionName, setNewSessionName] = createSignal("");
  const [showNewSession, setShowNewSession] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);

  const manifest = sessions;

  const handleCreateSession = () => {
    const name = newSessionName().trim();
    if (!name) return;
    createSession(name);
    setNewSessionName("");
    setShowNewSession(false);
  };

  const handleDeleteSession = (id: string) => {
    if (confirm(`Delete session "${id}"? This cannot be undone.`)) {
      deleteSession(id);
    }
  };

  const handleSessionSelect = async (id: string) => {
    try {
      await hydrateFromServer(id);
      setSessionId(id);
    } catch (e) {
      setError("Failed to load session");
    }
  };

  const handleDisconnect = () => {
    disconnectStream();
  };

  return (
    <div class="border-b border-gray-200 px-3 py-2 space-y-2 text-sm">
      {/* Status row */}
      <div class="flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-green-500" />
        <span class="text-xs text-gray-500">connected</span>
        <Show when={stream.sessionId}>
          <span class="text-xs font-mono bg-gray-100 px-1.5 py-0.5 rounded">
            {stream.sessionName || stream.sessionId}
          </span>
        </Show>
        <div class="flex-1" />
        <Show when={stream.myName !== "gm"}>
          <span class="text-xs text-gray-400">Playing as {stream.myName}</span>
        </Show>
        <button
          onClick={handleDisconnect}
          class="text-xs text-gray-400 hover:text-red-500"
          title="Disconnect"
        >
          ⏻
        </button>
      </div>

      {/* GM session management */}
      <Show when={stream.myName === "gm"}>
        <div class="space-y-1">
          <div class="flex items-center gap-1">
            <span class="text-xs text-gray-500">Sessions:</span>
            <button
              onClick={() => setShowNewSession((v) => !v)}
              class="text-xs text-blue-600 hover:underline"
            >
              + new
            </button>
          </div>

          <Show when={showNewSession()}>
            <div class="flex gap-1">
              <input
                type="text"
                value={newSessionName()}
                onInput={(e) => setNewSessionName(e.currentTarget.value)}
                placeholder="Session name"
                class="flex-1 border border-gray-300 rounded px-2 py-0.5 text-xs"
                onKeyDown={(e) => e.key === "Enter" && handleCreateSession()}
              />
              <button
                onClick={handleCreateSession}
                class="bg-green-600 text-white rounded px-2 py-0.5 text-xs hover:bg-green-700"
              >
                Create
              </button>
            </div>
          </Show>

          <For each={Object.entries(manifest().sessions)}>
            {([id, meta]) => (
              <div
                class={`flex items-center gap-1 px-1 py-0.5 rounded cursor-pointer text-xs ${
                  id === stream.sessionId
                    ? "bg-blue-100 text-blue-800"
                    : "hover:bg-gray-100"
                }`}
              >
                <span
                  class="flex-1 truncate"
                  onClick={() => handleSessionSelect(id)}
                >
                  {meta.name || id}
                </span>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleDeleteSession(id);
                  }}
                  class="text-gray-400 hover:text-red-500 text-xs"
                  title="Delete session"
                >
                  ✕
                </button>
              </div>
            )}
          </For>
        </div>
      </Show>

      <Show when={error()}>
        <p class="text-red-500 text-xs">{error()}</p>
      </Show>
    </div>
  );
};