feat: implement session creation flow

Refactor `CreateSessionDialog` to be controlled by its parent instead
of using an internal `open` prop. Lift the state up to `JournalPanel`
and pass the creation callback through `JournalHeader` to
`SessionDropdown`.

src/components/journal/CreateSessionDialog.tsx

@@ -1,11 +1,10 @@
 /**
  * CreateSessionDialog — modal for naming a new session
  */
-import { Component, createSignal, Show } from "solid-js";
+import { Component, createSignal, onMount } from "solid-js";
 import { createSession } from "../stores/journalStream";
 
 interface CreateSessionDialogProps {
-  open: boolean;
   onClose: () => void;
 }
 
@@ -23,8 +22,9 @@ export const CreateSessionDialog: Component<CreateSessionDialogProps> = (
     props.onClose();
   };
 
+  onMount(() => inputRef?.focus());
+
   return (
-    <Show when={props.open}>
     <div
       class="absolute inset-0 z-50 flex items-center justify-center bg-black/20"
       onClick={props.onClose}
@@ -73,6 +73,5 @@ export const CreateSessionDialog: Component<CreateSessionDialogProps> = (
         </div>
       </div>
     </div>
-    </Show>
   );
 };

src/components/journal/JournalHeader.tsx

@@ -7,6 +7,7 @@ import { SessionDropdown } from "./SessionDropdown";
 
 interface JournalHeaderProps {
   onClose: () => void;
+  onCreateSession: () => void;
 }
 
 export const JournalHeader: Component<JournalHeaderProps> = (props) => {
@@ -51,7 +52,7 @@ export const JournalHeader: Component<JournalHeaderProps> = (props) => {
             </p>
             {/* Clickable subtitle — session dropdown (GM only) */}
             <Show when={stream.myRole === "gm"}>
-              <SessionDropdown />
+              <SessionDropdown onCreate={props.onCreateSession} />
             </Show>
           </div>
         </Show>

src/components/journal/JournalPanel.tsx

@@ -13,6 +13,7 @@ import { JournalContext } from "./JournalContext";
 import { JournalHeader } from "./JournalHeader";
 import { ConnectDialog } from "./ConnectDialog";
 import { InviteDialog } from "./InviteDialog";
+import { CreateSessionDialog } from "./CreateSessionDialog";
 
 export interface JournalPanelProps {
   open: boolean;
@@ -22,6 +23,7 @@ export interface JournalPanelProps {
 export const JournalPanel: Component<JournalPanelProps> = (props) => {
   const stream = useJournalStream();
   const [showInvite, setShowInvite] = createSignal(false);
+  const [showCreateSession, setShowCreateSession] = createSignal(false);
 
   // Player list (exclude gm and observer)
   const playerEntries = () =>
@@ -48,7 +50,10 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
       >
         <JournalContext.Provider value={{ onClose: props.onClose }}>
           {/* Header */}
-          <JournalHeader onClose={props.onClose} />
+          <JournalHeader
+            onClose={props.onClose}
+            onCreateSession={() => setShowCreateSession(true)}
+          />
 
           {/* Player list tabs */}
           <Show when={stream.connected}>
@@ -88,6 +93,11 @@ export const JournalPanel: Component<JournalPanelProps> = (props) => {
           <Show when={showInvite()}>
             <InviteDialog onClose={() => setShowInvite(false)} />
           </Show>
+
+          {/* Create session modal */}
+          <Show when={showCreateSession()}>
+            <CreateSessionDialog onClose={() => setShowCreateSession(false)} />
+          </Show>
         </JournalContext.Provider>
       </aside>
     </>

src/components/journal/SessionDropdown.tsx

@@ -8,13 +8,15 @@ import {
   hydrateFromServer,
   useJournalStream,
 } from "../stores/journalStream";
-import { CreateSessionDialog } from "./CreateSessionDialog";
 
-export const SessionDropdown: Component = () => {
+interface SessionDropdownProps {
+  onCreate: () => void;
+}
+
+export const SessionDropdown: Component<SessionDropdownProps> = (props) => {
   const stream = useJournalStream();
   const manifest = sessions;
   const [dropdownOpen, setDropdownOpen] = createSignal(false);
-  const [showCreateDialog, setShowCreateDialog] = createSignal(false);
   let dropdownRef!: HTMLDivElement;
 
   const handleSessionSelect = (id: string) => {
@@ -75,7 +77,8 @@ export const SessionDropdown: Component = () => {
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
-              setShowCreateDialog(true);
+              setDropdownOpen(false);
+              props.onCreate();
             }}
             class="w-full text-left px-3 py-1 text-xs text-blue-600 hover:bg-gray-100"
           >
@@ -83,10 +86,6 @@ export const SessionDropdown: Component = () => {
           </button>
         </div>
       </Show>
-      <CreateSessionDialog
-        open={showCreateDialog()}
-        onClose={() => setShowCreateDialog(false)}
-      />
     </div>
   );
 };