nutstore-webdav-secret-cli 0.1.0

package/src/components/auth-gate.tsx

@@ -0,0 +1,205 @@
+import { useAtomSet } from "@effect/atom-solid";
+import { TextAttributes } from "@opentui/core";
+import { useKeyboard, useRenderer } from "@opentui/solid";
+import { Match, Show, Switch, createSignal } from "solid-js";
+import { saveCookieAtom } from "../atom/auth";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+import { NutstoreLogo } from "./nutstore-logo";
+
+export type AuthView = "choice" | "manual" | "validating";
+
+type AuthGateProps = {
+  palette: Palette;
+};
+
+export function AuthGate(props: AuthGateProps): OpenTUIElement {
+  const renderer = useRenderer();
+  const saveCookie = useAtomSet(() => saveCookieAtom, { mode: "promise" });
+  const [view, setView] = createSignal<AuthView>("choice");
+  const [cookieInput, setCookieInput] = createSignal("");
+  const [error, setError] = createSignal<string | null>(null);
+
+  const persistCookie = async (cookie: string) => {
+    setView("validating");
+    setError(null);
+
+    try {
+      await saveCookie(cookie);
+    } catch (cause) {
+      setView("manual");
+      setError(cause instanceof Error ? cause.message : "Cookie validation failed. Paste a Cookie header to continue.");
+    }
+  };
+
+  const selectManualInput = () => {
+    setView("manual");
+    setError(null);
+  };
+
+  const submitChoice = () => {
+    selectManualInput();
+  };
+
+  const submitManualCookie = () => {
+    void persistCookie(cookieInput());
+  };
+
+  const isSubmitKey = (name: string) => name === "enter" || name === "return";
+
+  useKeyboard((key) => {
+    const name = key.name.toLowerCase();
+
+    if (name === "q") {
+      renderer.destroy();
+      return;
+    }
+
+    if (view() === "choice" && name === "m") {
+      selectManualInput();
+      key.preventDefault();
+      return;
+    }
+
+    if (view() === "choice" && isSubmitKey(name)) {
+      submitChoice();
+      key.preventDefault();
+      return;
+    }
+
+    if (view() === "manual" && isSubmitKey(name)) {
+      submitManualCookie();
+      key.preventDefault();
+    }
+  });
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingX={1} paddingY={1} gap={1}>
+      <box height={7} flexDirection="row" alignItems="center">
+        <box
+          width={40}
+          marginRight={2}
+          alignItems="center"
+          justifyContent="center"
+        >
+          <NutstoreLogo palette={props.palette} />
+        </box>
+        <box flexDirection="column" flexGrow={1} justifyContent="center">
+          <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+            WebDAV Cookie Setup
+          </text>
+          <text fg={props.palette.muted} truncate>
+            Prepare access before loading app passwords
+          </text>
+        </box>
+      </box>
+
+      <box
+        border
+        borderColor={props.palette.border}
+        flexDirection="column"
+        flexGrow={1}
+        justifyContent="center"
+        paddingX={3}
+        paddingY={1}
+        title="Authentication"
+      >
+        <AuthBody
+          cookieInput={cookieInput()}
+          error={error()}
+          onCookieInput={setCookieInput}
+          onManualSubmit={submitManualCookie}
+          palette={props.palette}
+          view={view()}
+        />
+      </box>
+
+      <box height={1}>
+        <text fg={props.palette.muted}>
+          Enter continue   M manual input   Q quit
+        </text>
+      </box>
+    </box>
+  );
+}
+
+type AuthBodyProps = {
+  cookieInput: string;
+  error: string | null;
+  onCookieInput: (value: string) => void;
+  onManualSubmit: () => void;
+  palette: Palette;
+  view: AuthView;
+};
+
+function AuthBody(props: AuthBodyProps): OpenTUIElement {
+  return (
+    <Switch>
+      <Match when={props.view === "validating"}>
+        <box flexDirection="column" gap={1}>
+          <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+            Validating cookie...
+          </text>
+          <text fg={props.palette.muted}>
+            Saving cookie and validating local session state.
+          </text>
+        </box>
+      </Match>
+
+      <Match when={props.view === "manual"}>
+        <box flexDirection="column" gap={1}>
+          <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+            Paste Nutstore Cookie
+          </text>
+          <text fg={props.palette.muted}>
+            Paste the full Cookie header, then press Enter.
+          </text>
+          <input
+            cursorColor={props.palette.cursor}
+            focused
+            focusedTextColor={props.palette.fg}
+            onInput={props.onCookieInput}
+            onSubmit={props.onManualSubmit}
+            placeholder="nutstore_cookie=...; session=..."
+            placeholderColor={props.palette.muted}
+            textColor={props.palette.fg}
+            value={props.cookieInput}
+          />
+          <AuthError error={props.error} palette={props.palette} />
+        </box>
+      </Match>
+
+      <Match when={props.view === "choice"}>
+        <box flexDirection="column" gap={1}>
+          <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+            No stored cookie found
+          </text>
+          <text fg={props.palette.muted}>
+            Manual input is the only available authentication method right now.
+          </text>
+          <text fg={props.palette.fg}>
+            Press Enter to paste a Cookie header manually.
+          </text>
+          <text fg={props.palette.muted}>
+            Automatic browser cookie detection is hidden until the experimental flow is ready.
+          </text>
+
+          <AuthError error={props.error} palette={props.palette} />
+        </box>
+      </Match>
+    </Switch>
+  );
+}
+
+function AuthError(props: {
+  error: string | null;
+  palette: Palette;
+}): OpenTUIElement {
+  return (
+    <Show when={props.error}>
+      <text fg={props.palette.danger}>
+        {props.error}
+      </text>
+    </Show>
+  );
+}

