@shellui/core 0.2.0 → 0.3.0-beta.1

package/src/features/settings/SettingsRoutes.tsx

@@ -4,6 +4,7 @@ import {
   SettingsIcon,
   CodeIcon,
   ShieldIcon,
+  FileTextIcon,
   PackageIcon,
   RefreshDoubleIcon,
 } from './SettingsIcons';
@@ -14,6 +15,7 @@ import { Advanced } from './components/Advanced';
 import { Develop } from './components/Develop';
 import { DataPrivacy } from './components/DataPrivacy';
 import { ServiceWorker } from './components/ServiceWorker';
+import { LegalDocumentsPanel } from './components/LegalDocumentsPanel';
 import { isTauri } from '../../service-worker/register';
 
 export const createSettingsRoutes = (t: (key: string) => string) => [
@@ -47,6 +49,12 @@ export const createSettingsRoutes = (t: (key: string) => string) => [
     path: 'data-privacy',
     element: <DataPrivacy />,
   },
+  {
+    name: t('routes.legalDocuments'),
+    icon: FileTextIcon,
+    path: 'legal-documents',
+    element: <LegalDocumentsPanel />,
+  },
   {
     name: t('routes.develop'),
     icon: CodeIcon,

package/src/features/settings/SettingsView.tsx

@@ -27,14 +27,18 @@ import { Button } from '../../components/ui/button';
 import { ChevronRightIcon, ChevronLeftIcon } from './SettingsIcons';
 import { flattenNavigationItems, resolveLocalizedString } from '../layouts/utils';
 import { ApplicationSettingsPanel } from './components/ApplicationSettingsPanel';
+import { createUserSettingsRoute } from './components/createUserSettingsRoute';
 import type { NavigationItem } from '../config/types';
 import { cn } from '../../lib/utils';
+import { useAuth } from '../auth/hooks/useAuth';
+import { getLegalDocuments } from '../legal/legalDocuments';
 
 export const SettingsView = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { settings } = useSettings();
   const { config } = useConfig();
+  const { user, session, logout } = useAuth();
   const { t, i18n } = useTranslation('settings');
   // Re-check isTauri after mount and after a short delay so we catch late-injected __TAURI__ in dev
   const [isTauriEnv, setIsTauriEnv] = useState(() => isTauri());
@@ -73,6 +77,13 @@ export const SettingsView = () => {
     );
   }, [settings.developerFeatures.enabled, routesWithoutTauriSw]);
 
+  const settingsNavRoutes = useMemo(() => {
+    if (getLegalDocuments(config).length > 0) {
+      return filteredRoutes;
+    }
+    return filteredRoutes.filter((route) => route.path !== 'legal-documents');
+  }, [filteredRoutes, config]);
+
   // Application settings from navigation items with settings URL
   const applicationRoutes = useMemo(() => {
     const lang = i18n.language || 'en';
@@ -100,10 +111,29 @@ export const SettingsView = () => {
       });
   }, [config?.navigation, i18n.language]);
 
+  const userRoute = useMemo(
+    () =>
+      createUserSettingsRoute(user, logout, t, {
+        developerModeEnabled: settings.developerFeatures.enabled,
+        accessToken: session?.accessToken ?? null,
+        settingsAccessToken: settings.accessToken ?? null,
+        rawUserSettings: settings.user ?? null,
+      }),
+    [
+      user,
+      logout,
+      t,
+      settings.developerFeatures.enabled,
+      settings.accessToken,
+      settings.user,
+      session?.accessToken,
+    ],
+  );
+
   // All routes (core + applications) for selection and routing
   const allRoutes = useMemo(
-    () => [...filteredRoutes, ...applicationRoutes],
-    [filteredRoutes, applicationRoutes],
+    () => [...userRoute, ...settingsNavRoutes, ...applicationRoutes],
+    [userRoute, settingsNavRoutes, applicationRoutes],
   );
 
   // Group routes by category
