@jant/core 0.3.25 → 0.3.27

package/src/ui/dash/pages/UnifiedPagesContent.tsx

@@ -0,0 +1,203 @@
+/**
+ * Unified pages list - navigation items + other pages
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Page, NavItem } from "../../../types.js";
+import { ListItemRow, ActionButtons, CrudPageHeader } from "../index.js";
+
+export function UnifiedPagesContent({
+  navItems,
+  otherPages,
+}: {
+  navItems: NavItem[];
+  otherPages: Page[];
+}) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Pages",
+          comment: "@context: Pages main heading",
+        })}
+      >
+        <div class="flex gap-2">
+          <a href="/dash/pages/links/new" class="btn-outline">
+            {t({
+              message: "Add Link",
+              comment: "@context: Button to add a navigation link",
+            })}
+          </a>
+          <a href="/dash/pages/new" class="btn">
+            {t({
+              message: "New Page",
+              comment: "@context: Button to create new page",
+            })}
+          </a>
+        </div>
+      </CrudPageHeader>
+
+      {/* Navigation section */}
+      <section class="mb-8">
+        <h2 class="text-lg font-medium mb-3">
+          {t({
+            message: "Your site navigation",
+            comment: "@context: Section heading for navigation items",
+          })}
+        </h2>
+        {navItems.length === 0 ? (
+          <p class="text-sm text-muted-foreground py-4">
+            {t({
+              message:
+                "No navigation links yet. Add pages to navigation or create links.",
+              comment: "@context: Empty state for navigation section",
+            })}
+          </p>
+        ) : (
+          <div id="nav-links-list" class="flex flex-col divide-y">
+            {navItems.map((item) => (
+              <ListItemRow
+                key={item.id}
+                actions={
+                  item.type === "page" ? (
+                    <>
+                      <ActionButtons
+                        editHref={
+                          item.pageId
+                            ? `/dash/pages/${item.pageId}/edit`
+                            : undefined
+                        }
+                        editLabel={t({
+                          message: "Edit",
+                          comment: "@context: Button to edit page",
+                        })}
+                      />
+                      <button
+                        type="button"
+                        class="btn-sm-ghost"
+                        data-on:click__prevent={`@post('/dash/pages/${item.pageId}/remove-from-nav')`}
+                      >
+                        {t({
+                          message: "Un-nav",
+                          comment:
+                            "@context: Button to remove page from navigation",
+                        })}
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <ActionButtons
+                        editHref={`/dash/pages/links/${item.id}/edit`}
+                        editLabel={t({
+                          message: "Edit",
+                          comment: "@context: Button to edit link",
+                        })}
+                        deleteAction={`/dash/pages/links/${item.id}/delete`}
+                        deleteLabel={t({
+                          message: "Delete",
+                          comment: "@context: Button to delete link",
+                        })}
+                      />
+                    </>
+                  )
+                }
+              >
+                <div
+                  class="flex items-center gap-3 cursor-grab"
+                  data-id={item.id}
+                >
+                  <span class="text-muted-foreground select-none">⠿</span>
+                  <div class="flex items-center gap-2">
+                    <span class="font-medium">{item.label}</span>
+                    <code class="text-sm text-muted-foreground bg-muted px-1 rounded">
+                      {item.url}
+                    </code>
+                    <span class="badge-secondary">
+                      {item.type === "page"
+                        ? t({
+                            message: "page",
+                            comment: "@context: Nav item type badge",
+                          })
+                        : t({
+                            message: "link",
+                            comment: "@context: Nav item type badge",
+                          })}
+                    </span>
+                  </div>
+                </div>
+              </ListItemRow>
+            ))}
+          </div>
+        )}
+      </section>
+
+      {/* Other pages section */}
+      <section>
+        <h2 class="text-lg font-medium mb-3">
+          {t({
+            message: "Other pages",
+            comment: "@context: Section heading for pages not in navigation",
+          })}
+        </h2>
+        {otherPages.length === 0 ? (
+          <p class="text-sm text-muted-foreground py-4">
+            {t({
+              message: "All pages are in your navigation.",
+              comment: "@context: Empty state when all pages are in nav",
+            })}
+          </p>
+        ) : (
+          <div class="flex flex-col divide-y">
+            {otherPages.map((page) => (
+              <ListItemRow
+                key={page.id}
+                actions={
+                  <>
+                    <button
+                      type="button"
+                      class="btn-sm-outline"
+                      data-on:click__prevent={`@post('/dash/pages/${page.id}/add-to-nav')`}
+                    >
+                      {t({
+                        message: "Add to nav",
+                        comment: "@context: Button to add page to navigation",
+                      })}
+                    </button>
+                    <ActionButtons
+                      editHref={`/dash/pages/${page.id}/edit`}
+                      editLabel={t({
+                        message: "Edit",
+                        comment: "@context: Button to edit page",
+                      })}
+                      viewHref={
+                        page.status !== "draft" ? `/${page.slug}` : undefined
+                      }
+                      viewLabel={t({
+                        message: "View",
+                        comment: "@context: Button to view page on public site",
+                      })}
+                    />
+                  </>
+                }
+              >
+                <a
+                  href={`/dash/pages/${page.id}`}
+                  class="font-medium hover:underline"
+                >
+                  {page.title ||
+                    t({
+                      message: "Untitled",
+                      comment: "@context: Default title for untitled page",
+                    })}
+                </a>
+                <p class="text-sm text-muted-foreground mt-1">/{page.slug}</p>
+              </ListItemRow>
+            ))}
+          </div>
+        )}
+      </section>
+    </>
+  );
+}

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

