@jant/core 0.3.35 → 0.3.37

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

@@ -0,0 +1,78 @@
+/**
+ * Avatar settings page — extracted from GeneralContent
+ *
+ * Wraps the <jant-settings-avatar> Lit component with translated labels.
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+export function AvatarContent({
+  siteAvatarUrl,
+  showHeaderAvatar,
+}: {
+  siteAvatarUrl: string;
+  showHeaderAvatar: boolean;
+}) {
+  const { t } = useLingui();
+
+  const labels = JSON.stringify({
+    blogAvatar: t({
+      message: "Blog Avatar",
+      comment: "@context: Settings section heading for avatar",
+    }),
+    uploadAvatar: t({
+      message: "Upload Avatar",
+      comment: "@context: Button to upload avatar image",
+    }),
+    remove: t({
+      message: "Remove",
+      comment: "@context: Button to remove the blog avatar",
+    }),
+    avatarHelp: t({
+      message:
+        "This is used for your favicon and apple-touch-icon. For best results, upload a square image at least 180x180 pixels.",
+      comment: "@context: Help text for avatar upload",
+    }),
+    displayInHeader: t({
+      message: "Display avatar in my site header",
+      comment: "@context: Checkbox to show avatar in the site header",
+    }),
+    processing: t({
+      message: "Processing...",
+      comment:
+        "@context: Avatar upload button text while generating favicon variants",
+    }),
+    uploading: t({
+      message: "Uploading...",
+      comment: "@context: Avatar upload button text while uploading",
+    }),
+    uploadError: t({
+      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 (
+    <div class="flex flex-col max-w-lg">
+      <jant-settings-avatar
+        avatar-url={siteAvatarUrl}
+        show-in-header={showHeaderAvatar || undefined}
+        labels={labels}
+      >
+        {/* SSR fallback skeleton */}
+        <div>
+          <h2 class="skel-label" />
+          <div class="skel-section-sm" />
+        </div>
+      </jant-settings-avatar>
+    </div>
+  );
+}

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

@@ -1,18 +1,13 @@
 /**
  * General settings form
  *
- * Server-side template that renders Lit Web Components for the
- * settings page. Provides translated labels, initial data, and
- * timezone/language options as JSON attributes.
- *
- * The Lit components <jant-settings-avatar> and <jant-settings-general>
- * handle all form state and rendering. The settings-bridge.ts script
- * handles server communication.
+ * Server-side template that renders the <jant-settings-general> Lit
+ * component for site name, description, language, timezone, footer, and SEO.
+ * The settings-bridge.ts script handles server communication.
  */
 
 import { useLingui } from "@lingui/react/macro";
 import type { TimezoneEntry } from "../../../lib/timezones.js";
