@hot-updater/console 1.0.0-rc.9 → 1.0.0

package/src/routes/index.tsx

@@ -13,14 +13,14 @@ import {
   Tags,
   X,
 } from "lucide-react";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, type MouseEvent, useEffect, useState } from "react";
 
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { ChannelBadge } from "@/components/ChannelBadge";
 import { EnabledStatusIcon } from "@/components/EnabledStatusIcon";
 import { BundleChildrenPanel } from "@/components/features/bundles/BundleChildrenPanel";
-import { BundleMovementSummary } from "@/components/features/bundles/BundleInsightsSummary";
 import { ChannelManagementDialog } from "@/components/features/channels/ChannelManagementDialog";
+import { useReleaseColumns } from "@/components/features/FeatureSlots";
 import { ReleaseEditorSheet } from "@/components/features/releases/ReleaseEditorSheet";
 import { ReleaseStateBadge } from "@/components/features/releases/ReleaseStateBadge";
 import { HashValueDisplay } from "@/components/HashValueDisplay";
@@ -29,7 +29,6 @@ import { RolloutPercentageBadge } from "@/components/RolloutPercentageBadge";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -56,11 +55,12 @@ import {
   useChannelsQuery,
   useReleasesQuery,
 } from "@/lib/api";
-import { useBundleActivityQuery } from "@/lib/bundle-activity";
 import type { ReleaseListRow } from "@/lib/server/releaseReachability";
 import { cn } from "@/lib/utils";
 
 import {
+  hasReleaseFilters,
+  releaseFilterOf,
   type ReleaseSearch,
   updateReleaseFilters,
   validateReleaseSearch,
@@ -68,10 +68,14 @@ import {
 
 const PAGE_SIZE = 20;
 const platformFilterItems = [
-  { label: "All Platforms", value: "all" },
   { label: "iOS", value: "ios" },
   { label: "Android", value: "android" },
 ];
+const statusFilterItems = [
+  { label: "Any Status", value: "all" },
+  { label: "Enabled", value: "enabled" },
+  { label: "Disabled", value: "disabled" },
+];
 const dateFormatter = new Intl.DateTimeFormat(undefined, {
   dateStyle: "medium",
   timeStyle: "short",
@@ -80,6 +84,21 @@ const tableDateFormatter = new Intl.DateTimeFormat(undefined, {
   dateStyle: "medium",
 });
 
+/**
+ * Opens a bundle from a click anywhere on its row or card, except on a
+ * control inside it, which keeps its own action.
+ */
+const openOutsideControls =
+  (open: () => void) => (event: MouseEvent<HTMLElement>) => {
+    if (
+      event.target instanceof Element &&
+      event.target.closest("button, a, input, select, textarea")
+    ) {
+      return;
+    }
+    open();
+  };
+
 export const Route = createFileRoute("/")({
   component: BundlesPage,
   validateSearch: validateReleaseSearch,
@@ -98,16 +117,9 @@ function BundleFilterToolbar({
   onManageChannels: () => void;
   search: ReleaseSearch;
 }) {
-  const [targetAppVersion, setTargetAppVersion] = useState(
-    search.targetAppVersion ?? "",
-  );
-  const hasFilters = Boolean(
-    search.bundleId ||
-    search.channelId ||
-    search.enabled !== undefined ||
-    search.platform ||
-    search.targetAppVersion,
-  );
+  const hasFilters = hasReleaseFilters(search);
+  // Releases list by channel and platform together: the index serves that pair.
+  const channelSelected = search.channelId !== undefined;
   const channelFilterItems = [
     { label: "All Channels", value: "all" },
     ...channels.map((channel) => ({
@@ -115,14 +127,6 @@ function BundleFilterToolbar({
       value: channel.id,
     })),
   ];
-  const applyTargetAppVersion = () => {
-    const value = targetAppVersion.trim();
-    onChange({ targetAppVersion: value || undefined });
-  };
-
-  useEffect(() => {
-    setTargetAppVersion(search.targetAppVersion ?? "");
-  }, [search.targetAppVersion]);
 
   return (
     <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-2 border-b bg-background px-3 py-3 sm:h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:py-0 sm:backdrop-blur-sm">
@@ -133,65 +137,85 @@ function BundleFilterToolbar({
         <span className="text-xs font-medium">Filters</span>
       </div>
       <Select
-        items={platformFilterItems}
+        items={channelFilterItems}
         onValueChange={(value) =>
           onChange({
-            platform:
-              value === "all" ? undefined : (value as "ios" | "android"),
+            channelId: value === null || value === "all" ? undefined : value,
           })
         }
-        value={search.platform ?? "all"}
+        value={search.channelId ?? "all"}
+      >
+        <SelectTrigger
+          aria-label="Channel"
+          className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
+        >
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="all">All Channels</SelectItem>
+            {channels.map((channel) => (
+              <SelectItem key={channel.id} value={channel.id}>
+                {channel.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Select
+        disabled={!channelSelected}
+        items={platformFilterItems}
+        onValueChange={(value) =>
+          onChange({ platform: value === "android" ? "android" : "ios" })
+        }
+        value={search.platform ?? "ios"}
       >
         <SelectTrigger
           aria-label="Platform"
           className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
+          title={channelSelected ? undefined : "Choose a channel first"}
         >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value="all">All Platforms</SelectItem>
             <SelectItem value="ios">iOS</SelectItem>
             <SelectItem value="android">Android</SelectItem>
           </SelectGroup>
         </SelectContent>
       </Select>
-      <Input
-        aria-label="Target app version"
-        className="h-8 w-full min-w-[132px] text-xs sm:w-[160px]"
-        onBlur={applyTargetAppVersion}
-        onChange={(event) => setTargetAppVersion(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter") {
-            applyTargetAppVersion();
-          }
-        }}
-        placeholder="Target version"
-        value={targetAppVersion}
-      />
       <Select
-        items={channelFilterItems}
+        disabled={!channelSelected && search.scopeKey === undefined}
+        items={statusFilterItems}
         onValueChange={(value) =>
           onChange({
-            channelId: value === null || value === "all" ? undefined : value,
+            enabled:
+              value === "enabled"
+                ? true
+                : value === "disabled"
+                  ? false
+                  : undefined,
           })
         }
-        value={search.channelId ?? "all"}
+        value={
+          search.enabled === undefined
+            ? "all"
+            : search.enabled
+              ? "enabled"
+              : "disabled"
+        }
       >
         <SelectTrigger
-          aria-label="Channel"
+          aria-label="Status"
           className="h-8 w-[calc(50%-0.25rem)] min-w-[132px] text-xs sm:w-[140px]"
         >
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
-            <SelectItem value="all">All Channels</SelectItem>
-            {channels.map((channel) => (
-              <SelectItem key={channel.id} value={channel.id}>
-                {channel.name}
-              </SelectItem>
-            ))}
+            <SelectItem value="all">Any Status</SelectItem>
+            <SelectItem value="enabled">Enabled</SelectItem>
+            <SelectItem value="disabled">Disabled</SelectItem>
           </SelectGroup>
         </SelectContent>
       </Select>
@@ -217,6 +241,19 @@ function BundleFilterToolbar({
           </button>
         </Badge>
       ) : null}
+      {search.scopeKey ? (
+        <Badge className="max-w-48 gap-1" variant="secondary">
+          Target filter
+          <button
+            aria-label="Clear target filter"
+            className="rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => onChange({ scopeKey: undefined })}
+            type="button"
+          >
+            <X className="size-3" />
+          </button>
+        </Badge>
+      ) : null}
       {hasFilters ? (
         <Button
           className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground sm:ml-auto"
@@ -283,7 +320,7 @@ function BundleEntry({
         <BundleIdDisplay bundleId={release.id} fullOnMobile />
         {!release.bundle_id ? (
           <span className="inline-flex items-center gap-1.5 text-sm">
-            <RotateCcw className="size-3.5" /> Built-in app
+            <RotateCcw className="size-3.5" /> Built-in bundle
           </span>
         ) : null}
       </button>
@@ -294,9 +331,9 @@ function BundleEntry({
       ) : null}
       {release.currentlyUnreachable ? (
         <span
-          aria-label="Currently unreachable. No catalog segment or cohort selects this bundle first."
+          aria-label="Unreachable: no device gets this bundle with the current delivery settings."
           className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground"
-          title="No catalog segment or cohort selects this bundle first with the current delivery settings."
+          title="No device gets this bundle with the current delivery settings."
         >
           <CircleOff className="size-3.5" />
           Unreachable
@@ -376,13 +413,8 @@ function BundlesPage() {
   const releasesQuery = useReleasesQuery({
     afterReleaseId: search.afterReleaseId,
     beforeReleaseId: search.beforeReleaseId,
-    bundleId: search.bundleId,
-    channelId: search.channelId,
-    enabled: search.enabled,
+    filter: releaseFilterOf(search),
     limit: PAGE_SIZE,
-    page: search.page,
-    platform: search.platform,
-    targetAppVersion: search.targetAppVersion,
   });
   const channelsQuery = useChannelsQuery();
   const channels = channelsQuery.data ?? [];
@@ -396,17 +428,26 @@ function BundlesPage() {
   );
   const patchCountsQuery = useBundleChildCountsQuery(bundleIds);
   const patchCountsByBundleId = patchCountsQuery.data ?? {};
-  const pagination = releasesQuery.data?.pagination;
-  const activityQuery = useBundleActivityQuery(
-    releases.flatMap((release) => {
-      const channel = channels.find(
-        (item) => item.id === release.channel_id,
-      )?.name;
-      return channel
-        ? [{ releaseId: release.id, platform: release.platform, channel }]
-        : [];
-    }),
-  );
+  const nextCursor = releasesQuery.data?.next;
+  const previousCursor = releasesQuery.data?.previous;
+  const slotReleases = releases.flatMap((release) => {
+    const channel = channels.find(
+      (item) => item.id === release.channel_id,
+    )?.name;
+    return channel
+      ? [
+          {
+            releaseId: release.id,
+            platform: release.platform,
+            channel,
+            builtIn: !release.bundle_id,
+          },
+        ]
+      : [];
+  });
+  // Features add columns, such as release activity where the console reads it.
+  const featureColumns = useReleaseColumns();
+  const columnCount = 10 + featureColumns.length;
   const channelNames = new Map(
     channels.map((channel) => [channel.id, channel.name]),
   );
@@ -435,33 +476,31 @@ function BundlesPage() {
     }
     changeFilters({ bundleId: bundle.id });
   };
-  const currentPage = pagination?.currentPage ?? 1;
-  const startEntry =
-    releases.length === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1;
-  const endEntry = startEntry === 0 ? 0 : startEntry + releases.length - 1;
-  const previousPage = currentPage - 1;
-  const firstReleaseId = releases[0]?.id;
-  const lastReleaseId = releases.at(-1)?.id;
-  const previousSearch: ReleaseSearch | null =
-    pagination?.hasPreviousPage && firstReleaseId
-      ? {
-          ...search,
-          afterReleaseId: firstReleaseId,
-          beforeReleaseId: undefined,
-          page: previousPage > 1 ? previousPage : undefined,
-          releaseId: undefined,
-        }
-      : null;
-  const nextSearch: ReleaseSearch | null =
-    pagination?.hasNextPage && lastReleaseId
-      ? {
-          ...search,
-          afterReleaseId: undefined,
-          beforeReleaseId: lastReleaseId,
-          page: currentPage + 1,
-          releaseId: undefined,
-        }
-      : null;
+  // Pages go by key: newer or older than an edge release, never by number.
+  const onLaterPage =
+    search.afterReleaseId !== undefined || search.beforeReleaseId !== undefined;
+  const previousSearch: ReleaseSearch | null = previousCursor
+    ? {
+        ...search,
+        afterReleaseId: previousCursor,
+        beforeReleaseId: undefined,
+        releaseId: undefined,
+      }
+    : null;
+  const nextSearch: ReleaseSearch | null = nextCursor
+    ? {
+        ...search,
+        afterReleaseId: undefined,
+        beforeReleaseId: nextCursor,
+        releaseId: undefined,
+      }
+    : null;
+  const newestSearch: ReleaseSearch = {
+    ...search,
+    afterReleaseId: undefined,
+    beforeReleaseId: undefined,
+    releaseId: undefined,
+  };
 
   return (
     <div className="flex h-svh min-h-0 min-w-0 flex-col">
@@ -503,13 +542,24 @@ function BundlesPage() {
 
                     return (
                       <Fragment key={release.id}>
+                        {/* The ID button opens it for keyboards and screen
+                            readers; a tap anywhere else on the card does too. */}
                         <article
+                          aria-label={`Bundle ${release.id}`}
                           className={cn(
-                            "flex flex-col gap-4 border-b p-4 last:border-b-0",
+                            "flex cursor-pointer touch-manipulation flex-col gap-4 border-b p-4 transition-[background-color,filter] last:border-b-0 hover:bg-muted/10 active:bg-muted/20 motion-reduce:transition-none data-[state=selected]:bg-muted/15",
                             release.currentlyUnreachable &&
-                              "bg-muted/35 saturate-50 transition-[background-color,filter] focus-within:saturate-100 motion-reduce:transition-none",
+                              "bg-muted/35 saturate-50 hover:bg-muted/50 hover:saturate-100 focus-within:saturate-100",
                             isExpanded && "border-b-0 bg-primary/5",
                           )}
+                          data-state={
+                            search.releaseId === release.id
+                              ? "selected"
+                              : undefined
+                          }
+                          onClick={openOutsideControls(() =>
+                            go({ ...search, releaseId: release.id }, false),
+                          )}
                         >
                           <div className="flex items-start justify-between gap-3">
                             <BundleEntry
@@ -568,24 +618,29 @@ function BundlesPage() {
                                     : "—"}
                               </dd>
                             </div>
-                            <div className="col-span-2 rounded-md bg-muted/40 p-3">
-                              <dt className="mb-2 text-muted-foreground">
-                                Activity · 30d
-                              </dt>
-                              <dd>
-                                <BundleMovementSummary
-                                  report={activityQuery.data?.[release.id]}
-                                  loading={activityQuery.isFetching}
-                                />
-                              </dd>
-                            </div>
+                            {featureColumns.map(({ Cell, feature, label }) => (
+                              <div
+                                className="col-span-2 rounded-md bg-muted/40 p-3"
+                                key={feature}
+                              >
+                                <dt className="mb-2 text-muted-foreground">
+                                  {label}
+                                </dt>
+                                <dd>
+                                  <Cell
+                                    releaseId={release.id}
+                                    releases={slotReleases}
+                                  />
+                                </dd>
+                              </div>
+                            ))}
                             <div className="col-span-2 flex flex-wrap items-center gap-2 rounded-md bg-muted/40 p-3">
                               <ReleaseStateBadge release={release} />
                               {release.should_force_update ? (
                                 <Badge variant="secondary">Force update</Badge>
                               ) : null}
                             </div>
-                            <div className="col-span-2 grid gap-2 rounded-md border bg-background/80 p-3">
+                            <div className="col-span-2 grid grid-cols-1 gap-2 rounded-md border bg-background/80 p-3">
                               <div className="flex items-start justify-between gap-3">
                                 <dt className="text-muted-foreground">
                                   Target
@@ -619,13 +674,11 @@ function BundlesPage() {
                   })
                 ) : (
                   <p className="p-8 text-center text-sm text-muted-foreground">
-                    {search.bundleId ||
-                    search.channelId ||
-                    search.enabled !== undefined ||
-                    search.platform ||
-                    search.targetAppVersion
-                      ? "No bundles match these filters."
-                      : "No bundles yet. Deploy an update to see it here."}
+                    {onLaterPage
+                      ? "No more bundles on this side."
+                      : hasReleaseFilters(search)
+                        ? "No bundles match these filters."
+                        : "No bundles yet. Deploy an update to see it here."}
                   </p>
                 )}
               </div>
@@ -641,7 +694,9 @@ function BundlesPage() {
                     <TableHead>Enabled</TableHead>
                     <TableHead>Force update</TableHead>
                     <TableHead>Rollout</TableHead>
-                    <TableHead>Activity · 30d</TableHead>
+                    {featureColumns.map(({ feature, label }) => (
+                      <TableHead key={feature}>{label}</TableHead>
+                    ))}
                     <TableHead>Message</TableHead>
                     <TableHead>Created</TableHead>
                   </TableRow>
@@ -650,7 +705,7 @@ function BundlesPage() {
                   {releasesQuery.isPending
                     ? Array.from({ length: 7 }, (_, index) => (
                         <TableRow key={index}>
-                          <TableCell colSpan={11}>
+                          <TableCell colSpan={columnCount}>
                             <Skeleton className="h-8 w-full" />
                           </TableCell>
                         </TableRow>
@@ -674,17 +729,9 @@ function BundlesPage() {
                                   ? "selected"
                                   : undefined
                               }
-                              onClick={(event) => {
-                                if (
-                                  event.target instanceof Element &&
-                                  event.target.closest(
-                                    "button, a, input, select, textarea",
-                                  )
-                                ) {
-                                  return;
-                                }
-                                go({ ...search, releaseId: release.id }, false);
-                              }}
+                              onClick={openOutsideControls(() =>
+                                go({ ...search, releaseId: release.id }, false),
+                              )}
                               onKeyDown={(event) => {
                                 if (
                                   event.target !== event.currentTarget ||
@@ -807,12 +854,14 @@ function BundlesPage() {
                                   percentage={release.rollout_cohort_count / 10}
                                 />
                               </TableCell>
-                              <TableCell>
-                                <BundleMovementSummary
-                                  report={activityQuery.data?.[release.id]}
-                                  loading={activityQuery.isFetching}
-                                />
-                              </TableCell>
+                              {featureColumns.map(({ Cell, feature }) => (
+                                <TableCell key={feature}>
+                                  <Cell
+                                    releaseId={release.id}
+                                    releases={slotReleases}
+                                  />
+                                </TableCell>
+                              ))}
                               <TableCell
                                 className="text-sm text-muted-foreground"
                                 title={release.message ?? undefined}
@@ -834,7 +883,7 @@ function BundlesPage() {
                               <TableRow className="hover:bg-transparent">
                                 <TableCell
                                   className="border-t-0 p-0"
-                                  colSpan={11}
+                                  colSpan={columnCount}
                                 >
                                   <ReleaseBundleChildrenPanel
                                     onDetailClick={openChildBundle}
@@ -851,15 +900,13 @@ function BundlesPage() {
                     <TableRow>
                       <TableCell
                         className="h-40 text-center text-muted-foreground"
-                        colSpan={11}
+                        colSpan={columnCount}
                       >
-                        {search.bundleId ||
-                        search.channelId ||
-                        search.enabled !== undefined ||
-                        search.platform ||
-                        search.targetAppVersion
-                          ? "No bundles match these filters."
-                          : "No bundles yet. Deploy an update to see it here."}
+                        {onLaterPage
+                          ? "No more bundles on this side."
+                          : hasReleaseFilters(search)
+                            ? "No bundles match these filters."
+                            : "No bundles yet. Deploy an update to see it here."}
                       </TableCell>
                     </TableRow>
                   ) : null}
@@ -875,13 +922,23 @@ function BundlesPage() {
             className="flex flex-col gap-3 px-2 sm:flex-row sm:items-center sm:justify-between"
           >
             <p className="text-xs font-medium text-muted-foreground">
-              Showing <span className="text-foreground">{startEntry}</span> to{" "}
-              <span className="text-foreground">{endEntry}</span> entries
+              <span className="text-foreground">{releases.length}</span>{" "}
+              {releases.length === 1 ? "entry" : "entries"}, newest first
             </p>
             <div className="flex flex-wrap items-center gap-3 sm:justify-end">
-              <p className="text-xs font-medium text-muted-foreground">
-                Page <span className="text-foreground">{currentPage}</span>
-              </p>
+              {onLaterPage ? (
+                <Link
+                  className={buttonVariants({
+                    className: "h-8 flex-1 px-3 text-xs sm:flex-none",
+                    size: "sm",
+                    variant: "ghost",
+                  })}
+                  search={newestSearch}
+                  to="/"
+                >
+                  Newest
+                </Link>
+              ) : null}
               {previousSearch ? (
                 <Link
                   className={buttonVariants({
@@ -940,6 +997,7 @@ function BundlesPage() {
         onOpenChange={(open) =>
           !open && go({ ...search, releaseId: undefined }, false)
         }
+        onShowScope={(scopeKey) => changeFilters({ scopeKey })}
         open={Boolean(search.releaseId)}
         releaseId={search.releaseId ?? ""}
       />