@valentinkolb/cloud 0.1.0

package/src/ui/misc/EntitySearch.tsx

@@ -0,0 +1,213 @@
+import { createSignal, For, Show } from "solid-js";
+import { timed } from "@valentinkolb/stdlib/solid";
+import TextInput from "../input/TextInput";
+
+type UserResult = {
+  id: string;
+  uid: string;
+  displayName: string;
+  mail: string | null;
+};
+
+type GroupResult = {
+  id: string;
+  provider: "ipa" | "local";
+  name: string;
+  description: string | null;
+};
+
+export type EntitySearchResult =
+  | { type: "user"; id: string; displayName: string; mail: string | null }
+  | { type: "group"; id: string; provider: "ipa" | "local"; name: string; description: string | null };
+
+type EntitySearchProps = {
+  apiBaseUrl?: string;
+  groupProvider?: "ipa" | "local";
+  searchUsers?: boolean;
+  searchGroups?: boolean;
+  excludeUserIds?: string[];
+  excludeGroupIds?: string[];
+  onSelect: (result: EntitySearchResult) => void;
+  placeholder?: string;
+  adding?: boolean;
+  userMemberOfGroupIds?: string[];
+  resultsHeightClass?: string;
+};
+
+const EntitySearch = (props: EntitySearchProps) => {
+  const [search, setSearch] = createSignal("");
+  const [users, setUsers] = createSignal<UserResult[]>([]);
+  const [groups, setGroups] = createSignal<GroupResult[]>([]);
+  const [loading, setLoading] = createSignal(false);
+  const [addingId, setAddingId] = createSignal<string | null>(null);
+
+  const doSearch = async (q: string) => {
+    if (q.length < 2) {
+      setUsers([]);
+      setGroups([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const url = new URL(`${props.apiBaseUrl ?? "/api/accounts"}/entities`, window.location.origin);
+      const kinds = [
+        ...(props.searchUsers !== false ? ["user"] : []),
+        ...(props.searchGroups ? ["group"] : []),
+      ];
+      if (kinds.length === 0) {
+        setUsers([]);
+        setGroups([]);
+        return;
+      }
+
+      url.searchParams.set("search", q);
+      url.searchParams.set("kinds", kinds.join(","));
+      url.searchParams.set("per_page", "10");
+
+      if (props.excludeUserIds && props.excludeUserIds.length > 0) {
+        url.searchParams.set("exclude_user_ids", props.excludeUserIds.join(","));
+      }
+
+      if (props.excludeGroupIds && props.excludeGroupIds.length > 0) {
+        url.searchParams.set("exclude_group_ids", props.excludeGroupIds.join(","));
+      }
+
+      if (props.userMemberOfGroupIds && props.userMemberOfGroupIds.length > 0) {
+        url.searchParams.set("user_member_of_group_ids", props.userMemberOfGroupIds.join(","));
+      }
+
+      if (props.groupProvider) {
+        url.searchParams.set("provider", props.groupProvider);
+      }
+
+      const res = await fetch(url.toString(), {
+        credentials: "same-origin",
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        const items = data.items ?? [];
+        setUsers(items.filter((item: { kind: string }) => item.kind === "user").map((item: { user: UserResult }) => item.user));
+        setGroups(items.filter((item: { kind: string }) => item.kind === "group").map((item: { group: GroupResult }) => item.group));
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const { debouncedFn: debouncedSearch } = timed.debounce(doSearch, 300);
+
+  const handleInput = (value: string) => {
+    setSearch(value);
+    debouncedSearch(value);
+  };
+
+  const handleSelect = (result: EntitySearchResult) => {
+    setAddingId(result.id);
+    props.onSelect(result);
+    setAddingId(null);
+  };
+
+  const resultsHeightClass = () => props.resultsHeightClass ?? "h-48";
+
+  return (
+    <div class="flex flex-col gap-3">
+      <TextInput icon="ti ti-search" placeholder={props.placeholder ?? "Search..."} value={() => search()} onInput={handleInput} />
+
+      <div class={`${resultsHeightClass()} overflow-y-auto`}>
+        <Show when={loading()}>
+          <div class="flex items-center justify-center py-8 text-dimmed">
+            <i class="ti ti-loader-2 animate-spin text-xl" />
+          </div>
+        </Show>
+
+        <Show when={!loading() && search().length >= 2 && users().length === 0 && groups().length === 0}>
+          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
+            <i class="ti ti-search-off text-sm" />
+            No results found
+          </p>
+        </Show>
+
+        <Show when={!loading() && search().length < 2}>
+          <p class="flex items-center justify-center gap-1.5 py-8 text-xs text-dimmed">
+            <i class="ti ti-search text-sm" />
+            Type at least 2 characters
+          </p>
+        </Show>
+
+        <Show when={!loading() && (users().length > 0 || groups().length > 0)}>
+          <div class="flex flex-col gap-1">
+            <For each={users()}>
+              {(user) => (
+                <div class="flex items-center gap-3 rounded p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
+                    <i class="ti ti-user text-sm" />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate text-sm font-medium">{user.displayName}</div>
+                    <div class="truncate text-xs text-dimmed">
+                      {user.uid}
+                      {user.mail && ` · ${user.mail}`}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleSelect({
+                        type: "user",
+                        id: user.id,
+                        displayName: user.displayName,
+                        mail: user.mail,
+                      })
+                    }
+                    disabled={addingId() !== null || props.adding}
+                    class="rounded p-2 text-emerald-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:opacity-50 dark:hover:bg-emerald-900/20"
+                    aria-label={`Add ${user.displayName}`}
+                  >
+                    <i class={addingId() === user.id ? "ti ti-loader-2 animate-spin" : "ti ti-plus"} />
+                  </button>
+                </div>
+              )}
+            </For>
+
+            <For each={groups()}>
+              {(group) => (
+                <div class="flex items-center gap-3 rounded p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+                  <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300">
+                    <i class="ti ti-users-group text-sm" />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate text-sm font-medium">{group.name}</div>
+                    <Show when={group.description}>
+                      <div class="truncate text-xs text-dimmed">{group.description}</div>
+                    </Show>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleSelect({
+                        type: "group",
+                        id: group.id,
+                        provider: group.provider,
+                        name: group.name,
+                        description: group.description,
+                      })
+                    }
+                    disabled={addingId() !== null || props.adding}
+                    class="rounded p-2 text-emerald-500 transition-colors hover:bg-emerald-50 hover:text-emerald-600 disabled:opacity-50 dark:hover:bg-emerald-900/20"
+                    aria-label={`Add ${group.name}`}
+                  >
+                    <i class={addingId() === group.id ? "ti ti-loader-2 animate-spin" : "ti ti-plus"} />
+                  </button>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default EntitySearch;

package/src/ui/misc/Lightbox.tsx

@@ -0,0 +1,194 @@
+import { createSignal, onMount, onCleanup, Show, For } from "solid-js";
+
+export type LightboxImage = {
+  src: string;
+  alt?: string;
+  downloadUrl?: string;
+};
+
+type LightboxProps = {
+  images: LightboxImage[];
+  initialIndex?: number;
+  onClose: () => void;
+};
+
+/**
+ * Minimal, accessible lightbox using native <dialog>.
+ * Supports keyboard navigation, touch swipe gestures, and screen readers.
+ */
+export default function Lightbox(props: LightboxProps) {
+  const [index, setIndex] = createSignal(props.initialIndex ?? 0);
+  let dialogRef!: HTMLDialogElement;
+
+  // Touch gesture tracking
+  let touchStartX = 0;
+  let touchStartY = 0;
+  const SWIPE_THRESHOLD = 50;
+
+  const current = () => props.images[index()];
+  const isMultiple = () => props.images.length > 1;
+  const prev = () => {
+    if (!isMultiple()) return;
+    setIndex((i) => (i - 1 + props.images.length) % props.images.length);
+  };
+  const next = () => {
+    if (!isMultiple()) return;
+    setIndex((i) => (i + 1) % props.images.length);
+  };
+
+  const close = () => {
+    dialogRef.close();
+    props.onClose();
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case "Escape":
+        close();
+        break;
+      case "ArrowLeft":
+        prev();
+        break;
+      case "ArrowRight":
+        next();
+        break;
+    }
+  };
+
+  // Touch handlers for swipe gestures
+  const handleTouchStart = (e: TouchEvent) => {
+    const touch = e.touches[0];
+    if (touch) {
+      touchStartX = touch.clientX;
+      touchStartY = touch.clientY;
+    }
+  };
+
+  const handleTouchEnd = (e: TouchEvent) => {
+    const touch = e.changedTouches[0];
+    if (!touch) return;
+
+    const deltaX = touch.clientX - touchStartX;
+    const deltaY = touch.clientY - touchStartY;
+
+    // Only trigger swipe if horizontal movement is dominant
+    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD) {
+      if (deltaX > 0) {
+        prev();
+      } else {
+        next();
+      }
+    }
+  };
+
+  // Click on backdrop closes lightbox
+  const handleBackdropClick = (e: MouseEvent) => {
+    if (e.target === dialogRef) {
+      close();
+    }
+  };
+
+  onMount(() => {
+    dialogRef.showModal();
+    document.addEventListener("keydown", handleKeyDown);
+  });
+
+  onCleanup(() => {
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
+  return (
+    <dialog
+      ref={dialogRef}
+      class="fixed inset-0 m-0 h-dvh w-dvw max-h-none max-w-none bg-black/92 backdrop:bg-transparent p-0 text-white"
+      onMouseDown={handleBackdropClick}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      aria-label="Image lightbox"
+    >
+      {/* Top bar */}
+      <div class="absolute inset-x-0 top-0 z-10 flex items-start justify-between p-4 sm:p-6">
+        <div class="flex min-w-0 flex-col gap-2">
+          <Show when={isMultiple()}>
+            <span class="inline-flex w-fit items-center rounded-full border border-white/12 bg-white/8 px-3 py-1 text-xs text-white/80 backdrop-blur" aria-live="polite">
+              {index() + 1} / {props.images.length}
+            </span>
+          </Show>
+          <Show when={current()?.alt}>
+            <div class="max-w-[min(70vw,42rem)] rounded-2xl border border-white/10 bg-black/30 px-4 py-2 backdrop-blur-sm">
+              <div class="truncate text-sm font-medium text-white">{current()?.alt}</div>
+            </div>
+          </Show>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <Show when={current()?.downloadUrl}>
+            <a
+              href={current()!.downloadUrl}
+              download=""
+              class="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/8 px-4 text-sm text-white transition-colors hover:bg-white/14"
+              aria-label="Download image"
+            >
+              <i class="ti ti-download text-base" />
+              <span class="hidden sm:inline">Download</span>
+            </a>
+          </Show>
+          <button
+            type="button"
+            onClick={close}
+            class="inline-flex h-11 items-center gap-2 rounded-full border border-white/12 bg-white/8 px-4 text-sm text-white transition-colors hover:bg-white/14"
+            aria-label="Close lightbox"
+          >
+            <i class="ti ti-x text-base" />
+            <span class="hidden sm:inline">Close</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex h-full w-full items-center justify-center px-6 pb-20 pt-24 sm:px-12 sm:pb-24 sm:pt-28">
+        <img src={current()?.src} alt={current()?.alt ?? ""} class="max-h-full max-w-full object-contain select-none" draggable={false} />
+      </div>
+
+      <Show when={isMultiple()}>
+        <button
+          type="button"
+          onClick={prev}
+          class="absolute left-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full border border-white/12 bg-white/8 text-white transition-colors hover:bg-white/14 sm:left-6"
+          aria-label="Previous image"
+        >
+          <i class="ti ti-chevron-left text-2xl" />
+        </button>
+        <button
+          type="button"
+          onClick={next}
+          class="absolute right-4 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full border border-white/12 bg-white/8 text-white transition-colors hover:bg-white/14 sm:right-6"
+          aria-label="Next image"
+        >
+          <i class="ti ti-chevron-right text-2xl" />
+        </button>
+      </Show>
+
+      <Show when={isMultiple() && props.images.length <= 10}>
+        <div class="absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2 rounded-full border border-white/10 bg-black/30 px-3 py-2 backdrop-blur" role="tablist" aria-label="Image navigation">
+          <For each={props.images}>
+            {(_, i) => (
+              <button
+                type="button"
+                onClick={() => setIndex(i())}
+                class="h-2.5 w-2.5 rounded-full transition-colors"
+                classList={{
+                  "bg-white": index() === i(),
+                  "bg-white/40 hover:bg-white/60": index() !== i(),
+                }}
+                role="tab"
+                aria-selected={index() === i()}
+                aria-label={`Go to image ${i() + 1}`}
+              />
+            )}
+          </For>
+        </div>
+      </Show>
+    </dialog>
+  );
+}

package/src/ui/misc/LinkCard.tsx

@@ -0,0 +1,34 @@
+type LinkCardProps = {
+  href: string;
+  title: string;
+  description: string;
+  icon: string;
+  color: "blue" | "emerald" | "violet" | "orange" | "red" | "amber" | "zinc" | "cyan" | "rose";
+};
+
+const colorClasses = {
+  blue: "bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400",
+  emerald: "bg-emerald-100 dark:bg-emerald-900/50 text-emerald-600 dark:text-emerald-400",
+  violet: "bg-violet-100 dark:bg-violet-900/50 text-violet-600 dark:text-violet-400",
+  orange: "bg-orange-100 dark:bg-orange-900/50 text-orange-600 dark:text-orange-400",
+  red: "bg-red-100 dark:bg-red-900/50 text-red-600 dark:text-red-400",
+  amber: "bg-amber-100 dark:bg-amber-900/50 text-amber-600 dark:text-amber-400",
+  zinc: "bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400",
+  cyan: "bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400",
+  rose: "bg-rose-100 dark:bg-rose-900/50 text-rose-600 dark:text-rose-400",
+};
+
+export default function LinkCard(props: LinkCardProps) {
+  return (
+    <a href={props.href} class="paper p-4 flex items-center gap-4 hover:paper-highlighted transition-all">
+      <div class={`flex items-center justify-center h-10 w-10 shrink-0 rounded ${colorClasses[props.color]}`}>
+        <i class={`${props.icon} text-xl`} />
+      </div>
+      <div class="flex-1 min-w-0">
+        <span class="text-sm font-semibold text-primary block">{props.title}</span>
+        <p class="text-xs text-dimmed truncate">{props.description}</p>
+      </div>
+      <i class="ti ti-chevron-right text-dimmed" />
+    </a>
+  );
+}

package/src/ui/misc/LogEntriesTable.tsx

@@ -0,0 +1,61 @@
+import { dates } from "@valentinkolb/stdlib";
+
+export type LogTableEntry = {
+  id: number | string;
+  level: string;
+  source: string;
+  message: string;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+};
+
+type Props = {
+  entries: LogTableEntry[];
+  emptyMessage?: string;
+};
+
+const levelIcon: Record<string, { icon: string; color: string; label: string }> = {
+  debug: { icon: "ti ti-bug", color: "text-zinc-400 dark:text-zinc-500", label: "debug" },
+  info: { icon: "ti ti-info-circle", color: "text-blue-500 dark:text-blue-400", label: "info" },
+  warn: { icon: "ti ti-alert-triangle", color: "text-amber-500 dark:text-amber-400", label: "warn" },
+  error: { icon: "ti ti-alert-circle", color: "text-red-500 dark:text-red-400", label: "error" },
+};
+
+export default function LogEntriesTable(props: Props) {
+  if (props.entries.length === 0) {
+    return <div class="py-8 text-center text-xs text-dimmed">{props.emptyMessage ?? "No log entries found."}</div>;
+  }
+
+  return (
+    <div class="overflow-x-auto">
+      <table class="w-full text-xs">
+        <thead>
+          <tr class="border-b border-zinc-100 dark:border-zinc-800">
+            <th class="px-3 py-2 text-left font-medium text-dimmed">Level</th>
+            <th class="px-3 py-2 text-left font-medium text-dimmed">Source ({props.entries.length})</th>
+            <th class="px-3 py-2 text-left font-medium text-dimmed">Message</th>
+            <th class="px-3 py-2 text-left font-medium text-dimmed">Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.entries.map((entry) => {
+            const level = levelIcon[entry.level] ?? levelIcon.debug!;
+            return (
+              <tr class="border-b border-zinc-50 last:border-0 hover:bg-zinc-50 dark:border-zinc-800/50 dark:hover:bg-zinc-800/30">
+                <td class="px-3 py-1.5 whitespace-nowrap">
+                  <span class={`inline-flex items-center gap-1.5 ${level.color}`}>
+                    <i class={`${level.icon} text-sm`} />
+                    <span>{level.label}</span>
+                  </span>
+                </td>
+                <td class="px-3 py-1.5 whitespace-nowrap text-secondary">{entry.source}</td>
+                <td class="px-3 py-1.5 text-primary truncate max-w-[30rem]" title={entry.message}>{entry.message}</td>
+                <td class="whitespace-nowrap px-3 py-1.5 text-dimmed">{dates.formatDateTime(entry.createdAt)}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/ui/misc/MarkdownView.tsx

@@ -0,0 +1,65 @@
+type Props = {
+  /** Pre-rendered HTML from server-side renderMarkdown() */
+  html: string;
+  /** Optional additional CSS classes */
+  class?: string;
+  /**
+   * Reduce heading sizes for compact contexts like comments.
+   * When true, h1-h6 are all rendered at similar small sizes.
+   */
+  smallHeadings?: boolean;
+};
+
+/**
+ * Markdown View Component (SSR)
+ *
+ * Displays pre-rendered markdown HTML with prose styling.
+ * This component does not set a max-width - the parent should control that.
+ *
+ * @example
+ * ```tsx
+ * // Server-side (in page.tsx):
+ * import { renderMarkdown } from "@/shared/markdown";
+ * const html = renderMarkdown(markdownContent);
+ *
+ * // In your component:
+ * import MarkdownView from "@/ui/misc/MarkdownView";
+ * <div class="max-w-4xl mx-auto">
+ *   <MarkdownView html={html} />
+ * </div>
+ * ```
+ *
+ * @example With Mermaid & KaTeX support (in an island component):
+ * ```tsx
+ * import { onMount } from "solid-js";
+ * import MarkdownView from "@/ui/misc/MarkdownView";
+ * import { initMarkdownEnhancements } from "@/shared/markdown/client";
+ *
+ * export default function MyComponent(props: { html: string }) {
+ *   let containerRef: HTMLDivElement | undefined;
+ *
+ *   onMount(() => {
+ *     if (containerRef) {
+ *       initMarkdownEnhancements(containerRef);
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div ref={containerRef}>
+ *       <MarkdownView html={props.html} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export default function MarkdownView(props: Props) {
+  const classes = () => {
+    const base = "prose prose-sm dark:prose-invert max-w-none";
+    const small = props.smallHeadings
+      ? "[&_h1]:!text-sm [&_h2]:!text-sm [&_h3]:!text-sm [&_h4]:!text-sm [&_h5]:!text-sm [&_h6]:!text-sm [&_h1]:!font-semibold [&_h2]:!font-semibold [&_h3]:!font-semibold [&_h4]:!font-semibold [&_h5]:!font-semibold [&_h6]:!font-semibold [&_h1]:!my-0 [&_h2]:!my-0 [&_h3]:!my-0 [&_h4]:!my-0 [&_h5]:!my-0 [&_h6]:!my-0 [&_h1]:!underline [&_h2]:!underline [&_h3]:!underline [&_h4]:!underline [&_h5]:!underline [&_h6]:!underline"
+      : "";
+    return `${base} ${small} ${props.class ?? ""}`;
+  };
+
+  return <div class={classes()} innerHTML={props.html} />;
+}

package/src/ui/misc/Pagination.tsx

@@ -0,0 +1,51 @@
+import type { JSX } from "solid-js";
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  baseUrl: string;
+};
+
+/**
+ * Renders pagination controls with ellipsis for large page counts.
+ * Shows first, last, and pages adjacent to current page.
+ */
+export const Pagination = (props: PaginationProps): null | JSX.Element => {
+  if (props.totalPages <= 1) return null;
+
+  const visiblePages = Array.from({ length: props.totalPages }, (_, i) => i + 1).filter(
+    (p) => p === 1 || p === props.totalPages || Math.abs(p - props.currentPage) <= 1,
+  );
+
+  return (
+    <nav class="flex items-center justify-center gap-0.5 pt-3" aria-label="Pagination">
+      {visiblePages.map((page, idx) => {
+        const prevPage = visiblePages[idx - 1];
+        const shouldShowEllipsis = prevPage && page - prevPage > 1;
+        const isActive = page === props.currentPage;
+
+        return (
+          <>
+            {shouldShowEllipsis && (
+              <span class="flex h-7 w-7 items-center justify-center text-dimmed text-xs select-none" aria-hidden="true">
+                ...
+              </span>
+            )}
+            <a
+              href={`${props.baseUrl}${page}`}
+              class={`flex h-7 w-7 items-center justify-center rounded-lg text-xs tabular-nums transition-colors ${
+                isActive
+                  ? "border-blue-500/35 bg-blue-50 text-blue-700 font-medium dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200"
+                  : "text-dimmed hover:text-primary hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              }`}
+              aria-current={isActive ? "page" : undefined}
+              aria-label={`Page ${page}`}
+            >
+              {page}
+            </a>
+          </>
+        );
+      })}
+    </nav>
+  );
+};