@tuturuuu/ui 0.30.2 → 0.31.0

package/src/components/ui/custom/notification-runtime.tsx

@@ -0,0 +1,23 @@
+'use client';
+import {
+  type AnchorHTMLAttributes,
+  type ComponentType,
+  createContext,
+  useContext,
+} from 'react';
+export interface NotificationRuntimeValue {
+  params: { wsId?: string | string[]; locale?: string | string[] };
+  pathname: string;
+  router: { push: (url: string) => void; refresh: () => void };
+  Link: ComponentType<
+    AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
+  >;
+  realtime: boolean;
+}
+export const NotificationRuntime =
+  createContext<NotificationRuntimeValue | null>(null);
+export function useNotificationRuntime() {
+  const value = useContext(NotificationRuntime);
+  if (!value) throw new Error('NotificationRuntime is required');
+  return value;
+}

package/src/components/ui/custom/onboarding-settings-panel.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { MessageSquareText, Play, RotateCcw } from '@tuturuuu/icons';
 import { updateConnectedOnboardingProgress } from '@tuturuuu/internal-api/onboarding';
-import { Button } from '@tuturuuu/ui/button';
 import {
   getLaunchableApp,
   getLaunchableAppByHostname,
@@ -10,6 +8,7 @@ import {
 } from '@tuturuuu/utils/launchable-apps';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
+import { SatelliteOnboardingSettingsPanel } from './satellite-onboarding-settings-panel';
 
 function currentAppSlug() {
   if (typeof window === 'undefined') return 'platform';
@@ -73,59 +72,13 @@ export function OnboardingSettingsPanel() {
     );
   };
 
-  const actions = [
-    {
-      description: t('replay_app_description'),
-      icon: Play,
-      label: t('replay_app'),
-      onClick: replayApp,
-      pending: pending === 'replay',
-    },
-    {
-      description: t('restart_journey_description'),
-      icon: RotateCcw,
-      label: t('restart_journey'),
-      onClick: restartJourney,
-      pending: pending === 'restart',
-    },
-    {
-      description: t('feedback_description'),
-      icon: MessageSquareText,
-      label: t('feedback'),
-      onClick: shareFeedback,
-      pending: false,
-    },
-  ];
-
   return (
-    <div className="space-y-3">
-      {actions.map((action) => (
-        <div
-          key={action.label}
-          className="flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between"
-        >
-          <div className="flex gap-3">
-            <div className="grid size-9 shrink-0 place-items-center rounded-lg border bg-muted/40">
-              <action.icon className="size-4" />
-            </div>
-            <div>
-              <p className="font-medium text-sm">{action.label}</p>
-              <p className="mt-1 max-w-xl text-muted-foreground text-sm">
-                {action.description}
-              </p>
-            </div>
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            disabled={action.pending}
-            onClick={action.onClick}
-          >
-            <action.icon className="size-4" />
-            {action.label}
-          </Button>
-        </div>
-      ))}
-    </div>
+    <SatelliteOnboardingSettingsPanel
+      t={t}
+      pending={pending}
+      replayApp={replayApp}
+      restartJourney={restartJourney}
+      shareFeedback={shareFeedback}
+    />
   );
 }

