@valentinkolb/cloud 0.1.0

package/src/ui/input/Slider.tsx

@@ -0,0 +1,118 @@
+type SliderProps = {
+  label?: string;
+  description?: string;
+  value: () => number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  showValue?: boolean;
+  formatValue?: (value: number) => string;
+  /** When true, the track fill originates from the center instead of the left edge. */
+  center?: boolean;
+  /** Value to reset to on double-click. Defaults to center of range (if center) or min. */
+  defaultValue?: number;
+};
+
+/**
+ * Range slider input component.
+ */
+const Slider = ({
+  label,
+  description,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  showValue = true,
+  formatValue = (v) => String(v),
+  center = false,
+  defaultValue,
+}: SliderProps) => {
+  const resetValue = defaultValue ?? (center ? (min + max) / 2 : min);
+  const inputId = crypto.randomUUID();
+  const descId = description ? `${inputId}-desc` : undefined;
+
+  const percentage = () => ((value() - min) / (max - min)) * 100;
+
+  const trackBackground = () => {
+    const p = percentage();
+    const fill = "var(--slider-fill)";
+    const track = "var(--slider-track)";
+
+    if (center) {
+      const lo = Math.min(50, p);
+      const hi = Math.max(50, p);
+      return `linear-gradient(to right, ${track} 0%, ${track} ${lo}%, ${fill} ${lo}%, ${fill} ${hi}%, ${track} ${hi}%, ${track} 100%)`;
+    }
+    return `linear-gradient(to right, ${fill} 0%, ${fill} ${p}%, ${track} ${p}%, ${track} 100%)`;
+  };
+
+  return (
+    <div class="flex flex-col gap-1 slider-track-colors" classList={{ "opacity-50": disabled }}>
+      {(label || showValue) && (
+        <div class="flex items-center justify-between text-xs">
+          {label && (
+            <label for={inputId} class="text-secondary">
+              {label}
+            </label>
+          )}
+          {showValue && <span class="text-dimmed tabular-nums">{formatValue(value())}</span>}
+        </div>
+      )}
+      {description && (
+        <p id={descId} class="text-xs text-dimmed -mt-0.5">
+          {description}
+        </p>
+      )}
+      <input
+        id={inputId}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value()}
+        onInput={(e) => onChange(Number(e.currentTarget.value))}
+        onDblClick={() => onChange(resetValue)}
+        disabled={disabled}
+        aria-describedby={descId}
+        class="w-full h-1.5 appearance-none cursor-pointer
+ rounded-full 
+ [&::-webkit-slider-thumb]:appearance-none
+ [&::-webkit-slider-thumb]:w-3.5
+ [&::-webkit-slider-thumb]:h-3.5
+ [&::-webkit-slider-thumb]:cursor-pointer
+ [&::-webkit-slider-thumb]:transition-transform
+ [&::-webkit-slider-thumb]:rounded-full
+ [&::-webkit-slider-thumb]:bg-blue-500
+ [&::-webkit-slider-thumb]:dark:bg-blue-400
+ [&::-webkit-slider-thumb]:shadow-sm
+ [&::-webkit-slider-thumb]:hover:scale-110
+ ]:rounded-none
+ ]:bg-(--slider-fill)
+ [&::-moz-range-thumb]:w-3.5
+ [&::-moz-range-thumb]:h-3.5
+ [&::-moz-range-thumb]:border-0
+ [&::-moz-range-thumb]:cursor-pointer
+ [&::-moz-range-thumb]:rounded-full
+ [&::-moz-range-thumb]:bg-blue-500
+ [&::-moz-range-thumb]:dark:bg-blue-400
+ ]:rounded-none
+ ]:bg-(--slider-fill)
+ focus-visible:outline-none
+ focus-visible:[&::-webkit-slider-thumb]:ring-2
+ focus-visible:[&::-webkit-slider-thumb]:ring-zinc-400
+ focus-visible:[&::-webkit-slider-thumb]:ring-offset-2
+ disabled:cursor-not-allowed
+ disabled:[&::-webkit-slider-thumb]:bg-zinc-400
+ disabled:[&::-moz-range-thumb]:bg-zinc-400"
+        style={{ background: trackBackground() }}
+      />
+    </div>
+  );
+};
+
+export default Slider;

