@valentinkolb/cloud 0.1.0

package/src/ui/sidebar.tsx

@@ -0,0 +1,468 @@
+import { For, Show, createMemo, type JSX } from "solid-js";
+
+export type SidebarRow = {
+  id: string;
+  label?: string;
+  href?: string;
+  icon?: string;
+  labelIcon?: string;
+  meta?: string;
+  active?: boolean;
+  class?: string;
+  content?: JSX.Element;
+  actionIcon?: string;
+  actionLabel?: string;
+  onActionClick?: (event: MouseEvent) => void;
+};
+
+export type SidebarSection = {
+  title?: string;
+  rows: SidebarRow[];
+};
+
+export type SidebarTreeNode = {
+  id: string;
+  label: string;
+  icon?: string;
+  labelIcon?: string;
+  meta?: string;
+  active?: boolean;
+  href?: string;
+  actionIcon?: string;
+  actionLabel?: string;
+  onActionClick?: (event: MouseEvent, nodeId: string) => void;
+  children?: SidebarTreeNode[];
+};
+
+export type SidebarTreeSpec = {
+  title?: string;
+  nodes: SidebarTreeNode[];
+  selectedId?: string;
+  expandedIds?: string[];
+  onToggle?: (nodeId: string) => void;
+  onSelect?: (nodeId: string) => void;
+};
+
+export type SidebarSpec = {
+  header: {
+    title: string;
+    subtitle?: string;
+    icon?: string | JSX.Element;
+    settingsHref?: string;
+  };
+  actions?: SidebarSection[] | SidebarRow[];
+  nav?: SidebarSection[] | SidebarRow[];
+  tree?: SidebarTreeSpec;
+  controls?: JSX.Element;
+  footer?: SidebarSection[] | SidebarRow[];
+  mobile?: {
+    mode?: "auto" | "hidden";
+    defaultOpen?: boolean;
+    toggleIcon?: "chevron" | "eye";
+    include?: Array<"settings" | "actions" | "nav" | "tree" | "controls" | "footer">;
+  };
+};
+
+type SidebarLayoutProps = {
+  render?: "both" | "mobile" | "desktop";
+  mobile?: {
+    header: JSX.Element;
+    items?: JSX.Element;
+    body?: JSX.Element;
+    defaultOpen?: boolean;
+    bodyClass?: string;
+    toggleIcon?: "chevron" | "eye";
+  };
+  desktop: {
+    class?: string;
+    header: JSX.Element;
+    actions?: JSX.Element;
+    body?: JSX.Element;
+    footer?: JSX.Element;
+  };
+};
+
+type SidebarFromSpecProps = {
+  spec: SidebarSpec;
+  render?: "both" | "mobile" | "desktop";
+  desktopClass?: string;
+};
+
+const normalizeSections = (sections?: SidebarSection[] | SidebarRow[], title?: string): SidebarSection[] => {
+  if (!sections || sections.length === 0) return [];
+  if ("rows" in sections[0]!) {
+    return sections as SidebarSection[];
+  }
+  return [{ title, rows: sections as SidebarRow[] }];
+};
+
+function SidebarRowItem(props: { row: SidebarRow; mobile?: boolean }) {
+  if (props.row.content) return <>{props.row.content}</>;
+
+  const sharedLabel = (
+    <>
+      <Show when={props.row.icon}>
+        <i class={`ti ${props.row.icon} text-sm`} />
+      </Show>
+      <div class="min-w-0 flex-1 text-left">
+        <span class="block truncate">{props.row.label}</span>
+        <Show when={props.row.meta}>
+          <span class="sidebar-item-meta block truncate">{props.row.meta}</span>
+        </Show>
+      </div>
+      <Show when={props.row.labelIcon}>
+        <i class={`ti ${props.row.labelIcon} text-xs text-dimmed`} />
+      </Show>
+      <Show when={props.row.actionIcon && !props.mobile}>
+        <button
+          type="button"
+          class="sidebar-item-action"
+          aria-label={props.row.actionLabel ?? "Row action"}
+          onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props.row.onActionClick?.(event);
+          }}
+        >
+          <i class={`ti ${props.row.actionIcon}`} />
+        </button>
+      </Show>
+    </>
+  );
+
+  if (props.mobile) {
+    if (props.row.href) {
+      return (
+        <a
+          href={props.row.href}
+          class={`btn-input btn-input-sm ${props.row.active ? "border-blue-500/35 bg-blue-50/70 text-blue-700 dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200" : ""} ${props.row.class ?? ""}`}
+          data-row={props.row.id}
+        >
+          <Show when={props.row.icon}>
+            <i class={`ti ${props.row.icon}`} />
+          </Show>
+          <span>{props.row.label}</span>
+        </a>
+      );
+    }
+    return (
+      <button
+        type="button"
+        class={`btn-input btn-input-sm ${props.row.active ? "border-blue-500/35 bg-blue-50/70 text-blue-700 dark:border-blue-400/40 dark:bg-blue-950/40 dark:text-blue-200" : ""} ${props.row.class ?? ""}`}
+        data-row={props.row.id}
+      >
+        <Show when={props.row.icon}>
+          <i class={`ti ${props.row.icon}`} />
+        </Show>
+        <span>{props.row.label}</span>
+      </button>
+    );
+  }
+
+  if (props.row.href) {
+    return (
+      <a href={props.row.href} class={`sidebar-item ${props.row.active ? "sidebar-item-active" : ""} ${props.row.class ?? ""}`} data-row={props.row.id}>
+        {sharedLabel}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      class={`sidebar-item ${props.row.active ? "sidebar-item-active" : ""} ${props.row.class ?? ""}`}
+      data-row={props.row.id}
+    >
+      {sharedLabel}
+    </button>
+  );
+}
+
+function SidebarTree(props: { tree: SidebarTreeSpec; level?: number }) {
+  const level = props.level ?? 0;
+  const expanded = createMemo(() => new Set(props.tree.expandedIds ?? []));
+
+  return (
+    <div class="sidebar-tree" role={level === 0 ? "tree" : undefined}>
+      <For each={props.tree.nodes}>
+        {(node) => {
+          const hasChildren = () => (node.children?.length ?? 0) > 0;
+          const isExpanded = () => expanded().has(node.id);
+          const isSelected = () => node.active || props.tree.selectedId === node.id;
+          const showLeafIcon = () => !hasChildren() && !!node.icon;
+
+          return (
+            <div class="sidebar-tree-item" role="treeitem" aria-level={level + 1} aria-expanded={hasChildren() ? isExpanded() : undefined}>
+              <div class={`sidebar-tree-row ${isSelected() ? "sidebar-item-active" : ""}`} style={`--sidebar-level:${level}`}>
+                <button
+                  type="button"
+                  class="sidebar-tree-toggle"
+                  onClick={() => {
+                    if (!hasChildren()) return;
+                    props.tree.onToggle?.(node.id);
+                  }}
+                  aria-label={hasChildren() ? (isExpanded() ? "Collapse" : "Expand") : undefined}
+                >
+                  <Show when={hasChildren()} fallback={showLeafIcon() ? <i class={`ti ${node.icon} text-xs`} /> : <span class="h-2 w-2 rounded-full bg-zinc-300 dark:bg-zinc-600" />}>
+                    <i class={`ti ${isExpanded() ? "ti-chevron-down" : "ti-chevron-right"} text-[10px]`} />
+                  </Show>
+                </button>
+                <Show when={hasChildren() && node.icon}>
+                  <i class={`ti ${node.icon} text-xs text-dimmed`} />
+                </Show>
+                <Show
+                  when={node.href}
+                  fallback={
+                    <button type="button" class="min-w-0 flex-1 truncate text-left" onClick={() => props.tree.onSelect?.(node.id)}>
+                      {node.label}
+                    </button>
+                  }
+                >
+                  <a href={node.href!} class="min-w-0 flex-1 truncate">
+                    {node.label}
+                  </a>
+                </Show>
+                <Show when={node.labelIcon}>
+                  <i class={`ti ${node.labelIcon} text-xs text-dimmed`} />
+                </Show>
+                <Show when={node.actionIcon}>
+                  <button
+                    type="button"
+                    class="sidebar-item-action"
+                    aria-label={node.actionLabel ?? "Row action"}
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      node.onActionClick?.(event, node.id);
+                    }}
+                  >
+                    <i class={`ti ${node.actionIcon}`} />
+                  </button>
+                </Show>
+              </div>
+              <Show when={hasChildren() && isExpanded()}>
+                <div class="sidebar-tree-children">
+                  <SidebarTree tree={{ ...props.tree, nodes: node.children ?? [] }} level={level + 1} />
+                </div>
+              </Show>
+            </div>
+          );
+        }}
+      </For>
+    </div>
+  );
+}
+
+export function SidebarFromSpec(props: SidebarFromSpecProps) {
+  const include = createMemo(() => new Set(props.spec.mobile?.include ?? ["settings", "actions", "nav", "tree", "controls", "footer"]));
+  const mobileMode = props.spec.mobile?.mode ?? "auto";
+
+  const actionSections = createMemo(() => normalizeSections(props.spec.actions, "Actions"));
+  const navSections = createMemo(() => normalizeSections(props.spec.nav, "Navigation"));
+  const footerSections = createMemo(() => normalizeSections(props.spec.footer));
+
+  const desktopHeader = (
+    <>
+      <Show when={typeof props.spec.header.icon === "string"}>
+        <div class="w-6 h-6 rounded bg-blue-500 flex items-center justify-center text-white shrink-0">
+          <i class={`ti ${(props.spec.header.icon as string) || "ti-layout-sidebar"} text-xs`} />
+        </div>
+      </Show>
+      <Show when={typeof props.spec.header.icon !== "string" && props.spec.header.icon}>{props.spec.header.icon as JSX.Element}</Show>
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-semibold text-primary">{props.spec.header.title}</p>
+        <Show when={props.spec.header.subtitle}>
+          <p class="text-xs text-dimmed truncate">{props.spec.header.subtitle}</p>
+        </Show>
+      </div>
+      <Show when={props.spec.header.settingsHref}>
+        <a href={props.spec.header.settingsHref!} class="p-0.5 text-dimmed hover:text-primary transition-colors shrink-0" title="Settings">
+          <i class="ti ti-settings text-xs" />
+        </a>
+      </Show>
+    </>
+  );
+
+  const desktopActions = (
+    <>
+      <For each={actionSections()}>
+        {(section) => (
+          <section class="sidebar-section">
+            <Show when={section.title}>
+              <p class="sidebar-section-title">{section.title}</p>
+            </Show>
+            <div class="flex flex-col gap-1">
+              <For each={section.rows}>{(row) => <SidebarRowItem row={row} />}</For>
+            </div>
+          </section>
+        )}
+      </For>
+      <For each={navSections()}>
+        {(section) => (
+          <section class="sidebar-section">
+            <Show when={section.title}>
+              <p class="sidebar-section-title">{section.title}</p>
+            </Show>
+            <div class="flex flex-col gap-1">
+              <For each={section.rows}>{(row) => <SidebarRowItem row={row} />}</For>
+            </div>
+          </section>
+        )}
+      </For>
+    </>
+  );
+
+  const desktopBody = (
+    <>
+      <Show when={props.spec.tree}>
+        <section class="sidebar-section">
+          <Show when={props.spec.tree?.title}>
+            <p class="sidebar-section-title">{props.spec.tree?.title}</p>
+          </Show>
+          <SidebarTree tree={props.spec.tree!} />
+        </section>
+      </Show>
+      <Show when={props.spec.controls}>
+        <section class="sidebar-section">{props.spec.controls}</section>
+      </Show>
+    </>
+  );
+
+  const desktopFooter = (
+    <For each={footerSections()}>
+      {(section) => (
+        <section class="sidebar-section">
+          <Show when={section.title}>
+            <p class="sidebar-section-title">{section.title}</p>
+          </Show>
+          <div class="flex flex-col gap-1">
+            <For each={section.rows}>{(row) => <SidebarRowItem row={row} />}</For>
+          </div>
+        </section>
+      )}
+    </For>
+  );
+
+  const mobileHeader = (
+    <>
+      <Show when={typeof props.spec.header.icon === "string"}>
+        <div class="w-8 h-8 rounded-lg bg-blue-500 flex items-center justify-center text-white shrink-0">
+          <i class={`ti ${(props.spec.header.icon as string) || "ti-layout-sidebar"} text-sm`} />
+        </div>
+      </Show>
+      <Show when={typeof props.spec.header.icon !== "string" && props.spec.header.icon}>{props.spec.header.icon as JSX.Element}</Show>
+      <span class="font-semibold truncate flex-1">{props.spec.header.title}</span>
+    </>
+  );
+
+  const mobileItems = (
+    <>
+      <Show when={include().has("settings") && props.spec.header.settingsHref}>
+        <a href={props.spec.header.settingsHref!} class="btn-input btn-input-sm">
+          <i class="ti ti-settings" />
+          Settings
+        </a>
+      </Show>
+      <Show when={include().has("actions")}>
+        <For each={actionSections()}>
+          {(section) => <For each={section.rows}>{(row) => <SidebarRowItem row={row} mobile />}</For>}
+        </For>
+      </Show>
+      <Show when={include().has("nav")}>
+        <For each={navSections()}>
+          {(section) => <For each={section.rows}>{(row) => <SidebarRowItem row={row} mobile />}</For>}
+        </For>
+      </Show>
+      <Show when={include().has("footer")}>
+        <For each={footerSections()}>
+          {(section) => <For each={section.rows}>{(row) => <SidebarRowItem row={row} mobile />}</For>}
+        </For>
+      </Show>
+    </>
+  );
+
+  const mobileBody = (
+    <>
+      <Show when={include().has("tree") && props.spec.tree}>
+        <section class="sidebar-section">
+          <Show when={props.spec.tree?.title}>
+            <p class="sidebar-section-title">{props.spec.tree?.title}</p>
+          </Show>
+          <SidebarTree tree={props.spec.tree!} />
+        </section>
+      </Show>
+      <Show when={include().has("controls") && props.spec.controls}>
+        <section class="sidebar-section">{props.spec.controls}</section>
+      </Show>
+    </>
+  );
+
+  return (
+    <SidebarLayout
+      render={props.render}
+      desktop={{
+        class: props.desktopClass,
+        header: desktopHeader,
+        actions: desktopActions,
+        body: desktopBody,
+        footer: desktopFooter,
+      }}
+      mobile={
+        mobileMode === "hidden"
+          ? undefined
+          : {
+              defaultOpen: props.spec.mobile?.defaultOpen,
+              toggleIcon: props.spec.mobile?.toggleIcon,
+              header: mobileHeader,
+              items: mobileItems,
+              body: mobileBody,
+            }
+      }
+    />
+  );
+}
+
+export function SidebarLayout(props: SidebarLayoutProps) {
+  const renderMode = props.render ?? "both";
+  const mobileOpenProps = props.mobile?.defaultOpen ? { open: true } : {};
+
+  return (
+    <>
+      <Show when={(renderMode === "both" || renderMode === "mobile") && props.mobile}>
+        <nav class="lg:hidden flex flex-col gap-3">
+          <details class="group" {...mobileOpenProps}>
+            <summary class="sidebar-header cursor-pointer select-none list-none">
+              {props.mobile!.header}
+              <span class="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-dimmed transition-transform group-open:rotate-180">
+                <i class={`ti ${props.mobile?.toggleIcon === "eye" ? "ti-eye" : "ti-chevron-down"} text-sm`} />
+              </span>
+            </summary>
+            <Show when={props.mobile?.items}>
+              <div class="mt-2 flex flex-wrap gap-2">{props.mobile?.items}</div>
+            </Show>
+            <Show when={props.mobile?.body}>
+              <div class={`mt-2 ${props.mobile?.bodyClass ?? "max-h-64 overflow-y-auto p-2"}`}>{props.mobile?.body}</div>
+            </Show>
+          </details>
+        </nav>
+      </Show>
+
+      <Show when={renderMode === "both" || renderMode === "desktop"}>
+        <aside class={`hidden lg:flex flex-col min-h-0 overflow-y-auto ${props.desktop.class ?? ""}`}>
+          <div class="sidebar-header">{props.desktop.header}</div>
+          <Show when={props.desktop.actions}>
+            <div class="flex flex-col gap-3">{props.desktop.actions}</div>
+          </Show>
+          <Show when={props.desktop.body}>
+            <div class={`sidebar-body ${props.desktop.actions ? "mt-2" : ""}`}>{props.desktop.body}</div>
+          </Show>
+          <Show when={props.desktop.footer}>
+            <div class="sidebar-footer">{props.desktop.footer}</div>
+          </Show>
+        </aside>
+      </Show>
+    </>
+  );
+}
+
+export default SidebarLayout;

