@xenide-io/the-old-ui-theme 0.6.6 → 0.6.8

package/src/suite/components/workspace-switcher.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Building, Check, NavArrowDown } from "iconoir-react";
+
+import { cn } from "../lib/cn";
+import type {
+  SuiteDropdownItemComponent,
+  SuiteDropdownMenuComponent,
+} from "../lib/injected";
+import { appSwitcherMenuItemClass } from "./app-switcher";
+
+export interface SuiteWorkspaceEntry {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface SuiteWorkspaceGroup {
+  id: string;
+  label: string;
+  workspaces: SuiteWorkspaceEntry[];
+}
+
+/**
+ * Suite workspace switcher. Full-width bordered trigger; dropdown menu.
+ * Apps inject workspace rows (or labelled groups) and the theme dropdown.
+ */
+export function SuiteWorkspaceSwitcher({
+  workspaces = [],
+  groups,
+  currentId,
+  onSelect,
+  name,
+  collapsed = false,
+  emptyLabel = "No workspaces yet.",
+  dropdownMenu: DropdownMenu,
+  dropdownItem: DropdownItem,
+  triggerId,
+  triggerDataTest,
+  footer,
+}: {
+  workspaces?: SuiteWorkspaceEntry[];
+  groups?: SuiteWorkspaceGroup[];
+  currentId?: string | null;
+  onSelect: (workspace: SuiteWorkspaceEntry) => void;
+  name: string;
+  collapsed?: boolean;
+  emptyLabel?: string;
+  dropdownMenu: SuiteDropdownMenuComponent;
+  dropdownItem: SuiteDropdownItemComponent;
+  triggerId?: string;
+  triggerDataTest?: string;
+  footer?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const sections =
+    groups?.filter((group) => group.workspaces.length > 0) ??
+    (workspaces.length > 0
+      ? [{ id: "workspaces", label: "Switch workspace", workspaces }]
+      : []);
+
+  return (
+    <DropdownMenu
+      aria-label="Switch workspace"
+      triggerId={triggerId ?? "workspace-switcher-trigger"}
+      triggerDataTest={triggerDataTest ?? "workspace-switcher-trigger"}
+      className={
+        collapsed
+          ? "w-11 shrink-0"
+          : "w-full min-w-0 max-w-full [&_.ph-dropdown-trigger]:w-full"
+      }
+      panelClassName="w-64 max-w-full"
+      align="start"
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <span
+          className={cn(
+            "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
+            collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
+            open && "border-ph-brand/40",
+          )}
+          data-test="workspace-switcher-trigger"
+          aria-expanded={open}
+        >
+          <Building className="h-4 w-4 shrink-0 text-ph-ink" aria-hidden />
+          {!collapsed ? (
+            <>
+              <span className="min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink">
+                {name}
+              </span>
+              <NavArrowDown
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0 text-ph-mutedtext transition-transform",
+                  open && "rotate-180",
+                )}
+                aria-hidden
+              />
+            </>
+          ) : null}
+        </span>
+      }
+    >
+      <div
+        id="workspace-switcher-menu"
+        className="p-1"
+        data-test="workspace-switcher-menu"
+      >
+        {sections.length === 0 ? (
+          <p className="px-3 py-2 text-sm text-ph-mutedtext">{emptyLabel}</p>
+        ) : (
+          sections.map((section) => (
+            <div key={section.id}>
+              <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+                {section.label}
+              </p>
+              {section.workspaces.map((workspace) => (
+                <DropdownItem
+                  key={workspace.id}
+                  id={`workspace-option-${workspace.id}`}
+                  role="option"
+                  aria-selected={workspace.id === currentId}
+                  data-test="workspace-option"
+                  data-workspace-id={workspace.id}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => {
+                    setOpen(false);
+                    onSelect(workspace);
+                  }}
+                  className={appSwitcherMenuItemClass()}
+                >
+                  <span className="flex min-w-0 w-full items-center gap-3">
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium text-ph-ink">
+                        {workspace.name}
+                      </span>
+                      {workspace.description ? (
+                        <span className="block truncate text-xs text-ph-mutedtext">
+                          {workspace.description}
+                        </span>
+                      ) : null}
+                    </span>
+                    {workspace.id === currentId ? (
+                      <Check
+                        className="h-4 w-4 shrink-0 text-ph-brand"
+                        aria-hidden="true"
+                      />
+                    ) : null}
+                  </span>
+                </DropdownItem>
+              ))}
+            </div>
+          ))
+        )}
+        {footer ? (
+          <div className="mt-1 border-t border-ph-border pt-1">{footer}</div>
+        ) : null}
+      </div>
+    </DropdownMenu>
+  );
+}

package/src/suite/index.ts

