@jant/core 0.3.34 → 0.3.36

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

@@ -3,7 +3,6 @@
  */
 
 import { useLingui } from "@lingui/react/macro";
-import { SettingsNav } from "./SettingsNav.js";
 
 export function AccountContent({ userName }: { userName: string }) {
   const { t } = useLingui();
@@ -11,152 +10,148 @@ export function AccountContent({ userName }: { userName: string }) {
   const profileSignals = JSON.stringify({ userName }).replace(/</g, "\\u003c");
 
   return (
-    <>
-      <SettingsNav currentTab="account" />
-
-      <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 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"
+        <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"
           >
-            <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>
+            <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" />
+      <hr class="my-8" />
 
-        <form
-          data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
-          data-on:submit__prevent="@post('/dash/settings/password')"
-          data-indicator="_passwordLoading"
-        >
-          <h2 class="text-lg font-semibold mb-4">
-            {t({
-              message: "Change Password",
-              comment: "@context: Settings section heading",
-            })}
-          </h2>
-          <div 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>
+      <form
+        data-signals="{currentPassword: '', newPassword: '', confirmPassword: ''}"
+        data-on:submit__prevent="@post('/dash/settings/password')"
+        data-indicator="_passwordLoading"
+      >
+        <h2 class="text-lg font-semibold mb-4">
+          {t({
+            message: "Change Password",
+            comment: "@context: Settings section heading",
+          })}
+        </h2>
+        <div 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: "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>
+          <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>
+        </div>
 
-          <button
-            type="submit"
-            class="btn mt-4"
-            data-attr:disabled="$_passwordLoading"
+        <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"
           >
-            <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>
-    </>
+            <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/AvatarContent.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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",
+    }),
+  }).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}