package/src/components/footer.tsx

@@ -0,0 +1,37 @@
+import { TextAttributes } from "@opentui/core";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+
+export function Footer(props: { palette: Palette }): OpenTUIElement {
+  return (
+    <box height={1} flexDirection="row" flexWrap="wrap" columnGap={1}>
+      <FooterHint action="select" keyLabel="Up/Down" palette={props.palette} />
+      <FooterHint action="copy secret" keyLabel="Enter" palette={props.palette} />
+      <FooterHint action="copy URL" keyLabel="U" palette={props.palette} />
+      <FooterHint action="copy account" keyLabel="A" palette={props.palette} />
+      <FooterHint action="new secret" keyLabel="N" palette={props.palette} />
+      <FooterHint action="delete" keyLabel="D" palette={props.palette} />
+      <FooterHint action="refresh" keyLabel="R" palette={props.palette} />
+      <FooterHint action="quit" keyLabel="Q" palette={props.palette} />
+    </box>
+  );
+}
+
+function FooterHint(props: {
+  action: string;
+  keyLabel: string;
+  palette: Palette;
+}): OpenTUIElement {
+  return (
+    <box flexDirection="row" marginRight={1}>
+      <text
+        attributes={TextAttributes.BOLD}
+        bg={props.palette.selectedBg}
+        fg={props.palette.selectedFg}
+      >
+        {" "}{props.keyLabel}{" "}
+      </text>
+      <text fg={props.palette.muted}> {props.action}</text>
+    </box>
+  );
+}

package/src/components/header.tsx