package/src/ui/input/Switch.tsx

@@ -0,0 +1,62 @@
+import type { SwitchInputProps } from "./types";
+
+/**
+ * Toggle switch component - accessible via hidden checkbox
+ */
+const Switch = ({ label, value, onChange, disabled = false }: SwitchInputProps) => {
+  const inputId = crypto.randomUUID();
+
+  return (
+    <label
+      for={inputId}
+      class={`inline-flex items-center gap-2 select-none ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+    >
+      {/* Hidden checkbox for accessibility */}
+      <input
+        id={inputId}
+        type="checkbox"
+        checked={value?.() || false}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        class="sr-only peer"
+      />
+      {/* Visual switch track */}
+      <span
+        class={`
+ relative transition-colors
+ w-9 h-5 rounded-full
+ 
+ bg-zinc-200 dark:bg-zinc-600/40
+ peer-checked:bg-blue-500
+ 
+ peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2
+ 
+ peer-disabled:opacity-50
+ `}
+      >
+        {/* Switch knob */}
+        <span
+          class={`
+ absolute transition-transform flex items-center justify-center
+ top-0.5 left-0.5 w-4 h-4 rounded-full
+ 
+ bg-white shadow-sm
+ 
+ `}
+          classList={{
+            "translate-x-4": value?.(),
+            "": value?.(),
+          }}
+        >
+          {/* Checkmark icon in terminal mode when checked */}
+          <i class={`ti ti-check hidden text-[8px] leading-none ${value?.() ? " " : "text-transparent"}`} />
+        </span>
+      </span>
+      {label && <span class="text-xs text-secondary select-none">{label}</span>}
+    </label>
+  );
+};
+
+export { Switch };
+export const SwitchInput = Switch;
+export default Switch;

package/src/ui/input/TagsInput.tsx

@@ -0,0 +1,115 @@
+import { InputWrapper, createInputA11y } from "./util";
+
+type TagsInputProps = {
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  icon?: string;
+  activeIcon?: string;
+  value?: () => string[];
+  onChange?: (tags: string[]) => void;
+  error?: () => string | undefined;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+const TagsInput = (props: TagsInputProps) => {
+  const placeholder = () => props.placeholder ?? "Tags (e.g. Tag 1, Tag 2,...)";
+  const icon = () => props.icon ?? "ti ti-tag";
+  const activeIcon = () => props.activeIcon ?? "ti ti-pencil";
+  const value = () => props.value?.() ?? [];
+  const disabled = () => props.disabled ?? false;
+  const a11y = createInputA11y({ description: props.description, error: props.error });
+  const announcementId = crypto.randomUUID();
+
+  const normalizeTag = (value: string) => value.replace(/\s+/g, " ").trim();
+
+  const escapeHtml = (value: string) =>
+    value
+      .replaceAll("&", "&")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#39;");
+
+  const renderTags = (tags: string[]) => {
+    if (tags.length === 0) return `<span class="text-zinc-400 dark:text-zinc-500">${placeholder()}</span>`;
+    return `<span contenteditable="false" class="flex flex-wrap items-center gap-1 pointer-events-none">${tags
+      .map(
+        (tag) =>
+          `<span class="inline-flex max-w-37.5 shrink-0 items-center overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 text-xs leading-5 bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">${escapeHtml(tag.trim())}</span>`,
+      )
+      .join("")}</span>`;
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="group relative flex">
+        <div class={`absolute left-3 inset-y-0 items-center z-10 flex pointer-events-none text-zinc-400 dark:text-zinc-500`}>
+          <i class={`${icon()} group-focus-within:hidden`} />
+          <i class={`${activeIcon()} hidden text-blue-500 group-focus-within:block`} />
+        </div>
+        <div
+          contentEditable={!disabled()}
+          id={a11y.inputId}
+          class={`input w-full pl-9 outline-none ${disabled() ? "cursor-not-allowed opacity-50" : "cursor-text"}`}
+          role="textbox"
+          aria-multiline="false"
+          aria-label={!props.label ? placeholder() || "Enter tags" : undefined}
+          aria-describedby={a11y.ariaDescribedBy()}
+          aria-invalid={!!props.error?.()}
+          aria-required={props.required}
+          aria-disabled={disabled()}
+          aria-placeholder={placeholder()}
+          onFocus={(e) => {
+            if (disabled()) return;
+            const currentTags = value();
+            e.currentTarget.textContent = currentTags.join(", ");
+            const sel = getSelection();
+            sel?.selectAllChildren(e.currentTarget);
+            sel?.collapseToEnd();
+          }}
+          onBlur={(e) => {
+            if (disabled()) return;
+            const oldTags = value();
+            const newTags = (e.currentTarget.textContent || "")
+              .split(",")
+              .map(normalizeTag)
+              .filter(Boolean)
+              .filter((tag, index, self) => self.indexOf(tag) === index);
+
+            const added = newTags.filter((t) => !oldTags.includes(t));
+            const removed = oldTags.filter((t) => !newTags.includes(t));
+
+            if (added.length > 0 || removed.length > 0) {
+              const announcement = document.getElementById(announcementId);
+              if (announcement) {
+                let message = "";
+                if (added.length > 0) message += `Tags added: ${added.join(", ")}. `;
+                if (removed.length > 0) message += `Tags removed: ${removed.join(", ")}.`;
+                announcement.textContent = message;
+              }
+            }
+
+            props.onChange?.(newTags);
+            e.currentTarget.innerHTML = renderTags(newTags);
+          }}
+          onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), e.currentTarget.blur())}
+          innerHTML={renderTags(value())}
+        />
+
+        <div id={announcementId} class="sr-only" role="status" aria-live="polite" aria-atomic="true" />
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default TagsInput;

package/src/ui/input/TextInput.tsx

@@ -0,0 +1,160 @@
+import { createSignal } from "solid-js";
+import { InputWrapper, createInputA11y } from "./util";
+
+type TextInputProps = {
+  name?: string;
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  type?: "text" | "search" | "email" | "url" | "tel";
+  icon?: string;
+  activeIcon?: string;
+  value?: () => string | undefined | null;
+  onChange?: (value: string) => void;
+  onInput?: (value: string) => void;
+  clearable?: boolean;
+  onClear?: () => void;
+  clearLabel?: string;
+  error?: () => string | undefined;
+  multiline?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  password?: boolean;
+  /**
+   * Enable markdown mode.
+   * When true, automatically enables multiline mode and sets default icon to markdown.
+   */
+  markdown?: boolean;
+  /**
+   * Called when Enter is pressed (without Shift/Cmd) in multiline mode.
+   * Useful for submitting forms with Enter while keeping Shift+Enter for newlines.
+   */
+  onSubmit?: () => void;
+  /** Approximate visible lines for multiline mode. Overrides default height. */
+  lines?: number;
+};
+
+/**
+ * Text input component with optional multiline support
+ * @param label - Optional label text
+ * @param description - Optional description text
+ * @param placeholder - Placeholder text
+ * @param icon - Icon shown when not focused
+ * @param activeIcon - Icon shown when focused
+ * @param value - Reactive value getter
+ * @param onChange - Called on change event
+ * @param onInput - Called on input event
+ * @param error - Reactive error message getter
+ * @param multiline - Enable textarea mode
+ * @param required - Show required asterisk after label
+ * @param disabled - Disable the input
+ * @param markdown - Enable markdown mode (implies multiline, shows markdown icon)
+ */
+const TextInput = (props: TextInputProps) => {
+  const markdown = () => props.markdown ?? false;
+  const icon = () => props.icon ?? (markdown() ? "ti ti-markdown" : "ti ti-cursor-text");
+  const activeIcon = () => props.activeIcon ?? "ti ti-pencil";
+  const multiline = () => props.multiline ?? markdown(); // markdown implies multiline
+  const disabled = () => props.disabled ?? false;
+  const canClear = () => props.clearable && !multiline() && !props.password && !disabled();
+  const currentValue = () => props.value?.() ?? "";
+  const hasValue = () => currentValue().length > 0;
+  const [showPassword, setShowPassword] = createSignal(false);
+  const a11y = createInputA11y({ description: props.description, error: props.error, inputId: props.name });
+
+  const handleClear = () => {
+    if (props.onClear) {
+      props.onClear();
+      return;
+    }
+    props.onInput?.("");
+    props.onChange?.("");
+  };
+
+  return (
+    <InputWrapper
+      label={props.label}
+      description={props.description}
+      error={props.error?.()}
+      required={props.required}
+      inputId={a11y.inputId}
+      descriptionId={a11y.descriptionId}
+      errorId={a11y.errorId}
+    >
+      <div class="group relative flex">
+        <div
+          class={`absolute left-3 z-10 flex pointer-events-none text-zinc-400 dark:text-zinc-500 ${
+            multiline() ? "top-2.5" : "inset-y-0 items-center"
+          }`}
+        >
+          <i class={`${icon()} group-focus-within:hidden`} />
+          <i class={`${activeIcon()} hidden text-blue-500 group-focus-within:block`} />
+        </div>
+        {multiline() ? (
+          <textarea
+            id={a11y.inputId}
+            name={props.name}
+            class={`input w-full pl-9 ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
+            style={props.lines ? `min-height: ${props.lines * 1.5}em; max-height: ${Math.max(props.lines * 1.5, 20)}em` : "min-height: 3.75rem; height: 5rem; max-height: 12.5rem"}
+            placeholder={props.placeholder}
+            value={props.value?.() ?? ""}
+            onChange={(e) => props.onChange?.(e.target.value)}
+            onInput={(e) => props.onInput?.(e.target.value)}
+            onKeyDown={(e) => {
+              if (props.onSubmit && e.key === "Enter" && !e.shiftKey && !e.metaKey) {
+                e.preventDefault();
+                props.onSubmit();
+              }
+            }}
+            disabled={disabled()}
+            aria-label={!props.label ? (props.ariaLabel ?? props.placeholder) : undefined}
+            aria-describedby={a11y.ariaDescribedBy()}
+            aria-invalid={!!props.error?.()}
+            aria-required={props.required}
+            aria-disabled={disabled()}
+          />
+        ) : (
+          <input
+            id={a11y.inputId}
+            name={props.name}
+            type={props.password && !showPassword() ? "password" : (props.type ?? "text")}
+            class={`input w-full pl-9 ${props.password || canClear() ? "pr-9" : ""} ${disabled() ? "cursor-not-allowed opacity-50" : ""}`}
+            placeholder={props.placeholder}
+            value={currentValue()}
+            onChange={(e) => props.onChange?.(e.target.value)}
+            onInput={(e) => props.onInput?.(e.target.value)}
+            disabled={disabled()}
+            aria-label={!props.label ? (props.ariaLabel ?? props.placeholder) : undefined}
+            aria-describedby={a11y.ariaDescribedBy()}
+            aria-invalid={!!props.error?.()}
+            aria-required={props.required}
+            aria-disabled={disabled()}
+          />
+        )}
+        {canClear() && hasValue() && (
+          <button
+            type="button"
+            class="absolute inset-y-0 right-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300"
+            onClick={handleClear}
+            aria-label={props.clearLabel ?? "Clear input"}
+          >
+            <i class="ti ti-x" />
+          </button>
+        )}
+        {props.password && !multiline() && (
+          <button
+            type="button"
+            class="absolute inset-y-0 right-3 flex items-center text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-300"
+            onClick={() => setShowPassword(!showPassword())}
+            tabIndex={-1}
+          >
+            <i class={showPassword() ? "ti ti-eye-off" : "ti ti-eye"} />
+          </button>
+        )}
+      </div>
+    </InputWrapper>
+  );
+};
+
+export default TextInput;

