Auto-update flow, cloud installs, and collection sync

Auto-open the update flow from GameCard via a ?update=1 deep link and make the primary CTA trigger updates for installed outdated games. Remove the separate yellow "Update available" CTA and surface version diff, release date and notes in the UpdateBackupWarningModal (now accepts current/new version, releasedAt, notes, gameName). GameCard now navigates to the detail page to initiate updates from cards.

Add a cloud "Install on this PC" carousel to LauncherPage that shows games from cloud play history not currently installed on this device, backed by an installedAppidSet to dedupe local installs. Adjusted imports/icons and always render the local "Recently installed" strip.

Sync cloud collection memberships into local libraryGameMeta in use-user-collections so collection filters on the desktop reflect website additions/removals (best-effort). Small UI/copy improvements around update backup warning.

Author: Union-Crax

renderer/src/app/pages/GameDetailPage.tsx

@@ -684,6 +684,11 @@ export function GameDetailPage() {
     void launchInstalledGameRef.current()
   }, [game, loading, searchParams, setSearchParams])
 
+  // Forward-declared so the auto-open effect below can reference it; the
+  // ref is wired to the real `hasUpdate` value further down the file.
+  const hasUpdateRef = useRef(false)
+  const deepLinkUpdateHandledRef = useRef(false)
+
   const popularAppIds = useMemo(() => {
     const withStats = games.filter((g) => {
       const st = stats[g.appid]
@@ -864,6 +869,28 @@ export function GameDetailPage() {
   const isInstalled = hasInstalledVersions
   const isInstallReady = Boolean(installingManifest) && installingManifest?.installStatus === "downloaded" && !isInstalled
   const hasUpdate = isInstalled && Boolean(game?.version) && installedVersionLabels.length > 0 && !installedVersionLabels.includes(game.version ?? '')
+  hasUpdateRef.current = hasUpdate
+
+  // Auto-open the update flow when GameCard hands us off via `?update=1`.
+  // Sits after hasUpdate is declared so it can read it directly. Gated on
+  // hasUpdate so a stale URL doesn't surprise the user with a modal for a
+  // game that's no longer outdated; we also strip the param so refreshing
+  // the page doesn't re-trigger it.
+  useEffect(() => {
+    if (searchParams.get("update") !== "1") return
+    if (!game || loading) return
+    // Wait until install state has resolved before deciding — otherwise we
+    // could miss the chance because hasUpdate is still false on first render.
+    if (installedVersionLabels.length === 0 && isInstalled) return
+    if (deepLinkUpdateHandledRef.current) return
+    deepLinkUpdateHandledRef.current = true
+    const next = new URLSearchParams(searchParams)
+    next.delete("update")
+    setSearchParams(next, { replace: true })
+    if (hasUpdate) {
+      setUpdateWarningOpen(true)
+    }
+  }, [game, loading, isInstalled, hasUpdate, installedVersionLabels, searchParams, setSearchParams])
   const showActionMenu = isInstalled
   // Only treat as "installing" from manifest if there are corresponding download items.
   // If the manifest exists but no download items remain (e.g. items were lost), it's a stale
@@ -1566,6 +1593,12 @@ export function GameDetailPage() {
                     onClick={() => {
                       if (isGameRunning) {
                         void stopRunningGame()
+                      } else if (hasUpdate) {
+                        // White "Update" button now actually triggers the
+                        // update flow (via the backup warning modal) instead
+                        // of launching the installed game. The yellow
+                        // duplicate CTA below has been removed.
+                        setUpdateWarningOpen(true)
                       } else if (isInstalled) {
                         void launchInstalledGame()
                       } else if (isInstallReady) {
@@ -1582,6 +1615,8 @@ export function GameDetailPage() {
                       <Square className="mr-2 h-5 w-5" />
                     ) : isCheckingLinks ? (
                       <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    ) : hasUpdate ? (
+                      <RefreshCw className="mr-2 h-5 w-5" />
                     ) : isInstalled ? (
                       <Play className="mr-2 h-5 w-5" />
                     ) : isInstallReady ? (
@@ -1654,16 +1689,10 @@ export function GameDetailPage() {
                   </Button>
                 )}
 
-                {hasUpdate && !isInstalling && !isGameRunning && (
-                  <Button
-                    variant="outline"
-                    className="mt-2 w-full border-amber-500/40 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 hover:text-amber-300"
-                    onClick={() => setUpdateWarningOpen(true)}
-                  >
-                    <RefreshCw className="mr-2 h-4 w-4" />
-                    Update available - {game.version}
-                  </Button>
-                )}
+                {/* The previous yellow "Update available - X.Y" CTA used to live here.
+                    It's been removed: the white main button now drives the update flow
+                    directly when hasUpdate is true, and the version diff has moved into
+                    the UpdateBackupWarningModal. */}
 
                 {shortcutFeedback && (
                   <div className={`mt-2 text-xs ${shortcutFeedback.type === 'success' ? 'text-zinc-300' : 'text-destructive'}`}>
@@ -1998,6 +2027,10 @@ export function GameDetailPage() {
       </div>{/* close relative z-10 */}
       <UpdateBackupWarningModal
         open={updateWarningOpen}
+        currentVersion={installedVersionLabels[0] ?? null}
+        newVersion={game?.version ?? null}
+        releasedAt={game?.update_time ?? null}
+        gameName={game?.name ?? null}
         onProceed={async () => {
           setUpdateWarningOpen(false)
           setPendingForceDownload(true)

renderer/src/app/pages/LauncherPage.tsx

@@ -15,7 +15,7 @@ import { PaginationBar } from "@/components/PaginationBar"
 import { formatNumber, generateErrorCode, ErrorTypes, getInstalledVersionLabel, hasInstalledVersionUpdate, proxyImageUrl } from "@/lib/utils"
 import { useConnectivityStatus } from "@/hooks/use-online-status"
 import { fetchCatalogGames, fetchCatalogStats, getCatalogCache, hydrateCatalogCache, isCatalogGamesStale, isCatalogStatsStale, mergeInstalledGames, persistCatalogCache, type CatalogGame } from "@/lib/catalog"
-import { ArrowRight, Layers3, PlayCircle } from "lucide-react"
+import { ArrowRight, Cloud, Download, Layers3 } from "lucide-react"
 import { usePlayHistory } from "@/hooks/use-play-history"
 import { useUserCollections } from "@/hooks/use-user-collections"
 
@@ -60,6 +60,10 @@ export function LauncherPage() {
   const [emptyStateReady, setEmptyStateReady] = useState(false)
   const [currentPage, setCurrentPage] = useState(1)
   const [recentlyInstalledGames, setRecentlyInstalledGames] = useState<Game[]>([])
+  // Full set of locally-installed appids so the cloud carousel can subtract
+  // them — kept separate from `recentlyInstalledGames` (which is sliced to 10
+  // for the carousel itself).
+  const [installedAppidSet, setInstalledAppidSet] = useState<Set<string>>(() => new Set())
   const [installedVersionMap, setInstalledVersionMap] = useState<Record<string, string[]>>({})
   const itemsPerPage = 30
   const [statsCacheTime, setStatsCacheTime] = useState<number>(initialCatalog.statsUpdatedAt || 0)
@@ -151,6 +155,7 @@ export function LauncherPage() {
 
       if (!ignore) {
         setRecentlyInstalledGames(resolved)
+        setInstalledAppidSet(new Set(installedGames.map((g) => String(g.appid))))
         setInstalledVersionMap(nextInstalledVersions)
       }
     }
@@ -296,6 +301,17 @@ export function LauncherPage() {
     return games.slice(0, 8)
   }, [games])
 
+  // Games the user has installed or played on *another* device (from cloud
+  // play history) that are NOT currently installed on this PC. Surface them
+  // so the user can one-click install on this device. Prefers entries with
+  // recent activity; falls back to install-only rows when those exist.
+  const cloudUninstalled = useMemo(() => {
+    if (!playHistory.items || playHistory.items.length === 0) return []
+    return playHistory.items
+      .filter((entry) => entry.game && !installedAppidSet.has(entry.appid))
+      .slice(0, 12)
+  }, [playHistory.items, installedAppidSet])
+
   const popularReleases = useMemo(() => {
     if (Object.keys(gameStats).length === 0) return []
 
@@ -464,48 +480,11 @@ export function LauncherPage() {
         </div>
       </section>
 
-      {/* Continue playing — cloud-synced when signed in, falls back to local
-          recently-installed below for everyone else. */}
-      {playHistory.authed && playHistory.items && playHistory.items.length > 0 && (
-        <section className="overflow-visible">
-          <SectionHeading
-            eyebrow="From the cloud"
-            title="Continue playing"
-            icon={<PlayCircle className="h-4 w-4" />}
-            actionLabel="Open library"
-            onAction={() => navigate("/library")}
-          />
-          <Carousel
-            opts={{ align: "start", loop: false, skipSnaps: false, dragFree: true }}
-            className="w-full"
-          >
-            <CarouselContent className="-ml-2 md:-ml-4">
-              {playHistory.items
-                .filter((entry) => Boolean(entry.game))
-                .slice(0, 12)
-                .map((entry) => (
-                  <CarouselItem
-                    key={entry.appid}
-                    className="pl-2 md:pl-4 basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5"
-                  >
-                    <GameCardCompact
-                      game={{
-                        appid: entry.appid,
-                        name: entry.game!.name,
-                        image: entry.game!.image,
-                        genres: Array.isArray(entry.game!.genres) ? entry.game!.genres : [],
-                      }}
-                    />
-                  </CarouselItem>
-                ))}
-            </CarouselContent>
-            <CarouselPrevious className={cardCarouselNavClass} />
-            <CarouselNext className={cardCarouselNavClass} />
-          </Carousel>
-        </section>
-      )}
-
-      {recentlyInstalledGames.length > 0 && !(playHistory.authed && playHistory.items && playHistory.items.length > 0) && (
+      {/* Recently installed — always rendered when we have any local installs,
+          independent of the cloud carousel below. Previously this section was
+          hidden whenever the cloud history had any rows, which made it fight
+          for screen space with the cloud strip. */}
+      {recentlyInstalledGames.length > 0 && (
         <section>
           <div>
             <SectionHeading
@@ -561,6 +540,70 @@ export function LauncherPage() {
         </section>
       )}
 
+      {/* From your cloud library — games this account has installed or played
+          on *another* device that aren't on this PC yet. Filtered so it's
+          actionable (one-click install on this device) rather than a noisy
+          mirror of the local "Recently installed" strip. */}
+      {playHistory.authed && cloudUninstalled.length > 0 && (
+        <section className="overflow-visible">
+          <SectionHeading
+            eyebrow="From your cloud library"
+            title="Install on this PC"
+            icon={<Cloud className="h-4 w-4" />}
+            actionLabel="See all"
+            onAction={() => navigate("/library")}
+          />
+          <p className="-mt-1 mb-3 text-xs text-zinc-500">
+            On your account but not installed here. Click any game to install it on this device.
+          </p>
+          <Carousel
+            opts={{ align: "start", loop: false, skipSnaps: false, dragFree: true }}
+            className="w-full"
+          >
+            <CarouselContent className="-ml-2 md:-ml-4">
+              {cloudUninstalled.map((entry) => {
+                const playedHere = (entry.playCount ?? 0) > 0
+                const installedElsewhere = Boolean(entry.installedAt)
+                const subtitle = playedHere
+                  ? "Played on another device"
+                  : installedElsewhere
+                    ? "Installed on another device"
+                    : "On your account"
+                return (
+                  <CarouselItem
+                    key={entry.appid}
+                    className="pl-2 md:pl-4 basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5"
+                  >
+                    <div className="relative">
+                      <GameCardCompact
+                        game={{
+                          appid: entry.appid,
+                          name: entry.game!.name,
+                          image: entry.game!.image,
+                          genres: Array.isArray(entry.game!.genres) ? entry.game!.genres : [],
+                        }}
+                      />
+                      {/* Inline overlay so the carousel item still looks like a
+                          regular catalog card but signals "available to pull
+                          down from cloud". */}
+                      <div
+                        className="pointer-events-none absolute top-2 left-2 z-10 inline-flex items-center gap-1 rounded-full border border-sky-500/40 bg-sky-500/15 px-2 py-0.5 text-[10px] font-semibold text-sky-200 backdrop-blur-sm"
+                        title={subtitle}
+                      >
+                        <Download className="h-2.5 w-2.5" />
+                        <span>Not on this PC</span>
+                      </div>
+                    </div>
+                  </CarouselItem>
+                )
+              })}
+            </CarouselContent>
+            <CarouselPrevious className={cardCarouselNavClass} />
+            <CarouselNext className={cardCarouselNavClass} />
+          </Carousel>
+        </section>
+      )}
+
       {!isOnline && games.length === 0 && !loading && (
         <OfflineBanner
           onRetry={() => {

renderer/src/components/GameCard.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react"
-import { Link } from "react-router-dom"
+import { Link, useNavigate } from "react-router-dom"
 import { Badge } from "@/components/ui/badge"
 import { Calendar, HardDrive, Download, Eye, Wifi, Flame, Play, Square, RefreshCw } from "lucide-react"
 import { formatNumber, getCardImage, hasOnlineMode, isGameVersionUpdate, pickGameExecutable, proxyImageUrl, timeAgo } from "@/lib/utils"
@@ -75,6 +75,7 @@ export const GameCard = memo(function GameCard({
   const [sessionRevealed, setSessionRevealed] = useState(false)
   const displayStats = initialStats || hoveredStats || { downloads: 0, views: 0 }
 
+  const navigate = useNavigate()
   const { openPath } = useDownloads()
   const downloadState = useDownloadsSelector(
     useCallback(
@@ -403,6 +404,16 @@ export const GameCard = memo(function GameCard({
     event.preventDefault()
     event.stopPropagation()
 
+    // If an update is available, the white button must update the game — not
+    // launch it. We don't have the host-selector / backup flow available in a
+    // card, so hand off to the detail page with an auto-open update query
+    // parameter. The detail page knows how to show the changelog, run the
+    // backup, and queue the download.
+    if (updateAvailable && isInstalled && !isRunning) {
+      navigate(`/game/${encodeURIComponent(game.appid)}?update=1`)
+      return
+    }
+
     // If game is running, stop it
     if (isRunning && window.ucDownloads?.quitGameExecutable) {
       try {

renderer/src/components/VersionConflictModal.tsx

@@ -1,15 +1,47 @@
 import { Button } from "@/components/ui/button"
-import { AlertTriangle } from "lucide-react"
+import { AlertTriangle, ArrowRight, Calendar, Tag } from "lucide-react"
+import { timeAgoLong } from "@/lib/utils"
 
 type Props = {
   open: boolean
   onProceed: () => void
   onClose: () => void
+  /** Currently-installed version label (first one if multiple). Falls back
+   *  to a generic "Installed" string when unknown. */
+  currentVersion?: string | null
+  /** Version about to be installed (from the catalog). */
+  newVersion?: string | null
+  /** Catalog update_time so we can show "released X ago". */
+  releasedAt?: string | null
+  /** Optional changelog / patch notes. Rendered as plain text — short. */
+  notes?: string | null
+  /** Game name for the headline. */
+  gameName?: string | null
 }
 
-export function UpdateBackupWarningModal({ open, onProceed, onClose }: Props) {
+/**
+ * Modal shown the moment the user actually opts to update a game.
+ *
+ * The data shown here is what the user used to discover by hovering the now-
+ * removed yellow "Update available - X.Y" button: it folds the version diff,
+ * release date, and the "back up your saves" reminder into the single update
+ * flow so there's no second yellow CTA below the main button.
+ */
+export function UpdateBackupWarningModal({
+  open,
+  onProceed,
+  onClose,
+  currentVersion,
+  newVersion,
+  releasedAt,
+  notes,
+  gameName,
+}: Props) {
   if (!open) return null
 
+  const releaseLabel = releasedAt ? timeAgoLong(releasedAt) : null
+  const showVersionRow = Boolean(currentVersion || newVersion)
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
       <div
@@ -19,11 +51,41 @@ export function UpdateBackupWarningModal({ open, onProceed, onClose }: Props) {
       <div className="relative w-full max-w-md rounded-2xl border border-border/60 bg-card/95 p-6 text-foreground shadow-2xl">
         <div className="flex items-center gap-2 text-lg font-semibold">
           <AlertTriangle className="h-5 w-5 text-amber-400" />
-          Backup your game data first
+          Update {gameName ? `"${gameName}"` : "this game"}?
         </div>
 
-        <p className="mt-3 text-sm text-muted-foreground leading-relaxed">
-          Please backup your game data before updating. As sometimes game saves are stored inside the game files. For help, join our Discord server.
+        {showVersionRow && (
+          <div className="mt-4 space-y-2 rounded-xl border border-white/[.07] bg-zinc-900/50 px-3 py-2.5 text-sm">
+            <div className="flex items-center gap-2 text-xs uppercase tracking-wider text-zinc-500">
+              <Tag className="h-3 w-3" />
+              <span>Version</span>
+            </div>
+            <div className="flex flex-wrap items-center gap-2 text-sm">
+              <span className="rounded-md bg-zinc-800/80 px-2 py-0.5 text-xs font-mono text-zinc-300">
+                {currentVersion || "Installed"}
+              </span>
+              <ArrowRight className="h-3.5 w-3.5 text-zinc-500" />
+              <span className="rounded-md bg-emerald-500/15 px-2 py-0.5 text-xs font-mono text-emerald-200">
+                {newVersion || "Latest"}
+              </span>
+              {releaseLabel && (
+                <span className="ml-auto inline-flex items-center gap-1 text-[11px] text-zinc-500">
+                  <Calendar className="h-3 w-3" />
+                  Released {releaseLabel}
+                </span>
+              )}
+            </div>
+            {notes && (
+              <p className="pt-1.5 text-xs text-zinc-400 leading-relaxed border-t border-white/[.06] mt-2">
+                {notes}
+              </p>
+            )}
+          </div>
+        )}
+
+        <p className="mt-4 text-sm text-muted-foreground leading-relaxed">
+          Please backup your game data before updating &mdash; some games store saves
+          inside the game folder. For help, join our Discord server.
         </p>
 
         <div className="mt-5 flex flex-col gap-2">