Improves UI

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aredotna/cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Are.na from the terminal",
   "type": "module",
   "bin": {

src/api/types.ts

@@ -14,7 +14,8 @@ export type Connectable = Schemas["Block"] | Schemas["Channel"];
 export type SearchResult =
   | Schemas["Block"]
   | Schemas["Channel"]
-  | Schemas["User"];
+  | Schemas["User"]
+  | Schemas["Group"];
 export type Followable =
   | Schemas["User"]
   | Schemas["Channel"]

src/commands/session.tsx

@@ -35,6 +35,10 @@ export function SessionMode() {
   const { exit } = useApp();
   const auth = useSessionAuth();
   const [paletteActive, setPaletteActive] = useState(false);
+  const [paletteOpenRequest, setPaletteOpenRequest] = useState<{
+    id: number;
+    seed: string;
+  } | null>(null);
   const [headerOverride, setHeaderOverride] = useState<ReactNode | null>(null);
   const [runtimeFooterActions, setRuntimeFooterActions] = useState<
     SessionFooterAction[]
@@ -86,6 +90,16 @@ export function SessionMode() {
   }, [auth.status]);
 
   const normalizedCurrent = normalizeView(current);
+  const openPalette = useCallback((seed = "") => {
+    setPaletteOpenRequest((current) => ({
+      id: (current?.id ?? 0) + 1,
+      seed,
+    }));
+  }, []);
+  const logout = useCallback(() => {
+    config.clearToken();
+    exit();
+  }, [exit]);
 
   useEffect(() => {
     if (!isSameView(current, normalizedCurrent)) {
@@ -119,6 +133,9 @@ export function SessionMode() {
     pop,
     replace,
     reset,
+    logout,
+    exit,
+    openPalette,
   };
 
   const defaultFooterActions = getSessionFooterActions(view, me);
@@ -167,12 +184,12 @@ export function SessionMode() {
               }}
               onBack={pop}
               onLogout={() => {
-                config.clearToken();
-                exit();
+                logout();
               }}
               onExit={exit}
               onOpenBrowser={() => openBrowserForView(view)}
               onActiveChange={setPaletteActive}
+              openRequest={paletteOpenRequest}
             />
           </Box>
         </SessionShellHeaderProvider>

src/commands/session/command-specs.ts

@@ -168,6 +168,12 @@ export const SESSION_COMMAND_SPECS: CommandSpec[] = [
   },
 ];
 
+export function getAvailableSessionCommands(view: SessionView): CommandSpec[] {
+  return SESSION_COMMAND_SPECS.filter(
+    (command) => command.when?.(view) ?? true,
+  );
+}
+
 export const SESSION_ARG_HINTS: Record<string, string> = {
   "<slug>": "enter slug",
   "<query>": "enter search query",

src/commands/session/session-view-config.tsx

@@ -22,6 +22,9 @@ export interface SessionViewContext {
   pop: () => void;
   replace: (view: SessionView) => void;
   reset: (view: SessionView) => void;
+  logout: () => void;
+  exit: () => void;
+  openPalette: (seed?: string) => void;
 }
 
 export interface SessionViewConfig<
@@ -52,13 +55,21 @@ const LIST_FOOTER: SessionFooterAction[] = [
 
 export const SESSION_VIEW_REGISTRY: SessionViewRegistry = {
   home: {
-    render: ({ context }) => <HomeScreen me={context.me} />,
+    render: ({ context }) => (
+      <HomeScreen
+        me={context.me}
+        onNavigate={context.push}
+        onLogout={context.logout}
+        onExit={context.exit}
+        onOpenPalette={context.openPalette}
+      />
+    ),
     buildBreadcrumbTitle: ({ me }) => me.name,
     footerActions: [
-      { key: "↑↓", label: "select" },
-      { key: "↵", label: "run" },
-      { key: "tab", label: "complete" },
-      { key: "esc", label: "clear" },
+      { key: "j/k", label: "move" },
+      { key: "↵", label: "run/edit" },
+      { key: "/", label: "open commands" },
+      { key: "ctrl+c", label: "exit" },
     ],
   },
   channel: {

src/components/ChannelsList.tsx

@@ -85,7 +85,7 @@ export function ChannelsList({
 
   return (
     <ScreenFrame title="Your channels">
-      <Panel title="Channels">
+      <Panel>
         <Box flexDirection="column">
           {channels.map((ch, i) => (
             <Box key={ch.slug || String(ch.id)}>

src/components/HomeScreen.tsx

@@ -1,6 +1,97 @@
-import { Box } from "ink";
+import { Box, Text } from "ink";
+import { useMemo, useState } from "react";
 import type { User } from "../api/types";
+import {
+  getAvailableSessionCommands,
+  type CommandSpecContext,
+} from "../commands/session/command-specs";
+import { usePagedCursorList } from "../hooks/usePagedCursorList";
+import { useSessionListNavigation } from "../hooks/useSessionListNavigation";
+import { accentColor, mutedColor } from "../lib/theme";
+import type { SessionView } from "../commands/session/session-view";
+import { useSessionPaletteActive } from "./SessionPaletteContext";
+import { Panel, ScreenFrame } from "./ScreenChrome";
 
-export function HomeScreen({ me: _me }: { me: User }) {
-  return <Box />;
+export function HomeScreen({
+  me,
+  onNavigate,
+  onLogout,
+  onExit,
+  onOpenPalette,
+}: {
+  me: User;
+  onNavigate: (view: SessionView) => void;
+  onLogout: () => void;
+  onExit: () => void;
+  onOpenPalette: (seed?: string) => void;
+}) {
+  const paletteActive = useSessionPaletteActive();
+  const [error, setError] = useState<string | null>(null);
+  const listState = usePagedCursorList({});
+  const actions = useMemo(
+    () => getAvailableSessionCommands({ kind: "home" }),
+    [],
+  );
+  const commandContext = useMemo<CommandSpecContext>(
+    () => ({
+      me,
+      view: { kind: "home" },
+      navigate: onNavigate,
+      back: () => {},
+      logout: onLogout,
+      exit: onExit,
+      openBrowser: () => {},
+    }),
+    [me, onExit, onLogout, onNavigate],
+  );
+
+  const list = useSessionListNavigation({
+    state: {
+      page: listState.page,
+      cursor: listState.cursor,
+    },
+    handlers: listState,
+    itemCount: actions.length,
+    paletteActive,
+    canNextPage: () => false,
+    onBack: () => {},
+    onOpen: (index) => {
+      const action = actions[index];
+      if (!action) return;
+      if (action.args) {
+        onOpenPalette(`${action.name} `);
+        return;
+      }
+      try {
+        action.run(commandContext, "");
+        setError(null);
+      } catch (err: unknown) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    },
+  });
+
+  return (
+    <ScreenFrame title="Home">
+      <Panel>
+        <Box flexDirection="column">
+          {actions.map((action, index) => (
+            <Box key={action.name}>
+              <Text color={list.state.cursor === index ? "cyan" : undefined}>
+                {list.state.cursor === index ? "▸ " : "  "}
+              </Text>
+              <Text color={accentColor()} bold={list.state.cursor === index}>
+                /{action.name}
+              </Text>
+              {action.args ? (
+                <Text color={mutedColor()}> {action.args}</Text>
+              ) : null}
+              <Text color={mutedColor()}> · {action.desc}</Text>
+            </Box>
+          ))}
+          {error ? <Text color="red">✕ {error}</Text> : null}
+        </Box>
+      </Panel>
+    </ScreenFrame>
+  );
 }

src/components/ScreenChrome.tsx

@@ -49,7 +49,7 @@ export function useSessionShellHeaderOverride(title?: ReactNode): boolean {
 
 export function SessionHeader({ title }: { title?: ReactNode }) {
   return (
-    <Box paddingTop={1} marginBottom={1} paddingX={1}>
+    <Box marginBottom={1} paddingX={1}>
       <Text bold color="green">
         **
       </Text>