feat(odin): left sidebar + lazy conversation creation (claude.ai-style)

- Replace top tabs with a left sidebar (New chat + scrollable conversation
  list, per-row rename/delete menu, active highlight), chat on the right.
- Fix duplicate-empty-conversations bug: "Nová konverzace" now just opens an
  empty composer; a DB row is created only on the first successful message
  (and a failed AI call no longer leaves an orphan conversation). Repeated
  clicks never spawn empties, and nothing empty survives a refresh.
- Land on a fresh new chat on mount; deleting the open conversation returns
  to new chat.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/components/odin/OdinChat.tsx

@@ -17,7 +17,7 @@ import type {
   EditableField,
   StagedFile,
 } from "./types";
-import OdinTabs from "./OdinTabs";
+import OdinSidebar from "./OdinSidebar";
 import OdinThread from "./OdinThread";
 import InvoiceReviewCard from "./InvoiceReviewCard";
 import OdinComposer from "./OdinComposer";
@@ -87,13 +87,10 @@ export default function OdinChat() {
   const threadRef = useRef<HTMLDivElement>(null);
   const seededId = useRef<number | null>(null);
 
-  // Select the first existing conversation once the list loads (lazy-create:
-  // a brand-new user has none until they send the first message or press "+").
-  useEffect(() => {
-    if (!convPending && activeId == null && conversations.length > 0) {
-      setActiveId(conversations[0].id);
-    }
-  }, [convPending, conversations, activeId]);
+  // No auto-select: like claude.ai, we land on a fresh "new chat" (activeId
+  // null) and the sidebar lists existing conversations to open. A conversation
+  // row in the DB is created lazily on the first message (see submit), so
+  // pressing "Nová konverzace" repeatedly never spawns empty conversations.
 
   // Seed the thread from the active conversation's messages, once per id.
   useEffect(() => {
@@ -185,13 +182,6 @@ export default function OdinChat() {
     if (!text && files.length === 0) return;
 
     setBusy(true);
-    const convId = await ensureActive();
-    if (convId == null) {
-      setBusy(false);
-      alert.error("Nepodařilo se vytvořit konverzaci");
-      return;
-    }
-    seededId.current = convId;
     const prevTurns = turns;
 
     const userContent = [
@@ -247,10 +237,13 @@ export default function OdinChat() {
         setTurns((t) => [...t, { role: "assistant", content: note }]);
         setInput("");
         setAttachments([]);
-        persist(convId, [
-          { role: "user", content: userContent },
-          { role: "assistant", content: note },
-        ]);
+        // Create the conversation now (first successful message) and persist.
+        const convId = await ensureActive();
+        if (convId != null)
+          persist(convId, [
+            { role: "user", content: userContent },
+            { role: "assistant", content: note },
+          ]);
         qc.invalidateQueries({ queryKey: ["ai", "usage"] });
       } else {
         let ctx = optimistic.slice(-MODEL_CONTEXT);
@@ -265,10 +258,13 @@ export default function OdinChat() {
         const reply: string = body.data.reply;
         setTurns((t) => [...t, { role: "assistant", content: reply }]);
         setInput("");
-        persist(convId, [
-          { role: "user", content: userContent },
-          { role: "assistant", content: reply },
-        ]);
+        // Create the conversation now (first successful message) and persist.
+        const convId = await ensureActive();
+        if (convId != null)
+          persist(convId, [
+            { role: "user", content: userContent },
+            { role: "assistant", content: reply },
+          ]);
         qc.invalidateQueries({ queryKey: ["ai", "usage"] });
       }
     } catch (e) {
@@ -317,24 +313,16 @@ export default function OdinChat() {
     }
   };
 
-  const onNew = async () => {
+  // "Nová konverzace" just opens a fresh, empty composer — no DB row is created
+  // until the first message, so repeated clicks never spawn empty conversations.
+  const onNew = () => {
     if (busy) return;
-    const res = await apiFetch("/api/admin/ai/conversations", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({}),
-    });
-    const b = await res.json();
-    if (res.ok && b?.data?.conversation) {
-      const id = b.data.conversation.id as number;
-      seededId.current = id;
-      setActiveId(id);
-      setTurns([]);
-      setReview([]);
-      qc.invalidateQueries({ queryKey: ["ai", "conversations"] });
-    } else {
-      alert.error("Nepodařilo se vytvořit konverzaci");
-    }
+    setActiveId(null);
+    setTurns([]);
+    setReview([]);
+    setInput("");
+    setAttachments([]);
+    seededId.current = null;
   };
 
   const onRename = async (id: number, title: string) => {
@@ -356,8 +344,8 @@ export default function OdinChat() {
       return;
     }
     if (id === activeId) {
-      const next = conversations.find((c) => c.id !== id)?.id ?? null;
-      setActiveId(next);
+      // Deleting the open conversation returns to a fresh new chat.
+      setActiveId(null);
       setTurns([]);
       setReview([]);
       seededId.current = null;
@@ -370,55 +358,22 @@ export default function OdinChat() {
       r.map((inv) => (inv.uid === uid ? { ...inv, [field]: value } : inv)),
     );
 
+  const activeTitle =
+    conversations.find((c) => c.id === activeId)?.title ?? "Nová konverzace";
+
   return (
     <Box
       sx={{
         height: "calc(100dvh - 100px)",
         display: "flex",
-        flexDirection: "column",
-        gap: 1.5,
         border: 1,
         borderColor: "divider",
         borderRadius: 3,
         bgcolor: "background.paper",
-        p: 2,
+        overflow: "hidden",
       }}
     >
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-          <Box
-            sx={{
-              px: 0.75,
-              py: 0.25,
-              borderRadius: 1,
-              fontSize: 11,
-              fontWeight: 700,
-              letterSpacing: 0.5,
-              color: "common.white",
-              bgcolor: "primary.main",
-            }}
-          >
-            AI
-          </Box>
-          <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
-            Odin
-          </Typography>
-        </Box>
-        {usage && (
-          <Typography variant="caption" color="text.secondary">
-            Utraceno: ${usage.month_spend_usd.toFixed(2)} / $
-            {usage.budget_usd.toFixed(2)}
-          </Typography>
-        )}
-      </Box>
-
-      <OdinTabs
+      <OdinSidebar
         conversations={conversations}
         activeId={activeId}
         busy={busy}
@@ -428,50 +383,89 @@ export default function OdinChat() {
         onDelete={onDelete}
       />
 
-      <OdinThread
-        turns={turns}
-        busy={busy}
-        loading={messagesLoading}
-        threadRef={threadRef}
-      />
-
-      {review.length > 0 && (
+      {/* Chat column */}
+      <Box
+        sx={{
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: 1.5,
+          p: 2,
+        }}
+      >
         <Box
           sx={{
-            maxHeight: "35vh",
-            overflowY: "auto",
             display: "flex",
-            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "center",
             gap: 1,
           }}
         >
-          {review.map((inv) => (
-            <InvoiceReviewCard
-              key={inv.uid}
-              inv={inv}
-              busy={busy}
-              canSave={canSave}
-              onChange={patch}
-              onSave={saveInvoice}
-              onDiscard={(uid) =>
-                setReview((r) => r.filter((x) => x.uid !== uid))
-              }
-            />
-          ))}
+          <Typography
+            variant="subtitle1"
+            noWrap
+            sx={{ fontWeight: 600, minWidth: 0 }}
+          >
+            {activeTitle}
+          </Typography>
+          {usage && (
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ flexShrink: 0 }}
+            >
+              Utraceno: ${usage.month_spend_usd.toFixed(2)} / $
+              {usage.budget_usd.toFixed(2)}
+            </Typography>
+          )}
         </Box>
-      )}
 
-      <OdinComposer
-        input={input}
-        attachments={attachments}
-        busy={busy}
-        canSubmit={canSubmit}
-        fileRef={fileRef}
-        onInput={setInput}
-        onFiles={onFiles}
-        onRemoveAttachment={removeAttachment}
-        onSubmit={submit}
-      />
+        <OdinThread
+          turns={turns}
+          busy={busy}
+          loading={messagesLoading}
+          threadRef={threadRef}
+        />
+
+        {review.length > 0 && (
+          <Box
+            sx={{
+              maxHeight: "35vh",
+              overflowY: "auto",
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+            }}
+          >
+            {review.map((inv) => (
+              <InvoiceReviewCard
+                key={inv.uid}
+                inv={inv}
+                busy={busy}
+                canSave={canSave}
+                onChange={patch}
+                onSave={saveInvoice}
+                onDiscard={(uid) =>
+                  setReview((r) => r.filter((x) => x.uid !== uid))
+                }
+              />
+            ))}
+          </Box>
+        )}
+
+        <OdinComposer
+          input={input}
+          attachments={attachments}
+          busy={busy}
+          canSubmit={canSubmit}
+          fileRef={fileRef}
+          onInput={setInput}
+          onFiles={onFiles}
+          onRemoveAttachment={removeAttachment}
+          onSubmit={submit}
+        />
+      </Box>
     </Box>
   );
 }