@xenide-io/the-old-ui-theme 0.6.9 → 0.6.11

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

@@ -31,11 +31,72 @@ import {
 const SuiteAiBlockNoteMessage = lazy(() => import("./ai-message-blocknote"));
 
 export const SUITE_OPEN_ASK_AI_EVENT = "shellstack:open-ask-ai";
+export const SUITE_ASK_AI_OPEN_KEY = "shellstack:shelly-open";
+export const SUITE_ASK_AI_OPEN_QUERY = "shelly";
+export const SUITE_MUTATED_EVENT = "shellstack:suite-mutated";
+export const TURTLETIME_TIMER_MUTATED_EVENT = "tt-timer-mutated";
 
 export type SuiteAskAiOpenDetail = {
   prompt?: string;
 };
 
+export function persistSuiteAskAiOpen(open: boolean): void {
+  if (typeof window === "undefined") return;
+  try {
+    if (open) sessionStorage.setItem(SUITE_ASK_AI_OPEN_KEY, "1");
+    else sessionStorage.removeItem(SUITE_ASK_AI_OPEN_KEY);
+  } catch {
+    // private mode / blocked storage
+  }
+}
+
+export function readSuiteAskAiOpen(): boolean {
+  if (typeof window === "undefined") return false;
+  try {
+    return sessionStorage.getItem(SUITE_ASK_AI_OPEN_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+/** Stamp a destination path so the other app opens Shelly after SSO. */
+export function pathWithSuiteAskAiOpen(path: string): string {
+  const url = new URL((path || "/").trim() || "/", "http://local.invalid");
+  url.searchParams.set(SUITE_ASK_AI_OPEN_QUERY, "1");
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+
+/** Open Shelly only after a `?shelly=1` handoff — not a leftover session flag. */
+export function consumeSuiteAskAiOpenFromLocation(): boolean {
+  if (typeof window === "undefined") return false;
+  const url = new URL(window.location.href);
+  if (url.searchParams.get(SUITE_ASK_AI_OPEN_QUERY) !== "1") return false;
+  persistSuiteAskAiOpen(true);
+  url.searchParams.delete(SUITE_ASK_AI_OPEN_QUERY);
+  window.history.replaceState(
+    window.history.state,
+    "",
+    `${url.pathname}${url.search}${url.hash}`,
+  );
+  return true;
+}
+
+export type SuiteAiActionStatus =
+  | "proposed"
+  | "applied"
+  | "cancelled"
+  | "failed";
+
+export interface SuiteAiAction {
+  id: string;
+  kind: string;
+  status: SuiteAiActionStatus;
+  summary: string;
+  href?: string;
+  error?: string;
+  payload?: Record<string, unknown>;
+}
+
 let pendingAskAiPrompt: string | null = null;
 
 /** Open the suite Ask AI panel from anywhere (Today card, command palette, …). */
@@ -65,6 +126,25 @@ export interface SuiteAiChatMessage {
   role: "user" | "assistant";
   content: string;
   created_at?: string;
+  actions?: SuiteAiAction[];
+}
+
+function notifySuiteMutated(actions?: SuiteAiAction[]): void {
+  if (typeof window === "undefined" || !actions?.length) return;
+  const kinds = actions.map((action) => action.kind);
+  if (
+    kinds.some(
+      (kind) =>
+        kind.includes("timer") ||
+        kind.includes("time") ||
+        kind.includes("hours"),
+    )
+  ) {
+    window.dispatchEvent(new Event(TURTLETIME_TIMER_MUTATED_EVENT));
+  }
+  window.dispatchEvent(
+    new CustomEvent(SUITE_MUTATED_EVENT, { detail: { kinds } }),
+  );
 }
 
 /**
@@ -84,6 +164,8 @@ export function SuiteAiPanel({
   onOpenChange,
   suiteAppBases,
   onSwitchApp,
+  onSameAppNavigate,
+  resolveAction,
 }: {
   presets?: SuiteAiPreset[];
   emptyState?: ReactNode;
@@ -105,12 +187,20 @@ export function SuiteAiPanel({
   suiteAppBases?: Partial<Record<SuiteAppSlug, string>>;
   /** Cross-app SSO. Same-app links just navigate to `path`. */
   onSwitchApp?: (app: SuiteAppSlug, path: string) => void;
+  /** Client-side same-app route change — keeps Shelly mounted. */
+  onSameAppNavigate?: (path: string) => void;
+  resolveAction?: (
+    id: string,
+    decision: "confirm" | "cancel",
+  ) => Promise<{ messages: SuiteAiChatMessage[] }>;
 }) {
   const inputId = useId();
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const [resolvingId, setResolvingId] = useState("");
   const open = openProp ?? uncontrolledOpen;
   const setOpen = useCallback(
     (next: boolean) => {
+      persistSuiteAskAiOpen(next);
       if (openProp === undefined) setUncontrolledOpen(next);
       onOpenChange?.(next);
     },
@@ -215,7 +305,11 @@ export function SuiteAiPanel({
         signal: controller.signal,
       });
       if (controller.signal.aborted) return;
-      setMessages(result.messages ?? []);
+      const nextMessages = result.messages ?? [];
+      setMessages(nextMessages);
+      notifySuiteMutated(
+        nextMessages.flatMap((message) => message.actions ?? []),
+      );
     } catch (err) {
       if (controller.signal.aborted) return;
       setMessages((prev) =>
@@ -264,6 +358,29 @@ export function SuiteAiPanel({
     }
   }
 
+  async function handleResolve(
+    actionId: string,
+    decision: "confirm" | "cancel",
+  ) {
+    if (!resolveAction || resolvingId) return;
+    setResolvingId(actionId);
+    setError("");
+    try {
+      const result = await resolveAction(actionId, decision);
+      const nextMessages = result.messages ?? [];
+      setMessages(nextMessages);
+      notifySuiteMutated(
+        nextMessages.flatMap((message) => message.actions ?? []),
+      );
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not apply that action.",
+      );
+    } finally {
+      setResolvingId("");
+    }
+  }
+
   function onConversationClick(event: ReactMouseEvent<HTMLDivElement>) {
     if (event.defaultPrevented) return;
     if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
@@ -280,12 +397,15 @@ export function SuiteAiPanel({
     );
     if (!match) return;
     event.preventDefault();
+    persistSuiteAskAiOpen(true);
     if (match.sameApp) {
-      window.location.assign(match.path);
+      if (onSameAppNavigate) onSameAppNavigate(match.path);
+      else window.location.assign(pathWithSuiteAskAiOpen(match.path));
       return;
     }
-    if (onSwitchApp) onSwitchApp(match.slug, match.path);
-    else window.location.assign(anchor.href);
+    const openPath = pathWithSuiteAskAiOpen(match.path);
+    if (onSwitchApp) onSwitchApp(match.slug, openPath);
+    else window.location.assign(new URL(openPath, href).toString());
   }
 
   if (!open) return null;
@@ -391,16 +511,74 @@ export function SuiteAiPanel({
                 >
                   <Icon className="h-3.5 w-3.5" />
                 </span>
-                <div className="min-w-0 max-w-[85%] rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink">
-                  <Suspense
-                    fallback={
-                      <p className="whitespace-pre-wrap break-words">
-                        {message.content}
-                      </p>
-                    }
-                  >
-                    <SuiteAiBlockNoteMessage markdown={message.content} />
-                  </Suspense>
+                <div className="min-w-0 max-w-[85%] space-y-2">
+                  <div className="rounded-2xl rounded-bl-md bg-ph-muted px-3 py-2 text-sm leading-relaxed text-ph-ink">
+                    <Suspense
+                      fallback={
+                        <p className="whitespace-pre-wrap break-words">
+                          {message.content}
+                        </p>
+                      }
+                    >
+                      <SuiteAiBlockNoteMessage markdown={message.content} />
+                    </Suspense>
+                  </div>
+                  {(message.actions ?? []).map((action) => (
+                    <div
+                      key={action.id}
+                      data-test="ask-ai-action"
+                      data-status={action.status}
+                      className="rounded-xl border border-ph-border bg-ph-surface px-3 py-2 text-sm text-ph-ink"
+                    >
+                      <p className="font-medium">{action.summary}</p>
+                      {action.status === "proposed" ? (
+                        <div className="mt-2 flex flex-wrap gap-2">
+                          <button
+                            type="button"
+                            data-test="ask-ai-action-confirm"
+                            disabled={Boolean(resolvingId) || !resolveAction}
+                            onClick={() => void handleResolve(action.id, "confirm")}
+                            className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                          >
+                            {resolvingId === action.id ? "Working…" : "Confirm"}
+                          </button>
+                          <button
+                            type="button"
+                            data-test="ask-ai-action-cancel"
+                            disabled={Boolean(resolvingId) || !resolveAction}
+                            onClick={() => void handleResolve(action.id, "cancel")}
+                            className="inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      ) : null}
+                      {action.status === "applied" ? (
+                        <p className="mt-1 text-xs text-ph-subtle">
+                          Done
+                          {action.href ? (
+                            <>
+                              {" · "}
+                              <a
+                                href={action.href}
+                                className="text-ph-brand underline-offset-2 hover:underline"
+                              >
+                                Open
+                              </a>
+                            </>
+                          ) : null}
+                        </p>
+                      ) : null}
+                      {action.status === "cancelled" ? (
+                        <p className="mt-1 text-xs text-ph-subtle">Cancelled</p>
+                      ) : null}
+                      {action.status === "failed" ? (
+                        <p className="mt-1 text-xs text-ph-danger">
+                          {action.error || "Could not apply that."}
+                        </p>
+                      ) : null}
+                    </div>
+                  ))}
                 </div>
               </div>
             );

package/src/suite/components/suite-mobile-drawer.test.tsx

@@ -0,0 +1,33 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { SuiteMobileDrawer } from "./suite-mobile-drawer";
+
+afterEach(cleanup);
+
+describe("SuiteMobileDrawer", () => {
+  it("puts one full-height scroller under the close row", () => {
+    render(
+      <SuiteMobileDrawer
+        open
+        onClose={() => {}}
+        showCloseButton
+        title="Kraken"
+      >
+        <p>Documents</p>
+      </SuiteMobileDrawer>,
+    );
+
+    const body = document.querySelector(
+      '[data-test="suite-mobile-drawer-body"]',
+    );
+    expect(body).not.toBeNull();
+    expect(body).toHaveClass(
+      "min-h-0",
+      "flex-1",
+      "overflow-y-auto",
+      "suite-scroll-lock",
+    );
+    expect(body?.previousElementSibling).toHaveClass("h-14", "shrink-0");
+  });
+});

package/src/suite/components/suite-mobile-drawer.tsx

@@ -133,7 +133,7 @@ export function SuiteMobileDrawer({
         tabIndex={-1}
         data-test={panelDataTest}
         className={cn(
-          "suite-scroll-lock relative flex h-full w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
+          "relative flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
           side === "right" && "ml-auto",
           shown
             ? "translate-x-0"
@@ -168,7 +168,14 @@ export function SuiteMobileDrawer({
             </button>
           </div>
         ) : null}
-        {children}
+        {/* One column scroller, same as desktop SuiteSidebar body. Nested
+            flex-1 overflow-y-auto regions trap the tree in a leftover strip. */}
+        <div
+          data-test="suite-mobile-drawer-body"
+          className="suite-scroll-lock flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+        >
+          {children}
+        </div>
       </aside>
     </div>
   );

package/src/suite/components/suite-sidebar.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, type ReactNode } from "react";
+import { useCallback, useEffect, type ReactNode } from "react";
 import { NavArrowLeft, Sparks } from "iconoir-react";
 
 import { Tooltip } from "../../components/ui/Tooltip";
 import { cn } from "../lib/cn";
-import { SUITE_OPEN_ASK_AI_EVENT } from "./ai-panel";
+import {
+  persistSuiteAskAiOpen,
+  SUITE_OPEN_ASK_AI_EVENT,
+} from "./ai-panel";
 import type { SuiteNavIcon } from "./suite-bottom-nav";
 
 type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
@@ -84,32 +87,40 @@ export function SuiteSidebar({
   const showAskAi = Boolean(onAskAiOpenChange && askAi);
   const chatOpen = showAskAi && askAiOpen && !collapsed;
 
+  const setAskAi = useCallback(
+    (next: boolean) => {
+      persistSuiteAskAiOpen(next);
+      onAskAiOpenChange?.(next);
+    },
+    [onAskAiOpenChange],
+  );
+
   useEffect(() => {
     if (!onAskAiOpenChange) return;
     function onOpen() {
       onRequestExpand?.();
-      onAskAiOpenChange?.(true);
+      setAskAi(true);
     }
     window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
     return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
-  }, [onAskAiOpenChange, onRequestExpand]);
+  }, [onAskAiOpenChange, onRequestExpand, setAskAi]);
 
   useEffect(() => {
     if (!chatOpen) return;
     function onKey(event: KeyboardEvent) {
-      if (event.key === "Escape") onAskAiOpenChange?.(false);
+      if (event.key === "Escape") setAskAi(false);
     }
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [chatOpen, onAskAiOpenChange]);
+  }, [chatOpen, setAskAi]);
 
   function toggleAskAi() {
     if (askAiOpen) {
-      onAskAiOpenChange?.(false);
+      setAskAi(false);
       return;
     }
     if (collapsed) onRequestExpand?.();
-    onAskAiOpenChange?.(true);
+    setAskAi(true);
   }
 
   const askAiButton = (
@@ -151,7 +162,7 @@ export function SuiteSidebar({
               type="button"
               data-test="suite-ask-ai-back"
               aria-label="Back to navigation"
-              onClick={() => onAskAiOpenChange?.(false)}
+              onClick={() => setAskAi(false)}
               className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
             >
               <NavArrowLeft className="h-4 w-4" aria-hidden />
@@ -213,7 +224,7 @@ export function SuiteSidebar({
               <button
                 type="button"
                 data-test="suite-ask-ai-back"
-                onClick={() => onAskAiOpenChange?.(false)}
+                onClick={() => setAskAi(false)}
                 className="inline-flex h-9 items-center gap-1 rounded-lg px-2 text-sm font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
               >
                 <NavArrowLeft className="h-4 w-4" aria-hidden />
@@ -292,10 +303,7 @@ export function SuiteSidebar({
             </nav>
 
             {secondaryNav ? (
-              <div
-                className="min-h-0 flex-1"
-                data-test="suite-sidebar-secondary-nav"
-              >
+              <div className="shrink-0" data-test="suite-sidebar-secondary-nav">
                 {secondaryNav}
               </div>
             ) : null}

package/src/suite/index.ts

@@ -53,7 +53,17 @@ export {
   SuiteAiPanel,
   openSuiteAskAi,
   consumePendingAskAiPrompt,
+  persistSuiteAskAiOpen,
+  readSuiteAskAiOpen,
+  pathWithSuiteAskAiOpen,
+  consumeSuiteAskAiOpenFromLocation,
   SUITE_OPEN_ASK_AI_EVENT,
+  SUITE_ASK_AI_OPEN_KEY,
+  SUITE_ASK_AI_OPEN_QUERY,
+  SUITE_MUTATED_EVENT,
+  TURTLETIME_TIMER_MUTATED_EVENT,
+  type SuiteAiAction,
+  type SuiteAiActionStatus,
   type SuiteAiPreset,
   type SuiteAiChatMessage,
   type SuiteAskAiOpenDetail,