@@ -0,0 +1,176 @@
+/**
+ * Account settings: profile + password change forms
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import { SettingsNav } from "./SettingsNav.js";
+
+export function AccountContent({ userName }: { userName: string }) {
+  const { t } = useLingui();
+
+  const profileSignals = JSON.stringify({ userName }).replace(/</g, "\\u003c");
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-2">
+        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
+      </h1>
+      <SettingsNav currentTab="account" />
+
+      <div class="flex flex-col gap-6 max-w-lg">
+        <form
+          data-signals={profileSignals}
+          data-on:submit__prevent="@post('/dash/settings/account')"
+          data-indicator="_profileLoading"
+        >
+          <div class="card">
+            <header>
+              <h2>
+                {t({
+                  message: "Profile",
+                  comment: "@context: Account settings section heading",
+                })}
+              </h2>
+            </header>
+            <section 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>
+            </section>
+          </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>
+
+        <form
+          data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
+          data-on:submit__prevent="@post('/dash/settings/password')"
+          data-indicator="_passwordLoading"
+        >
+          <div class="card">
+            <header>
+              <h2>
+                {t({
+                  message: "Change Password",
+                  comment: "@context: Settings section heading",
+                })}
+              </h2>
+            </header>
+            <section class="flex flex-col gap-4">
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Current Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="currentPassword"
+                  class="input"
+                  required
+                  autocomplete="current-password"
+                />
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "New Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="newPassword"
+                  class="input"
+                  required
+                  minlength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+
+              <div class="field">
+                <label class="label">
+                  {t({
+                    message: "Confirm New Password",
+                    comment: "@context: Password form field",
+                  })}
+                </label>
+                <input
+                  type="password"
+                  data-bind="confirmPassword"
+                  class="input"
+                  required
+                  minlength={8}
+                  autocomplete="new-password"
+                />
+              </div>
+            </section>
+          </div>
+
+          <button
+            type="submit"
+            class="btn mt-4"
+            data-attr:disabled="$_passwordLoading"
+          >
+            <svg
+              data-show="$_passwordLoading"
+              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: "Change Password",
+              comment: "@context: Button to change password",
+            })}
+          </button>
+        </form>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,254 @@
+/**
+ * Appearance settings: color theme picker + custom CSS form
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { ColorTheme } from "../../color-themes.js";
+import type { FontTheme } from "../../font-themes.js";
+import { SettingsNav } from "./SettingsNav.js";
+
+function ThemeCard({
+  theme,
+  selected,
+}: {
+  theme: ColorTheme;
+  selected: boolean;
+}) {
+  const expr = `$theme === '${theme.id}'`;
+  const { preview } = theme;
+
+  return (
+    <label
+      class={`block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`}
+      data-class:border-primary={expr}
+      data-class:border-border={`$theme !== '${theme.id}'`}
+    >
+      <div class="grid grid-cols-2">
+        <div
+          class="p-5"
+          style={`background-color:${preview.lightBg};color:${preview.lightText}`}
+        >
+          <input
+            type="radio"
+            name="theme"
+            value={theme.id}
+            data-bind="theme"
+            checked={selected || undefined}
+            class="mb-1"
+          />
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in light mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.lightLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+        <div
+          class="p-5"
+          style={`background-color:${preview.darkBg};color:${preview.darkText}`}
+        >
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in dark mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.darkLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export function AppearanceContent({
+  themes,
+  currentThemeId,
+  fontThemes,
+  currentFontThemeId,
+  customCSS,
+}: {
+  themes: ColorTheme[];
+  currentThemeId: string;
+  fontThemes: FontTheme[];
+  currentFontThemeId: string;
+  customCSS: string;
+}) {
+  const { t } = useLingui();
+
+  const themeSignals = JSON.stringify({ theme: currentThemeId }).replace(
+    /</g,
+    "\\u003c",
+  );
+
+  const cssSignals = JSON.stringify({ customCSS }).replace(/</g, "\\u003c");
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-2">
+        {t({ message: "Settings", comment: "@context: Dashboard heading" })}
+      </h1>
+      <SettingsNav currentTab="appearance" />
+
+      <div
+        data-signals={themeSignals}
+        data-on:change="@post('/dash/settings/appearance')"
+        class="max-w-3xl mb-8"
+      >
+        <fieldset>
+          <legend class="text-lg font-semibold">
+            {t({
+              message: "Color theme",
+              comment: "@context: Appearance settings heading",
+            })}
+          </legend>
+          <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.",
+              comment: "@context: Appearance settings description",
+            })}
+          </p>
+
+          <div class="flex flex-col gap-4">
+            {themes.map((theme) => (
+              <ThemeCard
+                key={theme.id}
+                theme={theme}
+                selected={theme.id === currentThemeId}
+              />
+            ))}
+          </div>
+        </fieldset>
+      </div>
+
+      <div
+        data-signals={JSON.stringify({ fontTheme: currentFontThemeId }).replace(
+          /</g,
+          "\\u003c",
+        )}
+        data-on:change="@post('/dash/settings/font-theme')"
+        class="max-w-3xl"
+      >
+        <fieldset>
+          <legend class="text-lg font-semibold">
+            {t({
+              message: "Font theme",
+              comment: "@context: Appearance settings heading for font theme",
+            })}
+          </legend>
+          <p class="text-sm text-muted-foreground mb-4">
+            {t({
+              message:
+                "Choose a font for your site. All options use system fonts for fast loading.",
+              comment: "@context: Font theme settings description",
+            })}
+          </p>
+          <div class="flex flex-col gap-2">
+            {fontThemes.map((ft) => (
+              <label
+                key={ft.id}
+                class={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${ft.id === currentFontThemeId ? "border-primary" : "border-border"}`}
+                data-class:border-primary={`$fontTheme === '${ft.id}'`}
+                data-class:border-border={`$fontTheme !== '${ft.id}'`}
+              >
+                <input
+                  type="radio"
+                  name="fontTheme"
+                  value={ft.id}
+                  data-bind="fontTheme"
+                  checked={ft.id === currentFontThemeId || undefined}
+                  class="mt-1"
+                />
+                <div>
+                  <div class="font-medium">{ft.name}</div>
+                  <div class="text-sm text-muted-foreground">
+                    {ft.description}
+                  </div>
+                  <div
+                    class="mt-1 text-sm"
+                    style={`font-family:${ft.fontFamily}`}
+                  >
+                    The quick brown fox jumps over the lazy dog.{" "}
+                    敏捷的棕色狐狸跳过了懒狗。
+                  </div>
+                </div>
+              </label>
+            ))}
+          </div>
+        </fieldset>
+      </div>
+
+      <form
+        data-signals={cssSignals}
+        data-on:submit__prevent="@post('/dash/settings/custom-css')"
+        data-indicator="_cssLoading"
+        class="max-w-3xl mt-8"
+      >
+        <fieldset>
+          <legend class="text-lg font-semibold">
+            {t({
+              message: "Custom CSS",
+              comment: "@context: Appearance settings heading for custom CSS",
+            })}
+          </legend>
+          <p class="text-sm text-muted-foreground mb-4">
+            {t({
+              message:
+                "Add custom CSS to override any styles. Use data attributes like [data-page], [data-post], [data-format] to target specific elements.",
+              comment: "@context: Custom CSS settings description",
+            })}
+          </p>
+          <textarea
+            data-bind="customCSS"
+            class="textarea font-mono text-sm min-h-32"
+            rows={8}
+            placeholder={t({
+              message: "/* Your custom CSS here */",
+              comment: "@context: Custom CSS textarea placeholder",
+            })}
+          >
+            {customCSS}
+          </textarea>
+        </fieldset>
+        <button
+          type="submit"
+          class="btn mt-4"
+          data-attr:disabled="$_cssLoading"
+        >
+          <svg
+            data-show="$_cssLoading"
+            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 CSS",
+            comment: "@context: Button to save custom CSS",
+          })}
+        </button>
+      </form>
+    </>
+  );
+}