@@ -115,21 +145,26 @@ export const SettingsView = () => {
         : []),
       {
         title: t('categories.preferences'),
-        routes: filteredRoutes.filter((route) =>
-          ['appearance', 'language-and-region', 'data-privacy'].includes(route.path),
-        ),
+        routes: [
+          ...settingsNavRoutes.filter((route) =>
+            ['appearance', 'language-and-region', 'data-privacy'].includes(route.path),
+          ),
+          ...userRoute,
+        ],
       },
       {
         title: t('categories.system'),
-        routes: filteredRoutes.filter((route) => ['update-app', 'advanced'].includes(route.path)),
+        routes: settingsNavRoutes.filter((route) =>
+          ['update-app', 'advanced', 'legal-documents'].includes(route.path),
+        ),
       },
       {
         title: t('categories.developer'),
-        routes: filteredRoutes.filter((route) => developerOnlyPaths.includes(route.path)),
+        routes: settingsNavRoutes.filter((route) => developerOnlyPaths.includes(route.path)),
       },
     ];
     return groups.filter((group) => group.routes.length > 0);
-  }, [filteredRoutes, applicationRoutes, t]);
+  }, [settingsNavRoutes, applicationRoutes, userRoute, t]);
 
   // Find matching nav item by checking if URL contains or ends with the item path
   const getSelectedItemFromUrl = useCallback(() => {

package/src/features/settings/components/Develop.tsx

@@ -126,9 +126,9 @@ export const Develop = () => {
                 }}
               >
                 <option value="">{t('develop.navigation.placeholder')}</option>
-                {navItems.map((item) => (
+                {navItems.map((item, index) => (
                   <option
-                    key={item.path || 'root'}
+                    key={`${item.path || 'root'}-${item.url}-${item.openIn || 'default'}-${index}`}
                     value={getNavPathPrefix(item)}
                   >
                     {resolveLocalizedString(item.label, currentLanguage) || item.path}

package/src/features/settings/components/LegalDocumentsPanel.tsx

@@ -0,0 +1,46 @@
+import { useMemo, useState } from 'react';
+import { Button } from '../../../components/ui/button';
+import { useConfig } from '../../config/useConfig';
+import { getLegalDocuments } from '../../legal/legalDocuments';
+import { LegalDocumentContent } from '../../legal/LegalDocumentContent';
+
+export const LegalDocumentsPanel = () => {
+  const { config } = useConfig();
+  const legalDocuments = useMemo(() => getLegalDocuments(config), [config]);
+  const [selectedDocumentPath, setSelectedDocumentPath] = useState<string | null>(
+    legalDocuments[0]?.path ?? null,
+  );
+  const selectedDocument =
+    legalDocuments.find((item) => item.path === selectedDocumentPath) ?? legalDocuments[0] ?? null;
+
+  if (legalDocuments.length === 0) {
+    return (
+      <div className="rounded-lg border bg-card p-4 space-y-1">
+        <h3
+          className="text-sm font-medium leading-none"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          Legal documents
+        </h3>
+        <p className="text-sm text-muted-foreground">No legal documents are configured.</p>
+      </div>
+    );
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {legalDocuments.map((document) => (
+          <Button
+            key={document.path}
+            variant={selectedDocument?.path === document.path ? 'default' : 'outline'}
+            onClick={() => setSelectedDocumentPath(document.path)}
+          >
+            {document.title}
+          </Button>
+        ))}
+      </div>
+      {selectedDocument && <LegalDocumentContent document={selectedDocument} />}
+    </section>
+  );
+};

package/src/features/settings/components/UserIcon.tsx

@@ -0,0 +1,20 @@
+export const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M20 21a8 8 0 1 0-16 0" />
+    <circle
+      cx="12"
+      cy="7"
+      r="4"
+    />
+  </svg>
+);

package/src/features/settings/components/UserSettingsPanel.tsx

@@ -0,0 +1,438 @@
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { shellui, type Settings } from '@shellui/sdk';
+import type { AuthUser } from '../../auth/hooks/useAuth';
+import { decodeJwtPayload } from '../../auth/utils/decodeJwtPayload';
+import { Badge } from '../../../components/ui/badge';
+import { Button } from '../../../components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../components/ui/tooltip';
+import { useSettings } from '../hooks/useSettings';
+
+const JWT_TIMESTAMP_LINE = /^(?<before>\s*"(?:exp|iat)"\s*:\s*)(?<sec>\d+)(?<after>,?\s*)$/;
+
+const formatJwtUnixTooltip = (unixSeconds: number, lang: string, timezone: string): string => {
+  const date = new Date(unixSeconds * 1000);
+  let absolute: string;
+  try {
+    absolute = new Intl.DateTimeFormat(lang, {
+      timeZone: timezone,
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      timeZoneName: 'short',
+    }).format(date);
+  } catch {
+    try {
+      absolute = date.toLocaleString(lang, { timeZone: timezone });
+    } catch {
+      absolute = date.toLocaleString(lang);
+    }
+  }
+
+  const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
+  const elapsed = date.getTime() - Date.now();
+  const divisions: [Intl.RelativeTimeFormatUnit, number][] = [
+    ['year', 31536000000],
+    ['month', 2629800000],
+    ['week', 604800000],
+    ['day', 86400000],
+    ['hour', 3600000],
+    ['minute', 60000],
+    ['second', 1000],
+  ];
+
+  for (const [unit, ms] of divisions) {
+    if (Math.abs(elapsed) >= ms || unit === 'second') {
+      const relative = rtf.format(Math.round(elapsed / ms), unit);
+      return `${relative}\n${absolute}\n(${timezone})`;
+    }
+  }
+
+  return `${absolute}\n(${timezone})`;
+};
+
+const JwtTimestampInfo = ({
+  unixSeconds,
+  lang,
+  timezone,
+  ariaLabel,
+}: {
+  unixSeconds: number;
+  lang: string;
+  timezone: string;
+  ariaLabel: string;
+}) => {
+  const tooltip = formatJwtUnixTooltip(unixSeconds, lang, timezone);
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className="-mb-0.5 ml-1 inline-flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label={ariaLabel}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+            />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent
+        side="top"
+        align="center"
+        className="max-w-xs whitespace-pre-line text-left"
+      >
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const JwtPayloadPre = ({
+  jsonText,
+  lang,
+  timezone,
+  timestampAriaLabel,
+}: {
+  jsonText: string;
+  lang: string;
+  timezone: string;
+  timestampAriaLabel: string;
+}) => {
+  const lines = jsonText.split('\n');
+  return (
+    <pre className="mt-1 max-h-48 overflow-auto rounded bg-muted p-2 text-xs text-foreground">
+      {lines.map((line, index) => {
+        const match = line.match(JWT_TIMESTAMP_LINE);
+        if (!match?.groups) {
+          return (
+            <span
+              key={index}
+              className="block"
+            >
+              {line || '\u00A0'}
+            </span>
+          );
+        }
+        const { before, sec, after } = match.groups;
+        const unix = Number(sec);
+        return (
+          <span
+            key={index}
+            className="block"
+          >
+            {before}
+            {sec}
+            {after}
+            <JwtTimestampInfo
+              unixSeconds={unix}
+              lang={lang}
+              timezone={timezone}
+              ariaLabel={timestampAriaLabel}
+            />
+          </span>
+        );
+      })}
+    </pre>
+  );
+};
+
+const formatLoginMethod = (
+  authProvider: string | null,
+  t: (key: string, options?: { [key: string]: string }) => string,
+) => {
+  if (!authProvider) return t('userAccount.loginMethods.unknown');
+  const normalized = authProvider.toLowerCase();
+  if (normalized === 'email') return t('userAccount.loginMethods.magicLinkEmail');
+  if (normalized === 'github') return t('userAccount.loginMethods.github');
+  return authProvider.charAt(0).toUpperCase() + authProvider.slice(1);
+};
+
+export const UserSettingsPanel = ({
+  user,
+  onLogout,
+  developerModeEnabled,
+  accessToken,
+  settingsAccessToken,
+  rawUserSettings,
+}: {
+  user: AuthUser;
+  onLogout: () => Promise<void>;
+  developerModeEnabled: boolean;
+  accessToken: string | null;
+  settingsAccessToken: string | null;
+  rawUserSettings: Settings['user'];
+}) => {
+  const { t, i18n } = useTranslation('settings');
+  const { settings } = useSettings();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const decodedJwtPayload = useMemo(
+    () => (accessToken ? decodeJwtPayload(accessToken) : null),
+    [accessToken],
+  );
+
+  const lang = settings.language?.code || i18n.language || 'en';
+  const timezone =
+    settings.region?.timezone ||
+    (typeof Intl !== 'undefined' && Intl.DateTimeFormat().resolvedOptions().timeZone) ||
+    'UTC';
+
+  const rawUserSettingsJson = useMemo(
+    () => JSON.stringify(rawUserSettings ?? null, null, 2),
+    [rawUserSettings],
+  );
+  const jwtPayloadJson = useMemo(
+    () =>
+      accessToken
+        ? JSON.stringify(
+            decodedJwtPayload ?? t('userAccount.developerDiagnostics.unableToDecodeJwtPayload'),
+            null,
+            2,
+          )
+        : t('userAccount.developerDiagnostics.noAccessTokenAvailable'),
+    [accessToken, decodedJwtPayload, t],
+  );
+  const settingsAccessTokenText =
+    settingsAccessToken || t('userAccount.developerDiagnostics.notSharedForApp');
+  const handleLogout = useCallback(async () => {
+    setIsLoggingOut(true);
+    try {
+      shellui.sendMessageToParent({
+        type: 'SHELLUI_LOGOUT',
+        payload: {},
+      });
+      await onLogout();
+    } finally {
+      setIsLoggingOut(false);
+    }
+  }, [onLogout]);
+  const handleCopyDeveloperDiagnostics = useCallback(
+    async (label: string, value: string) => {
+      if (!navigator?.clipboard?.writeText) {
+        shellui.toast({
+          title: t('userAccount.clipboard.copyFailedTitle'),
+          description: t('userAccount.clipboard.clipboardApiUnavailable'),
+          type: 'error',
+        });
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(value);
+        shellui.toast({
+          title: t('userAccount.clipboard.copiedTitle'),
+          description: t('userAccount.clipboard.copiedDescription', { label }),
+          type: 'success',
+        });
+      } catch {
+        shellui.toast({
+          title: t('userAccount.clipboard.copyFailedTitle'),
+          description: t('userAccount.clipboard.unableToCopyDiagnostics'),
+          type: 'error',
+        });
+      }
+    },
+    [t],
+  );
+
+  const developerDiagnostics: ReactNode = developerModeEnabled ? (
+    <TooltipProvider delayDuration={200}>
+      <div className="rounded-lg bg-muted/40 p-3">
+        <h3
+          className="text-sm font-semibold text-foreground"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('userAccount.developerDiagnostics.title')}
+        </h3>
+        <div className="mt-3 space-y-3 text-sm">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-muted-foreground">
+                {t('userAccount.developerDiagnostics.jwtPayload')}
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() =>
+                  void handleCopyDeveloperDiagnostics(
+                    t('userAccount.developerDiagnostics.jwtPayload'),
+                    jwtPayloadJson,
+                  )
+                }
+              >
+                {t('userAccount.developerDiagnostics.copy')}
+              </Button>
+            </div>
+            {accessToken && decodedJwtPayload ? (
+              <JwtPayloadPre
+                jsonText={jwtPayloadJson}
+                lang={lang}
+                timezone={timezone}
+                timestampAriaLabel={t('userAccount.developerDiagnostics.jwtTimestampTooltipAria')}
+              />
+            ) : (
+              <pre className="mt-1 max-h-48 overflow-auto rounded bg-muted p-2 text-xs text-foreground">
+                {jwtPayloadJson}
+              </pre>
+            )}
+          </div>
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-muted-foreground">
+                {t('userAccount.developerDiagnostics.sharedSettingsAccessToken')}
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() =>
+                  void handleCopyDeveloperDiagnostics(
+                    t('userAccount.developerDiagnostics.sharedSettingsAccessToken'),
+                    settingsAccessTokenText,
+                  )
+                }
+              >
+                {t('userAccount.developerDiagnostics.copy')}
+              </Button>
+            </div>
+            <pre className="mt-1 max-h-48 overflow-auto rounded bg-muted p-2 text-xs text-foreground">
+              {settingsAccessTokenText}
+            </pre>
+          </div>
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-muted-foreground">
+                {t('userAccount.developerDiagnostics.rawUserSettings')}
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                onClick={() =>
+                  void handleCopyDeveloperDiagnostics(
+                    t('userAccount.developerDiagnostics.rawUserSettings'),
+                    rawUserSettingsJson,
+                  )
+                }
+              >
+                {t('userAccount.developerDiagnostics.copy')}
+              </Button>
+            </div>
+            <pre className="mt-1 max-h-48 overflow-auto rounded bg-muted p-2 text-xs text-foreground">
+              {rawUserSettingsJson}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </TooltipProvider>
+  ) : null;
+
+  return (
+    <section className="max-w-xl space-y-5">
+      <div className="flex items-center gap-3">
+        {user.profilePicture ? (
+          <img
+            src={user.profilePicture}
+            alt={
+              user.name
+                ? t('userAccount.profile.avatarAltWithName', { name: user.name })
+                : t('userAccount.profile.avatarAltDefault')
+            }
+            className="h-12 w-12 rounded-full border border-border object-cover"
+            referrerPolicy="no-referrer"
+          />
+        ) : (
+          <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border bg-muted text-xs text-muted-foreground">
+            {user.name?.charAt(0).toUpperCase() ||
+              user.email?.charAt(0).toUpperCase() ||
+              t('userAccount.profile.placeholderInitial')}
+          </div>
+        )}
+        <div className="min-w-0">
+          <p className="truncate text-base font-medium text-foreground">
+            {user.name || t('userAccount.profile.unknownUser')}
+          </p>
+          <p className="truncate text-sm text-muted-foreground">
+            {user.email || t('userAccount.profile.noEmail')}
+          </p>
+        </div>
+      </div>
+
+      <dl className="space-y-3 text-sm">
+        <div>
+          <dt className="text-muted-foreground">{t('userAccount.fields.name')}</dt>
+          <dd className="mt-0.5 text-foreground">{user.name || '-'}</dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">{t('userAccount.fields.email')}</dt>
+          <dd className="mt-0.5 text-foreground">{user.email || '-'}</dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">{t('userAccount.fields.loginMethod')}</dt>
+          <dd className="mt-0.5 text-foreground">{formatLoginMethod(user.authProvider, t)}</dd>
+        </div>
+        <div>
+          <dt className="text-muted-foreground">{t('userAccount.fields.groups')}</dt>
+          <dd className="mt-1.5">
+            {user.groups.length ? (
+              <div className="flex flex-wrap gap-1.5">
+                {user.groups.map((name) => (
+                  <Badge
+                    key={name}
+                    variant="secondary"
+                    className="font-normal"
+                  >
+                    {name}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-foreground">{t('userAccount.fields.noGroups')}</span>
+            )}
+          </dd>
+        </div>
+      </dl>
+
+      {developerDiagnostics}
+
+      <Button
+        type="button"
+        variant="secondary"
+        className="mt-4 w-full sm:w-auto"
+        onClick={() => void handleLogout()}
+        disabled={isLoggingOut}
+      >
+        {isLoggingOut ? t('userAccount.actions.loggingOut') : t('userAccount.actions.logout')}
+      </Button>
+    </section>
+  );
+};

package/src/features/settings/components/createUserSettingsRoute.tsx

@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import type { Settings } from '@shellui/sdk';
+import type { AuthUser } from '../../auth/hooks/useAuth';
+import { UserIcon } from './UserIcon';
+import { UserSettingsPanel } from './UserSettingsPanel';
+
+type SettingsRouteItem = {
+  name: string;
+  icon?: () => ReactElement;
+  path: string;
+  element: ReactElement;
+};
+
+export const createUserSettingsRoute = (
+  user: AuthUser | null,
+  logout: () => Promise<void>,
+  t: (key: string, options?: { defaultValue?: string }) => string,
+  options: {
+    developerModeEnabled: boolean;
+    accessToken: string | null;
+    settingsAccessToken: string | null;
+    rawUserSettings: Settings['user'];
+  },
+): SettingsRouteItem[] =>
+  user
+    ? [
+        {
+          name: t('routes.userAccount', { defaultValue: 'user account' }),
+          icon: UserIcon,
+          path: 'user',
+          element: (
+            <UserSettingsPanel
+              user={user}
+              onLogout={logout}
+              developerModeEnabled={options.developerModeEnabled}
+              accessToken={options.accessToken}
+              settingsAccessToken={options.settingsAccessToken}
+              rawUserSettings={options.rawUserSettings}
+            />
+          ),
+        },
+      ]
+    : [];