@@ -0,0 +1,39 @@
+import { TextAttributes, type ThemeMode } from "@opentui/core";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+import { NutstoreLogo } from "./nutstore-logo";
+
+type HeaderProps = {
+  count: number;
+  palette: Palette;
+  status: string;
+  themeMode: ThemeMode | null;
+};
+
+export function Header(props: HeaderProps): OpenTUIElement {
+  return (
+    <box height={7} flexDirection="row" alignItems="center">
+      <box
+        width={40}
+        marginRight={2}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <NutstoreLogo palette={props.palette} />
+      </box>
+      <box
+        flexDirection="column"
+        flexGrow={1}
+        justifyContent="center"
+        rowGap={1}
+      >
+        <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+          WebDAV App Passwords
+        </text>
+        <text fg={props.palette.muted} truncate>
+          {props.count} secrets | {props.themeMode ?? "light"} | {props.status}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/components/nutstore-logo.tsx

@@ -0,0 +1,56 @@
+import { TextAttributes } from "@opentui/core";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+
+type NutstoreLogoProps = {
+  palette: Palette;
+};
+
+const MARK_LINES = [
+  ["  ▗▄▄▄  ", "brand"],
+  [" ▟████▙ ", "brand"],
+  [" ███▀▀  ", "accent"],
+  [" ▜████▛ ", "brand"],
+  ["  ▝▀▀▘  ", "muted"],
+] as const;
+
+const WORDMARK_LINES = [
+  "NUTSTORE",
+  "Personal cloud,",
+  "without the noise",
+] as const;
+
+export function NutstoreLogo(props: NutstoreLogoProps): OpenTUIElement {
+  return (
+    <box alignItems="center" flexDirection="row" gap={2}>
+      <box flexDirection="column">
+        {MARK_LINES.map(([line, tone]) => (
+          <text fg={toneColor(props.palette, tone)}>{line}</text>
+        ))}
+      </box>
+
+      <box flexDirection="column" justifyContent="center">
+        <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+          {WORDMARK_LINES[0]}
+        </text>
+        <text fg={props.palette.muted}>{WORDMARK_LINES[1]}</text>
+        <text fg={props.palette.muted}>{WORDMARK_LINES[2]}</text>
+      </box>
+    </box>
+  );
+}
+
+function toneColor(
+  palette: Palette,
+  tone: "brand" | "accent" | "muted",
+): string {
+  if (tone === "muted") {
+    return palette.muted;
+  }
+
+  if (tone === "accent") {
+    return palette.brandLogo[3] ?? palette.fg;
+  }
+
+  return palette.brandLogo[1] ?? palette.fg;
+}

package/src/components/secret-detail.tsx

@@ -0,0 +1,198 @@
+import { TextAttributes } from "@opentui/core";
+import { Show } from "solid-js";
+import { WEBDAV_URL } from "../constants";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+import type { SecretItem } from "../types";
+import { truncate } from "../utils";
+
+type SecretDetailProps = {
+  addName: string;
+  addSecretMode: boolean;
+  addError: string | null;
+  addingSecret: boolean;
+  confirmingDelete: boolean;
+  item: SecretItem | null;
+  onAddNameInput: (value: string) => void;
+  onAddSubmit: () => void;
+  palette: Palette;
+};
+
+export function SecretDetail(props: SecretDetailProps): OpenTUIElement {
+  return (
+    <box
+      border
+      borderColor={props.confirmingDelete ? props.palette.danger : props.palette.border}
+      flexDirection="column"
+      flexGrow={1}
+      paddingX={2}
+      paddingY={1}
+      title={props.addSecretMode ? "Add Secret" : props.confirmingDelete ? "Confirm Delete" : "Detail"}
+    >
+      <Show when={props.addSecretMode}>
+        <AddSecretContent
+          addError={props.addError}
+          addName={props.addName}
+          addingSecret={props.addingSecret}
+          onAddNameInput={props.onAddNameInput}
+          onAddSubmit={props.onAddSubmit}
+          palette={props.palette}
+        />
+      </Show>
+      <Show when={!props.addSecretMode}>
+        <Show
+          when={props.item !== null}
+          fallback={
+            <box flexGrow={1} alignItems="center" justifyContent="center">
+              <text fg={props.palette.muted}>
+                Select an app password to inspect
+              </text>
+            </box>
+          }
+        >
+          <SecretDetailContent
+            confirmingDelete={props.confirmingDelete}
+            item={props.item as SecretItem}
+            palette={props.palette}
+          />
+        </Show>
+      </Show>
+    </box>
+  );
+}
+
+function AddSecretContent(props: {
+  addError: string | null;
+  addName: string;
+  addingSecret: boolean;
+  onAddNameInput: (value: string) => void;
+  onAddSubmit: () => void;
+  palette: Palette;
+}): OpenTUIElement {
+  return (
+    <box flexDirection="column" gap={1}>
+      <text attributes={TextAttributes.BOLD} fg={props.palette.fg}>
+        Create App Password
+      </text>
+      <text fg={props.palette.muted}>
+        Enter a name, then press Enter to create a new app password.
+      </text>
+      <input
+        cursorColor={props.palette.cursor}
+        focused
+        focusedTextColor={props.palette.fg}
+        onInput={props.onAddNameInput}
+        onSubmit={props.onAddSubmit}
+        placeholder="NICE-APP-PASSWORD"
+        placeholderColor={props.palette.muted}
+        textColor={props.palette.fg}
+        value={props.addName}
+      />
+      <Show when={props.addingSecret}>
+        <text fg={props.palette.muted}>Creating app password...</text>
+      </Show>
+      <Show when={props.addError}>
+        <text fg={props.palette.danger}>{props.addError}</text>
+      </Show>
+      <box flexDirection="row" flexWrap="wrap" columnGap={1}>
+        <ShortcutHint action="create secret" keyLabel="Enter" palette={props.palette} />
+        <ShortcutHint action="cancel" keyLabel="Esc" palette={props.palette} />
+      </box>
+    </box>
+  );
+}
+
+function SecretDetailContent(props: {
+  confirmingDelete: boolean;
+  item: SecretItem;
+  palette: Palette;
+}): OpenTUIElement {
+  return (
+    <box flexDirection="column" gap={1}>
+      <text attributes={TextAttributes.BOLD} fg={props.palette.fg} truncate>
+        {truncate(props.item.name, 36)}
+      </text>
+
+      <box flexDirection="column">
+        <DetailRow
+          label="WebDAV"
+          maxLength={27}
+          palette={props.palette}
+          value={WEBDAV_URL}
+          shouldTruncate={false}
+        />
+        <DetailRow
+          label="Account"
+          palette={props.palette}
+          value={props.item.account ?? "Unavailable"}
+          shouldTruncate={false}
+        />
+        <DetailRow
+          label="Password"
+          palette={props.palette}
+          value={props.item.password}
+        />
+        <DetailRow
+          label="Created"
+          palette={props.palette}
+          value={props.item.createdAt}
+        />
+      </box>
+
+      <Show
+        when={props.confirmingDelete}
+        fallback={
+          <box flexDirection="row" flexWrap="wrap" columnGap={1}>
+            <ShortcutHint action="copy secret" keyLabel="Enter" palette={props.palette} />
+            <ShortcutHint action="copy URL" keyLabel="U" palette={props.palette} />
+            <ShortcutHint action="copy account" keyLabel="A" palette={props.palette} />
+            <ShortcutHint action="new secret" keyLabel="N" palette={props.palette} />
+            <ShortcutHint action="delete" keyLabel="D" palette={props.palette} />
+          </box>
+        }
+      >
+        <box border borderColor={props.palette.danger} paddingX={1}>
+          <text fg={props.palette.danger}>Press Y to delete, Esc to cancel</text>
+        </box>
+      </Show>
+    </box>
+  );
+}
+
+function DetailRow(props: {
+  label: string;
+  palette: Palette;
+  value: string;
+  maxLength?: number;
+  shouldTruncate?: boolean;
+}): OpenTUIElement {
+  return (
+    <box flexDirection="row">
+      <text width={9} fg={props.palette.muted}>
+        {props.label}
+      </text>
+      <text flexGrow={1} fg={props.palette.fg} truncate={props.shouldTruncate !== false}>
+        {props.shouldTruncate !== false ? truncate(props.value, props.maxLength ?? 29) : props.value}
+      </text>
+    </box>
+  );
+}
+
+function ShortcutHint(props: {
+  action: string;
+  keyLabel: string;
+  palette: Palette;
+}): OpenTUIElement {
+  return (
+    <box flexDirection="row" marginRight={1}>
+      <text
+        attributes={TextAttributes.BOLD}
+        bg={props.palette.selectedBg}
+        fg={props.palette.selectedFg}
+      >
+        {" "}{props.keyLabel}{" "}
+      </text>
+      <text fg={props.palette.muted}> {props.action}</text>
+    </box>
+  );
+}

package/src/components/secret-list.tsx

@@ -0,0 +1,78 @@
+import { useAtomValue } from "@effect/atom-solid";
+import { For, Match, Switch } from "solid-js";
+import { secretsListAtom, secretsLoadStateAtom, secretsStatusMessageAtom } from "../atom/secrets";
+import type { OpenTUIElement } from "../opentui-jsx";
+import type { Palette } from "../theme";
+import { maskPassword, truncate } from "../utils";
+
+type SecretListProps = {
+  palette: Palette;
+  selectedIndex: number;
+};
+
+export function SecretList(props: SecretListProps): OpenTUIElement {
+  const items = useAtomValue(() => secretsListAtom);
+  const loadState = useAtomValue(() => secretsLoadStateAtom);
+  const statusMessage = useAtomValue(() => secretsStatusMessageAtom);
+
+  return (
+    <box
+      border
+      borderColor={props.palette.border}
+      flexDirection="column"
+      flexShrink={0}
+      paddingX={1}
+      title="Secrets"
+      width={44}
+    >
+      <Switch
+        fallback={
+          <For each={items()}>
+            {(item, index) => {
+              const selected = () => index() === props.selectedIndex;
+              const prefix = () => String(index() + 1).padStart(2, "0");
+
+              return (
+                <box flexDirection="row" justifyContent="space-between">
+                  <text
+                    bg={selected() ? props.palette.selectedBg : undefined}
+                    fg={selected() ? props.palette.selectedFg : props.palette.fg}
+                    flexGrow={1}
+                    truncate
+                  >
+                    {prefix()}  {truncate(item.name.padEnd(18), 18)}{" "}
+
+                  </text>
+                  <text
+                    truncate>
+                    {maskPassword(item.password).padStart(12)}
+                  </text>
+                </box>
+
+              );
+            }}
+          </For>
+        }
+      >
+        <Match when={loadState() === "loading"}>
+          <box flexGrow={1} alignItems="center" justifyContent="center">
+            <text fg={props.palette.muted}>Loading app passwords...</text>
+          </box>
+        </Match>
+        <Match when={loadState() === "error"}>
+          <box flexDirection="column" flexGrow={1} justifyContent="center" paddingX={1}>
+            <text fg={props.palette.muted}>Failed to load app passwords</text>
+            <text fg={props.palette.muted} truncate>
+              {statusMessage()}
+            </text>
+          </box>
+        </Match>
+        <Match when={loadState() === "empty"}>
+          <box flexGrow={1} alignItems="center" justifyContent="center">
+            <text fg={props.palette.muted}>No app passwords</text>
+          </box>
+        </Match>
+      </Switch>
+    </box>
+  );
+}