@valentinkolb/cloud 0.1.0

package/src/styles/utilities-navigation.css

@@ -0,0 +1,196 @@
+/* Navigation and list interaction utilities — flat, solid surfaces */
+@utility list-item {
+  display: flex !important;
+  padding: var(--theme-list-padding);
+  border-left: var(--theme-list-inactive-border);
+  @apply rounded-lg items-center gap-2 text-sm leading-none cursor-pointer text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+
+  & + .list-item {
+    margin-top: 0.25rem;
+  }
+
+  &:hover {
+    background: var(--theme-list-hover-bg);
+  }
+}
+
+/* Sidebar layout primitives */
+@utility sidebar {
+  @apply flex h-full min-h-0 flex-col gap-3 rounded-lg border border-zinc-200 bg-white;
+  @apply dark:border-zinc-800 dark:bg-zinc-900;
+}
+
+@utility sidebar-container {
+  @apply hidden lg:flex w-52 shrink-0 min-h-0 overflow-y-auto flex-col gap-3;
+}
+
+@utility sidebar-header-icon {
+  @apply w-6 h-6 rounded flex items-center justify-center text-white shrink-0;
+}
+
+@utility sidebar-header-text {
+  @apply min-w-0 flex-1;
+}
+
+@utility sidebar-header-title {
+  @apply truncate text-sm font-semibold text-primary;
+}
+
+@utility sidebar-header-subtitle {
+  @apply text-xs text-dimmed truncate;
+}
+
+@utility sidebar-header-settings {
+  @apply p-0.5 text-dimmed hover:text-primary transition-colors shrink-0;
+}
+
+@utility sidebar-group {
+  @apply flex flex-col gap-1;
+}
+
+@utility sidebar-container-mobile {
+  @apply lg:hidden flex flex-col gap-3;
+}
+
+@utility sidebar-mobile-toggle {
+  @apply sidebar-header cursor-pointer select-none list-none;
+}
+
+@utility sidebar-mobile-actions {
+  @apply flex flex-wrap gap-2;
+}
+
+@utility sidebar-item-mobile {
+  @apply btn-input btn-input-sm;
+}
+
+@utility sidebar-header {
+  @apply flex min-h-10 items-center gap-2;
+}
+
+@utility sidebar-body {
+  @apply flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto;
+}
+
+@utility sidebar-footer {
+  @apply mt-auto flex flex-col gap-2;
+}
+
+@utility sidebar-section {
+  @apply flex flex-col gap-1;
+}
+
+@utility sidebar-section-title {
+  @apply text-[0.6875rem] font-medium normal-case tracking-normal text-dimmed select-none;
+}
+
+@utility sidebar-controls {
+  @apply flex flex-col gap-2;
+}
+
+@utility sidebar-control-row {
+  @apply flex items-center gap-2;
+}
+
+/* Sidebar item primitives */
+@utility sidebar-item {
+  display: flex !important;
+  @apply min-h-8 items-center gap-2 rounded-lg px-2 py-1.5 text-xs leading-none text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+
+  &:hover {
+    background: var(--theme-list-hover-bg);
+  }
+}
+
+@utility sidebar-item-tall {
+  @apply min-h-10 py-2;
+}
+
+@utility sidebar-item-active {
+  @apply bg-blue-50 text-blue-700 font-medium;
+  @apply hover:bg-blue-100 hover:text-blue-700;
+  @apply dark:bg-blue-950 dark:text-blue-300;
+  @apply dark:hover:bg-blue-900 dark:hover:text-blue-200;
+}
+
+@utility sidebar-item-meta {
+  @apply mt-0.5 text-left text-xs leading-tight text-dimmed;
+}
+
+@utility sidebar-item-action {
+  @apply ml-auto inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-dimmed;
+  @apply transition-colors duration-150 ease-out hover:text-secondary hover:bg-zinc-100;
+  @apply dark:hover:bg-zinc-800;
+}
+
+/* Sidebar tree primitives */
+@utility sidebar-tree {
+  @apply flex flex-col gap-0.5;
+}
+
+@utility sidebar-tree-item {
+  @apply flex flex-col gap-0.5;
+}
+
+@utility sidebar-tree-row {
+  display: flex !important;
+  padding-left: calc(var(--sidebar-level, 0) * 0.75rem + 0.625rem);
+  @apply min-h-8 items-center gap-2 rounded-lg py-1 pr-2 text-xs text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out hover:text-secondary;
+
+  &:hover {
+    background: var(--theme-list-hover-bg);
+  }
+}
+
+@utility sidebar-tree-toggle {
+  @apply inline-flex h-4 w-4 shrink-0 items-center justify-center text-[10px] text-dimmed;
+}
+
+@utility sidebar-tree-children {
+  @apply flex flex-col gap-0.5;
+}
+
+@utility list-item-active {
+  border-left: var(--theme-list-active-border);
+  @apply rounded-lg bg-blue-50 text-blue-700 font-medium;
+  @apply hover:bg-blue-100 hover:text-blue-700;
+  @apply dark:bg-blue-950 dark:text-blue-300;
+  @apply dark:hover:bg-blue-900 dark:hover:text-blue-200;
+}
+
+@utility section-label {
+  @apply text-[0.6875rem] font-medium normal-case tracking-normal mb-5 text-dimmed select-none;
+}
+
+@utility rail-item {
+  border-right: var(--theme-rail-item-inactive-border-r);
+  @apply w-8 h-8 rounded-lg;
+  @apply flex items-center justify-center text-dimmed;
+  @apply transition-[background-color,color] duration-150 ease-out;
+
+  &:hover {
+    background: var(--theme-list-hover-bg);
+    @apply text-secondary;
+  }
+}
+
+@utility rail-item-active {
+  border-right: var(--theme-rail-item-active-border-r);
+  @apply rounded-lg text-blue-600 dark:text-blue-300;
+  @apply bg-blue-50 dark:bg-blue-950;
+}
+
+@utility bottom-bar-item {
+  @apply flex flex-col items-center gap-0.5 text-[10px] py-1.5 px-3 transition-colors text-dimmed;
+
+  &:hover {
+    @apply text-secondary;
+  }
+}
+
+@utility bottom-bar-item-active {
+  @apply text-primary font-medium;
+}

