Add version statuses to portfolio cards and keyboard shortcuts for navigation

nickustinov · nickustinov · commit 4c0591913b40 · 2026-03-09T13:51:42.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,8 @@
 - Fix resubmission after App Review rejection – handle UNRESOLVED_ISSUES submissions to avoid ITEM_PART_OF_ANOTHER_SUBMISSION errors
 - Rename "Resubmit for review" button to "Update review" to match App Store Connect terminology
 - Revamp review insights prompt with three categories (strengths, weaknesses, potential) and stricter rules
+- Show version statuses in portfolio app cards – non-live versions display platform, version, and state like App Store Connect
+- Add keyboard shortcuts: ⌘P portfolio, ⌘1–9 switch apps, ⌘O overview, ⌘L store listing, ⌘R reviews, ⌘A analytics, ⌘B builds
 
 ## 1.4.1
 
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -37,6 +37,12 @@ import { formatDateShort } from "@/lib/format";
 import { parseRange, filterByDateRange } from "@/lib/analytics-range";
 import { usePersistedRange } from "@/lib/hooks/use-persisted-range";
 import type { AnalyticsData } from "@/lib/asc/analytics";
+import {
+  PLATFORM_LABELS,
+  STATE_DOT_COLORS,
+  stateLabel,
+  type AscVersion,
+} from "@/lib/asc/version-types";
 import { ReportInitiatedBanner } from "@/components/report-initiated-banner";
 
 const CHART_COLORS = [
@@ -61,6 +67,7 @@ export default function DashboardPage() {
   const { apps, loading, truncated, needsAppSelection, refresh: refreshApps } = useApps();
   const devSimulate = searchParams.get("analyticsState") === "initiated";
   const [analytics, setAnalytics] = useState<Record<string, AppAnalytics>>({});
+  const [appVersions, setAppVersions] = useState<Record<string, AscVersion[]>>({});
   const [range, setRange] = usePersistedRange("range:portfolio-proceeds");
 
   // entry=1 means proxy redirected here on app launch – restore last URL
@@ -147,6 +154,16 @@ export default function DashboardPage() {
     }
   }, []);
 
+  const fetchVersions = useCallback(async (appId: string) => {
+    try {
+      const res = await fetch(`/api/apps/${appId}/versions`);
+      const json = await res.json();
+      setAppVersions((prev) => ({ ...prev, [appId]: json.versions ?? [] }));
+    } catch {
+      // Non-critical
+    }
+  }, []);
+
   useEffect(() => {
     if (loading || apps.length === 0 || needsAppSelection) return;
 
@@ -158,8 +175,9 @@ export default function DashboardPage() {
 
     for (const app of apps) {
       fetchAnalytics(app.id);
+      fetchVersions(app.id);
     }
-  }, [apps, loading, needsAppSelection, fetchAnalytics]);
+  }, [apps, loading, needsAppSelection, fetchAnalytics, fetchVersions]);
 
   // Poll while any app is pending
   const hasPending = Object.values(analytics).some((a) => a.pending);
@@ -187,11 +205,13 @@ export default function DashboardPage() {
           fetch(`/api/apps/${app.id}/analytics/refresh`, { method: "POST" }),
         ),
       );
-      await Promise.all(currentApps.map((app) => fetchAnalytics(app.id)));
+      await Promise.all(
+        currentApps.flatMap((app) => [fetchAnalytics(app.id), fetchVersions(app.id)]),
+      );
     } finally {
       setRefreshing(false);
     }
