@suchitraswain/nightcode-cli 1.0.0

package/src/components/dialogs/models-dialog.tsx

@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+import { useDialog } from "../../providers/dialog";
+import { DialogSearchList } from "../dialog-search-list";
+import { Mode } from "@nightcode/database/enums";
+import type { SupportedChatModelId } from "@nightcode/shared";
+
+type ModelsDialogContentProps = {
+  models: SupportedChatModelId[];
+  onSelectModel: (modelId: SupportedChatModelId) => void;
+};
+
+export const ModelsDialogContent = ({ 
+  models, 
+  onSelectModel 
+}: ModelsDialogContentProps) => {
+  const dialog = useDialog();
+
+  const handleSelect = useCallback(
+    (modelId: SupportedChatModelId) => {
+      onSelectModel(modelId);
+      dialog.close();
+    },
+    [dialog, onSelectModel],
+  );
+
+  return (
+    <DialogSearchList
+      items={models}
+      onSelect={handleSelect}
+      filterFn={(modelId, query) => modelId.toLowerCase().includes(query.toLowerCase())}
+      renderItem={(modelId, isSelected) => (
+        <text selectable={false} fg={isSelected ? "black" : "white"}>
+          {modelId}
+        </text>
+      )}
+      getKey={(modelId) => modelId}
+      placeholder="Search models"
+      emptyText="No matching models"
+    />
+  );
+};

package/src/components/dialogs/sessions-dialog.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useState } from "react";
+import { TextAttributes } from "@opentui/core";
+import { format } from "date-fns";
+import { useNavigate } from "react-router";
+import { useDialog } from "../../providers/dialog";
+import { useToast } from "../../providers/toast";
+import { apiClient } from "../../lib/api-client";
+import { getErrorMessage } from "../../lib/http-errors";
+import { DialogSearchList } from "../dialog-search-list";
+import type { SessionSummary } from "@nightcode/shared";
+
+export const SessionsDialogContent = () => {
+  const [sessions, setSessions] = useState<SessionSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { close } = useDialog();
+  const navigate = useNavigate();
+  const { show } = useToast();
+
+  useEffect(() => {
+    let ignore = false;
+
+    const fetchSessions = async () => {
+      try {
+        const res = await apiClient.sessions.$get();
+        if (!res.ok) {
+          throw new Error(await getErrorMessage(res));
+        }
+
+        const data = await res.json();
+
+        if (!ignore) {
+          setSessions(data);
+          setLoading(false);
+        }
+      } catch (error) {
+        if (!ignore) {
+          show({
+            variant: "error",
+            message: error instanceof Error ? error.message : "Failed to fetch sessions",
+          });
+          close();
+        }
+      }
+    };
+
+    fetchSessions();
+
+    return () => {
+      ignore = true;
+    };
+  }, [close, show]);
+
+  const handleSelect = useCallback(
+    (session: Session) => {
+      close();
+      navigate(`/sessions/${session.id}`);
+    },
+    [close, navigate],
+  );
+
+  if (loading) {
+    return (
+      <box flexDirection="column">
+        <text attributes={TextAttributes.DIM}>Loading sessions...</text>
+      </box>
+    );
+  }
+
+  return (
+    <DialogSearchList
+      items={sessions}
+      onSelect={handleSelect}
+      filterFn={(s, query) => s.title.toLowerCase().includes(query.toLowerCase())}
+      renderItem={(session, isSelected) => (
+        <>
+          <text selectable={false} fg={isSelected ? "black" : "white"}>
+            {session.title}
+          </text>
+          <box flexGrow={1} />
+          <text
+            selectable={false}
+            fg={isSelected ? "black" : undefined}
+            attributes={TextAttributes.DIM}
+          >
+            {format(new Date(session.createdAt), "hh:mm a")}
+          </text>
+        </>
+      )}
+      getKey={(s) => s.id}
+      placeholder="Search sessions"
+      emptyText="No matching sessions"
+    />
+  );
+};

package/src/components/dialogs/theme-dialog.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useDialog } from "../../providers/dialog";
+import { useTheme } from "../../providers/theme";
+import { DialogSearchList } from "../dialog-search-list";
+import { THEMES } from "../../theme";
+import type { Theme } from "../../theme";
+
+export const ThemeDialogContent = () => {
+  const dialog = useDialog();
+  const { setTheme, currentTheme } = useTheme();
+  const originalThemeRef = useRef(currentTheme);
+  const confirmedRef = useRef(false);
+
+  // Revert to original theme if the user dismisses without confirming
+  useEffect(() => {
+    return () => {
+      if (!confirmedRef.current) {
+        setTheme(originalThemeRef.current);
+      }
+    };
+  }, [setTheme]);
+
+  const handleSelect = useCallback(
+    (theme: Theme) => {
+      confirmedRef.current = true;
+      setTheme(theme);
+      dialog.close();
+    },
+    [setTheme, dialog],
+  );
+
+  const handleHighlight = useCallback(
+    (theme: Theme) => {
+      setTheme(theme);
+    },
+    [setTheme],
+  );
+
+  return (
+    <DialogSearchList
+      items={THEMES}
+      onSelect={handleSelect}
+      onHighlight={handleHighlight}
+      filterFn={(t, query) => t.name.toLowerCase().includes(query.toLowerCase())}
+      renderItem={(theme, isSelected) => (
+        <text selectable={false} fg={isSelected ? "black" : "white"}>
+          {theme.name === originalThemeRef.current.name
+            ? "\u0020\u2022\u0020"
+            : "\u0020\u0020\u0020"}
+          {theme.name}
+        </text>
+      )}
+      getKey={(t) => t.name}
+      placeholder="Search themes"
+      emptyText="No matching themes"
+    />
+  );
+};

package/src/components/header.tsx

@@ -0,0 +1,10 @@
+export function Header() {
+  return (
+    <box justifyContent="center" alignItems="center">
+      <box flexDirection="row" justifyContent="center" gap={0.5} alignItems="center">
+        <ascii-font font="tiny" text="Night" color="gray" />
+        <ascii-font font="tiny" text="Code" />
+      </box>
+    </box>
+  );
+};