@jant/core 0.3.36 → 0.3.37

package/src/ui/dash/appearance/ColorThemeContent.tsx

@@ -88,7 +88,7 @@ export function ColorThemeContent({
   return (
     <div
       data-signals={themeSignals}
-      data-on:change="@post('/dash/settings/color-theme')"
+      data-on:change="@post('/settings/color-theme')"
       class="max-w-3xl"
     >
       <fieldset>
@@ -101,8 +101,28 @@ export function ColorThemeContent({
         <p class="text-sm text-muted-foreground mb-4">
           {t({
             message:
-              "This will theme both your site and your dashboard. All color themes support dark mode.",
+              "Applies to your entire site, including admin pages. All themes support dark mode.",
             comment: "@context: Appearance settings description",
+          })}{" "}
+          {t({
+            message: "Want more control?",
+            comment:
+              "@context: Prefix before Custom CSS link on color theme page",
+          })}{" "}
+          <a
+            href="/settings/custom-css"
+            class="underline hover:text-foreground transition-colors"
+          >
+            {t({
+              message: "Custom CSS",
+              comment:
+                "@context: Link to Custom CSS settings from color theme page",
+            })}
+          </a>{" "}
+          {t({
+            message: "lets you override any theme variable.",
+            comment:
+              "@context: Suffix after Custom CSS link on color theme page",
           })}
         </p>
 

package/src/ui/dash/appearance/FontThemeContent.tsx

@@ -20,7 +20,7 @@ export function FontThemeContent({
         /</g,
         "\\u003c",
       )}
-      data-on:change="@post('/dash/settings/font-theme')"
+      data-on:change="@post('/settings/font-theme')"
       class="max-w-3xl"
     >
       <fieldset>

package/src/ui/dash/appearance/NavigationContent.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useLingui } from "@lingui/react/macro";
-import type { NavItem, Page, SystemNavKey } from "../../../types.js";
+import type { NavItem, SystemNavKey } from "../../../types.js";
 import { SYSTEM_NAV_KEYS } from "../../../types.js";
 import type {
   NavManagerLabels,
@@ -15,7 +15,7 @@ import type {
 
 const SYSTEM_DESCRIPTIONS: Record<SystemNavKey, string> = {
   rss: "Add a link to your RSS feed",
-  dashboard: "Shows 'Dashboard' when logged in, 'Sign in' when logged out",
+  settings: "Shows 'Settings' when logged in, 'Sign in' when logged out",
   collections: "Link to your collections page",
   archive: "Link to the post archive",
 };
@@ -26,13 +26,11 @@ const SYSTEM_DESCRIPTIONS: Record<SystemNavKey, string> = {
 
 export function NavigationContent({
   navItems,
-  availablePages,
   headerNavMaxVisible,
   homeDefaultView,
   siteName,
 }: {
   navItems: NavItem[];
-  availablePages: Page[];
   headerNavMaxVisible: number;
   homeDefaultView: string;
   siteName: string;
@@ -45,7 +43,6 @@ export function NavigationContent({
     type: item.type,
     label: item.label,
     url: item.url,
-    pageId: item.pageId,
   }));
 
   // Build system nav config array for the Lit component
@@ -58,13 +55,6 @@ export function NavigationContent({
     description: SYSTEM_DESCRIPTIONS[key],
   }));
 
-  // Serialize available pages for the Lit component
-  const pagesData = availablePages.map((page) => ({
-    id: page.id,
-    title: page.title,
-    slug: page.slug,
-  }));
-
   const labels: NavManagerLabels = {
     preview: t({
       message: "Navigation Preview",
@@ -76,10 +66,9 @@ export function NavigationContent({
     }),
     emptyState: t({
       message:
-        "No navigation items yet. Add pages, links, or enable system items below.",
+        "No navigation items yet. Add links or enable system items below.",
       comment: "@context: Empty state for navigation items",
     }),
-    page: t({ message: "page", comment: "@context: Nav item type badge" }),
     link: t({ message: "link", comment: "@context: Nav item type badge" }),
     system: t({
       message: "system",
@@ -102,13 +91,9 @@ export function NavigationContent({
       message: "Delete",
       comment: "@context: Delete nav item",
     }),
-    editPage: t({
-      message: "Edit Page",
-      comment: "@context: Link to edit the page",
-    }),
     remove: t({
       message: "Remove",
-      comment: "@context: Remove page from navigation",
+      comment: "@context: Remove system item from navigation",
     }),
     orderSaved: t({
       message: "Order saved",
@@ -132,29 +117,13 @@ export function NavigationContent({
     }),
     systemLinksDescription: t({
       message:
-        "Toggle built-in navigation items. Enabled items appear in your navigation alongside pages and links.",
+        "Toggle built-in navigation items. Enabled items appear in your navigation alongside links.",
       comment: "@context: Description for system nav toggles",
     }),
-    addPageToNavigation: t({
-      message: "Add page to navigation",
-      comment: "@context: Section heading for adding page to nav",
-    }),
     addCustomLinkToNavigation: t({
       message: "Add custom link to navigation",
       comment: "@context: Section heading for adding custom link to nav",
     }),
-    choosePage: t({
-      message: "Choose a page…",
-      comment: "@context: Placeholder for page select combobox trigger",
-    }),
-    searchPages: t({
-      message: "Search pages…",
-      comment: "@context: Placeholder for page search input in combobox",
-    }),
-    noPagesFound: t({
-      message: "No matching pages.",
-      comment: "@context: Empty state when page search has no results",
-    }),
     addLink: t({
       message: "Add Link",
       comment: "@context: Button and heading for adding custom link",
@@ -163,14 +132,6 @@ export function NavigationContent({
       message: "Add a custom link to any URL",
       comment: "@context: Description in link popover form",
     }),
-    allPagesInNav: t({
-      message: "All pages are already in navigation.",
-      comment: "@context: Message when no pages available to add",
-    }),
-    createPage: t({
-      message: "Create page",
-      comment: "@context: Link at bottom of page combobox to create a new page",
-    }),
     urlPlaceholder: "/archive or https://...",
     maxVisibleLinks: t({
       message: "Links shown in header",
@@ -222,7 +183,6 @@ export function NavigationContent({
         items={escapeJson(itemsData)}
         labels={escapeJson(labels)}
         system-nav-items={escapeJson(systemNavData)}
-        available-pages={escapeJson(pagesData)}
         site-name={siteName}
         max-visible={headerNavMaxVisible}
         home-default-view={homeDefaultView}

package/src/ui/dash/index.ts

@@ -4,7 +4,4 @@ export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
 export { EmptyState, type EmptyStateProps } from "../shared/EmptyState.js";
 export { FormatBadge, type FormatBadgeProps } from "./FormatBadge.js";
 export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
-export { PageForm, type PageFormProps } from "./PageForm.js";
-export { PostForm, type PostFormProps } from "./posts/PostForm.js";
-export { PostList, type PostListProps } from "./PostList.js";
 export { StatusBadge, type StatusBadgeProps } from "./StatusBadge.js";

package/src/ui/dash/settings/AccountContent.tsx

@@ -1,71 +1,17 @@
 /**
- * Account settings: profile + password change forms
+ * Password settings: change sign-in password
  */
 
 import { useLingui } from "@lingui/react/macro";
 
-export function AccountContent({ userName }: { userName: string }) {
+export function AccountContent() {
   const { t } = useLingui();
 
-  const profileSignals = JSON.stringify({ userName }).replace(/</g, "\\u003c");
-
   return (
     <div class="flex flex-col max-w-lg">
-      <form
-        data-signals={profileSignals}
-        data-on:submit__prevent="@post('/dash/settings/account')"
-        data-indicator="_profileLoading"
-      >
-        <h2 class="text-lg font-semibold mb-4">
-          {t({
-            message: "Profile",
-            comment: "@context: Account settings section heading",
-          })}
-        </h2>
-        <div class="flex flex-col gap-4">
-          <div class="field">
-            <label class="label">
-              {t({
-                message: "Name",
-                comment: "@context: Account settings form field",
-              })}
-            </label>
-            <input type="text" data-bind="userName" class="input" required />
-          </div>
-        </div>
-
-        <button
-          type="submit"
-          class="btn mt-4"
-          data-attr:disabled="$_profileLoading"
-        >
-          <svg
-            data-show="$_profileLoading"
-            style="display:none"
-            class="animate-spin size-4"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            role="status"
-          >
-            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-          </svg>
-          {t({
-            message: "Save Profile",
-            comment: "@context: Button to save profile",
-          })}
-        </button>
-      </form>
-
-      <hr class="my-8" />
-
       <form
         data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
-        data-on:submit__prevent="@post('/dash/settings/password')"
+        data-on:submit__prevent="@post('/settings/account/password')"
         data-indicator="_passwordLoading"
       >
         <h2 class="text-lg font-semibold mb-4">

package/src/ui/dash/settings/AccountMenuContent.tsx

@@ -0,0 +1,147 @@
+/**
+ * Account settings sub-menu — lists Sessions and Password options
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+/** Chevron right icon */
+function ChevronRight() {
+  return (
+    <svg
+      class="settings-item-chevron"
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+function AccountMenuItem({
+  href,
+  icon,
+  color,
+  name,
+  description,
+}: {
+  href: string;
+  icon: string;
+  color: string;
+  name: string;
+  description: string;
+}) {
+  return (
+    <a href={href} class="settings-item">
+      <span class="settings-item-icon" style={`background-color:${color}`}>
+        <span dangerouslySetInnerHTML={{ __html: icon }} />
+      </span>
+      <span class="settings-item-text">
+        <span class="settings-item-name">{name}</span>
+        <span class="settings-item-desc">{description}</span>
+      </span>
+      <ChevronRight />
+    </a>
+  );
+}
+
+const ICONS = {
+  monitor: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`,
+  download: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>`,
+};
+
+const COLORS = {
+  teal: "oklch(0.55 0.15 185)",
+  gray: "oklch(0.55 0.01 250)",
+  green: "oklch(0.55 0.18 155)",
+};
+
+export function AccountMenuContent() {
+  const { t } = useLingui();
+
+  return (
+    <div class="settings-root">
+      <div>
+        <div class="settings-group">
+          <AccountMenuItem
+            href="/settings/account/sessions"
+            icon={ICONS.monitor}
+            color={COLORS.teal}
+            name={t({
+              message: "Sessions",
+              comment: "@context: Settings item — session management",
+            })}
+            description={t({
+              message: "Manage active sign-in sessions",
+              comment: "@context: Settings item description for sessions",
+            })}
+          />
+          <AccountMenuItem
+            href="/settings/account/password"
+            icon={ICONS.lock}
+            color={COLORS.gray}
+            name={t({
+              message: "Password",
+              comment: "@context: Settings item — password settings",
+            })}
+            description={t({
+              message: "Change your sign-in password",
+              comment:
+                "@context: Settings item description for password change",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Data */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Data",
+            comment: "@context: Settings group label for data export/import",
+          })}
+        </div>
+        <div class="settings-group">
+          <form
+            method="post"
+            action="/api/export/zola"
+            class="settings-export-form"
+          >
+            <button type="submit" class="settings-item">
+              <span
+                class="settings-item-icon"
+                style={`background-color:${COLORS.green}`}
+              >
+                <span dangerouslySetInnerHTML={{ __html: ICONS.download }} />
+              </span>
+              <span class="settings-item-text">
+                <span class="settings-item-name">
+                  {t({
+                    message: "Export Site",
+                    comment:
+                      "@context: Settings item — export site as Zola ZIP",
+                  })}
+                </span>
+                <span class="settings-item-desc">
+                  {t({
+                    message: "Download as a Zola static site (.zip)",
+                    comment:
+                      "@context: Settings item description for site export",
+                  })}
+                </span>
+              </span>
+              <ChevronRight />
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/dash/settings/ApiTokensContent.tsx

@@ -0,0 +1,232 @@
+/**
+ * API Tokens Settings Page
+ *
+ * Manage Bearer tokens for programmatic API access.
+ * Tokens are shown only once at creation — after that, only the prefix is visible.
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { ApiToken } from "../../../types/entities.js";
+import { formatDate } from "../../../lib/time.js";
+
+const API_DOCS_URL = "https://github.com/jant-me/jant/blob/main/docs/API.md";
+
+function TokenRow({ token }: { token: ApiToken }) {
+  const { t } = useLingui();
+
+  return (
+    <div class="py-4 flex items-start gap-4 border-b border-border last:border-b-0">
+      <div class="flex-1 min-w-0">
+        <div class="font-medium">{token.name}</div>
+        <div class="text-sm text-muted-foreground mt-0.5">
+          <code class="text-xs bg-muted px-1.5 py-0.5 rounded">
+            jnt_{token.prefix}...
+          </code>
+          <span class="mx-2">&middot;</span>
+          {t({
+            message: `Created ${formatDate(token.createdAt)}`,
+            comment: "@context: Token creation date",
+          })}
+          {token.lastUsedAt && (
+            <>
+              <span class="mx-2">&middot;</span>
+              {t({
+                message: `Last used ${formatDate(token.lastUsedAt)}`,
+                comment: "@context: Token last used date",
+              })}
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        type="button"
+        class="btn-sm-ghost text-destructive"
+        data-on:click__prevent={`confirm('${t({ message: "Revoke this token? Any scripts using it will stop working.", comment: "@context: Confirm dialog for revoking API token" })}') && @post('/settings/api-tokens/${token.id}/delete')`}
+      >
+        {t({
+          message: "Revoke",
+          comment: "@context: Button to revoke API token",
+        })}
+      </button>
+    </div>
+  );
+}
+
+export function ApiTokensContent({
+  tokens,
+  siteUrl,
+}: {
+  tokens: ApiToken[];
+  siteUrl: string;
+}) {
+  const { t } = useLingui();
+
+  return (
+    <div
+      class="flex flex-col gap-8 max-w-2xl"
+      data-signals="{tokenName: '', _tokenLoading: false, _newPlaintext: '', _tokenCopied: false}"
+    >
+      {/* New token alert — shown after creation via signal patch */}
+      <div data-show="$_newPlaintext" style="display:none">
+        <div class="alert" role="alert">
+          <strong>
+            {t({
+              message: "Copy your token now — it won't be shown again.",
+              comment: "@context: Warning to copy newly created API token",
+            })}
+          </strong>
+          <section class="mt-2">
+            <div class="flex items-center gap-2">
+              <code
+                class="bg-muted px-3 py-2 rounded break-all select-all flex-1 text-sm"
+                data-text="$_newPlaintext"
+              >
+                {" "}
+              </code>
+              <button
+                type="button"
+                class="btn-sm-outline shrink-0"
+                data-on:click="navigator.clipboard.writeText($_newPlaintext); $_tokenCopied = true"
+                data-text={`$_tokenCopied ? '${t({ message: "Copied", comment: "@context: Feedback after copying API token" })}' : '${t({ message: "Copy Token", comment: "@context: Button to copy API token to clipboard" })}'`}
+              >
+                {t({
+                  message: "Copy Token",
+                  comment: "@context: Button to copy API token to clipboard",
+                })}
+              </button>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      {/* Generate token form */}
+      <div>
+        <h2 class="text-lg font-medium mb-4">
+          {t({
+            message: "API Tokens",
+            comment: "@context: Settings section heading",
+          })}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "Tokens let you access the API from scripts, shortcuts, and other tools without signing in.",
+            comment: "@context: API tokens description",
+          })}
+        </p>
+        <form
+          data-on:submit__prevent="@post('/settings/api-tokens')"
+          data-indicator="_tokenLoading"
+          class="flex gap-2 items-end"
+        >
+          <div class="field flex-1">
+            <label class="label" for="tokenName">
+              {t({
+                message: "Token name",
+                comment: "@context: API token name field label",
+              })}
+            </label>
+            <input
+              type="text"
+              id="tokenName"
+              data-bind="tokenName"
+              class="input"
+              placeholder={t({
+                message: "e.g. iOS Shortcuts",
+                comment: "@context: Placeholder for API token name input",
+              })}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            class="btn"
+            data-attr:disabled="$_tokenLoading || !$tokenName.trim()"
+          >
+            {t({
+              message: "Generate Token",
+              comment: "@context: Button to create new API token",
+            })}
+          </button>
+        </form>
+      </div>
+
+      {/* Token list */}
+      {tokens.length > 0 && (
+        <div>
+          <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-2">
+            {t({
+              message: "Active Tokens",
+              comment: "@context: Heading for list of active API tokens",
+            })}
+          </h3>
+          <div class="border border-border rounded-lg px-4">
+            {tokens.map((token) => (
+              <TokenRow key={token.id} token={token} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Usage examples */}
+      <div>
+        <h3 class="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-2">
+          {t({
+            message: "Usage",
+            comment: "@context: Heading for API token usage examples",
+          })}
+        </h3>
+        <div class="flex flex-col gap-3 text-sm">
+          <div>
+            <div class="text-muted-foreground mb-1">
+              {t({
+                message: "Create a post with curl:",
+                comment: "@context: Label for curl example",
+              })}
+            </div>
+            <pre class="bg-muted px-3 py-2 rounded text-xs overflow-x-auto">
+              <code>
+                {`curl -X POST ${siteUrl}/api/posts \\
+  -H "Authorization: Bearer jnt_YOUR_TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{"format":"note","body":"Hello from the API"}'`}
+              </code>
+            </pre>
+          </div>
+          <div>
+            <div class="text-muted-foreground mb-1">
+              {t({
+                message: "List posts:",
+                comment: "@context: Label for list posts curl example",
+              })}
+            </div>
+            <pre class="bg-muted px-3 py-2 rounded text-xs overflow-x-auto">
+              <code>
+                {`curl ${siteUrl}/api/posts \\
+  -H "Authorization: Bearer jnt_YOUR_TOKEN"`}
+              </code>
+            </pre>
+          </div>
+          <p class="text-muted-foreground">
+            <a
+              href={API_DOCS_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="underline hover:text-foreground transition-colors"
+            >
+              {t({
+                message: "API reference",
+                comment: "@context: Link to API documentation",
+              })}
+            </a>
+            {" — "}
+            {t({
+              message: "all available endpoints and request formats.",
+              comment: "@context: Description after API reference link",
+            })}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/dash/settings/AvatarContent.tsx

@@ -50,6 +50,14 @@ export function AvatarContent({
       message: "Upload failed. Please try again.",
       comment: "@context: Error message when avatar upload fails",
     }),
+    save: t({
+      message: "Save",
+      comment: "@context: Button to save settings changes",
+    }),
+    cancel: t({
+      message: "Cancel",
+      comment: "@context: Button to cancel settings changes",
+    }),
   }).replace(/</g, "\\u003c");
 
   return (