-import { SettingsNav } from "./SettingsNav.js";
 
 export function GeneralContent({
   siteName,
@@ -20,8 +15,6 @@ export function GeneralContent({
   siteLanguage,
   siteNameFallback,
   siteDescriptionFallback,
-  siteAvatarUrl,
-  showHeaderAvatar,
   timeZone,
   siteFooter,
   noindex,
@@ -32,8 +25,6 @@ export function GeneralContent({
   siteLanguage: string;
   siteNameFallback: string;
   siteDescriptionFallback: string;
-  siteAvatarUrl: string;
-  showHeaderAvatar: boolean;
   timeZone: string;
   siteFooter: string;
   noindex: boolean;
@@ -42,40 +33,6 @@ export function GeneralContent({
   const { t } = useLingui();
 
   const labels = JSON.stringify({
-    blogAvatar: t({
-      message: "Blog Avatar",
-      comment: "@context: Settings section heading for avatar",
-    }),
-    uploadAvatar: t({
-      message: "Upload Avatar",
-      comment: "@context: Button to upload avatar image",
-    }),
-    remove: t({
-      message: "Remove",
-      comment: "@context: Button to remove the blog avatar",
-    }),
-    avatarHelp: t({
-      message:
-        "This is used for your favicon and apple-touch-icon. For best results, upload a square image at least 180x180 pixels.",
-      comment: "@context: Help text for avatar upload",
-    }),
-    displayInHeader: t({
-      message: "Display avatar in my site header",
-      comment: "@context: Checkbox to show avatar in the site header",
-    }),
-    processing: t({
-      message: "Processing...",
-      comment:
-        "@context: Avatar upload button text while generating favicon variants",
-    }),
-    uploading: t({
-      message: "Uploading...",
-      comment: "@context: Avatar upload button text while uploading",
-    }),
-    uploadError: t({
-      message: "Upload failed. Please try again.",
-      comment: "@context: Error message when avatar upload fails",
-    }),
     general: t({
       message: "General",
       comment: "@context: Settings section heading",
@@ -154,23 +111,7 @@ export function GeneralContent({
 
   return (
     <>
-      <SettingsNav currentTab="general" />
-
       <div class="flex flex-col max-w-lg">
-        <jant-settings-avatar
-          avatar-url={siteAvatarUrl}
-          show-in-header={showHeaderAvatar || undefined}
-          labels={labels}
-        >
-          {/* SSR fallback skeleton */}
-          <div>
-            <h2 class="skel-label" />
-            <div class="skel-section-sm" />
-          </div>
-        </jant-settings-avatar>
-
-        <hr class="my-8" />
-
         <jant-settings-general
           labels={labels}
           timezones={timezonesJson}

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

@@ -0,0 +1,159 @@
+/**
+ * Session management: view active sessions and revoke them
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import { formatDate } from "../../../lib/time.js";
+
+export interface SessionInfo {
+  token: string;
+  ipAddress: string | null;
+  userAgent: string | null;
+  createdAt: number;
+  isCurrent: boolean;
+}
+
+/**
+ * Parse a user-agent string into a human-readable device description.
+ *
+ * @param ua - Raw User-Agent header value
+ * @returns Short description like "Chrome on macOS" or "Safari on iPhone"
+ *
+ * @example
+ * ```ts
+ * parseDevice("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ... Chrome/120")
+ * // "Chrome on macOS"
+ * ```
+ */
+function parseDevice(ua: string | null): string | null {
+  if (!ua) return null;
+
+  let browser = "Unknown browser";
+  if (ua.includes("Firefox/")) browser = "Firefox";
+  else if (ua.includes("Edg/")) browser = "Edge";
+  else if (ua.includes("OPR/") || ua.includes("Opera/")) browser = "Opera";
+  else if (ua.includes("Chrome/") && ua.includes("Safari/")) browser = "Chrome";
+  else if (ua.includes("Safari/") && !ua.includes("Chrome/"))
+    browser = "Safari";
+  else if (ua.includes("curl/")) browser = "curl";
+
+  let os = "";
+  if (ua.includes("iPhone")) os = "iPhone";
+  else if (ua.includes("iPad")) os = "iPad";
+  else if (ua.includes("Android")) os = "Android";
+  else if (ua.includes("Macintosh") || ua.includes("Mac OS X")) os = "macOS";
+  else if (ua.includes("Windows")) os = "Windows";
+  else if (ua.includes("Linux")) os = "Linux";
+  else if (ua.includes("CrOS")) os = "ChromeOS";
+
+  return os ? `${browser} on ${os}` : browser;
+}
+
+/** Monitor icon for desktop sessions */
+const ICON_DESKTOP = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>`;
+
+/** Smartphone icon for mobile sessions */
+const ICON_MOBILE = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>`;
+
+function isMobileUA(ua: string | null): boolean {
+  if (!ua) return false;
+  return /iPhone|iPad|iPod|Android|Mobile/i.test(ua);
+}
+
+function SessionRow({ session }: { session: SessionInfo }) {
+  const { t } = useLingui();
+  const device = parseDevice(session.userAgent);
+  const icon = isMobileUA(session.userAgent) ? ICON_MOBILE : ICON_DESKTOP;
+
+  return (
+    <div class="py-4 flex items-start gap-4 border-b border-border last:border-b-0">
+      <span
+        class="text-muted-foreground mt-0.5 shrink-0"
+        dangerouslySetInnerHTML={{ __html: icon }}
+      />
+      <div class="flex-1 min-w-0">
+        <div class="font-medium flex items-center gap-2">
+          {device ??
+            t({
+              message: "Unknown device",
+              comment:
+                "@context: Fallback label when session device can't be identified",
+            })}
+          {session.isCurrent && (
+            <span class="badge text-xs">
+              {t({
+                message: "Current",
+                comment:
+                  "@context: Badge indicating the current active session",
+              })}
+            </span>
+          )}
+        </div>
+        <div class="text-sm text-muted-foreground mt-0.5">
+          {session.ipAddress && (
+            <>
+              <span>{session.ipAddress}</span>
+              <span class="mx-2">&middot;</span>
+            </>
+          )}
+          {t({
+            message: `Signed in ${formatDate(session.createdAt)}`,
+            comment: "@context: Session creation date",
+          })}
+        </div>
+      </div>
+      {!session.isCurrent && (
+        <button
+          type="button"
+          class="btn-sm-ghost text-destructive"
+          data-on:click__prevent={`@post('/settings/account/sessions/${session.token}/revoke')`}
+        >
+          {t({
+            message: "Revoke",
+            comment: "@context: Button to revoke a session",
+          })}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function SessionsContent({ sessions }: { sessions: SessionInfo[] }) {
+  const { t } = useLingui();
+
+  return (
+    <div class="flex flex-col gap-6 max-w-2xl">
+      <div>
+        <h2 class="text-lg font-medium mb-1">
+          {t({
+            message: "Active Sessions",
+            comment: "@context: Settings section heading for active sessions",
+          })}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "These devices are currently signed in to your account. Revoke any session you don't recognize.",
+            comment: "@context: Description for session management",
+          })}
+        </p>
+      </div>
+
+      {sessions.length > 0 ? (
+        <div class="border border-border rounded-lg px-4">
+          {sessions.map((session) => (
+            <SessionRow key={session.token} session={session} />
+          ))}
+        </div>
+      ) : (
+        <p class="text-sm text-muted-foreground">
+          {t({
+            message: "No active sessions found.",
+            comment:
+              "@context: Empty state when no sessions exist (shouldn't normally appear)",
+          })}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,266 @@
+/**
+ * Settings root page — iOS-style grouped list linking to sub-pages
+ */
+
+import { useLingui } from "@lingui/react/macro";
+
+/** Chevron right icon shared by all rows */
+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 SettingsItem({
+  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>
+  );
+}
+
+// Lucide icon SVG paths (16x16, stroke-based)
+const ICONS = {
+  settings: `<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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  image: `<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="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`,
+  menu: `<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"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`,
+  palette: `<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"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>`,
+  type: `<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"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" x2="15" y1="20" y2="20"/><line x1="12" x2="12" y1="4" y2="20"/></svg>`,
+  code: `<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"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+  arrowRightLeft: `<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="m16 3 4 4-4 4"/><path d="M20 7H4"/><path d="m8 21-4-4 4-4"/><path d="M4 17h16"/></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>`,
+  key: `<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="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>`,
+  shield: `<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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>`,
+};
+
+// oklch-based colors for icon backgrounds
+const COLORS = {
+  blue: "oklch(0.55 0.2 250)",
+  purple: "oklch(0.55 0.2 300)",
+  green: "oklch(0.55 0.18 155)",
+  orange: "oklch(0.6 0.18 55)",
+  pink: "oklch(0.6 0.2 350)",
+  indigo: "oklch(0.5 0.2 275)",
+  amber: "oklch(0.6 0.16 75)",
+  teal: "oklch(0.55 0.15 185)",
+  gray: "oklch(0.55 0.01 250)",
+};
+
+export function SettingsRootContent() {
+  const { t } = useLingui();
+
+  return (
+    <div class="settings-root">
+      {/* Site */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Site",
+            comment: "@context: Settings group label for site settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/settings/general"
+            icon={ICONS.settings}
+            color={COLORS.blue}
+            name={t({
+              message: "General",
+              comment: "@context: Settings item — general settings",
+            })}
+            description={t({
+              message: "Name, description, language",
+              comment: "@context: Settings item description for general",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Design */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Design",
+            comment: "@context: Settings group label for design settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/settings/avatar"
+            icon={ICONS.image}
+            color={COLORS.purple}
+            name={t({
+              message: "Avatar",
+              comment: "@context: Settings item — avatar settings",
+            })}
+            description={t({
+              message: "Favicon and header icon",
+              comment: "@context: Settings item description for avatar",
+            })}
+          />
+          <SettingsItem
+            href="/settings/navigation"
+            icon={ICONS.menu}
+            color={COLORS.green}
+            name={t({
+              message: "Navigation",
+              comment: "@context: Settings item — navigation settings",
+            })}
+            description={t({
+              message: "Header links, featured",
+              comment: "@context: Settings item description for navigation",
+            })}
+          />
+          <SettingsItem
+            href="/settings/color-theme"
+            icon={ICONS.palette}
+            color={COLORS.orange}
+            name={t({
+              message: "Color Theme",
+              comment: "@context: Settings item — color theme settings",
+            })}
+            description={t({
+              message: "Color theme",
+              comment: "@context: Settings item description for color theme",
+            })}
+          />
+          <SettingsItem
+            href="/settings/font-theme"
+            icon={ICONS.type}
+            color={COLORS.pink}
+            name={t({
+              message: "Font Theme",
+              comment: "@context: Settings item — font theme settings",
+            })}
+            description={t({
+              message: "Typography",
+              comment: "@context: Settings item description for font theme",
+            })}
+          />
+          <SettingsItem
+            href="/settings/custom-css"
+            icon={ICONS.code}
+            color={COLORS.indigo}
+            name={t({
+              message: "Custom CSS",
+              comment: "@context: Settings item — custom CSS settings",
+            })}
+            description={t({
+              message: "Custom styling",
+              comment: "@context: Settings item description for custom CSS",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Advanced */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Advanced",
+            comment: "@context: Settings group label for advanced settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/settings/custom-urls"
+            icon={ICONS.arrowRightLeft}
+            color={COLORS.amber}
+            name={t({
+              message: "Custom URLs",
+              comment: "@context: Settings item — custom URL settings",
+            })}
+            description={t({
+              message: "Redirects and custom paths",
+              comment: "@context: Settings item description for custom URLs",
+            })}
+          />
+          <SettingsItem
+            href="/settings/api-tokens"
+            icon={ICONS.key}
+            color={COLORS.teal}
+            name={t({
+              message: "API Tokens",
+              comment: "@context: Settings item — API token settings",
+            })}
+            description={t({
+              message: "Bearer tokens for scripts and automation",
+              comment: "@context: Settings item description for API tokens",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Account */}
+      <div>
+        <div class="settings-group-label">
+          {t({
+            message: "Account",
+            comment: "@context: Settings group label for account settings",
+          })}
+        </div>
+        <div class="settings-group">
+          <SettingsItem
+            href="/settings/account"
+            icon={ICONS.shield}
+            color={COLORS.gray}
+            name={t({
+              message: "Account",
+              comment: "@context: Settings item — account settings",
+            })}
+            description={t({
+              message: "Sessions, password, export",
+              comment: "@context: Settings item description for account",
+            })}
+          />
+        </div>
+      </div>
+
+      {/* Sign Out */}
+      <div class="pt-2 text-center">
+        <button
+          type="button"
+          data-on:click__prevent="@post('/signout')"
+          class="text-sm text-destructive hover:text-destructive/80 transition-colors"
+        >
+          {t({
+            message: "Sign Out",
+            comment: "@context: Settings link — sign out action",
+          })}
+        </button>
+      </div>
+    </div>
+  );
+}