fix(home): link into apps by package-id route segment (ADR-0048)

.changeset/adr-0048-home-app-link-packageid.md

@@ -0,0 +1,11 @@
+---
+"@object-ui/app-shell": patch
+---
+
+ADR-0048: the console **home** page now links into apps by their canonical
+package-id route segment, matching the nav. The app grid (`HomePage`) and the
+"add to favorites" href (`AppCard`) were still building `/apps/<app.name>` while
+the sidebar/switcher/command-palette emit `/apps/<packageId>` (via
+`appRouteSegment`). So opening an app from the home page produced a name-form URL
+(e.g. `/apps/studio`) instead of `/apps/com.objectstack.studio`. Both now use
+`appRouteSegment(app)`.

packages/app-shell/src/console/home/AppCard.tsx

@@ -9,7 +9,7 @@
 import { Star, StarOff, ArrowUpRight } from 'lucide-react';
 import { Card, CardContent, Button, Badge } from '@object-ui/components';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
-import { resolveI18nLabel } from '../../utils';
+import { resolveI18nLabel, appRouteSegment } from '../../utils';
 import { useFavorites } from '../../hooks/useFavorites';
 import { getIcon } from '../../utils/getIcon';
 import { cn } from '@object-ui/components';
@@ -53,7 +53,9 @@ export function AppCard({ app, onClick, isFavorite, index = 0 }: AppCardProps) {
     toggleFavorite({
       id: `app:${app.name}`,
       label,
-      href: `/apps/${app.name}`,
+      // ADR-0048 — link to the canonical package-id route segment, not the
+      // app name, so the favorite opens `/apps/<packageId>` like the nav does.
+      href: `/apps/${appRouteSegment(app) ?? app.name}`,
       type: 'object',
     });
   };

packages/app-shell/src/console/home/HomePage.tsx

@@ -26,6 +26,7 @@ import { useAuth, useIsWorkspaceAdmin } from '@object-ui/auth';
 import { AppCard } from './AppCard';
 import { RecentApps } from './RecentApps';
 import { StarredApps } from './StarredApps';
+import { appRouteSegment } from '../../utils';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { Sparkles, Star, Clock, ArrowDown, Store, LayoutGrid, ShieldAlert, X, UploadCloud } from 'lucide-react';
 import { useMetadataClient } from '../../views/metadata-admin/useMetadata';
@@ -406,7 +407,7 @@ export function HomePage() {
                   key={app.name}
                   app={app}
                   index={idx}
-                  onClick={() => navigate(`/apps/${app.name}`)}
+                  onClick={() => navigate(`/apps/${appRouteSegment(app) ?? app.name}`)}
                   isFavorite={favorites.some(f => f.id === `app:${app.name}`)}
                 />
               ))}