@xenide-io/the-old-ui-theme 0.9.9 → 0.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/ai-panel.tsx

@@ -865,7 +865,7 @@ export function SuiteAiPanel({
             data-test="ask-ai-input"
             className="max-h-36 min-h-10 flex-1 resize-none bg-transparent px-1.5 py-2 text-sm leading-relaxed text-ph-ink outline-none placeholder:text-ph-mutedtext"
           />
-          {loading ? (
+          {waiting ? (
             <Tooltip content="Stop generating">
               <button
                 type="button"
@@ -877,15 +877,6 @@ export function SuiteAiPanel({
                 <Square className="h-3.5 w-3.5 fill-current" />
               </button>
             </Tooltip>
-          ) : isWaitingForReply ? (
-            <span
-              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-subtle"
-              data-test="ask-ai-waiting"
-              role="status"
-              aria-label="Shelly is responding"
-            >
-              <Spinner className="h-4 w-4 animate-spin" />
-            </span>
           ) : (
             <Tooltip content="Send message">
               <button

package/src/suite/components/suite-clients-projects-directory.test.tsx

@@ -6,7 +6,7 @@ import { SuiteClientsProjectsDirectory } from "@/suite/components/suite-clients-
 describe("SuiteClientsProjectsDirectory", () => {
   afterEach(cleanup);
 
-  it("uses roving focus and arrow keys for the icon radiogroup", async () => {
+  it("offers the Palette icon library instead of an RPG radiogroup", async () => {
     const user = userEvent.setup();
 
     render(
@@ -19,19 +19,11 @@ describe("SuiteClientsProjectsDirectory", () => {
     );
 
     await user.click(screen.getByRole("button", { name: "New client" }));
-    const castle = screen.getByRole("radio", { name: "Castle" });
-    const castleFlag = screen.getByRole("radio", { name: "Castle flag" });
 
-    expect(castle).toHaveAttribute("tabindex", "0");
-    expect(castleFlag).toHaveAttribute("tabindex", "-1");
-
-    castle.focus();
-    await user.keyboard("{ArrowRight}");
-    expect(castleFlag).toHaveAttribute("aria-checked", "true");
-    expect(castleFlag).toHaveFocus();
-
-    await user.keyboard("{Home}");
-    expect(screen.getByRole("radio", { name: "Arena" })).toHaveFocus();
+    expect(
+      screen.getByRole("button", { name: "Browse library" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("radio")).toBeNull();
   });
 
   it("moves focus between the mobile client list and detail view", async () => {

package/src/suite/components/suite-clients-projects-directory.tsx

@@ -6,12 +6,13 @@ import {
   useRef,
   useState,
   type KeyboardEvent,
+  type ReactNode,
 } from "react";
 import {
   ArrowLeft,
-  MediaImagePlus as ImagePlus,
   MoreHoriz as MoreHorizontal,
   Plus,
+  Prohibition,
   Search,
   Trash,
 } from "iconoir-react";
@@ -26,6 +27,8 @@ import {
   Select,
 } from "@/components/ui";
 import { cn } from "@/lib/cn";
+import { SuiteEntityIcon } from "./suite-entity-icon";
+import { SuitePaletteLibrary } from "./suite-palette-library";
 
 export interface SuiteDirectoryClient {
   id: string;
@@ -50,6 +53,8 @@ export interface SuiteDirectoryFields {
   icon: string;
   color: string;
   iconImageFile?: File | null;
+  /** Icon chosen from a hosted library (e.g. Palette); wins over `iconImageFile`. */
+  iconImageUrl?: string | null;
   clearIconImage?: boolean;
 }
 
@@ -80,186 +85,81 @@ export interface SuiteClientsProjectsDirectoryProps {
     fields: SuiteDirectoryProjectFields,
   ) => Promise<SuiteDirectoryProject | void>;
   onDeleteProject?: (project: SuiteDirectoryProject) => Promise<void>;
+  /**
+   * Optional hosted icon library (e.g. Palette). When provided, the picker
+   * shows a "Browse library" button; the render prop receives `onPick`, which
+   * sets the chosen icon URL as the item's custom image.
+   */
+  renderIconLibrary?: (args: {
+    onPick: (icon: { url: string; name?: string }) => void;
+  }) => ReactNode;
   dataTest?: string;
 }
 
-const DEFAULT_ICON = "castle-emblem";
+const DEFAULT_ICON = "";
 const DEFAULT_COLOR = "#6366f1";
 
-const DIRECTORY_ICON_OPTIONS = [
-  ["arena", "Arena"],
-  ["bridge", "Bridge"],
-  ["capitol", "Capitol"],
-  ["castle-emblem", "Castle"],
-  ["castle-flag", "Castle flag"],
-  ["lighthouse", "Lighthouse"],
-  ["tower", "Tower"],
-  ["wooden-sign", "Sign"],
-  ["anvil", "Anvil"],
-  ["book", "Book"],
-  ["chessboard", "Chessboard"],
-  ["cog", "Settings"],
-  ["hammer", "Build"],
-  ["light-bulb", "Idea"],
-  ["microphone", "Communication"],
-  ["quill-ink", "Writing"],
-  ["scroll-unfurled", "Notes"],
-  ["hourglass", "Planning"],
-  ["wrench", "Tools"],
-  ["archer", "Archer"],
-  ["archery-target", "Target"],
-  ["axe", "Axe"],
-  ["campfire", "Campfire"],
-  ["compass", "Compass"],
-  ["crossed-swords", "Battle"],
-  ["knight-helmet", "Knight"],
-  ["mountains", "Mountains"],
-  ["shield", "Shield"],
-  ["ship-emblem", "Voyage"],
-  ["sword", "Sword"],
-  ["trophy", "Trophy"],
-  ["apple", "Apple"],
-  ["butterfly", "Butterfly"],
-  ["clover", "Clover"],
-  ["dragon", "Dragon"],
-  ["fire", "Fire"],
-  ["flower", "Flower"],
-  ["flowers", "Flowers"],
-  ["grass", "Grass"],
-  ["leaf", "Leaf"],
-  ["pine-tree", "Pine tree"],
-  ["sun", "Sun"],
-  ["water-drop", "Water"],
-  ["aura", "Aura"],
-  ["crystal-ball", "Crystal ball"],
-  ["diamond", "Diamond"],
-  ["explosion", "Explosion"],
-  ["fire-symbol", "Fire symbol"],
-  ["gem", "Gem"],
-  ["lightning-trio", "Lightning"],
-  ["potion", "Potion"],
-  ["rune-stone", "Rune stone"],
-  ["skull", "Skull"],
-  ["tentacle", "Tentacle"],
-  ["wolf-head", "Wolf"],
-  ["anchor", "Anchor"],
-  ["beer", "Beer"],
-  ["carrot", "Carrot"],
-  ["cat", "Cat"],
-  ["crown", "Crown"],
-  ["gold-bar", "Gold bar"],
-  ["helmet", "Helmet"],
-  ["key", "Key"],
-  ["three-keys", "Keys"],
-] as const;
-
-type DirectoryIconOption = (typeof DIRECTORY_ICON_OPTIONS)[number][0];
-
-function isDirectoryIcon(value: string): value is DirectoryIconOption {
-  return DIRECTORY_ICON_OPTIONS.some(([name]) => name === value);
-}
-
 function DirectoryIconPicker({
-  value,
   preview,
+  label,
+  color,
   onFileChange,
   onClear,
-  onChange,
+  onBrowse,
 }: {
-  value: string;
   preview?: string | null;
+  label?: string;
+  color?: string | null;
   onFileChange: (file: File | null) => void;
   onClear: () => void;
-  onChange: (value: string) => void;
+  onBrowse?: () => void;
 }) {
-  const iconRefs = useRef<Record<string, HTMLButtonElement | null>>({});
-
-  function moveSelection(event: KeyboardEvent<HTMLButtonElement>, index: number) {
-    let nextIndex: number | null = null;
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      nextIndex = (index + 1) % DIRECTORY_ICON_OPTIONS.length;
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      nextIndex =
-        (index - 1 + DIRECTORY_ICON_OPTIONS.length) % DIRECTORY_ICON_OPTIONS.length;
-    } else if (event.key === "Home") {
-      nextIndex = 0;
-    } else if (event.key === "End") {
-      nextIndex = DIRECTORY_ICON_OPTIONS.length - 1;
-    }
-
-    if (nextIndex === null) return;
-    event.preventDefault();
-    const [nextIcon] = DIRECTORY_ICON_OPTIONS[nextIndex];
-    onChange(nextIcon);
-    iconRefs.current[nextIcon]?.focus();
-  }
-
   return (
     <div className="space-y-2">
       <span className="mb-1.5 block text-sm font-medium text-ph-ink">Icon</span>
-      <div
-        role="radiogroup"
-        aria-label="Icon"
-        className="grid grid-cols-6 gap-1.5 rounded-lg border border-ph-border p-1.5 sm:grid-cols-8"
-      >
-        {DIRECTORY_ICON_OPTIONS.map(([name, label], index) => {
-          const selected = value === name;
-          return (
+      <div className="rounded-lg border border-ph-border bg-ph-muted p-3">
+        <div className="flex items-center gap-3">
+          <SuiteEntityIcon
+            imageUrl={preview}
+            label={label}
+            color={color}
+            tinted
+            className="h-9 w-9 text-base"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-ph-ink">
+              {preview ? "Custom image" : "No icon yet"}
+            </p>
+            <p className="text-xs text-ph-mutedtext">
+              {preview
+                ? "Shown on cards and lists."
+                : "Browse the library or upload your own."}
+            </p>
+          </div>
+          {onBrowse ? (
             <button
-              key={name}
               type="button"
-              role="radio"
-              aria-label={label}
-              aria-checked={selected}
-              tabIndex={selected ? 0 : -1}
-              title={label}
-              onClick={() => onChange(name)}
-              onKeyDown={(event) => moveSelection(event, index)}
-              ref={(element) => {
-                iconRefs.current[name] = element;
-              }}
-              className={cn(
-                "flex h-9 items-center justify-center rounded-md text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink",
-                selected &&
-                  "bg-ph-muted text-ph-ink ring-2 ring-ph-brand ring-inset",
-              )}
+              onClick={onBrowse}
+              className="rounded-md border border-ph-border px-3 py-1.5 text-xs font-medium text-ph-ink hover:border-ph-brand hover:bg-ph-surface"
             >
-              <i
-                className={cn("ra", `ra-${name}`, "text-base leading-none")}
-                aria-hidden
-              />
+              Browse library
             </button>
-          );
-        })}
-      </div>
-      <div className="rounded-lg border border-ph-border bg-ph-muted p-2">
-        <div className="flex items-center gap-2 text-sm font-medium text-ph-ink">
-          <ImagePlus className="h-4 w-4" aria-hidden /> Custom image
+          ) : null}
+        </div>
+        <div className="mt-3">
+          <FileUpload
+            accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg"
+            onChange={(event) => onFileChange(event.target.files?.[0] ?? null)}
+          />
         </div>
-        <p className="mt-1 text-xs text-ph-mutedtext">
-          PNG, JPG, GIF, WebP, or SVG — max 512 KB.
-        </p>
-        <FileUpload
-          accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml,.svg"
-          onChange={(event) => onFileChange(event.target.files?.[0] ?? null)}
-        />
         {preview ? (
-          <div className="mt-2 flex items-center gap-2">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={preview}
-              alt=""
-              className="h-8 w-8 rounded object-cover"
-            />
-            <button
-              type="button"
-              className="text-xs text-ph-mutedtext hover:text-ph-ink"
-              onClick={onClear}
-            >
-              <Trash className="mr-1 inline h-3.5 w-3.5" aria-hidden /> Remove
-              custom image
-            </button>
-          </div>
+          <button
+            type="button"
+            className="mt-2 inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-surface hover:text-ph-ink"
+            onClick={onClear}
+          >
+            <Trash className="h-3.5 w-3.5" aria-hidden /> Remove image
+          </button>
         ) : null}
       </div>
     </div>
@@ -271,27 +171,15 @@ function DirectoryIcon({
 }: {
   item: SuiteDirectoryClient | SuiteDirectoryProject;
 }) {
-  const icon =
-    item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON;
   return (
-    <span
-      className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-white"
-      style={{ backgroundColor: item.color || "var(--ph-brand)" }}
-    >
-      {item.icon_image ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
-          src={item.icon_image}
-          alt=""
-          className="h-full w-full rounded-lg object-cover"
-        />
-      ) : (
-        <i
-          className={cn("ra", `ra-${icon}`, "text-base leading-none")}
-          aria-hidden
-        />
-      )}
-    </span>
+    <SuiteEntityIcon
+      imageUrl={item.icon_image}
+      label={item.name}
+      color={item.color}
+      tinted
+      className="h-8 w-8 text-sm"
+      roundedClass="rounded-lg"
+    />
   );
 }
 
@@ -319,6 +207,7 @@ export function SuiteClientsProjectsDirectory({
   onCreateProject,
   onUpdateProject,
   onDeleteProject,
+  renderIconLibrary,
   dataTest = "suite-clients-projects-directory",
 }: SuiteClientsProjectsDirectoryProps) {
   const [query, setQuery] = useState("");
@@ -332,6 +221,7 @@ export function SuiteClientsProjectsDirectory({
   });
   const [draftClientId, setDraftClientId] = useState<string | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
+  const [libraryOpen, setLibraryOpen] = useState(false);
   const [draftArchived, setDraftArchived] = useState(false);
   const [confirming, setConfirming] = useState<Confirming | null>(null);
   const [saving, setSaving] = useState(false);
@@ -411,6 +301,7 @@ export function SuiteClientsProjectsDirectory({
       icon: DEFAULT_ICON,
       color: DEFAULT_COLOR,
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: false,
     });
     setPreview(null);
@@ -426,9 +317,10 @@ export function SuiteClientsProjectsDirectory({
     setMutationError(null);
     setDraft({
       name: item.name,
-      icon: item.icon && isDirectoryIcon(item.icon) ? item.icon : DEFAULT_ICON,
+      icon: item.icon ?? DEFAULT_ICON,
       color: item.color || DEFAULT_COLOR,
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: false,
     });
     setPreview(item.icon_image || null);
@@ -454,6 +346,7 @@ export function SuiteClientsProjectsDirectory({
     setDraft((current) => ({
       ...current,
       iconImageFile: file,
+      iconImageUrl: null,
       clearIconImage: false,
     }));
     setPreview(URL.createObjectURL(file));
@@ -465,10 +358,24 @@ export function SuiteClientsProjectsDirectory({
     setDraft((current) => ({
       ...current,
       iconImageFile: null,
+      iconImageUrl: null,
       clearIconImage: true,
     }));
   }
 
+  function pickFromLibrary(icon: { url: string; name?: string }) {
+    if (preview?.startsWith("blob:")) URL.revokeObjectURL(preview);
+    setMutationError(null);
+    setPreview(icon.url);
+    setDraft((current) => ({
+      ...current,
+      iconImageFile: null,
+      iconImageUrl: icon.url,
+      clearIconImage: false,
+    }));
+    setLibraryOpen(false);
+  }
+
   function closeEditor() {
     if (!saving) setEditing(null);
   }
@@ -516,10 +423,7 @@ export function SuiteClientsProjectsDirectory({
     try {
       await onUpdateProject(project, {
         name: project.name,
-        icon:
-          project.icon && isDirectoryIcon(project.icon)
-            ? project.icon
-            : DEFAULT_ICON,
+        icon: project.icon ?? DEFAULT_ICON,
         color: project.color || DEFAULT_COLOR,
         clientId: project.clientId ?? null,
         isArchived: !project.isArchived,
@@ -845,20 +749,31 @@ export function SuiteClientsProjectsDirectory({
             }
           />
           <DirectoryIconPicker
-            value={isDirectoryIcon(draft.icon) ? draft.icon : DEFAULT_ICON}
             preview={preview}
+            label={draft.name}
+            color={draft.color}
             onFileChange={chooseImage}
             onClear={clearImage}
-            onChange={(icon) => {
-              if (preview) clearImage();
-              setDraft((current) => ({ ...current, icon }));
-            }}
+            onBrowse={() => setLibraryOpen(true)}
           />
           <div>
             <span className="mb-1.5 block text-sm font-medium text-ph-ink">
               Colour
             </span>
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                aria-label="No colour"
+                aria-pressed={!draft.color}
+                title="No colour"
+                onClick={() => setDraft({ ...draft, color: "" })}
+                className={cn(
+                  "flex h-8 w-8 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-mutedtext ring-offset-2",
+                  !draft.color && "ring-2 ring-ph-brand",
+                )}
+              >
+                <Prohibition className="h-4 w-4" aria-hidden />
+              </button>
               {[
                 "#6366f1",
                 "#0ea5e9",
@@ -881,16 +796,53 @@ export function SuiteClientsProjectsDirectory({
                   style={{ backgroundColor: color }}
                 />
               ))}
-              <Input
-                hideLabel
-                label="Custom colour"
-                type="color"
-                value={draft.color}
-                onChange={(event) =>
-                  setDraft({ ...draft, color: event.target.value })
-                }
-                className="h-8 w-8 p-0"
-              />
+              <label
+                className={cn(
+                  "relative inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full ring-1 ring-ph-border ring-offset-2",
+                  ![
+                    "#6366f1",
+                    "#0ea5e9",
+                    "#10b981",
+                    "#f59e0b",
+                    "#ef4444",
+                    "#a855f7",
+                    "#64748b",
+                  ].includes(draft.color) && "ring-2 ring-ph-brand",
+                )}
+                style={{
+                  background:
+                    "conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)",
+                }}
+                title="Custom colour"
+              >
+                <span className="flex h-4 w-4 items-center justify-center rounded-full bg-ph-surface">
+                  {[
+                    "#6366f1",
+                    "#0ea5e9",
+                    "#10b981",
+                    "#f59e0b",
+                    "#ef4444",
+                    "#a855f7",
+                    "#64748b",
+                  ].includes(draft.color) ? (
+                    <Plus className="h-3 w-3 text-ph-ink" aria-hidden />
+                  ) : (
+                    <span
+                      className="h-2.5 w-2.5 rounded-full"
+                      style={{ backgroundColor: draft.color }}
+                    />
+                  )}
+                </span>
+                <input
+                  type="color"
+                  aria-label="Custom colour"
+                  value={draft.color}
+                  onChange={(event) =>
+                    setDraft({ ...draft, color: event.target.value })
+                  }
+                  className="sr-only"
+                />
+              </label>
             </div>
           </div>
           {editing?.kind.includes("project") ? (
@@ -919,6 +871,17 @@ export function SuiteClientsProjectsDirectory({
           ) : null}
         </div>
       </Modal>
+      {libraryOpen ? (
+        <Modal
+          open
+          onClose={() => setLibraryOpen(false)}
+          title="Icon library"
+        >
+          {renderIconLibrary
+            ? renderIconLibrary({ onPick: pickFromLibrary })
+            : <SuitePaletteLibrary onPick={pickFromLibrary} />}
+        </Modal>
+      ) : null}
       <Modal
         open={confirming !== null}
         onClose={() => setConfirming(null)}

package/src/suite/components/suite-entity-icon.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import { paletteIconSrc } from '@/suite/lib/palette-api';
+import { cn } from '@/lib/cn';
+
+/**
+ * A client/project icon.
+ *
+ * Shows the stored image when there is one; otherwise a neutral placeholder —
+ * a tinted rounded square with the entity's initial, or a small dot when no
+ * label is available. No icon font is involved.
+ */
+export function SuiteEntityIcon({
+  imageUrl,
+  label,
+  color,
+  className,
+  roundedClass = 'rounded-md',
+  style,
+  tinted = false,
+}: {
+  imageUrl?: string | null;
+  label?: string | null;
+  color?: string | null;
+  className?: string;
+  roundedClass?: string;
+  style?: CSSProperties;
+  /** Recolour a monochrome icon to `color` (via CSS mask). */
+  tinted?: boolean;
+}) {
+  const hasColor =
+    typeof color === 'string' && /^#[0-9a-fA-F]{3,8}$/.test(color);
+  const tint = hasColor ? (color as string) : null;
+  const neutralBackground = 'var(--ph-muted, rgba(127,127,127,0.08))';
+
+  if (imageUrl) {
+    const src = tinted && tint ? paletteIconSrc(imageUrl, tint) : imageUrl;
+    return (
+      <span
+        className={cn(
+          'inline-flex shrink-0 items-center justify-center overflow-hidden leading-none',
+          roundedClass,
+          className,
+        )}
+        style={{
+          backgroundColor: tint ? `${tint}18` : neutralBackground,
+          ...style,
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={src ?? undefined} alt="" className="h-full w-full object-cover" />
+      </span>
+    );
+  }
+
+  const initial = label?.trim().charAt(0).toUpperCase();
+
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center font-semibold leading-none',
+        roundedClass,
+        className,
+      )}
+      style={{
+        color: tint ?? 'var(--ph-mutedtext)',
+        backgroundColor: tint ? `${tint}18` : neutralBackground,
+        ...style,
+      }}
+      aria-hidden="true"
+    >
+      {initial ? (
+        <span className="text-[0.7em]">{initial}</span>
+      ) : (
+        <span className="block h-1.5 w-1.5 rounded-full bg-current opacity-40" />
+      )}
+    </span>
+  );
+}