@valentinkolb/cloud 0.1.0

package/src/ui/ipa/LoginBtn.tsx

@@ -0,0 +1,16 @@
+type LoginBtnProps = {
+  redirectTo?: string;
+  class?: string;
+};
+
+/** Link styled as a button that navigates to the login page. */
+export default function LoginBtn(props: LoginBtnProps) {
+  const href = props.redirectTo ? `/auth/login?redirectTo=${encodeURIComponent(props.redirectTo)}` : "/auth/login";
+
+  return (
+    <a href={href} class={props.class ?? "btn-primary"}>
+      <i class="ti ti-login" />
+      <span>Sign In</span>
+    </a>
+  );
+}

package/src/ui/ipa/UserView.tsx

@@ -0,0 +1,58 @@
+import type { BaseUser } from "../../contracts/shared";
+
+type UserViewProps = {
+  user: BaseUser;
+  showRealm?: boolean;
+};
+
+const badgeStyles: Record<`${"ipa" | "local"}:${"user" | "guest"}`, { bg: string; text: string; label: string }> = {
+  "ipa:user": {
+    bg: "bg-green-100 dark:bg-green-900/30",
+    text: "text-green-700 dark:text-green-400",
+    label: "IPA",
+  },
+  "ipa:guest": {
+    bg: "bg-yellow-100 dark:bg-yellow-900/30",
+    text: "text-yellow-700 dark:text-yellow-400",
+    label: "IPA Guest",
+  },
+  "local:user": {
+    bg: "bg-sky-100 dark:bg-sky-900/30",
+    text: "text-sky-700 dark:text-sky-400",
+    label: "Local",
+  },
+  "local:guest": {
+    bg: "bg-zinc-100 dark:bg-zinc-800",
+    text: "text-zinc-600 dark:text-zinc-400",
+    label: "Guest",
+  },
+};
+
+export default function UserView(props: UserViewProps) {
+  const badge = () => badgeStyles[`${props.user.provider}:${props.user.profile}`] ?? badgeStyles["local:guest"];
+
+  return (
+    <div class="flex items-start gap-3 min-w-0">
+      <div class="flex shrink-0 items-center justify-center rounded-full bg-zinc-200 dark:bg-zinc-700 font-semibold text-zinc-600 dark:text-zinc-300 h-9 w-9 text-xs">
+        {props.user.uid.slice(0, 2).toUpperCase()}
+      </div>
+      <div class="flex flex-col gap-0.5 min-w-0">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium text-primary truncate">{props.user.displayName}</span>
+          {props.showRealm && badge() !== undefined && (
+            <span class={`tag ${badge()?.bg} ${badge()?.text}`}>{badge()?.label}</span>
+          )}
+        </div>
+        <div class="flex items-center gap-2 text-xs text-dimmed">
+          <span class="font-mono">{props.user.profile === "guest" ? `${props.user.uid.slice(0, 12)}...` : props.user.uid}</span>
+          {props.user.mail && (
+            <>
+              <span class="text-zinc-300 dark:text-zinc-600">|</span>
+              <span class="truncate">{props.user.mail}</span>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/ipa/index.ts

@@ -0,0 +1,4 @@
+export { default as Avatar } from "./Avatar";
+export { default as UserView } from "./UserView";
+export { default as GroupView } from "./GroupView";
+export { default as LoginBtn } from "./LoginBtn";

package/src/ui/misc/ContextMenu.tsx

@@ -0,0 +1,211 @@
+import type { ParentProps, JSX } from "solid-js";
+import { Show, children as resolveChildren, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import { Portal } from "solid-js/web";
+import type { DropdownItem } from "./Dropdown";
+
+const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
+
+type ContextMenuAction = Extract<DropdownItem, { label: string }>;
+type ContextMenuSection = Extract<DropdownItem, { items: unknown }>;
+type ContextMenuElement = Extract<DropdownItem, { element: unknown }>;
+
+export type ContextMenuProps = ParentProps<{
+  children: JSX.Element;
+  elements: DropdownItem[];
+  class?: string | ((isOpen: boolean) => string);
+  disabled?: boolean;
+  onClose?: () => void;
+  onOpen?: () => void;
+  id?: string;
+}>;
+
+const ITEM_BASE_CLASSES =
+  "flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10";
+
+const getVariantClasses = (variant?: "danger") =>
+  variant === "danger" ? "text-red-600 dark:text-red-400" : "text-zinc-700 dark:text-zinc-300";
+
+const isSection = (item: DropdownItem): item is ContextMenuSection => "items" in item;
+const isElement = (item: DropdownItem): item is ContextMenuElement => "element" in item;
+
+const getMenuItems = (menu: HTMLDivElement | undefined) =>
+  menu ? Array.from(menu.querySelectorAll<HTMLElement>("[role='menuitem']")) : [];
+
+export default function ContextMenu(props: ContextMenuProps) {
+  const id = props.id ?? `ctx-${crypto.randomUUID()}`;
+  const [coords, setCoords] = createSignal({ x: 0, y: 0 });
+  let menuRef: HTMLDivElement | undefined;
+  let hostRef: HTMLDivElement | undefined;
+
+  const isOpen = () => openMenuId() === id;
+  const hostClass = createMemo(() => (typeof props.class === "function" ? props.class(isOpen()) : props.class));
+  const content = resolveChildren(() => props.children);
+
+  const close = () => {
+    if (openMenuId() !== id) return;
+    setOpenMenuId(null);
+    props.onClose?.();
+  };
+
+  const focusItem = (index: number) => {
+    const items = getMenuItems(menuRef);
+    if (items.length === 0) return;
+    const next = Math.max(0, Math.min(index, items.length - 1));
+    items[next]?.focus();
+  };
+
+  const open = (event: MouseEvent) => {
+    if (props.disabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setCoords({ x: event.clientX, y: event.clientY });
+    if (openMenuId() !== id) {
+      setOpenMenuId(id);
+      props.onOpen?.();
+    }
+    queueMicrotask(() => focusItem(0));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!isOpen()) return;
+    const items = getMenuItems(menuRef);
+    const currentIndex = items.findIndex((item) => item === document.activeElement);
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        close();
+        hostRef?.focus();
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        focusItem(currentIndex + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusItem(currentIndex <= 0 ? items.length - 1 : currentIndex - 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusItem(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusItem(items.length - 1);
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  };
+
+  onMount(() => {
+    const handlePointer = (event: MouseEvent) => {
+      if (!isOpen()) return;
+      const target = event.target;
+      if (target instanceof Node && (menuRef?.contains(target) || hostRef?.contains(target))) return;
+      close();
+    };
+
+    document.addEventListener("mousedown", handlePointer);
+    document.addEventListener("contextmenu", handlePointer);
+    document.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handlePointer);
+      document.removeEventListener("contextmenu", handlePointer);
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+
+  const renderAction = (item: ContextMenuAction) => {
+    const classes = `${ITEM_BASE_CLASSES} ${getVariantClasses(item.variant)}`;
+    const content = (
+      <>
+        {item.icon && <i class={item.icon} />}
+        <span>{item.label}</span>
+      </>
+    );
+
+    if ("href" in item && item.href) {
+      return (
+        <a
+          href={item.href}
+          target={item.external ? "_blank" : undefined}
+          rel={item.external ? "noopener noreferrer" : undefined}
+          role="menuitem"
+          tabIndex={-1}
+          class={classes}
+          onClick={close}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <button
+        type="button"
+        role="menuitem"
+        tabIndex={-1}
+        class={classes}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if ("action" in item && item.action) {
+            item.action();
+          }
+          close();
+        }}
+      >
+        {content}
+      </button>
+    );
+  };
+
+  return (
+    <>
+      <div
+        ref={hostRef}
+        role="group"
+        class={hostClass()}
+        onContextMenu={open}
+      >
+        {content()}
+      </div>
+
+      <Show when={isOpen()}>
+        <Portal>
+          <div
+            ref={menuRef}
+            role="menu"
+            aria-label="Context menu"
+            class="fixed z-50 w-52 max-w-[min(22rem,calc(100vw-1rem))] overflow-y-auto rounded-xl border border-zinc-300/60 bg-white/95 p-0 text-zinc-900 shadow-lg ring-1 ring-black/5 backdrop-blur-sm dark:border-zinc-600/50 dark:bg-zinc-950/95 dark:text-zinc-100"
+            style={{
+              left: `${Math.min(coords().x, window.innerWidth - 220)}px`,
+              top: `${Math.min(coords().y, window.innerHeight - 320)}px`,
+            }}
+          >
+            {props.elements.map((item, index) =>
+              isSection(item) ? (
+                <>
+                  {index > 0 && <hr class="border-white/20 dark:border-zinc-700/25" />}
+                  <Show when={item.sectionLabel}>
+                    <div class="px-4 pt-3 pb-1 text-xs font-medium uppercase tracking-wider text-zinc-500">{item.sectionLabel}</div>
+                  </Show>
+                  {item.items.map((sectionItem) => (isElement(sectionItem) ? (typeof sectionItem.element === "function" ? sectionItem.element(close) : sectionItem.element) : renderAction(sectionItem)))}
+                </>
+              ) : isElement(item) ? (
+                typeof item.element === "function" ? (
+                  item.element(close)
+                ) : (
+                  item.element
+                )
+              ) : (
+                renderAction(item)
+              ),
+            )}
+          </div>
+        </Portal>
+      </Show>
+    </>
+  );
+}

package/src/ui/misc/CopyButton.tsx

@@ -0,0 +1,28 @@
+import { createSignal } from "solid-js";
+import { copyToClipboard } from "@valentinkolb/stdlib/browser";
+
+type CopyButtonProps = {
+  /** Text to copy to clipboard */
+  text: string;
+  /** Optional label - if omitted, renders icon-only */
+  label?: string;
+  /** Additional CSS classes */
+  class?: string;
+};
+
+export default function CopyButton(props: CopyButtonProps) {
+  const [copied, setCopied] = createSignal(false);
+
+  const handleCopy = async () => {
+    await copyToClipboard(props.text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button type="button" class={props.class ?? "btn-simple text-[10px] px-1.5 py-0.5"} onClick={handleCopy}>
+      <i class={copied() ? "ti ti-check" : "ti ti-copy"} />
+      {props.label !== undefined && <span>{copied() ? "Copied" : props.label}</span>}
+    </button>
+  );
+}

package/src/ui/misc/Dropdown.tsx

@@ -0,0 +1,194 @@
+import type { JSX } from "solid-js";
+
+// ==========================
+// Types
+// ==========================
+
+type DropdownActionBase = {
+  icon?: string;
+  label: string;
+  variant?: "danger";
+};
+
+type DropdownActionClick = DropdownActionBase & {
+  action: () => void;
+  href?: never;
+};
+
+type DropdownActionLink = DropdownActionBase & {
+  href: string;
+  external?: boolean;
+  action?: never;
+};
+
+type DropdownAction = DropdownActionClick | DropdownActionLink;
+
+type DropdownElement = {
+  element: JSX.Element | ((close: () => void) => JSX.Element);
+};
+
+type DropdownSection = {
+  sectionLabel?: string;
+  items: Array<DropdownAction | DropdownElement>;
+};
+
+export type DropdownItem = DropdownAction | DropdownElement | DropdownSection;
+
+type DropdownProps = {
+  trigger: JSX.Element;
+  elements: DropdownItem[];
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left" | (() => "bottom-right" | "bottom-left" | "top-right" | "top-left");
+  width?: string;
+  className?: string;
+  /** Called when the dropdown closes (click outside, escape, or programmatic) */
+  onClose?: () => void;
+};
+
+// ==========================
+// Constants
+// ==========================
+
+const POSITION_STYLES: Record<string, string> = {
+  "bottom-right":
+    "top: anchor(bottom); left: anchor(left); margin-top: 4px;" +
+    "position-try-fallbacks: --flip-block;" +
+    "position-try: --flip-block { bottom: anchor(top); top: auto; margin-top: 0; margin-bottom: 4px; };",
+  "bottom-left":
+    "top: anchor(bottom); right: anchor(right); margin-top: 4px;" +
+    "position-try-fallbacks: --flip-block-left;" +
+    "position-try: --flip-block-left { bottom: anchor(top); top: auto; margin-top: 0; margin-bottom: 4px; };",
+  "top-right":
+    "bottom: anchor(top); left: anchor(left); margin-bottom: 4px;" +
+    "position-try-fallbacks: --flip-block-down;" +
+    "position-try: --flip-block-down { top: anchor(bottom); bottom: auto; margin-bottom: 0; margin-top: 4px; };",
+  "top-left":
+    "bottom: anchor(top); right: anchor(right); margin-bottom: 4px;" +
+    "position-try-fallbacks: --flip-block-down-left;" +
+    "position-try: --flip-block-down-left { top: anchor(bottom); bottom: auto; margin-bottom: 0; margin-top: 4px; };",
+};
+
+const ITEM_BASE_CLASSES = "flex w-full items-center gap-3 px-4 py-2 text-sm transition-colors hover:bg-white/30 dark:hover:bg-white/10";
+
+// ==========================
+// Component
+// ==========================
+
+/** Accessible dropdown menu with popover light-dismiss and CSS anchor positioning. */
+export default function Dropdown(props: DropdownProps) {
+  const width = props.width ?? "w-48";
+  const anchor = `--dd-${crypto.randomUUID()}`;
+  let triggerRef!: HTMLButtonElement;
+  let popoverRef!: HTMLDivElement;
+  let isOpen = false;
+
+  const close = (): void => popoverRef?.hidePopover();
+
+  const getPositionStyle = (): string => {
+    const pos = typeof props.position === "function" ? props.position() : (props.position ?? "bottom-right");
+    return POSITION_STYLES[pos] ?? POSITION_STYLES["bottom-right"]!;
+  };
+
+  const getVariantClasses = (variant?: "danger"): string =>
+    variant === "danger" ? "text-red-600 dark:text-red-400" : "text-zinc-700 dark:text-zinc-300";
+
+  const renderItem = (item: DropdownAction | DropdownElement): JSX.Element => {
+    if ("element" in item) {
+      return typeof item.element === "function" ? item.element(close) : item.element;
+    }
+
+    const classes = `${ITEM_BASE_CLASSES} ${getVariantClasses(item.variant)}`;
+    const content = (
+      <>
+        {item.icon && <i class={item.icon} />}
+        <span>{item.label}</span>
+      </>
+    );
+
+    // Link variant
+    if ("href" in item && item.href) {
+      return (
+        <a
+          href={item.href}
+          target={item.external ? "_blank" : undefined}
+          rel={item.external ? "noopener noreferrer" : undefined}
+          class={classes}
+          onClick={close}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    // Button variant
+    return (
+      <button
+        type="button"
+        class={classes}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          (item as DropdownActionClick).action();
+          close();
+        }}
+      >
+        {content}
+      </button>
+    );
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        class="inline-flex"
+        ref={triggerRef}
+        style={`anchor-name: ${anchor}`}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (isOpen) {
+            popoverRef.hidePopover();
+          } else {
+            const base = `position-anchor: ${anchor}; position: fixed; inset: unset; margin: 0; scrollbar-gutter: auto;`;
+            popoverRef.setAttribute("style", props.className ? base : `${base} ${getPositionStyle()}`);
+            popoverRef.showPopover();
+          }
+        }}
+      >
+        {props.trigger}
+      </button>
+
+      <div
+        ref={(el) => {
+          popoverRef = el;
+          el.addEventListener("toggle", (e) => {
+            const newState = (e as ToggleEvent).newState;
+            const wasOpen = isOpen;
+            isOpen = newState === "open";
+            // Call onClose when transitioning from open to closed
+            if (wasOpen && !isOpen && props.onClose) {
+              props.onClose();
+            }
+          });
+        }}
+        popover="auto"
+        role="menu"
+        aria-label="Dropdown menu"
+        class={`${width} overflow-y-auto max-h-[min(24rem,80dvh)] paper p-0 border! border-zinc-300/60! dark:border-zinc-600/50! ${props.className ?? ""}`}
+      >
+        {props.elements.map((item, i) =>
+          "items" in item ? (
+            <>
+              {i > 0 && <hr class="border-white/20 dark:border-zinc-700/25" />}
+              {item.sectionLabel && (
+                <div class="px-4 pt-3 pb-1 text-xs uppercase tracking-wider font-medium text-zinc-500">{item.sectionLabel}</div>
+              )}
+              {item.items.map(renderItem)}
+            </>
+          ) : (
+            renderItem(item)
+          ),
+        )}
+      </div>
+    </>
+  );
+}