package/src/ui/widgets/Widget.tsx

@@ -0,0 +1,62 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Widget container — frames a stack of `Widget*` blocks with a title-bar
+ * header. The body is `divide-y` so blocks separate naturally; each block
+ * brings its own padding.
+ *
+ * Designed so Stat / List / Status / Pills blocks can be freely combined
+ * vertically — every dashboard widget is a custom composition of those.
+ *
+ * ```tsx
+ * <Widget title="Account requests" icon="ti ti-users" href="/app/accounts">
+ *   <WidgetStat value={12} label="Open" sub="needs review" />
+ *   <WidgetList items={[{ icon: "ti ti-user", label: "alice@…" }, …]} />
+ * </Widget>
+ * ```
+ */
+type WidgetProps = {
+  title: string;
+  icon?: string;
+  /** When set, the whole header acts as a link to this URL. */
+  href?: string;
+  /** Tiny meta string in the header (e.g. "last 24h"). */
+  meta?: string;
+  children: JSX.Element;
+};
+
+const Widget = (props: WidgetProps): JSX.Element => {
+  const headerClass = `flex items-center gap-2 px-4 py-2.5 border-b border-zinc-100 dark:border-zinc-800 ${
+    props.href ? "hover:bg-zinc-50 dark:hover:bg-zinc-800/40 transition-colors" : ""
+  }`;
+  const headerInner = (
+    <>
+      {props.icon ? <i class={`${props.icon} text-dimmed text-sm shrink-0`} /> : null}
+      <span class="text-xs font-semibold uppercase tracking-wider text-secondary truncate">
+        {props.title}
+      </span>
+      {/* Right cluster: meta sits next to the chevron (both ml-auto'd
+          independently used to center the meta between title and chevron). */}
+      {props.meta || props.href ? (
+        <div class="ml-auto flex items-center gap-2 shrink-0">
+          {props.meta ? <span class="text-[10px] text-dimmed">{props.meta}</span> : null}
+          {props.href ? <i class="ti ti-chevron-right text-dimmed text-xs" /> : null}
+        </div>
+      ) : null}
+    </>
+  );
+  return (
+    <div class="paper overflow-hidden flex flex-col h-[25rem]">
+      {props.href ? (
+        <a href={props.href} class={headerClass}>{headerInner}</a>
+      ) : (
+        <div class={headerClass}>{headerInner}</div>
+      )}
+      <div class="flex-1 flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 min-h-0">
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default Widget;

package/src/ui/widgets/WidgetCard.tsx

@@ -0,0 +1,19 @@
+import type { JSX } from "solid-js/jsx-runtime";
+
+type WidgetCardProps = {
+  title: string;
+  icon: string;
+  children: JSX.Element;
+};
+
+export default function WidgetCard({ title, icon, children }: WidgetCardProps) {
+  return (
+    <div class="border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 p-4 h-72 sm:h-80 flex flex-col rounded-2xl">
+      <div class="flex items-center gap-2 mb-3 shrink-0">
+        <i class={`ti ti-${icon} text-dimmed`} />
+        <span class="text-sm font-medium text-primary">{title}</span>
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/ui/widgets/WidgetHero.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Hero block — single big centred message that fills the widget body.
+ * Use for spotlight content (a quote, a single weather location, an
+ * empty-state hint like "All caught up"). Always grows to fill remaining
+ * space; content is horizontally + vertically centred.
+ *
+ * For multi-item or stat-heavy content, prefer the dedicated block types.
+ */
+type Tone = "emerald" | "amber" | "red" | "blue" | "zinc";
+
+const ICON_TONE: Record<Tone, string> = {
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  red: "text-red-500 dark:text-red-400",
+  blue: "text-blue-600 dark:text-blue-400",
+  zinc: "text-zinc-500 dark:text-zinc-500",
+};
+
+type WidgetHeroProps = {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  tone?: Tone;
+};
+
+const WidgetHero = (props: WidgetHeroProps): JSX.Element => {
+  const iconColor = () => (props.tone ? ICON_TONE[props.tone] : "text-dimmed");
+  return (
+    <div class="px-5 py-4 flex-1 flex flex-col items-center justify-center gap-2 text-center">
+      {props.icon ? <i class={`${props.icon} ${iconColor()} text-3xl`} /> : null}
+      <span class="text-base font-medium text-primary leading-snug">{props.title}</span>
+      {props.subtitle ? <span class="text-xs text-dimmed">{props.subtitle}</span> : null}
+    </div>
+  );
+};
+
+export default WidgetHero;

package/src/ui/widgets/WidgetList.tsx

@@ -0,0 +1,84 @@
+import type { JSX } from "solid-js";
+
+/**
+ * List block inside a Widget — a vertical stack of small rows with optional
+ * icon, primary label, sub-text, and trailing meta or chevron when the row
+ * acts as a link.
+ */
+type Tone = "emerald" | "amber" | "red" | "blue" | "zinc";
+
+const ICON_TONE: Record<Tone, string> = {
+  emerald: "text-emerald-600 dark:text-emerald-400",
+  amber: "text-amber-600 dark:text-amber-400",
+  red: "text-red-500 dark:text-red-400",
+  blue: "text-blue-600 dark:text-blue-400",
+  zinc: "text-zinc-500 dark:text-zinc-500",
+};
+
+export type WidgetListItem = {
+  icon?: string;
+  /** Override the default dimmed icon colour with a tone. */
+  iconTone?: Tone;
+  label: string;
+  sub?: string;
+  /** Trailing meta (right-aligned, e.g. timestamp or count). */
+  meta?: string;
+  href?: string;
+};
+
+type WidgetListProps = {
+  items: WidgetListItem[];
+  /** Shown when `items` is empty. Defaults to `"Nothing here yet."`. */
+  emptyMessage?: string;
+  /** Fills remaining vertical space; scrolls internally if items overflow. */
+  grow?: boolean;
+};
+
+const Row = (props: { item: WidgetListItem }): JSX.Element => {
+  const rowClass = `flex items-center gap-2.5 px-4 py-2 ${
+    props.item.href ? "hover:bg-zinc-50 dark:hover:bg-zinc-800/40 transition-colors" : ""
+  }`;
+  const inner = (
+    <>
+      {props.item.icon ? (
+        <i
+          class={`${props.item.icon} ${
+            props.item.iconTone ? ICON_TONE[props.item.iconTone] : "text-dimmed"
+          } text-sm shrink-0`}
+        />
+      ) : null}
+      <div class="flex-1 min-w-0 flex flex-col">
+        <span class="text-xs font-medium text-primary truncate">{props.item.label}</span>
+        {props.item.sub ? <span class="text-[10px] text-dimmed truncate">{props.item.sub}</span> : null}
+      </div>
+      {props.item.meta ? (
+        <span class="text-[10px] text-dimmed shrink-0 tabular-nums">{props.item.meta}</span>
+      ) : null}
+      {props.item.href ? <i class="ti ti-chevron-right text-dimmed text-[10px] shrink-0" /> : null}
+    </>
+  );
+  return props.item.href ? (
+    <a href={props.item.href} class={rowClass}>{inner}</a>
+  ) : (
+    <div class={rowClass}>{inner}</div>
+  );
+};
+
+const WidgetList = (props: WidgetListProps): JSX.Element => {
+  if (props.items.length === 0) {
+    return (
+      <div class={`px-4 py-3 text-center ${props.grow ? "flex-1 flex items-center justify-center" : ""}`}>
+        <span class="text-[11px] text-dimmed italic">{props.emptyMessage ?? "Nothing here yet."}</span>
+      </div>
+    );
+  }
+  return (
+    <div class={`flex flex-col ${props.grow ? "flex-1 overflow-y-auto" : ""}`}>
+      {props.items.map((item) => (
+        <Row item={item} />
+      ))}
+    </div>
+  );
+};
+
+export default WidgetList;