@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/ui/misc/Placeholder.tsx

@@ -0,0 +1,40 @@
+import { type JSX, Show } from "solid-js";
+
+export type PlaceholderAlign = "center" | "left";
+export type PlaceholderSurface = "none" | "paper";
+
+export type PlaceholderProps = {
+  title?: JSX.Element;
+  description?: JSX.Element;
+  children?: JSX.Element;
+  icon?: string;
+  action?: JSX.Element;
+  align?: PlaceholderAlign;
+  surface?: PlaceholderSurface;
+  class?: string;
+};
+
+const alignClass = (align: PlaceholderAlign) => (align === "left" ? "items-start text-left" : "items-center text-center");
+
+export default function Placeholder(props: PlaceholderProps) {
+  const align = () => props.align ?? "center";
+  const description = () => props.description ?? props.children;
+  const surfaceClass = () => (props.surface === "paper" ? "paper" : "");
+
+  return (
+    <div class={`${surfaceClass()} flex flex-col ${alignClass(align())} gap-1 px-3 py-6 text-xs text-dimmed ${props.class ?? ""}`}>
+      <Show when={props.icon}>
+        <i class={`${props.icon} text-base text-zinc-400 dark:text-zinc-500`} aria-hidden="true" />
+      </Show>
+      <Show when={props.title}>
+        <p class="text-xs font-medium text-secondary">{props.title}</p>
+      </Show>
+      <Show when={description()}>
+        <p class="max-w-sm text-xs text-dimmed">{description()}</p>
+      </Show>
+      <Show when={props.action}>
+        <div class="mt-2">{props.action}</div>
+      </Show>
+    </div>
+  );
+}

package/src/ui/misc/ProgressBar.tsx

