@jant/core 0.3.25 → 0.3.27

package/src/ui/color-themes.ts

@@ -118,9 +118,40 @@ function defineTheme(opts: {
 }
 
 export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
+  defineTheme({
+    id: "halloween",
+    name: "Halloween",
+    preview: {
+      lightBg: "#f9f2e3",
+      lightText: "#352200",
+      lightLink: "#b84400",
+      darkBg: "#1e1000",
+      darkText: "#dfc390",
+      darkLink: "#ff8c00",
+    },
+    light: {
+      bg: "oklch(0.97 0.015 75)",
+      fg: "oklch(0.25 0.04 55)",
+      primary: "oklch(0.47 0.17 50)",
+      primaryFg: "oklch(0.98 0.01 75)",
+      muted: "oklch(0.93 0.02 75)",
+      mutedFg: "oklch(0.5 0.025 55)",
+      border: "oklch(0.88 0.025 75)",
+    },
+    dark: {
+      bg: "oklch(0.16 0.03 50)",
+      fg: "oklch(0.85 0.025 75)",
+      primary: "oklch(0.72 0.19 55)",
+      primaryFg: "oklch(0.14 0.03 50)",
+      muted: "oklch(0.22 0.025 50)",
+      mutedFg: "oklch(0.62 0.02 75)",
+      border: "oklch(0.28 0.025 50)",
+    },
+  }),
+
   {
     id: "default",
-    name: "Default",
+    name: "Panda",
     light: {},
     dark: {},
     preview: {
@@ -226,37 +257,6 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     },
   }),
 
-  defineTheme({
-    id: "halloween",
-    name: "Halloween",
-    preview: {
-      lightBg: "#f9f2e3",
-      lightText: "#352200",
-      lightLink: "#cc5500",
-      darkBg: "#1e1000",
-      darkText: "#dfc390",
-      darkLink: "#ff8c00",
-    },
-    light: {
-      bg: "oklch(0.97 0.015 75)",
-      fg: "oklch(0.25 0.04 55)",
-      primary: "oklch(0.6 0.2 50)",
-      primaryFg: "oklch(0.98 0.01 75)",
-      muted: "oklch(0.93 0.02 75)",
-      mutedFg: "oklch(0.5 0.025 55)",
-      border: "oklch(0.88 0.025 75)",
-    },
-    dark: {
-      bg: "oklch(0.16 0.03 50)",
-      fg: "oklch(0.85 0.025 75)",
-      primary: "oklch(0.72 0.19 55)",
-      primaryFg: "oklch(0.14 0.03 50)",
-      muted: "oklch(0.22 0.025 50)",
-      mutedFg: "oklch(0.62 0.02 75)",
-      border: "oklch(0.28 0.025 50)",
-    },
-  }),
-
   defineTheme({
     id: "notepad",
     name: "Notepad",
@@ -294,7 +294,7 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     preview: {
       lightBg: "#f7eef5",
       lightText: "#2e1e2c",
-      lightLink: "#9845c8",
+      lightLink: "#7a30a8",
       darkBg: "#1d1428",
       darkText: "#d4c2d0",
       darkLink: "#c080fc",
@@ -302,7 +302,7 @@ export const BUILTIN_COLOR_THEMES: ColorTheme[] = [
     light: {
       bg: "oklch(0.97 0.012 325)",
       fg: "oklch(0.25 0.02 310)",
-      primary: "oklch(0.55 0.2 300)",
+      primary: "oklch(0.45 0.2 300)",
       primaryFg: "oklch(0.98 0.008 325)",
       muted: "oklch(0.93 0.016 325)",
       mutedFg: "oklch(0.52 0.015 310)",

package/src/ui/compose/ComposeDialog.tsx

@@ -319,34 +319,53 @@ export const ComposeDialog: FC<ComposeDialogProps> = ({ collections }) => {
                 <button
                   type="button"
                   class="btn-outline text-sm"
-                  data-attr-disabled="$_composeLoading"
+                  data-attr:disabled="$_composeLoading"
                   data-on:click="$status = 'draft'; document.querySelector('#compose-dialog form').requestSubmit()"
                 >
-                  <span data-show="!$_composeLoading">
-                    {t({
-                      message: "Draft",
-                      comment: "@context: Compose button - save as draft",
-                    })}
-                  </span>
-                  <span data-show="$_composeLoading">...</span>
+                  <svg
+                    data-show="$_composeLoading"
+                    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: "Draft",
+                    comment: "@context: Compose button - save as draft",
+                  })}
                 </button>
                 <button
                   type="submit"
                   class="btn text-sm"
-                  data-attr-disabled="$_composeLoading"
+                  data-attr:disabled="$_composeLoading"
                 >
-                  <span data-show="!$_composeLoading">
-                    {t({
-                      message: "Post",
-                      comment: "@context: Compose button - publish post",
-                    })}
-                  </span>
-                  <span data-show="$_composeLoading">
-                    {t({
-                      message: "Posting...",
-                      comment: "@context: Compose loading text while posting",
-                    })}
-                  </span>
+                  <svg
+                    data-show="$_composeLoading"
+                    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: "Post",
+                    comment: "@context: Compose button - publish post",
+                  })}
                 </button>
               </div>
             </div>