@@ -35,8 +35,10 @@ export {
   SUITE_APP_MAP,
   suiteAppBaseUrl,
   resolveSuiteNotificationHref,
+  classifySuiteHref,
   type SuiteAppDefinition,
   type SuiteAppSlug,
+  type SuiteHrefTarget,
 } from "./lib/apps";
 export { TodayCalibrating } from "./components/today-calibrating";
 export {
@@ -50,11 +52,17 @@ export {
 export {
   SuiteAiPanel,
   openSuiteAskAi,
+  consumePendingAskAiPrompt,
   SUITE_OPEN_ASK_AI_EVENT,
   type SuiteAiPreset,
   type SuiteAiChatMessage,
   type SuiteAskAiOpenDetail,
 } from "./components/ai-panel";
+export {
+  SuiteWorkspaceSwitcher,
+  type SuiteWorkspaceEntry,
+  type SuiteWorkspaceGroup,
+} from "./components/workspace-switcher";
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -85,6 +93,7 @@ export {
   SIDEBAR_MAX_WIDTH,
   SIDEBAR_MIN_EXPANDED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
+  sidebarColumnWidth,
   useSidebarWidth,
 } from "./lib/use-sidebar-width";
 export { cn } from "./lib/cn";

package/src/suite/lib/apps.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+
+import { classifySuiteHref } from "./apps";
+
+const BASES = {
+  tides: "http://localhost:3001",
+  turtletime: "http://localhost:3000",
+  kraken: "http://localhost:3003",
+};
+
+describe("classifySuiteHref", () => {
+  it("maps a Tides task URL to the Tides app and path", () => {
+    const match = classifySuiteHref(
+      "http://localhost:3001/dashboard/projects/abc/tasks/def",
+      BASES,
+      "http://localhost:3000",
+    );
+    expect(match).toEqual({
+      slug: "tides",
+      path: "/dashboard/projects/abc/tasks/def",
+      sameApp: false,
+    });
+  });
+
+  it("marks a same-origin TurtleTime link as sameApp", () => {
+    const match = classifySuiteHref(
+      "http://localhost:3000/tracker",
+      BASES,
+      "http://localhost:3000",
+    );
+    expect(match?.sameApp).toBe(true);
+    expect(match?.path).toBe("/tracker");
+  });
+
+  it("ignores urls that are not a suite app", () => {
+    expect(
+      classifySuiteHref("https://example.com/x", BASES, "http://localhost:3000"),
+    ).toBeNull();
+  });
+});

package/src/suite/lib/apps.ts

@@ -114,3 +114,40 @@ export function resolveSuiteNotificationHref(
   if (!slug) return path;
   return `${suiteAppBaseUrl(slug)}${path}`;
 }
+
+export interface SuiteHrefTarget {
+  slug: SuiteAppSlug;
+  path: string;
+  sameApp: boolean;
+}
+
+/** Match a URL to a suite app origin so Ask AI links can switch apps. */
+export function classifySuiteHref(
+  href: string,
+  bases: Partial<Record<SuiteAppSlug, string>>,
+  currentOrigin = '',
+): SuiteHrefTarget | null {
+  let url: URL;
+  try {
+    url = new URL(href, currentOrigin || 'http://local.invalid');
+  } catch {
+    return null;
+  }
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
+  for (const slug of Object.keys(bases) as SuiteAppSlug[]) {
+    const base = bases[slug];
+    if (!base) continue;
+    try {
+      if (new URL(base).origin !== url.origin) continue;
+    } catch {
+      continue;
+    }
+    const path = `${url.pathname}${url.search}${url.hash}` || '/';
+    return {
+      slug,
+      path,
+      sameApp: Boolean(currentOrigin && url.origin === currentOrigin),
+    };
+  }
+  return null;
+}

package/src/suite/lib/use-sidebar-width.ts

@@ -10,9 +10,19 @@ import {
 export const SIDEBAR_RAIL_WIDTH = 56;
 export const SIDEBAR_COLLAPSE_THRESHOLD = 80;
 export const SIDEBAR_MIN_EXPANDED_WIDTH = 180;
-export const SIDEBAR_MAX_WIDTH = 320;
+export const SIDEBAR_MAX_WIDTH = 640;
 export const SIDEBAR_DEFAULT_WIDTH = 320;
 
+/** Desktop column width: icon rail when collapsed, otherwise the persisted width. */
+export function sidebarColumnWidth(
+  width: number,
+  collapsed: boolean,
+  _chatOpen = false,
+): number {
+  if (collapsed) return SIDEBAR_RAIL_WIDTH;
+  return width;
+}
+
 function clampWidth(width: number): number {
   return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_RAIL_WIDTH, width));
 }