package/src/types/ambient.d.ts

@@ -0,0 +1,8 @@
+// Cross-app ambient module declarations. Every app's tsconfig includes this
+// so apps can import non-TS assets (e.g. `import md from './x.md' with { type: "text" }`)
+// without re-declaring the stub per-package.
+
+declare module "*.md" {
+  const content: string;
+  export default content;
+}

package/src/ui/admin-settings.tsx

@@ -0,0 +1,148 @@
+import { Show, type JSX } from "solid-js";
+
+/**
+ * Shared building blocks for admin "Settings" forms — extracted from
+ * FilesSettingsForm / WeatherSettingsForm / CoreSettingsForm which all
+ * implement the same change-tracking + sticky-save-bar UX.
+ *
+ * NOT an island. Subcomponents are pulled into the consuming `*.island.tsx`
+ * file at compile time, so the island boundary stays at the form level (the
+ * SSR plugin discovers islands by `.island.tsx` suffix).
+ */
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Stable JSON-based equality check. Used to detect "did this setting value
+ * change vs. its initial state?" — works for primitives, arrays, plain objects.
+ * Order-sensitive for arrays/object keys; that's intentional for settings
+ * where order matters (string_list, number_list).
+ */
+export const sameSettingValue = (a: unknown, b: unknown): boolean =>
+  JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * Parses a settings-API error response into a user-message + per-field error
+ * map. Mirrors the shape every settings PUT endpoint returns.
+ */
+export const readSettingsError = async (
+  response: Response,
+  fallback: string,
+): Promise<{ message: string; fields: Record<string, string> }> => {
+  const data = (await response.json().catch(() => null)) as
+    | { message?: string; errors?: Record<string, string> }
+    | null;
+  return {
+    message: data?.message ?? fallback,
+    fields: data?.errors ?? {},
+  };
+};
+
+// ── Field row ────────────────────────────────────────────────────────────────
+
+export type SettingsFieldProps = {
+  label: string;
+  description: string;
+  /** Reactive accessor for the per-field error string (undefined = no error). */
+  error: () => string | undefined;
+  /** Reactive accessor for "is this field's value different from its initial?". */
+  changed?: () => boolean;
+  /** The actual input control (TextInput, NumberInput, Switch, etc.). */
+  children: JSX.Element;
+};
+
+/**
+ * Single-row field wrapper for settings forms.
+ *
+ * Renders label + description on top, the input below, an inline error message
+ * underneath, and a soft amber background + a small dot when the value has
+ * unsaved changes. Mirrors the per-row UX of `/admin/settings`.
+ *
+ * Uses a `<div>` (not a `<label>`) — the actual `<input>` inside `children`
+ * has its own a11y attributes; this is purely a visual heading.
+ */
+export function SettingsField(props: SettingsFieldProps) {
+  return (
+    <div
+      class="flex flex-col gap-1.5 px-3 py-3"
+      classList={{ "bg-amber-50/50 dark:bg-amber-950/20": props.changed?.() ?? false }}
+    >
+      <div class="flex flex-col gap-0.5">
+        <div class="flex items-center gap-2">
+          <div class="text-sm font-medium text-primary">{props.label}</div>
+          <Show when={props.changed?.()}>
+            <span
+              class="inline-block w-1.5 h-1.5 rounded-full bg-amber-500"
+              title="Unsaved change"
+            />
+          </Show>
+        </div>
+        <p class="text-xs text-dimmed">{props.description}</p>
+      </div>
+      {props.children}
+      <Show when={props.error()}>
+        <p class="text-xs text-red-600 dark:text-red-400 flex items-center gap-1">
+          <i class="ti ti-alert-circle text-xs" /> {props.error()}
+        </p>
+      </Show>
+    </div>
+  );
+}
+
+// ── Sticky save bar ─────────────────────────────────────────────────────────
+
+export type SettingsSaveBarProps = {
+  /** Number of unsaved changes — when 0 the bar hides. */
+  changeCount: () => number;
+  /** Mutation loading flag — disables both buttons + flips Save → Saving. */
+  loading: () => boolean;
+  /** Reset all unsaved changes back to the initial values. */
+  onDiscard: () => void;
+  /** Trigger the bulk PUT save. */
+  onSave: () => void;
+};
+
+/**
+ * Sticky bottom bar shown when at least one field has unsaved changes.
+ * Displays "<n> unsaved change(s)" + Discard + Save buttons. Identical UX
+ * across files/weather/core settings forms.
+ */
+export function SettingsSaveBar(props: SettingsSaveBarProps) {
+  return (
+    <Show when={props.changeCount() > 0}>
+      <div class="sticky bottom-0 z-10 border-t border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-3 py-2 flex items-center justify-between gap-3">
+        <p class="text-xs text-dimmed">
+          <span class="font-medium text-primary">{props.changeCount()}</span>
+          {" "}unsaved change{props.changeCount() > 1 ? "s" : ""}
+        </p>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="btn-secondary btn-sm"
+            onClick={props.onDiscard}
+            disabled={props.loading()}
+          >
+            Discard
+          </button>
+          <button
+            type="button"
+            class="btn-primary btn-sm"
+            onClick={props.onSave}
+            disabled={props.loading()}
+          >
+            <Show
+              when={props.loading()}
+              fallback={
+                <>
+                  <i class="ti ti-device-floppy text-xs" /> Save all
+                </>
+              }
+            >
+              <i class="ti ti-loader-2 animate-spin text-xs" /> Saving...
+            </Show>
+          </button>
+        </div>
+      </div>
+    </Show>
+  );
+}