package/src/ui/input/index.ts

@@ -0,0 +1,13 @@
+export { default as TextInput } from "./TextInput";
+export { default as NumberInput } from "./NumberInput";
+export { Checkbox, CheckboxInput } from "./Checkbox";
+export { Select, SelectInput } from "./Select";
+export { default as SelectChip } from "./SelectChip";
+export { Switch, SwitchInput } from "./Switch";
+export { default as DateTimeInput } from "./DateTimeInput";
+export { default as SegmentedControl } from "./SegmentedControl";
+export { default as ColorInput } from "./ColorInput";
+export { default as TagsInput } from "./TagsInput";
+export { default as PinInput } from "./PinInput";
+export { default as ImageInput } from "./ImageInput";
+export { default as Slider } from "./Slider";

package/src/ui/input/types.ts

@@ -0,0 +1,42 @@
+import type { JSX } from "solid-js";
+
+/**
+ * Shared input component prop types
+ */
+
+/** Base props shared by all input components */
+export type BaseInputProps = {
+  label?: string | JSX.Element;
+  description?: string;
+  error?: () => string | undefined;
+  required?: boolean;
+  disabled?: boolean;
+};
+
+/** Props for checkbox/toggle inputs */
+export type CheckboxInputProps = BaseInputProps & {
+  value?: () => boolean | undefined;
+  onChange?: (checked: boolean) => void;
+};
+
+/** Props for switch/toggle inputs */
+export type SwitchInputProps = {
+  label?: string;
+  value?: () => boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+};
+
+/** Props for color input */
+export type ColorInputProps = BaseInputProps & {
+  value?: () => string | undefined;
+  onChange?: (value: string) => void;
+  /** Compact mode - just shows color swatch */
+  compact?: boolean;
+  /** Show a transparent toggle button inside the input */
+  transparent?: boolean;
+  /** Whether transparent is currently active */
+  isTransparent?: () => boolean;
+  /** Called when transparent toggle changes */
+  onTransparentChange?: (value: boolean) => void;
+};

