@cueloop/client 0.1.0-alpha.32 → 0.1.0-alpha.34

package/src/components/SettingsDialog.tsx

@@ -49,7 +49,8 @@ export function SettingsDialog({
   const tokens = useComponentTheme(theme);
   const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
   if (!isOpen) return null;
-  const category = categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
+  const category =
+    categories.find((candidate) => candidate.id === activeCategoryId) ?? categories[0];
   if (!category) return null;
   return (
     <Dialog
@@ -57,6 +58,7 @@ export function SettingsDialog({
       title=" Settings "
       width={Math.min(76, terminalWidth - 6)}
       height={Math.min(22, terminalHeight - 4)}
+      background={tokens.elevated}
       theme={theme}
     >
       <box style={{ flexDirection: "row", flexGrow: 1 }}>
@@ -67,10 +69,14 @@ export function SettingsDialog({
             return (
               <box
                 key={candidate.id}
-                style={{ backgroundColor: isActive && activeZone === "nav" ? tokens.elevated : undefined }}
+                style={{
+                  backgroundColor: isActive && activeZone === "nav" ? tokens.border : undefined,
+                }}
                 onMouseUp={() => onCategorySelect(candidate.id)}
               >
-                <text fg={isActive ? tokens.accent : tokens.textMuted}>{`${isActive ? "› " : "  "}${candidate.name}`}</text>
+                <text
+                  fg={isActive ? tokens.accent : tokens.textMuted}
+                >{`${isActive ? "› " : "  "}${candidate.name}`}</text>
               </box>
             );
           })}
@@ -120,10 +126,10 @@ export function SettingsDialog({
           })}
         </box>
       </box>
-      <box style={{ flexDirection: "row", height: 1, backgroundColor: tokens.elevated, paddingLeft: 1 }}>
+      <box style={{ flexDirection: "row", height: 1, paddingLeft: 1 }}>
         <text fg={tokens.textDim}>
           {activeZone === "nav"
-            ? "j/k category · l/⏎ into settings · esc close"
+            ? "j/k category · l/enter into settings · esc close"
             : "j/k row · l/space change · h back · esc close"}
         </text>
       </box>

package/src/components/SettingsRows.stories.tsx

@@ -14,5 +14,5 @@ export const AllKinds: Story = {
       <TextRow label="Vault path" value="~/vaults/notes" isActive={false} onPress={() => {}} />
     </box>
   ),
-  expectedColors: [DARK.green, DARK.accent, DARK.elevated],
+  expectedColors: [DARK.green, DARK.accent, DARK.border],
 };

package/src/components/SettingsRows.tsx

@@ -29,7 +29,11 @@ function RowShell({ label, isActive, onPress, theme, children }: RowShellProps):
   const tokens = useComponentTheme(theme);
   return (
     <box
-      style={{ flexDirection: "row", height: 1, backgroundColor: isActive ? tokens.elevated : undefined }}
+      style={{
+        flexDirection: "row",
+        height: 1,
+        backgroundColor: isActive ? tokens.border : undefined,
+      }}
       onMouseUp={onPress}
     >
       <box style={{ width: 26, paddingLeft: 1 }}>
@@ -48,7 +52,13 @@ export interface ToggleRowProps {
   theme?: Theme;
 }
 
-export function ToggleRow({ label, value, isActive, onPress, theme }: ToggleRowProps): React.ReactNode {
+export function ToggleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: ToggleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>
@@ -65,7 +75,13 @@ export interface CycleRowProps {
   theme?: Theme;
 }
 
-export function CycleRow({ label, value, isActive, onPress, theme }: CycleRowProps): React.ReactNode {
+export function CycleRow({
+  label,
+  value,
+  isActive,
+  onPress,
+  theme,
+}: CycleRowProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
   return (
     <RowShell label={label} isActive={isActive} onPress={onPress} theme={theme}>

package/src/components/Toast.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { Toast } from "./Toast";
+
+export const meta: StoryMeta = { title: "Toast" };
+
+export const ShareLink: Story = {
+  render: () => <Toast title="share link copied" body="ssh review-4f2a@cueloop.dev" />,
+  expectedColors: [DARK.accent],
+  size: { width: 60, height: 12 },
+};

package/src/components/Toast.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+
+export interface ToastProps {
+  title?: string;
+  body: string;
+  theme?: Theme;
+}
+
+export function Toast({ title, body, theme }: ToastProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth } = useTerminalDimensions();
+  const width = Math.min(terminalWidth - 6, Math.max(28, body.length + 4));
+  return (
+    <Dialog
+      isOpen
+      title={title ? ` ${title} ` : undefined}
+      width={width}
+      height={6}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <text fg={tokens.text}>{body}</text>
+        <box style={{ flexGrow: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/WalkWizard.stories.tsx

@@ -23,7 +23,12 @@ const FILES: WalkFile[] = [
     removed: 0,
     preview: [{ sign: "+", text: "export function firstUnviewedIndex(files, viewed) {" }],
   },
-  { path: "packages/schema/src/types.ts", added: 3, removed: 0, preview: [{ sign: "+", text: "viewedPaths?: string[];" }] },
+  {
+    path: "packages/schema/src/types.ts",
+    added: 3,
+    removed: 0,
+    preview: [{ sign: "+", text: "viewedPaths?: string[];" }],
+  },
 ];
 
 const noop = (): void => {};
@@ -40,7 +45,13 @@ export const FirstFile: Story = {
     />
   ),
   // the main card wears the accent border; stats carry the +/- colors
-  expectedColors: [DARK.accent, DARK.green, DARK.red, DARK.insertedForeground, DARK.deletedForeground],
+  expectedColors: [
+    DARK.accent,
+    DARK.green,
+    DARK.red,
+    DARK.insertedForeground,
+    DARK.deletedForeground,
+  ],
 };
 
 export const WithAgentNote: Story = {

package/src/components/WalkWizard.tsx

@@ -106,9 +106,11 @@ export function WalkWizard({
               <text fg={tokens.text}>{currentFile.path}</text>
               <text>
                 <span fg={tokens.green}>{`+${currentFile.added}`}</span>
-                <span fg={tokens.textDim}>{" "}</span>
+                <span fg={tokens.textDim}> </span>
                 <span fg={tokens.red}>{`-${currentFile.removed}`}</span>
-                <span fg={tokens.textDim}>{viewedPaths.has(currentFile.path) ? " · viewed" : ""}</span>
+                <span fg={tokens.textDim}>
+                  {viewedPaths.has(currentFile.path) ? " · viewed" : ""}
+                </span>
               </text>
               <box style={{ height: 1 }} />
               {currentFile.preview.length === 0 ? (
@@ -118,7 +120,11 @@ export function WalkWizard({
                   <text
                     key={previewIndex}
                     style={{ wrapMode: "none" }}
-                    fg={previewLine.sign === "+" ? tokens.insertedForeground : tokens.deletedForeground}
+                    fg={
+                      previewLine.sign === "+"
+                        ? tokens.insertedForeground
+                        : tokens.deletedForeground
+                    }
                   >
                     {previewLine.sign + previewLine.text}
                   </text>