package/src/ui/dash/PageForm.tsx

@@ -147,25 +147,31 @@ export const PageForm: FC<PageFormProps> = ({
 
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn" data-attr-disabled="$_loading">
-          <span data-show="!$_loading">
-            {isEdit
-              ? t({
-                  message: "Update Page",
-                  comment: "@context: Button to update existing page",
-                })
-              : t({
-                  message: "Create Page",
-                  comment: "@context: Button to create new page",
-                })}
-          </span>
-          <span data-show="$_loading">
-            {t({
-              message: "Processing...",
-              comment:
-                "@context: Loading text shown on submit button while request is in progress",
-            })}
-          </span>
+        <button type="submit" class="btn" data-attr:disabled="$_loading">
+          <svg
+            data-show="$_loading"
+            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>
+          {isEdit
+            ? t({
+                message: "Update Page",
+                comment: "@context: Button to update existing page",
+              })
+            : t({
+                message: "Create Page",
+                comment: "@context: Button to create new page",
+              })}
         </button>
         <a href={cancelUrl} class="btn-outline">
           {t({

package/src/ui/dash/PostForm.tsx

@@ -168,7 +168,7 @@ export const PostForm: FC<PostFormProps> = ({
                 r2PublicUrl,
                 s3PublicUrl,
               );
-              const mUrl = getMediaUrl(m.id, m.storageKey, pUrl);
+              const mUrl = getMediaUrl(m.storageKey, pUrl);
               const thumbUrl = getImageUrl(mUrl, imageTransformUrl, {
                 width: 150,
                 quality: 80,
@@ -288,25 +288,31 @@ export const PostForm: FC<PostFormProps> = ({
 
       {/* Submit */}
       <div class="flex gap-2">
-        <button type="submit" class="btn" data-attr-disabled="$_loading">
-          <span data-show="!$_loading">
-            {isEdit
-              ? t({
-                  message: "Update",
-                  comment: "@context: Button to update existing post",
-                })
-              : t({
-                  message: "Publish",
-                  comment: "@context: Button to publish new post",
-                })}
-          </span>
-          <span data-show="$_loading">
-            {t({
-              message: "Processing...",
-              comment:
-                "@context: Loading text shown on submit button while request is in progress",
-            })}
-          </span>
+        <button type="submit" class="btn" data-attr:disabled="$_loading">
+          <svg
+            data-show="$_loading"
+            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>
+          {isEdit
+            ? t({
+                message: "Update",
+                comment: "@context: Button to update existing post",
+              })
+            : t({
+                message: "Publish",
+                comment: "@context: Button to publish new post",
+              })}
         </button>
         <a href="/dash/posts" class="btn-outline">
           {t({ message: "Cancel", comment: "@context: Button to cancel form" })}

package/src/ui/dash/collections/CollectionForm.tsx

@@ -0,0 +1,153 @@
+/**
+ * Shared collection form (new + edit)
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../../types.js";
+
+export function CollectionForm({
+  collection,
+  isEdit,
+}: {
+  collection?: Collection;
+  isEdit?: boolean;
+}) {
+  const { t } = useLingui();
+
+  const signals = JSON.stringify({
+    title: collection?.title ?? "",
+    slug: collection?.slug ?? "",
+    description: collection?.description ?? "",
+  }).replace(/</g, "\\u003c");
+
+  const action = isEdit
+    ? `/dash/collections/${collection?.id}`
+    : "/dash/collections";
+
+  const heading = isEdit
+    ? t({ message: "Edit Collection", comment: "@context: Page heading" })
+    : t({ message: "New Collection", comment: "@context: Page heading" });
+
+  const submitLabel = isEdit
+    ? t({
+        message: "Update Collection",
+        comment: "@context: Button to save collection changes",
+      })
+    : t({
+        message: "Create Collection",
+        comment: "@context: Button to save new collection",
+      });
+
+  const cancelHref = isEdit
+    ? `/dash/collections/${collection?.id}`
+    : "/dash/collections";
+
+  return (
+    <>
+      <h1 class="text-2xl font-semibold mb-6">{heading}</h1>
+
+      <form
+        data-signals={signals}
+        data-on:submit__prevent={`@post('${action}')`}
+        data-indicator="_loading"
+        class="flex flex-col gap-4 max-w-lg"
+      >
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Title",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <input
+            type="text"
+            data-bind="title"
+            class="input"
+            required
+            placeholder={
+              isEdit
+                ? undefined
+                : t({
+                    message: "My Collection",
+                    comment: "@context: Collection title placeholder",
+                  })
+            }
+          />
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({ message: "Slug", comment: "@context: Collection form field" })}
+          </label>
+          <input
+            type="text"
+            data-bind="slug"
+            class="input"
+            required
+            pattern="[a-z0-9-]+"
+            placeholder={isEdit ? undefined : "my-collection"}
+          />
+          {!isEdit && (
+            <p class="text-xs text-muted-foreground mt-1">
+              {t({
+                message: "URL-safe identifier (lowercase, numbers, hyphens)",
+                comment: "@context: Collection path help text",
+              })}
+            </p>
+          )}
+        </div>
+
+        <div class="field">
+          <label class="label">
+            {t({
+              message: "Description (optional)",
+              comment: "@context: Collection form field",
+            })}
+          </label>
+          <textarea
+            data-bind="description"
+            class="textarea"
+            rows={3}
+            placeholder={
+              isEdit
+                ? undefined
+                : t({
+                    message: "What's this collection about?",
+                    comment: "@context: Collection description placeholder",
+                  })
+            }
+          >
+            {collection?.description ?? ""}
+          </textarea>
+        </div>
+
+        <div class="flex gap-2">
+          <button type="submit" class="btn" data-attr:disabled="$_loading">
+            <svg
+              data-show="$_loading"
+              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>
+            {submitLabel}
+          </button>
+          <a href={cancelHref} class="btn-outline">
+            {t({
+              message: "Cancel",
+              comment: "@context: Button to cancel form",
+            })}
+          </a>
+        </div>
+      </form>
+    </>
+  );
+}

package/src/ui/dash/collections/CollectionsListContent.tsx

@@ -0,0 +1,85 @@
+/**
+ * Collections list view
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection } from "../../../types.js";
+import {
+  EmptyState,
+  ListItemRow,
+  ActionButtons,
+  CrudPageHeader,
+} from "../index.js";
+
+export function CollectionsListContent({
+  collections,
+}: {
+  collections: Collection[];
+}) {
+  const { t } = useLingui();
+
+  return (
+    <>
+      <CrudPageHeader
+        title={t({
+          message: "Collections",
+          comment: "@context: Dashboard heading",
+        })}
+        ctaLabel={t({
+          message: "New Collection",
+          comment: "@context: Button to create new collection",
+        })}
+        ctaHref="/dash/collections/new"
+      />
+
+      {collections.length === 0 ? (
+        <EmptyState
+          message={t({
+            message: "No collections yet.",
+            comment: "@context: Empty state message",
+          })}
+          ctaText={t({
+            message: "New Collection",
+            comment: "@context: Button to create new collection",
+          })}
+          ctaHref="/dash/collections/new"
+        />
+      ) : (
+        <div class="flex flex-col divide-y">
+          {collections.map((col) => (
+            <ListItemRow
+              key={col.id}
+              actions={
+                <ActionButtons
+                  editHref={`/dash/collections/${col.id}/edit`}
+                  editLabel={t({
+                    message: "Edit",
+                    comment: "@context: Button to edit collection",
+                  })}
+                  viewHref={`/c/${col.slug}`}
+                  viewLabel={t({
+                    message: "View",
+                    comment: "@context: Button to view collection",
+                  })}
+                />
+              }
+            >
+              <a
+                href={`/dash/collections/${col.id}`}
+                class="font-medium hover:underline"
+              >
+                {col.title}
+              </a>
+              <p class="text-sm text-muted-foreground">/{col.slug}</p>
+              {col.description && (
+                <p class="text-sm text-muted-foreground mt-1">
+                  {col.description}
+                </p>
+              )}
+            </ListItemRow>
+          ))}
+        </div>
+      )}
+    </>
+  );
+}

package/src/ui/dash/collections/ViewCollectionContent.tsx

@@ -0,0 +1,92 @@
+/**
+ * Single collection detail view
+ */
+
+import { useLingui } from "@lingui/react/macro";
+import type { Collection, PostView } from "../../../types.js";
+import { ActionButtons } from "../index.js";
+import { encode } from "../../../lib/sqid.js";
+
+export function ViewCollectionContent({
+  collection,
+  posts,
+}: {
+  collection: Collection;
+  posts: PostView[];
+}) {
+  const { t } = useLingui();
+  const postsHeader = t({
+    message: "Posts in Collection ({count})",
+    comment: "@context: Collection posts section heading",
+    values: { count: String(posts.length) },
+  });
+
+  return (
+    <>
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h1 class="text-2xl font-semibold">{collection.title}</h1>
+          <p class="text-sm text-muted-foreground">/{collection.slug}</p>
+        </div>
+        <ActionButtons
+          editHref={`/dash/collections/${collection.id}/edit`}
+          editLabel={t({
+            message: "Edit",
+            comment: "@context: Button to edit collection",
+          })}
+          viewHref={`/c/${collection.slug}`}
+          viewLabel={t({
+            message: "View",
+            comment: "@context: Button to view collection",
+          })}
+        />
+      </div>
+
+      {collection.description && (
+        <p class="text-muted-foreground mb-6">{collection.description}</p>
+      )}
+
+      <div class="card">
+        <header>
+          <h2>{postsHeader}</h2>
+        </header>
+        <section>
+          {posts.length === 0 ? (
+            <p class="text-muted-foreground">
+              {t({
+                message: "No posts in this collection.",
+                comment: "@context: Empty state message",
+              })}
+            </p>
+          ) : (
+            <div class="flex flex-col divide-y">
+              {posts.map((post) => (
+                <div key={post.id} class="py-3 flex items-center gap-4">
+                  <div class="flex-1 min-w-0">
+                    <a
+                      href={`/dash/posts/${encode(post.id)}`}
+                      class="font-medium hover:underline"
+                    >
+                      {post.title ||
+                        post.excerpt?.slice(0, 50) ||
+                        `Post #${post.id}`}
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+
+      <div class="mt-6">
+        <a href="/dash/collections" class="text-sm hover:underline">
+          {t({
+            message: "\u2190 Back to Collections",
+            comment: "@context: Navigation link",
+          })}
+        </a>
+      </div>
+    </>
+  );
+}