package/src/ui/input/util.tsx

@@ -0,0 +1,105 @@
+import { Show, createUniqueId, type Accessor, type JSX } from "solid-js";
+
+export type InputA11y = {
+  inputId: string;
+  descriptionId: string | undefined;
+  errorId: string;
+  ariaDescribedBy: Accessor<string | undefined>;
+};
+
+/**
+ * Module-level fallback counter for `createUniqueId`.
+ *
+ * Solid's `createUniqueId` requires a hydrating render context. The current
+ * @valentinkolb/ssr release renders islands via `renderToString` (sync, NOT
+ * hydrating), which throws "getNextContextId cannot be used under
+ * non-hydrating context" when an island contains TextInput / similar inputs.
+ *
+ * Islands are re-mounted client-side anyway (no SSR-hydration matchup for
+ * the island content), so a stable-but-arbitrary id is fine for the SSR
+ * pass — client mount runs `createUniqueId` again with a real context.
+ */
+let fallbackIdCounter = 0;
+const safeUniqueId = (): string => {
+  try {
+    return createUniqueId();
+  } catch {
+    fallbackIdCounter += 1;
+    return `ssr-${fallbackIdCounter}`;
+  }
+};
+
+export const createInputA11y = (props: {
+  description?: string | JSX.Element;
+  error?: () => string | undefined;
+  inputId?: string;
+}): InputA11y => {
+  const baseId = safeUniqueId();
+  const inputId = props.inputId ?? `input-${baseId}`;
+  const descriptionId = props.description ? `${inputId}-desc` : undefined;
+  const errorId = `${inputId}-error`;
+
+  return {
+    inputId,
+    descriptionId,
+    errorId,
+    ariaDescribedBy: () => {
+      const parts: string[] = [];
+      if (descriptionId) parts.push(descriptionId);
+      if (props.error?.()) parts.push(errorId);
+      return parts.length > 0 ? parts.join(" ") : undefined;
+    },
+  };
+};
+
+/**
+ * Props for InputWrapper component
+ */
+export type InputWrapperProps = {
+  label?: string | JSX.Element;
+  description?: string | JSX.Element;
+  error?: string | undefined;
+  required?: boolean;
+  inputId: string;
+  descriptionId?: string;
+  errorId?: string;
+  children: JSX.Element;
+};
+
+/**
+ * Shared wrapper for labeled inputs. Input IDs and aria wiring are created outside
+ * the wrapper so the input subtree stays structurally stable during reactive updates.
+ */
+export const InputWrapper = (props: InputWrapperProps) => {
+  return (
+    <div class="flex flex-col gap-1">
+      <Show when={props.label || props.description}>
+        <label for={props.inputId}>
+          <Show when={props.label}>
+            <p class="block text-sm font-medium">
+              {props.label}
+              <Show when={props.required}>
+                <span class="ml-0.5 text-red-500" aria-hidden="true">
+                  *
+                </span>
+              </Show>
+            </p>
+          </Show>
+          <Show when={props.description}>
+            <p id={props.descriptionId} class="text-dimmed block text-xs">
+              {props.description}
+            </p>
+          </Show>
+        </label>
+      </Show>
+
+      {props.children}
+
+      <Show when={props.error}>
+        <p id={props.errorId} class="text-xs text-red-500" role="alert" aria-live="polite">
+          {props.error}
+        </p>
+      </Show>
+    </div>
+  );
+};