-  }, [fetchAnalytics]);
+  }, [fetchAnalytics, fetchVersions]);
 
   useRegisterRefresh({
     onRefresh: handleRefresh,
@@ -496,6 +516,7 @@ export default function DashboardPage() {
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {apps.map((app) => {
           const entry = analytics[app.id];
+          const versions = pickPendingVersions(appVersions[app.id] ?? []);
           return (
             <Link key={app.id} href={`/dashboard/apps/${app.id}`}>
               <Card className="h-full transition-colors hover:bg-muted/50">
@@ -517,6 +538,20 @@ export default function DashboardPage() {
                   ) : (
                     <p className="text-xs text-muted-foreground">No data</p>
                   )}
+                  {versions.length > 0 && (
+                    <div className="mt-3 space-y-0.5 border-t pt-3">
+                      {versions.map((v) => (
+                        <div key={v.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <span className={`size-1.5 shrink-0 rounded-full ${STATE_DOT_COLORS[v.attributes.appVersionState] ?? "bg-muted-foreground"}`} />
+                          <span className="truncate">
+                            {PLATFORM_LABELS[v.attributes.platform] ?? v.attributes.platform}{" "}
+                            {v.attributes.versionString}{" "}
+                            {stateLabel(v.attributes.appVersionState)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </CardContent>
               </Card>
             </Link>
@@ -537,6 +572,22 @@ export default function DashboardPage() {
   );
 }
 
+const LIVE_STATES = new Set(["READY_FOR_SALE", "READY_FOR_DISTRIBUTION"]);
+
+/** Pick non-live versions to show in portfolio cards (newest per platform). */
+function pickPendingVersions(versions: AscVersion[]): AscVersion[] {
+  const seen = new Set<string>();
+  const result: AscVersion[] = [];
+  for (const v of versions) {
+    if (LIVE_STATES.has(v.attributes.appVersionState)) continue;
+    const p = v.attributes.platform;
+    if (seen.has(p)) continue;
+    seen.add(p);
+    result.push(v);
+  }
+  return result;
+}
+
 function AppCardStats({ data }: { data: AnalyticsData }) {
   const downloads = data.dailyDownloads.reduce(
     (sum, d) => sum + d.firstTime + d.redownload,
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Package, SquaresFour } from "@phosphor-icons/react";
-import { getLastAppId } from "@/lib/nav-state";
+import { getLastAppId, getAppState } from "@/lib/nav-state";
 import {
   Sidebar,
   SidebarContent,
@@ -62,7 +62,7 @@ function PortfolioButton() {
   return (
     <SidebarMenu>
       <SidebarMenuItem>
-        <SidebarMenuButton asChild tooltip="Portfolio" isActive={isActive}>
+        <SidebarMenuButton asChild tooltip="Portfolio ⌘P" isActive={isActive}>
           <Link
             href="/dashboard"
             onNavigate={(e) => {
@@ -73,6 +73,7 @@ function PortfolioButton() {
           >
             <SquaresFour size={16} />
             <span>Portfolio</span>
+            <kbd className="ml-auto text-[13px] text-muted-foreground/50">⌘P</kbd>
           </Link>
         </SidebarMenuButton>
       </SidebarMenuItem>
@@ -82,7 +83,10 @@ function PortfolioButton() {
 
 export function AppSidebar() {
   const { appId } = useParams<{ appId?: string }>();
+  const router = useRouter();
+  const pathname = usePathname();
   const { apps } = useApps();
+  const { guardNavigation } = useFormDirty();
   const [lastAppId, setLastAppId] = useState<string>();
   useEffect(() => {
     if (!appId) setLastAppId(getLastAppId());
@@ -93,6 +97,49 @@ export function AppSidebar() {
   const appIds = useMemo(() => apps.map((a) => a.id), [apps]);
   useUnreadReviewsPoller(appIds);
 
+  // Cmd+P → Portfolio, Cmd+1..9 → switch apps, Cmd+O/L/R/A/B → nav pages
+  const PAGE_SHORTCUTS: Record<string, string> = {
+    o: "",                // Overview
+    l: "/store-listing",  // Store listing
+    r: "/reviews",        // Reviews
+    a: "/analytics",      // Analytics
+    b: "/testflight",     // Builds
+  };
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!e.metaKey && !e.ctrlKey) return;
+      if (e.key === "p") {
+        e.preventDefault();
+        guardNavigation(() => router.push("/dashboard"));
+        return;
+      }
+      const n = parseInt(e.key, 10);
+      if (n >= 1 && n <= 9 && n <= apps.length) {
+        e.preventDefault();
+        const target = apps[n - 1];
+        const saved = getAppState(target.id);
+        const url = saved
+          ? `/dashboard/apps/${target.id}${saved}`
+          : `/dashboard/apps/${target.id}`;
+        guardNavigation(() => router.push(url));
+        return;
+      }
+      const activeId = appId ?? lastAppId;
+      const subpath = PAGE_SHORTCUTS[e.key];
+      if (activeId && subpath !== undefined) {
+        e.preventDefault();
+        guardNavigation(() => router.push(`/dashboard/apps/${activeId}${subpath}`));
+      }
+    },
+    [apps, appId, lastAppId, router, guardNavigation],
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader className="drag pt-8">
diff --git a/src/components/layout/app-switcher.tsx b/src/components/layout/app-switcher.tsx
@@ -125,27 +125,33 @@ export function AppSwitcher() {
                   No matching apps
                 </div>
               )}
-              {filteredApps.map((app) => (
-                <DropdownMenuItem
-                  key={app.id}
-                  onClick={() => guardNavigation(() => router.push(buildAppUrl(app.id)))}
-                  className="gap-2 p-2"
-                >
-                  <AppIcon
-                    iconUrl={app.iconUrl}
-                    name={app.name}
-                    className="size-6"
-                    iconSize={12}
-                    rounded="rounded-md"
-                  />
-                  <div className="grid flex-1 leading-tight">
-                    <span className="truncate font-medium">{app.name}</span>
-                    <span className="truncate text-xs font-mono text-muted-foreground">
-                      {app.id}
-                    </span>
-                  </div>
-                </DropdownMenuItem>
-              ))}
+              {filteredApps.map((app) => {
+                const idx = apps.indexOf(app);
+                return (
+                  <DropdownMenuItem
+                    key={app.id}
+                    onClick={() => guardNavigation(() => router.push(buildAppUrl(app.id)))}
+                    className="gap-2 p-2"
+                  >
+                    <AppIcon
+                      iconUrl={app.iconUrl}
+                      name={app.name}
+                      className="size-6"
+                      iconSize={12}
+                      rounded="rounded-md"
+                    />
+                    <div className="grid flex-1 leading-tight">
+                      <span className="truncate font-medium">{app.name}</span>
+                      <span className="truncate text-xs font-mono text-muted-foreground">
+                        {app.id}
+                      </span>
+                    </div>
+                    {idx >= 0 && idx < 9 && !search && (
+                      <kbd className="shrink-0 text-[13px] text-muted-foreground/50">⌘{idx + 1}</kbd>
+                    )}
+                  </DropdownMenuItem>
+                );
+              })}
             </div>
             {truncated && (
               <DropdownMenuItem
diff --git a/src/components/layout/nav-main.tsx b/src/components/layout/nav-main.tsx
@@ -31,6 +31,7 @@ interface NavItem {
   title: string;
   href: string;
   icon: Icon;
+  shortcut?: string;
 }
 
 interface NavGroup {
@@ -45,8 +46,8 @@ function getNavGroups(appId: string): NavGroup[] {
     {
       label: "Release",
       items: [
-        { title: "Overview", href: base, icon: Gauge },
-        { title: "Store listing", href: `${base}/store-listing`, icon: Storefront },
+        { title: "Overview", href: base, icon: Gauge, shortcut: "⌘O" },
+        { title: "Store listing", href: `${base}/store-listing`, icon: Storefront, shortcut: "⌘L" },
         { title: "Screenshots", href: `${base}/screenshots`, icon: Images },
         { title: "App details", href: `${base}/details`, icon: Info },
         { title: "App review", href: `${base}/review`, icon: Stamp },
@@ -55,15 +56,15 @@ function getNavGroups(appId: string): NavGroup[] {
     {
       label: "Insights",
       items: [
-        { title: "Reviews", href: `${base}/reviews`, icon: ChatsCircle },
-        { title: "Analytics", href: `${base}/analytics`, icon: ChartLineUp },
+        { title: "Reviews", href: `${base}/reviews`, icon: ChatsCircle, shortcut: "⌘R" },
+        { title: "Analytics", href: `${base}/analytics`, icon: ChartLineUp, shortcut: "⌘A" },
         { title: "Keywords", href: `${base}/aso/keywords`, icon: MagnifyingGlass },
       ],
     },
     {
       label: "TestFlight",
       items: [
-        { title: "Builds", href: `${base}/testflight`, icon: Truck },
+        { title: "Builds", href: `${base}/testflight`, icon: Truck, shortcut: "⌘B" },
         { title: "Groups", href: `${base}/testflight/groups`, icon: UsersThree },
         { title: "Beta app info", href: `${base}/testflight/info`, icon: Info },
         { title: "Feedback", href: `${base}/testflight/feedback`, icon: ChatDots },
@@ -121,7 +122,7 @@ export function NavMain({ appId }: { appId: string }) {
               <SidebarMenuItem key={item.href}>
                 <SidebarMenuButton
                   asChild
-                  tooltip={item.title}
+                  tooltip={item.shortcut ? `${item.title} ${item.shortcut}` : item.title}
                   isActive={isActive(item.href)}
                 >
                   <Link
@@ -134,6 +135,9 @@ export function NavMain({ appId }: { appId: string }) {
                   >
                     <item.icon size={16} />
                     <span>{item.title}</span>
+                    {item.shortcut && (
+                      <kbd className="ml-auto text-[13px] text-muted-foreground/50">{item.shortcut}</kbd>
+                    )}
                   </Link>
                 </SidebarMenuButton>
                 {item.href === `${base}/reviews` && <ReviewsBadge appId={appId} />}