@@ -38,7 +38,7 @@ export default function ProgressBar(props: ProgressBarProps) {
 
   return (
     <div class={`flex items-center gap-2 ${props.class ?? ""}`}>
-      <div class={`flex-1 min-w-0 rounded-full overflow-hidden bg-zinc-200 dark:bg-zinc-700 ${heightClass(props.size)}`}>
+      <div class={`flex-1 min-w-0 rounded-full overflow-hidden bg-zinc-200 dark:bg-zinc-700 [box-shadow:var(--theme-recess)] ${heightClass(props.size)}`}>
         <div class={`h-full transition-all duration-200 ${toneClass(props.tone)}`} style={`width: ${percent()}%`} />
       </div>
       {props.showValue ? <span class="shrink-0 tabular-nums text-[11px] text-dimmed">{percent()}%</span> : null}

package/src/ui/misc/ResourceApiKeys.tsx

@@ -0,0 +1,260 @@
+import { dates } from "@valentinkolb/stdlib";
+import { mutation as mutations } from "@valentinkolb/stdlib/solid";
+import { createEffect, createSignal, For, Show } from "solid-js";
+import type { PermissionLevel, ServiceAccountCredential } from "../../contracts/shared";
+import { DateTimePicker } from "../input/DatePicker";
+import SelectInput from "../input/Select";
+import TextInput from "../input/TextInput";
+import { prompts } from "../prompts";
+import CopyButton from "./CopyButton";
+import Placeholder from "./Placeholder";
+
+type GrantablePermission = Exclude<PermissionLevel, "none">;
+
+export type ResourceApiKey = ServiceAccountCredential & {
+  permission: PermissionLevel;
+};
+
+export type ResourceApiKeyPermissionOption = {
+  value: GrantablePermission;
+  label: string;
+  description: string;
+  icon?: string;
+};
+
+type CreateResourceApiKeyInput = {
+  name: string;
+  expiresAt: string | null;
+  permission: GrantablePermission;
+};
+
+export type ResourceApiKeysProps = {
+  title?: string;
+  description?: string;
+  initialKeys: ResourceApiKey[];
+  permissionOptions?: ResourceApiKeyPermissionOption[];
+  createKey: (input: CreateResourceApiKeyInput) => Promise<{ credential: ResourceApiKey; token: string }>;
+  revokeKey: (credentialId: string) => Promise<void>;
+};
+
+const DEFAULT_PERMISSIONS: ResourceApiKeyPermissionOption[] = [
+  { value: "read", label: "Read", description: "Read this resource through the app API.", icon: "ti ti-eye" },
+  { value: "write", label: "Write", description: "Read and update this resource through the app API.", icon: "ti ti-pencil" },
+  { value: "admin", label: "Admin", description: "Manage this resource through the app API.", icon: "ti ti-shield" },
+];
+
+const presetDate = (days: number) => new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString();
+const hasInstantOffset = (value: string) => /[T\s].*([zZ]|[+-]\d{2}:?\d{2})$/.test(value);
+const toInstant = (value: string | null): string | null => {
+  if (!value) return null;
+  if (hasInstantOffset(value)) return value;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+};
+
+const permissionLabel = (permission: PermissionLevel, options: ResourceApiKeyPermissionOption[]) =>
+  permission === "none" ? "No access" : (options.find((option) => option.value === permission)?.label ?? permission);
+
+function TokenDialog(props: { token: string }) {
+  return (
+    <div class="flex flex-col gap-4">
+      <div class="info-block-warning text-xs">Copy this API key now. It is shown once and cannot be recovered later.</div>
+      <div class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
+        <code class="block break-all font-mono text-xs text-primary">{props.token}</code>
+      </div>
+      <div class="flex justify-end">
+        <CopyButton text={props.token} label="Copy key" class="btn-primary btn-sm" />
+      </div>
+    </div>
+  );
+}
+
+function CreateResourceApiKeyDialog(props: {
+  permissionOptions: ResourceApiKeyPermissionOption[];
+  close: (value: CreateResourceApiKeyInput | null) => void;
+}) {
+  const [name, setName] = createSignal("");
+  const [permission, setPermission] = createSignal<GrantablePermission>(props.permissionOptions[0]?.value ?? "read");
+  const [expiresAt, setExpiresAt] = createSignal<string | null>(presetDate(90));
+  const [error, setError] = createSignal<string | undefined>();
+  const selectOptions = () =>
+    props.permissionOptions.map((option) => ({
+      id: option.value,
+      label: option.label,
+      description: option.description,
+      icon: option.icon ?? "ti ti-key",
+    }));
+
+  const submit = () => {
+    const trimmedName = name().trim();
+    if (!trimmedName) {
+      setError("Name is required.");
+      return;
+    }
+    props.close({ name: trimmedName, permission: permission(), expiresAt: toInstant(expiresAt()) });
+  };
+
+  return (
+    <form
+      class="flex flex-col gap-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      <TextInput
+        label="Name"
+        description="Shown in this resource so admins can identify where the key is used."
+        placeholder="e.g. Website embed"
+        icon="ti ti-tag"
+        value={name}
+        onInput={(value) => {
+          setName(value);
+          setError(undefined);
+        }}
+        error={error}
+        required
+      />
+      <SelectInput
+        label="Access"
+        description="Choose what this API key can do with this resource."
+        icon="ti ti-shield-lock"
+        value={permission}
+        onChange={(value) => setPermission(value as GrantablePermission)}
+        options={selectOptions()}
+        required
+      />
+      <DateTimePicker
+        label="Expires"
+        description="Leave empty only for long-lived integrations you actively maintain."
+        value={expiresAt}
+        onChange={setExpiresAt}
+        clearable
+        presets={[
+          { label: "30 days", value: presetDate(30) },
+          { label: "90 days", value: presetDate(90) },
+          { label: "1 year", value: presetDate(365) },
+          { label: "Never", value: null },
+        ]}
+      />
+      <div class="flex justify-end gap-2">
+        <button type="button" class="btn-secondary btn-sm" onClick={() => props.close(null)}>
+          Cancel
+        </button>
+        <button type="submit" class="btn-primary btn-sm">
+          <i class="ti ti-plus" />
+          Create key
+        </button>
+      </div>
+    </form>
+  );
+}
+
+export default function ResourceApiKeys(props: ResourceApiKeysProps) {
+  const options = () => (props.permissionOptions && props.permissionOptions.length > 0 ? props.permissionOptions : DEFAULT_PERMISSIONS);
+  const [keys, setKeys] = createSignal<ResourceApiKey[]>(props.initialKeys);
+
+  createEffect(() => {
+    setKeys(props.initialKeys);
+  });
+
+  const createMutation = mutations.create<{ credential: ResourceApiKey; token: string }, CreateResourceApiKeyInput>({
+    mutation: props.createKey,
+    onSuccess: async (data) => {
+      setKeys([data.credential, ...keys()]);
+      await prompts.dialog<void>(() => <TokenDialog token={data.token} />, {
+        title: "API key created",
+        icon: "ti ti-key",
+        size: "medium",
+      });
+    },
+    onError: (error) => prompts.error(error.message),
+  });
+
+  const revokeMutation = mutations.create<void, { id: string; name: string }, { id: string }>({
+    onBefore: (vars) => ({ id: vars.id }),
+    mutation: async (vars) => props.revokeKey(vars.id),
+    onSuccess: (_, ctx) => {
+      if (ctx?.id) setKeys(keys().filter((key) => key.id !== ctx.id));
+    },
+    onError: (error) => prompts.error(error.message),
+  });
+
+  const openCreate = async () => {
+    const result = await prompts.dialog<CreateResourceApiKeyInput | null>(
+      (close) => <CreateResourceApiKeyDialog permissionOptions={options()} close={close} />,
+      { title: "Create API key", icon: "ti ti-key", size: "medium" },
+    );
+    if (result) await createMutation.mutate(result);
+  };
+
+  const revoke = async (key: ResourceApiKey) => {
+    const confirmed = await prompts.confirm(`Revoke "${key.name}"? Integrations using this key will lose access immediately.`, {
+      title: "Revoke API key",
+      icon: "ti ti-key-off",
+      variant: "danger",
+      confirmText: "Revoke",
+    });
+    if (confirmed) await revokeMutation.mutate({ id: key.id, name: key.name });
+  };
+
+  return (
+    <section class="flex flex-col gap-4">
+      <div class="flex items-start justify-between gap-3">
+        <div>
+          <h3 class="flex items-center gap-1.5 text-sm font-semibold text-primary">
+            <i class="ti ti-key text-sm" />
+            {props.title ?? "API keys"}
+          </h3>
+          <p class="mt-1 text-xs text-dimmed">{props.description ?? "Resource-bound keys for app integrations."}</p>
+        </div>
+        <button type="button" class="btn-secondary btn-sm shrink-0" onClick={openCreate} disabled={createMutation.loading()}>
+          <i class="ti ti-plus" />
+          Add
+        </button>
+      </div>
+
+      <Show
+        when={keys().length > 0}
+        fallback={
+          <Placeholder icon="ti ti-key" class="rounded-lg border border-dashed border-zinc-200 dark:border-zinc-800">
+            No API keys yet.
+          </Placeholder>
+        }
+      >
+        <div class="flex flex-col divide-y divide-zinc-100 overflow-hidden rounded-lg border border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800">
+          <For each={keys()}>
+            {(key) => (
+              <div class="flex items-center gap-3 p-3">
+                <div class="min-w-0 flex-1">
+                  <div class="flex min-w-0 items-center gap-2">
+                    <span class="truncate text-sm font-medium text-primary">{key.name}</span>
+                    <span
+                      class={
+                        key.permission === "none"
+                          ? "tag bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-200"
+                          : "tag bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-200"
+                      }
+                    >
+                      {permissionLabel(key.permission, options())}
+                    </span>
+                    <span class="tag bg-zinc-100 text-dimmed dark:bg-zinc-800">{key.tokenPrefix}</span>
+                  </div>
+                  <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-dimmed">
+                    <span>Created {dates.formatDate(key.createdAt)}</span>
+                    <span>{key.expiresAt ? `Expires ${dates.formatDate(key.expiresAt)}` : "Never expires"}</span>
+                    <span>{key.lastUsedAt ? `Used ${dates.formatDateTimeRelative(key.lastUsedAt)}` : "Never used"}</span>
+                  </div>
+                </div>
+                <button type="button" class="btn-simple btn-sm shrink-0 text-red-600 dark:text-red-400" onClick={() => revoke(key)}>
+                  <i class="ti ti-trash" />
+                  Revoke
+                </button>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </section>
+  );
+}

package/src/ui/misc/SettingsModal.tsx

@@ -0,0 +1,150 @@
+import { children, createMemo, createSignal, For, type JSX, Show } from "solid-js";
+
+const SETTINGS_MODAL_TAB = Symbol("SettingsModal.Tab");
+
+export type SettingsModalTabTone = "default" | "danger";
+
+export type SettingsModalTabProps = {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: string;
+  tone?: SettingsModalTabTone;
+  children: JSX.Element;
+};
+
+type SettingsModalTabDefinition = SettingsModalTabProps & {
+  readonly kind: typeof SETTINGS_MODAL_TAB;
+};
+
+export type SettingsModalProps = {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  defaultTab?: string;
+  activeTab?: string;
+  onTabChange?: (id: string) => void;
+  onClose?: () => void;
+  closeLabel?: string;
+  class?: string;
+  children: JSX.Element;
+};
+
+type SettingsModalComponent = ((props: SettingsModalProps) => JSX.Element) & {
+  Tab: (props: SettingsModalTabProps) => JSX.Element;
+};
+
+const isTabDefinition = (value: unknown): value is SettingsModalTabDefinition =>
+  !!value && typeof value === "object" && (value as { kind?: unknown }).kind === SETTINGS_MODAL_TAB;
+
+const collectTabs = (value: unknown): SettingsModalTabDefinition[] => {
+  if (Array.isArray(value)) return value.flatMap(collectTabs);
+  return isTabDefinition(value) ? [value] : [];
+};
+
+const tablerIconClass = (icon: string | null | undefined, fallback: string): string => {
+  const value = icon?.trim() || fallback;
+  return value.startsWith("ti ") ? value : `ti ${value}`;
+};
+
+function SettingsModalTab(props: SettingsModalTabProps): JSX.Element {
+  return {
+    kind: SETTINGS_MODAL_TAB,
+    ...props,
+  } satisfies SettingsModalTabDefinition as unknown as JSX.Element;
+}
+
+const SettingsModal = ((props: SettingsModalProps) => {
+  const resolved = children(() => props.children);
+  const tabs = createMemo(() => collectTabs(resolved()));
+  const firstTabId = () => tabs()[0]?.id ?? "";
+  const [localActiveTab, setLocalActiveTab] = createSignal(props.defaultTab ?? firstTabId());
+  const activeTabId = () => props.activeTab ?? (localActiveTab() || firstTabId());
+  const activeTab = () => tabs().find((tab) => tab.id === activeTabId()) ?? tabs()[0] ?? null;
+
+  const selectTab = (id: string) => {
+    setLocalActiveTab(id);
+    props.onTabChange?.(id);
+  };
+
+  return (
+    <div class={`flex h-full min-h-0 flex-col gap-2 overflow-hidden ${props.class ?? ""}`}>
+      <section class="paper shrink-0 p-4">
+        <div class="flex min-h-9 items-center gap-4">
+          <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500 text-white">
+            <i class={`${tablerIconClass(props.icon, "ti-settings")} text-sm`} />
+          </span>
+          <div class="min-w-0">
+            <p class="truncate font-semibold text-primary">{props.title}</p>
+            <Show when={props.subtitle}>
+              <p class="truncate text-xs text-dimmed">{props.subtitle}</p>
+            </Show>
+          </div>
+          <Show when={props.onClose}>
+            <button type="button" onClick={props.onClose} class="icon-btn ml-auto shrink-0" aria-label={props.closeLabel ?? "Close"}>
+              <i class="ti ti-x" />
+            </button>
+          </Show>
+        </div>
+      </section>
+
+      <div class="grid min-h-0 flex-1 gap-3 md:grid-cols-[14rem_1fr]">
+        <nav class="paper flex gap-1 overflow-x-auto p-2 md:min-h-0 md:flex-col md:overflow-visible" aria-label={`${props.title} sections`}>
+          <For each={tabs()}>
+            {(tab) => (
+              <button
+                type="button"
+                class={`flex min-w-40 shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors md:w-full md:min-w-0 ${
+                  activeTabId() === tab.id
+                    ? "bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-200"
+                    : tab.tone === "danger"
+                      ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/30"
+                      : "text-dimmed hover:bg-zinc-50 hover:text-primary dark:hover:bg-zinc-900"
+                }`}
+                onClick={() => selectTab(tab.id)}
+              >
+                <Show when={tab.icon}>
+                  <i class={`${tab.icon} shrink-0 text-base`} />
+                </Show>
+                <span class="min-w-0 flex-1 truncate whitespace-nowrap">{tab.title}</span>
+              </button>
+            )}
+          </For>
+        </nav>
+
+        <main class="paper min-h-0 overflow-hidden">
+          <Show when={activeTab()}>
+            {(tab) => (
+              <section
+                class={`h-full overflow-y-auto px-5 py-5 ${tab().tone === "danger" ? "rounded-lg ring-1 ring-red-200 dark:ring-red-900/50" : ""}`}
+              >
+                <div class="mb-4 flex items-start gap-3">
+                  <span
+                    class={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${
+                      tab().tone === "danger"
+                        ? "bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300"
+                        : "bg-zinc-100 text-dimmed dark:bg-zinc-900"
+                    }`}
+                  >
+                    <i class={`${tab().icon || "ti ti-settings"} text-sm`} />
+                  </span>
+                  <div class="min-w-0">
+                    <h3 class={`section-label mb-1 ${tab().tone === "danger" ? "text-red-600 dark:text-red-300" : ""}`}>{tab().title}</h3>
+                    <Show when={tab().description}>
+                      <p class="text-xs text-dimmed">{tab().description}</p>
+                    </Show>
+                  </div>
+                </div>
+                {tab().children}
+              </section>
+            )}
+          </Show>
+        </main>
+      </div>
+    </div>
+  );
+}) as SettingsModalComponent;
+
+SettingsModal.Tab = SettingsModalTab;
+
+export default SettingsModal;