package/src/ui/ipa/Avatar.tsx

@@ -0,0 +1,28 @@
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+type AvatarProps = {
+  username: string;
+  size?: AvatarSize;
+  class?: string;
+};
+
+const SIZE_CLASSES: Record<AvatarSize, string> = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-16 w-16 text-lg",
+  xl: "h-20 w-20 text-xl",
+};
+
+/** Displays a user avatar with initials. */
+export default function Avatar(props: AvatarProps) {
+  const sizeClass = SIZE_CLASSES[props.size ?? "md"];
+  const initials = props.username.slice(0, 2).toUpperCase();
+
+  return (
+    <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 ${sizeClass} ${props.class ?? ""}`}
+    >
+      {initials}
+    </div>
+  );
+}

package/src/ui/ipa/GroupView.tsx

@@ -0,0 +1,36 @@
+import type { BaseGroup } from "../../contracts/shared";
+
+type GroupViewProps = {
+  group: BaseGroup;
+  canManage?: boolean;
+};
+
+export default function GroupView(props: GroupViewProps) {
+  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 text-zinc-600 dark:text-zinc-300 h-9 w-9">
+        <i class="ti ti-users-group text-base" />
+      </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.group.name}</span>
+          {props.group.gidnumber && (
+            <span class="tag bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300 shrink-0">
+              POSIX {props.group.gidnumber}
+            </span>
+          )}
+          {props.canManage && (
+            <span
+              class="tag bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 shrink-0"
+              title="You can manage this group"
+            >
+              <i class="ti ti-shield text-xs" />
+              MANAGER
+            </span>
+          )}
+        </div>
+        <span class="text-xs text-dimmed truncate">{props.group.description || "No description"}</span>
+      </div>
+    </div>
+  );
+}