@nextclaw/ui 0.24.0-beta.0 → 0.24.0-beta.1

package/src/features/apps/components/app-package-card.tsx

@@ -1,9 +1,5 @@
-import { useRef, useState } from 'react';
-import type {
-  AppDataEntry,
-  AppPackageOperationView,
-  AppPackageView,
-} from '@nextclaw/client-sdk';
+import { useRef, useState } from "react";
+import type { AppDataEntry, AppPackageOperationView, AppPackageView } from "@nextclaw/client-sdk";
 import {
   AlertCircle,
   AppWindow,
@@ -22,29 +18,19 @@ import {
   ShieldAlert,
   ShieldCheck,
   type LucideIcon,
-} from 'lucide-react';
-import { AppArtwork } from '@/features/apps/components/app-artwork';
-import {
-  AppDataRemovalChoice,
-  AppStorageUsageDetails,
-  formatBytes,
-} from '@/features/app-data';
-import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
-import { readAppPackageAvailability } from '@/features/apps/utils/app-package-readiness.utils';
-import type { PanelAppEntryView } from '@/shared/lib/api';
-import { Button } from '@/shared/components/ui/button';
-import { Card } from '@/shared/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/shared/components/ui/dialog';
-import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
-import { getLanguage, t } from '@/shared/lib/i18n';
-import { cn } from '@/shared/lib/utils';
+} from "lucide-react";
+import { AppArtwork } from "@/features/apps/components/app-artwork";
+import { AppDocumentAccessSection } from "@/features/apps/components/app-document-access-section";
+import { AppDataRemovalChoice, AppStorageUsageDetails, formatBytes } from "@/features/app-data";
+import { isAppPackageOperationActive } from "@/features/apps/hooks/use-app-packages";
+import { readAppPackageAvailability } from "@/features/apps/utils/app-package-readiness.utils";
+import type { PanelAppEntryView } from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import { Card } from "@/shared/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/components/ui/popover";
+import { getLanguage, t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 export function AppPackageCard({
   appPackage,
@@ -72,7 +58,7 @@ export function AppPackageCard({
   onUninstall: (purgeData: boolean) => void;
   onUpdate: () => void;
   panelApps: PanelAppEntryView[];
-  storageUsage?: AppDataEntry['usage'];
+  storageUsage?: AppDataEntry["usage"];
   storageUsageLoading: boolean;
   storageUsageUnavailable: boolean;
   unavailableMessage?: string;
@@ -82,24 +68,15 @@ export function AppPackageCard({
   const [purgeData, setPurgeData] = useState(false);
   const skipMenuFocusRestoreRef = useRef(false);
   const uninstallCancelRef = useRef<HTMLButtonElement>(null);
-  const panelComponents = appPackage.components.filter((component) => component.kind === 'panel');
+  const panelComponents = appPackage.components.filter((component) => component.kind === "panel");
   const serviceCount = appPackage.components.length - panelComponents.length;
-  const rollbackVersions = appPackage.installedVersions.filter(
-    (version) => version !== appPackage.activeVersion,
-  );
+  const rollbackVersions = appPackage.installedVersions.filter((version) => version !== appPackage.activeVersion);
   const displayName = readLocalizedText(appPackage.name, appPackage.nameI18n) ?? appPackage.id;
-  const displayDescription = readLocalizedText(
-    appPackage.description,
-    appPackage.descriptionI18n,
-  );
+  const displayDescription = readLocalizedText(appPackage.description, appPackage.descriptionI18n);
   const operationActive = operation ? isAppPackageOperationActive(operation.status) : false;
   const pending = isPending || operationActive;
   const availability = readAppPackageAvailability(appPackage, unavailableMessage);
-  const storageUsageLabel = resolveStorageUsageLabel(
-    storageUsage,
-    storageUsageLoading,
-    storageUsageUnavailable,
-  );
+  const storageUsageLabel = resolveStorageUsageLabel(storageUsage, storageUsageLoading, storageUsageUnavailable);
 
   return (
     <Card surface="flat" hover={false} className="overflow-hidden border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.025)]">
@@ -108,75 +85,51 @@ export function AppPackageCard({
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
             <h2 className="truncate text-sm font-semibold text-foreground">{displayName}</h2>
-            <span className={cn(
-              'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
-              availability.className,
-            )}>
-              {availability.label}
-            </span>
+            <span className={cn("shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium", availability.className)}>{availability.label}</span>
           </div>
           {availability.message ? (
-            <p role="alert" className={cn('mt-2 text-xs leading-5', availability.messageClassName)}>
+            <p role="alert" className={cn("mt-2 text-xs leading-5", availability.messageClassName)}>
               {availability.message}
             </p>
           ) : null}
-          {!appPackage.enabled && appPackage.readiness.status !== 'ready' ? (
+          {!appPackage.enabled && appPackage.readiness.status !== "ready" ? (
             <ul className="mt-1.5 space-y-1 text-xs leading-5 text-muted-foreground">
               {appPackage.readiness.requirements.map((requirement) => (
                 <li key={`${requirement.componentId}:${requirement.kind}:${requirement.id}`}>
                   {requirement.title}
-                  {requirement.description ? ` — ${requirement.description}` : ''}
+                  {requirement.description ? ` — ${requirement.description}` : ""}
                 </li>
               ))}
             </ul>
           ) : null}
-          {displayDescription ? (
-            <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-              {displayDescription}
-            </p>
-          ) : null}
+          {displayDescription ? <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">{displayDescription}</p> : null}
           <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground/75">
             <span>v{appPackage.activeVersion}</span>
-            {appPackage.builtIn ? <span>{t('appPackagesBuiltIn')}</span> : null}
+            {appPackage.builtIn ? <span>{t("appPackagesBuiltIn")}</span> : null}
             {serviceCount > 0 ? (
               <span className="inline-flex items-center gap-1">
                 <Server className="h-3 w-3" />
-                {t('appPackagesLocalService')}
+                {t("appPackagesLocalService")}
               </span>
             ) : null}
-            <span className={cn(
-              'inline-flex items-center gap-1',
-              appPackage.isolation === 'full-user' && 'text-amber-700 dark:text-amber-300',
-            )}>
-              {appPackage.isolation === 'full-user'
-                ? <ShieldAlert className="h-3 w-3" />
-                : <ShieldCheck className="h-3 w-3" />}
-              {appPackage.isolation === 'full-user'
-                ? t('appPackagesIsolationFullUser')
-                : appPackage.isolation === 'host-mediated'
-                  ? t('appPackagesIsolationMediated')
-                  : t('appPackagesIsolationPanel')}
+            <span className={cn("inline-flex items-center gap-1", appPackage.isolation === "full-user" && "text-amber-700 dark:text-amber-300")}>
+              {appPackage.isolation === "full-user" ? <ShieldAlert className="h-3 w-3" /> : <ShieldCheck className="h-3 w-3" />}
+              {appPackage.isolation === "full-user" ? t("appPackagesIsolationFullUser") : appPackage.isolation === "host-mediated" ? t("appPackagesIsolationMediated") : t("appPackagesIsolationPanel")}
             </span>
           </div>
-          <div
-            className="mt-2 flex min-w-0 items-center gap-1.5 rounded-md bg-muted/35 px-2 py-1 text-[10px] text-muted-foreground"
-            title={appPackage.storage.dataDirectory}
-          >
+          <div className="mt-2 flex min-w-0 items-center gap-1.5 rounded-md bg-muted/35 px-2 py-1 text-[10px] text-muted-foreground" title={appPackage.storage.dataDirectory}>
             <HardDrive className="h-3 w-3 shrink-0" />
             <span className="shrink-0">
-              {t('appPackagesDataUsage')}{' '}
-              {storageUsageLabel}
+              {t("appPackagesDataUsage")} {storageUsageLabel}
             </span>
-            <code className="min-w-0 truncate font-mono text-[10px]">
-              {appPackage.storage.dataDirectory}
-            </code>
+            <code className="min-w-0 truncate font-mono text-[10px]">{appPackage.storage.dataDirectory}</code>
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-1">
           <Button
             type="button"
             size="sm"
-            variant={appPackage.enabled ? 'outline' : 'default'}
+            variant={appPackage.enabled ? "outline" : "default"}
             disabled={pending || !availability.interactive}
             title={availability.message}
             onClick={appPackage.enabled ? onDisable : onEnable}
@@ -189,65 +142,65 @@ export function AppPackageCard({
             })}
           </Button>
           <Popover open={menuOpen} onOpenChange={setMenuOpen}>
-              <PopoverTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={t('appPackagesMoreActions')}
-                  title={t('appPackagesMoreActions')}
-                  disabled={pending}
-                  className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
-                >
-                  <MoreHorizontal className="h-4 w-4" />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent
-                align="end"
-                className="w-52 rounded-xl p-1.5"
-                onCloseAutoFocus={(event) => {
-                  if (skipMenuFocusRestoreRef.current) {
-                    event.preventDefault();
-                    skipMenuFocusRestoreRef.current = false;
-                  }
-                }}
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                aria-label={t("appPackagesMoreActions")}
+                title={t("appPackagesMoreActions")}
+                disabled={pending}
+                className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
               >
+                <MoreHorizontal className="h-4 w-4" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              align="end"
+              className="w-52 rounded-xl p-1.5"
+              onCloseAutoFocus={(event) => {
+                if (skipMenuFocusRestoreRef.current) {
+                  event.preventDefault();
+                  skipMenuFocusRestoreRef.current = false;
+                }
+              }}
+            >
+              <AppPackageMenuItem
+                icon={RefreshCw}
+                label={t("appPackagesCheckUpdate")}
+                onClick={() => {
+                  setMenuOpen(false);
+                  onUpdate();
+                }}
+              />
+              {rollbackVersions.map((version) => (
                 <AppPackageMenuItem
-                  icon={RefreshCw}
-                  label={t('appPackagesCheckUpdate')}
-                  onClick={() => {
-                    setMenuOpen(false);
-                    onUpdate();
-                  }}
-                />
-                {rollbackVersions.map((version) => (
-                  <AppPackageMenuItem
-                    key={version}
-                    icon={RotateCcw}
-                    label={`${t('appPackagesRollback')} v${version}`}
-                    onClick={() => {
-                      setMenuOpen(false);
-                      onRollback(version);
-                    }}
-                  />
-                ))}
-                <AppPackageMenuItem
-                  destructive
-                  icon={Trash2}
-                  label={t('appPackagesUninstall')}
+                  key={version}
+                  icon={RotateCcw}
+                  label={`${t("appPackagesRollback")} v${version}`}
                   onClick={() => {
-                    skipMenuFocusRestoreRef.current = true;
                     setMenuOpen(false);
-                    setPurgeData(false);
-                    setUninstallOpen(true);
+                    onRollback(version);
                   }}
                 />
-              </PopoverContent>
-            </Popover>
+              ))}
+              <AppPackageMenuItem
+                destructive
+                icon={Trash2}
+                label={t("appPackagesUninstall")}
+                onClick={() => {
+                  skipMenuFocusRestoreRef.current = true;
+                  setMenuOpen(false);
+                  setPurgeData(false);
+                  setUninstallOpen(true);
+                }}
+              />
+            </PopoverContent>
+          </Popover>
         </div>
       </div>
 
-      {operation && (operationActive || operation.status === 'failed' || operation.status === 'interrupted') ? (
-        <PackageOperationStatus operation={operation} />
-      ) : null}
+      {operation && (operationActive || operation.status === "failed" || operation.status === "interrupted") ? <PackageOperationStatus operation={operation} /> : null}
+
+      <AppDocumentAccessSection appId={appPackage.id} appName={displayName} disabled={pending || !availability.interactive} scopes={appPackage.documentAccess ?? []} />
 
       {panelComponents.length > 0 ? (
         <div className="border-t border-border/60 bg-muted/20 p-2">
@@ -255,33 +208,28 @@ export function AppPackageCard({
             {panelComponents.map((component) => {
               const panelApp = panelApps.find((entry) => entry.appId === component.id);
               const Icon = resolveComponentIcon(component.id);
-              const componentTitle = readLocalizedText(component.title, component.titleI18n)
-                ?? component.id;
+              const componentTitle = readLocalizedText(component.title, component.titleI18n) ?? component.id;
               return (
                 <button
                   key={component.id}
                   type="button"
                   disabled={!appPackage.enabled || !panelApp || pending || !availability.interactive}
-                  onClick={() => panelApp && onOpenPanelApp({
-                    ...panelApp,
-                    title: componentTitle,
-                    description: readLocalizedText(
-                      component.description,
-                      component.descriptionI18n,
-                    ),
-                  })}
+                  onClick={() =>
+                    panelApp &&
+                    onOpenPanelApp({
+                      ...panelApp,
+                      title: componentTitle,
+                      description: readLocalizedText(component.description, component.descriptionI18n),
+                    })
+                  }
                   className="group flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-default disabled:opacity-55"
-                  title={availability.message ?? (!appPackage.enabled ? t('appPackagesEnableToOpen') : componentTitle)}
+                  title={availability.message ?? (!appPackage.enabled ? t("appPackagesEnableToOpen") : componentTitle)}
                 >
                   <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-sm ring-1 ring-border/60">
                     <ComponentIcon icon={component.icon} fallback={Icon} />
                   </span>
-                  <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
-                    {componentTitle}
-                  </span>
-                  {appPackage.enabled ? (
-                    <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" />
-                  ) : null}
+                  <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{componentTitle}</span>
+                  {appPackage.enabled ? <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" /> : null}
                 </button>
               );
             })}
@@ -298,41 +246,19 @@ export function AppPackageCard({
           }}
         >
           <DialogHeader>
-            <DialogTitle>{t('appPackagesUninstallTitle')}</DialogTitle>
-            <DialogDescription>{t('appPackagesUninstallDescription')}</DialogDescription>
+            <DialogTitle>{t("appPackagesUninstallTitle")}</DialogTitle>
+            <DialogDescription>{t("appPackagesUninstallDescription")}</DialogDescription>
           </DialogHeader>
           <div className="mt-4 grid gap-2">
-            <AppDataRemovalChoice
-              checked={!purgeData}
-              description={t('appPackagesKeepDataDescription')}
-              label={t('appPackagesKeepData')}
-              onClick={() => setPurgeData(false)}
-            />
-            <AppDataRemovalChoice
-              checked={purgeData}
-              destructive
-              description={t('appPackagesDeleteDataDescription')}
-              label={t('appPackagesDeleteData')}
-              onClick={() => setPurgeData(true)}
-            />
+            <AppDataRemovalChoice checked={!purgeData} description={t("appPackagesKeepDataDescription")} label={t("appPackagesKeepData")} onClick={() => setPurgeData(false)} />
+            <AppDataRemovalChoice checked={purgeData} destructive description={t("appPackagesDeleteDataDescription")} label={t("appPackagesDeleteData")} onClick={() => setPurgeData(true)} />
           </div>
           <div className="mt-3">
-            <AppPackageStorageUsage
-              loading={storageUsageLoading}
-              storage={appPackage.storage}
-              usage={storageUsage}
-              unavailable={storageUsageUnavailable}
-            />
+            <AppPackageStorageUsage loading={storageUsageLoading} storage={appPackage.storage} usage={storageUsage} unavailable={storageUsageUnavailable} />
           </div>
           <DialogFooter className="mt-5 gap-2 sm:gap-0">
-            <Button
-              ref={uninstallCancelRef}
-              autoFocus
-              type="button"
-              variant="outline"
-              onClick={() => setUninstallOpen(false)}
-            >
-              {t('cancel')}
+            <Button ref={uninstallCancelRef} autoFocus type="button" variant="outline" onClick={() => setUninstallOpen(false)}>
+              {t("cancel")}
             </Button>
             <Button
               type="button"
@@ -342,7 +268,7 @@ export function AppPackageCard({
                 setUninstallOpen(false);
               }}
             >
-              {t('appPackagesUninstall')}
+              {t("appPackagesUninstall")}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -351,85 +277,45 @@ export function AppPackageCard({
   );
 }
 
-function AppPackageStorageUsage({
-  loading,
-  storage,
-  unavailable,
-  usage,
-}: {
-  loading: boolean;
-  storage: AppPackageView['storage'];
-  unavailable: boolean;
-  usage?: AppDataEntry['usage'];
-}) {
+function AppPackageStorageUsage({ loading, storage, unavailable, usage }: { loading: boolean; storage: AppPackageView["storage"]; unavailable: boolean; usage?: AppDataEntry["usage"] }) {
   if (usage) {
     return <AppStorageUsageDetails storage={storage} usage={usage} />;
   }
   return (
     <div className="rounded-xl bg-muted/45 px-3 py-3 text-xs text-muted-foreground">
-      {loading ? (
-        <LoaderCircle className="mr-1.5 inline h-3.5 w-3.5 animate-spin" />
-      ) : null}
-      {t(loading
-        ? 'appPackagesLoading'
-        : unavailable ? 'appPackagesDataUsageUnavailable' : 'appPackagesNoDataYet')}
+      {loading ? <LoaderCircle className="mr-1.5 inline h-3.5 w-3.5 animate-spin" /> : null}
+      {t(loading ? "appPackagesLoading" : unavailable ? "appPackagesDataUsageUnavailable" : "appPackagesNoDataYet")}
     </div>
   );
 }
 
-function resolveStorageUsageLabel(
-  usage: AppDataEntry['usage'] | undefined,
-  loading: boolean,
-  unavailable: boolean,
-): string {
+function resolveStorageUsageLabel(usage: AppDataEntry["usage"] | undefined, loading: boolean, unavailable: boolean): string {
   if (usage) return formatBytes(usage.totalBytes);
-  if (loading) return t('appPackagesLoading');
-  return t(unavailable ? 'appPackagesDataUsageUnavailable' : 'appPackagesNoDataYet');
+  if (loading) return t("appPackagesLoading");
+  return t(unavailable ? "appPackagesDataUsageUnavailable" : "appPackagesNoDataYet");
 }
 
-function renderPrimaryActionLabel({
-  enabled,
-  isPending,
-  operation,
-  operationActive,
-}: {
-  enabled: boolean;
-  isPending: boolean;
-  operation?: AppPackageOperationView;
-  operationActive: boolean;
-}) {
+function renderPrimaryActionLabel({ enabled, isPending, operation, operationActive }: { enabled: boolean; isPending: boolean; operation?: AppPackageOperationView; operationActive: boolean }) {
   if (operationActive) {
     return (
       <>
         <LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-        {operation ? operationLabel(operation) : t('appPackagesWorking')}
+        {operation ? operationLabel(operation) : t("appPackagesWorking")}
       </>
     );
   }
-  if (isPending) return t('appPackagesWorking');
-  return enabled ? t('appPackagesDisable') : t('appPackagesEnable');
+  if (isPending) return t("appPackagesWorking");
+  return enabled ? t("appPackagesDisable") : t("appPackagesEnable");
 }
 
-function AppPackageMenuItem({
-  destructive = false,
-  icon: Icon,
-  label,
-  onClick,
-}: {
-  destructive?: boolean;
-  icon: LucideIcon;
-  label: string;
-  onClick: () => void;
-}) {
+function AppPackageMenuItem({ destructive = false, icon: Icon, label, onClick }: { destructive?: boolean; icon: LucideIcon; label: string; onClick: () => void }) {
   return (
     <button
       type="button"
       onClick={onClick}
       className={cn(
-        'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors',
-        destructive
-          ? 'text-destructive hover:bg-destructive/10'
-          : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
+        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
+        destructive ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
       )}
     >
       <Icon className="h-4 w-4 shrink-0" />
@@ -438,19 +324,8 @@ function AppPackageMenuItem({
   );
 }
 
-function ComponentIcon({
-  fallback: Fallback,
-  icon,
-}: {
-  fallback: LucideIcon;
-  icon?: string;
-}) {
-  if (icon && (
-    icon.startsWith('data:') ||
-    icon.startsWith('/') ||
-    icon.startsWith('http://') ||
-    icon.startsWith('https://')
-  )) {
+function ComponentIcon({ fallback: Fallback, icon }: { fallback: LucideIcon; icon?: string }) {
+  if (icon && (icon.startsWith("data:") || icon.startsWith("/") || icon.startsWith("http://") || icon.startsWith("https://"))) {
     return <img src={icon} alt="" className="h-4 w-4 rounded object-cover" />;
   }
   if (icon) {
@@ -460,21 +335,16 @@ function ComponentIcon({
 }
 
 function PackageOperationStatus({ operation }: { operation: AppPackageOperationView }) {
-  const failed = operation.status === 'failed' || operation.status === 'interrupted';
+  const failed = operation.status === "failed" || operation.status === "interrupted";
   const progress = Math.max(4, Math.round((operation.completedSteps / operation.totalSteps) * 100));
   return (
-    <div className="border-t border-border/50 px-4 py-2.5" role={failed ? 'alert' : 'status'} aria-live="polite">
+    <div className="border-t border-border/50 px-4 py-2.5" role={failed ? "alert" : "status"} aria-live="polite">
       <div className="flex items-center gap-2 text-[11px]">
         {failed ? <AlertCircle className="h-3.5 w-3.5 text-destructive" /> : <LoaderCircle className="h-3.5 w-3.5 animate-spin text-primary" />}
-        <span className={failed ? 'text-destructive' : 'text-muted-foreground'}>
-          {failed ? operation.error ?? t('appPackagesActionFailed') : operationLabel(operation)}
-        </span>
+        <span className={failed ? "text-destructive" : "text-muted-foreground"}>{failed ? (operation.error ?? t("appPackagesActionFailed")) : operationLabel(operation)}</span>
       </div>
       <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted">
-        <div
-          className={cn('h-full rounded-full transition-[width] duration-300', failed ? 'bg-destructive' : 'bg-primary')}
-          style={{ width: failed ? '100%' : `${progress}%` }}
-        />
+        <div className={cn("h-full rounded-full transition-[width] duration-300", failed ? "bg-destructive" : "bg-primary")} style={{ width: failed ? "100%" : `${progress}%` }} />
       </div>
     </div>
   );
@@ -482,34 +352,39 @@ function PackageOperationStatus({ operation }: { operation: AppPackageOperationV
 
 function operationLabel(operation: AppPackageOperationView): string {
   switch (operation.status) {
-    case 'queued': return t('appPackagesPreparing');
-    case 'resolving': return t('appPackagesResolving');
-    case 'downloading': return t('appPackagesDownloading');
-    case 'verifying': return t('appPackagesVerifying');
-    case 'installing': return operation.action === 'rollback'
-      ? `${t('appPackagesSwitchingVersion')} ${operation.targetVersion ? `v${operation.targetVersion}` : ''}`.trim()
-      : operation.action === 'uninstall'
-        ? t('appPackagesUninstalling')
-        : t('appPackagesInstalling');
-    case 'finalizing': return t('appPackagesFinalizing');
-    case 'succeeded': return t('appPackagesCompleted');
-    case 'failed':
-    case 'interrupted': return t('appPackagesActionFailed');
+    case "queued":
+      return t("appPackagesPreparing");
+    case "resolving":
+      return t("appPackagesResolving");
+    case "downloading":
+      return t("appPackagesDownloading");
+    case "verifying":
+      return t("appPackagesVerifying");
+    case "installing":
+      return operation.action === "rollback"
+        ? `${t("appPackagesSwitchingVersion")} ${operation.targetVersion ? `v${operation.targetVersion}` : ""}`.trim()
+        : operation.action === "uninstall"
+          ? t("appPackagesUninstalling")
+          : t("appPackagesInstalling");
+    case "finalizing":
+      return t("appPackagesFinalizing");
+    case "succeeded":
+      return t("appPackagesCompleted");
+    case "failed":
+    case "interrupted":
+      return t("appPackagesActionFailed");
   }
 }
 
 function resolveComponentIcon(componentId: string): LucideIcon {
-  if (componentId.endsWith('-todos')) return CheckSquare2;
-  if (componentId.endsWith('-notes')) return NotebookText;
-  if (componentId.endsWith('-favorites')) return Bookmark;
-  if (componentId.endsWith('-calendar')) return CalendarDays;
+  if (componentId.endsWith("-todos")) return CheckSquare2;
+  if (componentId.endsWith("-notes")) return NotebookText;
+  if (componentId.endsWith("-favorites")) return Bookmark;
+  if (componentId.endsWith("-calendar")) return CalendarDays;
   return AppWindow;
 }
 
-function readLocalizedText(
-  fallback: string | undefined,
-  localized: Record<string, string> | undefined,
-): string | undefined {
-  const languageTag = getLanguage() === 'zh' ? 'zh-CN' : 'en-US';
+function readLocalizedText(fallback: string | undefined, localized: Record<string, string> | undefined): string | undefined {
+  const languageTag = getLanguage() === "zh" ? "zh-CN" : "en-US";
   return localized?.[languageTag] ?? fallback;
 }