package/src/components/ui/custom/satellite-account-switcher-menu.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Check, ExternalLink, Trash2, User, Users } from '@tuturuuu/icons';
+import type { WebAccountSummary } from '@tuturuuu/internal-api/auth';
+import {
+  listWebAccountsWithInternalApi,
+  removeWebAccountWithInternalApi,
+  switchWebAccountWithInternalApi,
+} from '@tuturuuu/internal-api/auth';
+import {
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+
+interface SatelliteAccountSwitcherMenuProps {
+  centralUrl: string;
+  workspaceId?: string;
+  currentRoute: string;
+  t: (
+    key:
+      | 'accounts'
+      | 'current_account'
+      | 'manage_accounts'
+      | 'please_wait'
+      | 'remove_account'
+      | 'switch_account'
+      | 'unknown_user'
+  ) => string;
+  onAccountChanged?: () => void;
+}
+
+const accountQueryKey = (centralUrl: string) =>
+  ['satellite', 'web-accounts', centralUrl] as const;
+
+function accountLabel(account: WebAccountSummary, fallback: string) {
+  return (
+    account.metadata.displayName?.trim() || account.email?.trim() || fallback
+  );
+}
+
+export function webAccountSettingsUrl(
+  centralUrl: string,
+  workspaceId?: string
+) {
+  let end = centralUrl.length;
+  while (end > 0 && centralUrl[end - 1] === '/') end -= 1;
+
+  const baseUrl = centralUrl.slice(0, end);
+  if (!workspaceId) return `${baseUrl}/add-account`;
+
+  return `${baseUrl}/${encodeURIComponent(workspaceId)}?settingsDialog=open&settingsTab=accounts`;
+}
+
+export function SatelliteAccountSwitcherMenu({
+  centralUrl,
+  workspaceId,
+  currentRoute,
+  t,
+  onAccountChanged = () => window.location.reload(),
+}: SatelliteAccountSwitcherMenuProps) {
+  const queryClient = useQueryClient();
+  const queryKey = accountQueryKey(centralUrl);
+  const accountsQuery = useQuery({
+    enabled: Boolean(centralUrl),
+    queryFn: () => listWebAccountsWithInternalApi({ baseUrl: centralUrl }),
+    queryKey,
+    retry: 1,
+    staleTime: 30_000,
+  });
+  const invalidateAccounts = () => queryClient.invalidateQueries({ queryKey });
+  const switchMutation = useMutation({
+    mutationFn: (accountId: string) =>
+      switchWebAccountWithInternalApi(
+        accountId,
+        {
+          currentRoute,
+        },
+        { baseUrl: centralUrl }
+      ),
+    onSuccess: async (response) => {
+      await invalidateAccounts();
+      if (response.success) onAccountChanged();
+    },
+  });
+  const removeMutation = useMutation({
+    mutationFn: (accountId: string) =>
+      removeWebAccountWithInternalApi(accountId, { baseUrl: centralUrl }),
+    onSuccess: async (response, accountId) => {
+      await invalidateAccounts();
+      if (
+        response.success &&
+        accountId === accountsQuery.data?.activeAccountId
+      ) {
+        onAccountChanged();
+      }
+    },
+  });
+  const accounts = accountsQuery.data?.accounts ?? [];
+  const activeAccountId = accountsQuery.data?.activeAccountId ?? null;
+  const isMutating = switchMutation.isPending || removeMutation.isPending;
+
+  if (accountsQuery.isLoading) {
+    return (
+      <DropdownMenuItem disabled>
+        <Users className="h-4 w-4 text-dynamic-orange" />
+        <span>{t('please_wait')}</span>
+      </DropdownMenuItem>
+    );
+  }
+
+  if (accounts.length === 0) {
+    return (
+      <DropdownMenuItem asChild>
+        <a
+          href={webAccountSettingsUrl(centralUrl, workspaceId)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="cursor-pointer"
+        >
+          <Users className="h-4 w-4 text-dynamic-orange" />
+          <span>{t('manage_accounts')}</span>
+        </a>
+      </DropdownMenuItem>
+    );
+  }
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <Users className="h-4 w-4 text-dynamic-orange" />
+        <span>{t('switch_account')}</span>
+      </DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent sideOffset={4} className="w-72">
+          <DropdownMenuLabel>{t('accounts')}</DropdownMenuLabel>
+          {accounts.map((account) => {
+            const isActive = account.id === activeAccountId;
+            const label = accountLabel(account, t('unknown_user'));
+
+            return (
+              <DropdownMenuItem
+                key={account.id}
+                disabled={isActive || isMutating}
+                onSelect={() => {
+                  if (!isActive) switchMutation.mutate(account.id);
+                }}
+              >
+                <User className="h-4 w-4" />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{label}</span>
+                  {account.email && (
+                    <span className="block truncate text-xs opacity-70">
+                      {account.email}
+                    </span>
+                  )}
+                </span>
+                {isActive && <Check className="h-4 w-4" />}
+              </DropdownMenuItem>
+            );
+          })}
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger disabled={isMutating}>
+              <Trash2 className="h-4 w-4 text-dynamic-red" />
+              <span>{t('remove_account')}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent sideOffset={4} className="w-72">
+                {accounts.map((account) => {
+                  const isActive = account.id === activeAccountId;
+                  const label = accountLabel(account, t('unknown_user'));
+
+                  return (
+                    <DropdownMenuItem
+                      key={account.id}
+                      disabled={isActive || isMutating}
+                      onSelect={() => {
+                        if (!isActive) removeMutation.mutate(account.id);
+                      }}
+                    >
+                      <Trash2 className="h-4 w-4 text-dynamic-red" />
+                      <span className="truncate">
+                        {isActive ? t('current_account') : label}
+                      </span>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem asChild>
+            <a
+              href={webAccountSettingsUrl(centralUrl, workspaceId)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="cursor-pointer"
+            >
+              <ExternalLink className="h-4 w-4" />
+              <span>{t('manage_accounts')}</span>
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  );
+}

package/src/components/ui/custom/satellite-brand.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import {
+  Building2 as BuildingIcon,
+  ChevronDown,
+  EyeDashed as EyeDashedIcon,
+} from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import type { ComponentProps, ComponentType, ReactNode } from 'react';
+
+export type ShellLinkComponent = ComponentType<
+  ComponentProps<'a'> & { href: string }
+>;
+export const ShellAnchor: ShellLinkComponent = (props) => <a {...props} />;
+
+interface WorkspaceSelectVisibilityToggleProps {
+  hideLabel: string;
+  onToggle: () => void;
+  showLabel: string;
+  visible: boolean;
+}
+
+export function WorkspaceSelectVisibilityToggle({
+  hideLabel,
+  onToggle,
+  showLabel,
+  visible,
+}: WorkspaceSelectVisibilityToggleProps) {
+  const label = visible ? hideLabel : showLabel;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          aria-controls="sidebar-workspace-selector"
+          aria-expanded={visible}
+          aria-label={label}
+          className="size-8 shrink-0 text-muted-foreground shadow-none hover:text-foreground"
+          data-slot="workspace-select-visibility-toggle"
+          onClick={onToggle}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          {visible ? (
+            <EyeDashedIcon aria-hidden className="size-4" />
+          ) : (
+            <BuildingIcon aria-hidden className="size-4" />
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export interface SatelliteBrandProps {
+  LinkComponent?: ShellLinkComponent;
+  logo: ReactNode;
+  appName: string;
+  actions?: ReactNode;
+  appHref: string;
+  centralHref: string;
+  className?: string;
+  launcherLabel?: string;
+  onAppClick?: () => void;
+}
+
+export function SatelliteBrand({
+  LinkComponent: Link = ShellAnchor,
+  logo,
+  appName,
+  actions,
+  appHref,
+  centralHref,
+  className,
+  launcherLabel = 'Open apps',
+  onAppClick,
+}: SatelliteBrandProps) {
+  const appControl = onAppClick ? (
+    <button
+      aria-haspopup="dialog"
+      aria-label={launcherLabel}
+      className="group flex min-w-0 items-center gap-1.5 rounded-lg px-1.5 py-1 font-semibold text-lg tracking-tight transition hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      onClick={onAppClick}
+      type="button"
+    >
+      <span className="truncate">{appName}</span>
+      <ChevronDown
+        aria-hidden
+        className="size-4 shrink-0 text-muted-foreground"
+      />
+    </button>
+  ) : (
+    <Link
+      className="min-w-0 truncate rounded-md font-semibold text-lg tracking-tight transition hover:text-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      href={appHref}
+    >
+      {appName}
+    </Link>
+  );
+
+  return (
+    <div className={cn('flex min-w-0 flex-1 items-center gap-2.5', className)}>
+      <Link
+        aria-label="Tuturuuu"
+        className="flex size-9 shrink-0 items-center justify-center rounded-xl transition hover:bg-foreground/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        href={centralHref}
+      >
+        {logo}
+      </Link>
+      <span
+        aria-hidden
+        className="h-5 w-px shrink-0 self-center rounded-full bg-foreground/10"
+      />
+      {appControl}
+      {actions ? <div className="ml-auto flex-none">{actions}</div> : null}
+    </div>
+  );
+}

package/src/components/ui/custom/satellite-content.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import type { NavLink } from '@tuturuuu/ui/custom/navigation';
+import { cn } from '@tuturuuu/utils/format';
+import {
+  type ComponentType,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  Suspense,
+} from 'react';
+import type {
+  NavigationState,
+  WorkspaceSelectRenderer,
+} from './satellite-shell-utils';
+import { SidebarWorkspaceSelectSection } from './satellite-workspace-section';
+
+export interface SatelliteContentProps {
+  Navigation: ComponentType<{
+    wsId: string;
+    isCollapsed: boolean;
+    links: (NavLink | null)[];
+    onClick: () => void;
+    onSubMenuClick: (links: (NavLink | null)[], title: string) => void;
+  }>;
+  backButton: NavLink;
+  currentTitle?: string;
+  extraContent?: ReactNode;
+  filteredCurrentLinks: (NavLink | null)[];
+  isCollapsed: boolean;
+  navState: NavigationState;
+  setIsCollapsed: Dispatch<SetStateAction<boolean>>;
+  setNavState: Dispatch<SetStateAction<NavigationState>>;
+  workspaceSelect?: WorkspaceSelectRenderer;
+  workspaceSelectVisible: boolean;
+  wsId: string;
+}
+
+export function SatelliteContent({
+  Navigation: Nav,
+  backButton,
+  currentTitle,
+  extraContent,
+  filteredCurrentLinks,
+  isCollapsed,
+  navState,
+  setIsCollapsed,
+  setNavState,
+  workspaceSelect,
+  workspaceSelectVisible,
+  wsId,
+}: SatelliteContentProps) {
+  const handleSubMenuClick = (
+    newLinks: (NavLink | null)[],
+    parentTitle: string
+  ) => {
+    setNavState((prevState) => ({
+      currentLinks: newLinks,
+      direction: 'forward',
+      history: [...prevState.history, prevState.currentLinks],
+      titleHistory: [...prevState.titleHistory, parentTitle],
+    }));
+  };
+
+  const closeOnMobile = () => {
+    if (window.innerWidth < 768) setIsCollapsed(true);
+  };
+
+  return (
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden">
+      <SidebarWorkspaceSelectSection
+        visible={Boolean(workspaceSelect && workspaceSelectVisible)}
+      >
+        {workspaceSelect ? (
+          <Suspense
+            fallback={
+              <div className="h-8 w-full animate-pulse rounded-md bg-foreground/5" />
+            }
+          >
+            {workspaceSelect({ isCollapsed, standalone: true })}
+          </Suspense>
+        ) : null}
+      </SidebarWorkspaceSelectSection>
+      <div
+        key={navState.history.length}
+        className={cn(
+          'min-h-0 flex-1 transition-transform duration-300 ease-in-out',
+          navState.direction === 'forward'
+            ? 'slide-in-from-right animate-in'
+            : 'slide-in-from-left animate-in'
+        )}
+      >
+        {navState.history.length === 0 ? (
+          <div className="flex h-full min-h-0 flex-col">
+            <div
+              className={cn(
+                'scrollbar-none overflow-y-auto',
+                extraContent ? 'shrink-0' : 'min-h-0 flex-1'
+              )}
+            >
+              <Nav
+                isCollapsed={isCollapsed}
+                links={filteredCurrentLinks}
+                onClick={closeOnMobile}
+                onSubMenuClick={handleSubMenuClick}
+                wsId={wsId}
+              />
+            </div>
+            {extraContent ? (
+              <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+                {extraContent}
+              </div>
+            ) : null}
+          </div>
+        ) : (
+          <>
+            <Nav
+              isCollapsed={isCollapsed}
+              links={[backButton]}
+              onClick={() => null}
+              onSubMenuClick={() => null}
+              wsId={wsId}
+            />
+            {!isCollapsed && currentTitle ? (
+              <div className="p-2 pt-0">
+                <h2 className="line-clamp-1 px-2 font-semibold text-muted-foreground text-sm uppercase tracking-wide">
+                  {currentTitle}
+                </h2>
+              </div>
+            ) : null}
+            {!isCollapsed ? <div className="mx-4 my-1 border-b" /> : null}
+            {filteredCurrentLinks.length > 0 ? (
+              <div className="scrollbar-none min-h-0 overflow-y-auto">
+                <Nav
+                  isCollapsed={isCollapsed}
+                  links={filteredCurrentLinks}
+                  onClick={closeOnMobile}
+                  onSubMenuClick={handleSubMenuClick}
+                  wsId={wsId}
+                />
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}