package/src/ui/dialog-core.ts

@@ -0,0 +1,146 @@
+import type { JSX } from "solid-js";
+import { render } from "solid-js/web";
+
+export type DialogClose<T> = (result?: T) => void;
+
+export type OpenDialogOptions = {
+  panelClassName?: string;
+  contentClassName?: string;
+  initialFocus?: "first-input" | "none" | ((dialog: HTMLDialogElement) => HTMLElement | null);
+  cancelBehavior?: "resolve-undefined" | "ignore";
+};
+
+export type DialogRender<T> = (
+  close: DialogClose<T>,
+  ctx: {
+    dialog: HTMLDialogElement;
+  },
+) => JSX.Element;
+
+export type DialogCore = {
+  open: <T>(view: DialogRender<T>, options?: OpenDialogOptions) => Promise<T | undefined>;
+  close: (result?: unknown) => void;
+  isOpen: () => boolean;
+};
+
+type DialogState = {
+  element?: HTMLDialogElement;
+  dispose?: () => void;
+  resolve?: (value: unknown) => void;
+  scrollLocked?: boolean;
+  previousBodyOverflow?: string;
+  previousHtmlOverflow?: string;
+};
+
+const DEFAULT_PANEL_CLASS = "dialog-panel";
+const DEFAULT_CONTENT_CLASS = "text-base text-zinc-800 dark:text-zinc-200";
+
+const resolveInitialFocusTarget = (dialog: HTMLDialogElement, initialFocus: OpenDialogOptions["initialFocus"]) => {
+  if (initialFocus === "none") return null;
+  if (typeof initialFocus === "function") return initialFocus(dialog);
+  return dialog.querySelector<HTMLElement>("input:not([type='hidden']), textarea, select, button");
+};
+
+const applyCancelBehavior = <T>(dialog: HTMLDialogElement, close: DialogClose<T>, behavior: OpenDialogOptions["cancelBehavior"]) => {
+  dialog.oncancel = (event) => {
+    if (behavior === "ignore") {
+      event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    close(undefined);
+  };
+
+  dialog.onclick = (event) => {
+    if (event.target !== dialog) return;
+    if (behavior === "ignore") return;
+    close(undefined);
+  };
+};
+
+export const createDialogCore = (): DialogCore => {
+  const state: DialogState = {};
+
+  const ensureDialogElement = () => {
+    if (typeof document === "undefined") throw new Error("Dialog core is browser-only");
+    if (state.element && document.body.contains(state.element)) return state.element;
+
+    const element = document.createElement("dialog");
+    document.body.appendChild(element);
+    state.element = element;
+    return element;
+  };
+
+  const clearRenderedContent = () => {
+    state.dispose?.();
+    state.dispose = undefined;
+  };
+
+  const lockPageScroll = () => {
+    if (typeof document === "undefined" || state.scrollLocked) return;
+
+    state.previousBodyOverflow = document.body.style.overflow;
+    state.previousHtmlOverflow = document.documentElement.style.overflow;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+    state.scrollLocked = true;
+  };
+
+  const unlockPageScroll = () => {
+    if (typeof document === "undefined" || !state.scrollLocked) return;
+
+    document.body.style.overflow = state.previousBodyOverflow ?? "";
+    document.documentElement.style.overflow = state.previousHtmlOverflow ?? "";
+    state.scrollLocked = false;
+    state.previousBodyOverflow = undefined;
+    state.previousHtmlOverflow = undefined;
+  };
+
+  const close: DialogCore["close"] = (result) => {
+    const dialog = state.element;
+    if (!dialog) return;
+
+    clearRenderedContent();
+    if (dialog.open) dialog.close();
+    unlockPageScroll();
+
+    const resolve = state.resolve;
+    state.resolve = undefined;
+    resolve?.(result);
+  };
+
+  const open = <T>(view: DialogRender<T>, options: OpenDialogOptions = {}): Promise<T | undefined> => {
+    const dialog = ensureDialogElement();
+    if (dialog.open) close(undefined);
+
+    dialog.className = options.panelClassName ?? DEFAULT_PANEL_CLASS;
+    dialog.innerHTML = "";
+
+    const content = document.createElement("div");
+    content.className = options.contentClassName ?? DEFAULT_CONTENT_CLASS;
+    dialog.appendChild(content);
+
+    return new Promise((resolve) => {
+      state.resolve = (value) => resolve(value as T | undefined);
+
+      const closeTyped: DialogClose<T> = (result) => close(result);
+      state.dispose = render(() => view(closeTyped, { dialog }), content);
+
+      applyCancelBehavior(dialog, closeTyped, options.cancelBehavior ?? "resolve-undefined");
+      dialog.showModal();
+      lockPageScroll();
+
+      requestAnimationFrame(() => {
+        resolveInitialFocusTarget(dialog, options.initialFocus ?? "first-input")?.focus();
+      });
+    });
+  };
+
+  return {
+    open,
+    close,
+    isOpen: () => !!state.element?.open,
+  };
+};
+
+export const dialogCore = createDialogCore();

package/src/ui/filter/FilterChip.tsx

@@ -0,0 +1,196 @@
+import { createSignal, createEffect, Show, createMemo } from "solid-js";
+import Dropdown from "../misc/Dropdown";
+import type { DropdownItem } from "../misc/Dropdown";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type FilterChipOption = {
+  value: string;
+  label: string;
+  icon?: string;
+  color?: string;
+};
+
+export type FilterChipSection = {
+  label?: string;
+  options: FilterChipOption[];
+  /** Allow multiple selections in this section (default: false) */
+  multiple?: boolean;
+};
+
+type FilterChipProps = {
+  /** Chip label */
+  label: string;
+  /** Chip icon */
+  icon: string;
+  /** Options as sections (use single section for flat list) */
+  options: FilterChipSection[];
+  /** Selected values (controlled) */
+  value: string[];
+  /** Called on change */
+  onChange: (value: string[]) => void;
+  /** Override active styling (default: value.length > 0) */
+  isActive?: boolean;
+  /** Dropdown position (default: "bottom-right") */
+  position?: "bottom-left" | "bottom-right";
+  /**
+   * Default values for reset (instead of clear).
+   * If provided, shows "Reset" instead of "Clear" and hides when at default.
+   * Also hides the count in the trigger.
+   */
+  defaultValue?: string[];
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Filter chip using the shared Dropdown component.
+ * Each section can be single-select or multi-select independently.
+ * Changes are applied when the dropdown closes.
+ */
+export default function FilterChip(props: FilterChipProps) {
+  // Local selection state (tracks pending changes)
+  const [localValue, setLocalValue] = createSignal<string[]>([...props.value]);
+
+  // Sync local state when props change
+  createEffect(() => setLocalValue([...props.value]));
+
+  // Computed values
+  const hasChanges = createMemo(() => {
+    const local = localValue();
+    const original = props.value;
+    return local.length !== original.length || local.some((v) => !original.includes(v));
+  });
+
+  const isActive = () => props.isActive ?? localValue().length > 0;
+  const isSelected = (value: string) => localValue().includes(value);
+  const selectedCount = () => localValue().length;
+  const hasDefaultValue = () => (props.defaultValue?.length ?? 0) > 0;
+
+  const isAtDefault = () => {
+    const def = props.defaultValue;
+    if (!def) return false;
+    const local = localValue();
+    return local.length === def.length && local.every((v) => def.includes(v));
+  };
+
+  // Find which section a value belongs to
+  const getSectionForValue = (value: string) => props.options.findIndex((s) => s.options.some((o) => o.value === value));
+
+  // Toggle option selection
+  const toggleOption = (value: string) => {
+    const sectionIndex = getSectionForValue(value);
+    const section = props.options[sectionIndex];
+    if (!section) return;
+
+    const isMultiple = section.multiple ?? false;
+
+    setLocalValue((prev) => {
+      const isCurrentlySelected = prev.includes(value);
+
+      if (isMultiple) {
+        return isCurrentlySelected ? prev.filter((v) => v !== value) : [...prev, value];
+      }
+
+      // Single-select: replace any value from this section
+      const sectionValues = new Set(section.options.map((o) => o.value));
+      const otherValues = prev.filter((v) => !sectionValues.has(v));
+      return isCurrentlySelected ? otherValues : [...otherValues, value];
+    });
+  };
+
+  const clearOrReset = () => setLocalValue(props.defaultValue ? [...props.defaultValue] : []);
+
+  const handleClose = () => {
+    if (hasChanges()) props.onChange(localValue());
+  };
+
+  // Build dropdown elements
+  const dropdownElements = (): DropdownItem[] => {
+    const elements: DropdownItem[] = [];
+
+    for (const section of props.options) {
+      const isMultiple = section.multiple ?? false;
+
+      const sectionItems = section.options.map((option) => ({
+        element: (
+          <button
+            type="button"
+            class="flex w-full items-center gap-3 px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 transition-colors hover:bg-white/30 dark:hover:bg-white/10"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              toggleOption(option.value);
+            }}
+          >
+            <Show when={isMultiple}>
+              <input type="checkbox" checked={isSelected(option.value)} readOnly aria-hidden="true" tabindex={-1} class="shrink-0 pointer-events-none" />
+            </Show>
+
+            <Show when={option.icon && !isMultiple}>
+              <i class={`${option.icon} ${isSelected(option.value) ? "text-blue-500" : "text-zinc-400"}`} />
+            </Show>
+
+            <Show when={option.color}>
+              <div class="w-3 h-3 rounded-full shrink-0" style={`background-color: ${option.color}`} />
+            </Show>
+
+            <span class="flex-1 truncate text-left">{option.label}</span>
+
+            <Show when={!isMultiple && isSelected(option.value)}>
+              <i class="ti ti-check text-blue-500" />
+            </Show>
+          </button>
+        ),
+      }));
+
+      if (section.label) {
+        elements.push({ sectionLabel: section.label, items: sectionItems });
+      } else {
+        elements.push(...sectionItems);
+      }
+    }
+
+    // Add clear/reset button when applicable
+    const shouldShowButton = hasDefaultValue() ? !isAtDefault() : selectedCount() > 0;
+    if (shouldShowButton) {
+      elements.push({
+        items: [
+          {
+            icon: hasDefaultValue() ? "ti ti-refresh" : "ti ti-x",
+            label: hasDefaultValue() ? "Reset" : "Clear",
+            variant: "danger" as const,
+            action: clearOrReset,
+          },
+        ],
+      });
+    }
+
+    return elements;
+  };
+
+  const trigger = (
+    <div class={`btn-input btn-input-sm ${isActive() ? "btn-input-active" : ""}`}>
+      <i class={`${props.icon} ${isActive() ? "text-blue-600 dark:text-blue-300" : "text-zinc-500 dark:text-zinc-400"}`} />
+      <span class={isActive() ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-300"}>
+        {props.label}
+        <Show when={!hasDefaultValue() && selectedCount() > 0}>{` (${selectedCount()})`}</Show>
+      </span>
+      <i class="ti ti-chevron-down text-zinc-400 text-[10px]" />
+    </div>
+  );
+
+  return (
+    <Dropdown
+      trigger={trigger}
+      elements={dropdownElements()}
+      position={props.position ?? "bottom-left"}
+      onClose={handleClose}
+      width="w-52"
+    />
+  );
+}

package/src/ui/filter/index.ts

@@ -0,0 +1,2 @@
+export { default as FilterChip } from "./FilterChip";
+export type { FilterChipOption, FilterChipSection } from "./FilterChip";