feat: page titles and further tag improvements

Author: cfbender

assets/react/src/components/app-shell.tsx

@@ -0,0 +1,60 @@
+import { useRouterState } from "@tanstack/react-router"
+import type { PropsWithChildren } from "react"
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
+
+declare module "@tanstack/react-router" {
+  interface StaticDataRouteOption {
+    title?: string
+  }
+}
+
+const APP_TITLE = "ManaVault"
+
+type PageTitleState = {
+  pathname: string
+  title: string | null | undefined
+}
+
+const PageTitleContext = createContext<((title: string | null | undefined) => void) | null>(null)
+
+export function formatPageTitle(title: string | null | undefined) {
+  const trimmedTitle = title?.trim()
+  return trimmedTitle ? `${APP_TITLE} - ${trimmedTitle}` : APP_TITLE
+}
+
+export function PageTitleProvider({ children }: PropsWithChildren) {
+  const pathname = useRouterState({ select: (state) => state.location.pathname })
+  const routeTitle = useRouterState({
+    select: (state) => {
+      for (let index = state.matches.length - 1; index >= 0; index -= 1) {
+        const title = state.matches[index]?.staticData.title
+        if (typeof title === "string") return title
+      }
+
+      return undefined
+    },
+  })
+  const [pageTitle, setPageTitle] = useState<PageTitleState | null>(null)
+  const title = pageTitle?.pathname === pathname ? pageTitle.title : routeTitle
+  const setCurrentPageTitle = useCallback(
+    (nextTitle: string | null | undefined) => setPageTitle({ pathname, title: nextTitle }),
+    [pathname],
+  )
+  const contextValue = useMemo(() => setCurrentPageTitle, [setCurrentPageTitle])
+
+  useEffect(() => {
+    if (typeof document === "undefined") return
+    document.title = formatPageTitle(title)
+  }, [title])
+
+  return <PageTitleContext.Provider value={contextValue}>{children}</PageTitleContext.Provider>
+}
+
+export function usePageTitle(title: string | null | undefined) {
+  const setPageTitle = useContext(PageTitleContext)
+
+  useEffect(() => {
+    setPageTitle?.(title)
+    return () => setPageTitle?.(undefined)
+  }, [setPageTitle, title])
+}

assets/react/src/lib/page-title.tsx

@@ -6,6 +6,7 @@ import { EmptyState } from "../../components/card-image"
 import { FullscreenPrintingDialog } from "../../components/fullscreen-printing-dialog"
 import { Button } from "../../components/ui/button"
 import { graphqlEndpointContext } from "../../lib/apollo"
+import { usePageTitle } from "../../lib/page-title"
 import {
   buildCollectionFilterQuery,
   cloneCollectionFilters,
@@ -311,6 +312,7 @@ export function CardDetailPage({
   const card = data?.card
   const visiblePrintings = connectionNodes(card?.printings)
   const primary = visiblePrintings[0]
+  usePageTitle(card?.name ?? (isLoading ? "Card" : "Card not found"))
   const previewPrintings = visiblePrintings.map((printing) => ({
     ...printing,
     scryfallId: printing.id,

assets/react/src/pages/cards/page.tsx

@@ -19,6 +19,7 @@ import {
   type CollectionFilterState,
 } from "../../lib/collection-filters"
 import { useLocalStorageState } from "../../lib/use-local-storage"
+import { usePageTitle } from "../../lib/page-title"
 import { cn, compactNumber, pluralize, present, titleize } from "../../lib/utils"
 import { AutoSortSetupDialog, hasEnabledAutoSortRules } from "./auto-sort-setup-dialog"
 import { AutoSortSummaryDialog } from "./auto-sort-summary-dialog"
@@ -191,6 +192,7 @@ export function LocationPage({ id }: { id: string }) {
     itemsPageInfo?.endCursor,
   ])
   const location = data?.location
+  usePageTitle(location?.name ?? (isLoading ? "Collection Location" : "Location not found"))
   const activeStructuredFilterCount = countActiveCollectionFilters(structuredFilters)
   const hasLocationFilters = Boolean(combinedCollectionQuery)
   const locationCountLabel = `${countQuery.data?.collectionItemCount ?? location?.itemCount ?? 0} ${hasLocationFilters ? "shown" : "total"}`

assets/react/src/pages/collection/location-page.tsx

@@ -10,7 +10,9 @@ export type DeckReadinessSummary = {
 }
 
 export function deckPullZones(deckCards: readonly DeckCardEntry[]) {
-  return deckCards.filter((deckCard) => deckCard.zone === "mainboard" || deckCard.zone === "commander")
+  return deckCards.filter(
+    (deckCard) => deckCard.zone === "mainboard" || deckCard.zone === "commander",
+  )
 }
 
 export function summarizeDeckPullNeeds(deckCards: readonly DeckCardEntry[]) {

assets/react/src/pages/decks/deck-readiness.ts

@@ -208,7 +208,9 @@ export function DeckStackCard({
             className={cn(
               "dropdown dropdown-start absolute left-2 top-2 z-[120] transition-opacity group-focus-within:opacity-100",
               actionMenuDirection === "up" && "dropdown-top",
-              isInteractive ? "visible opacity-100" : "invisible opacity-0 group-hover:visible group-hover:opacity-100",
+              isInteractive
+                ? "visible opacity-100"
+                : "invisible opacity-0 group-hover:visible group-hover:opacity-100",
             )}
             onClick={(event) => event.stopPropagation()}
             onMouseDown={(event) => event.stopPropagation()}
@@ -459,15 +461,19 @@ function DeckCardAllocationQuickMenu({
   )
   const hasProxyAllocation = status.proxyAllocated > 0
   const canMarkProxy =
-    status.state !== "basic_land" && status.proxyAllocated <= 0 && status.required > status.allocated
+    status.state !== "basic_land" &&
+    status.proxyAllocated <= 0 &&
+    status.required > status.allocated
 
   return (
     <div className="dropdown dropdown-end" onClick={(event) => event.stopPropagation()}>
       <CardTileOverlayButton
         className={cn(
           "relative transition-opacity",
           allocationStatusButtonClass(status.state),
-          isVisible ? "visible opacity-100" : "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100",
+          isVisible
+            ? "visible opacity-100"
+            : "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100",
         )}
         tabIndex={isVisible ? 0 : -1}
         aria-label={`${label}: ${summary}`}
@@ -553,7 +559,9 @@ function DeckCardTagQuickButton({
       className={cn(
         "transition-opacity",
         tag?.className,
-        isVisible ? "visible opacity-100" : "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100",
+        isVisible
+          ? "visible opacity-100"
+          : "invisible opacity-0 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100",
       )}
       disabled={disabled}
       tabIndex={isVisible ? 0 : -1}

assets/react/src/pages/decks/deck-stack-card.tsx

@@ -29,7 +29,11 @@ import type { DeckCardUpdateInput } from "../../gql/graphql"
 import type { DeckGroup, DeckGroupBy } from "../../lib/deck-grouping"
 import { cn, compactNumber, titleize } from "../../lib/utils"
 import { ShareModeHidden, SummaryActionMenu } from "./deck-actions"
-import { DeckCardAllocationPanel, allocationStatusLabel, allocationStatusSummary } from "./deck-card-allocation"
+import {
+  DeckCardAllocationPanel,
+  allocationStatusLabel,
+  allocationStatusSummary,
+} from "./deck-card-allocation"
 import { cardImageUrl, deckDetailCoverUrl } from "./deck-card-model"
 import { DeckGroupMenu } from "./deck-group-menu"
 import { deckLegalityIssueCountLabel, deckLegalityLabel, deckLegalityTone } from "./deck-legality"

assets/react/src/pages/decks/detail-page-content.tsx

@@ -7,6 +7,7 @@ import { useToast } from "../../components/ui/toast"
 import type { DeckCardInput, DeckCardUpdateInput, DeckQuery } from "../../gql/graphql"
 import { groupDeckCards, type DeckGroupBy } from "../../lib/deck-grouping"
 import { graphqlEndpointContext, refetchActiveQueries } from "../../lib/apollo"
+import { usePageTitle } from "../../lib/page-title"
 import { pluralize } from "../../lib/utils"
 import { deckCardsTotalPrice, deckMissingCardsTotalPrice, formatUsdCents } from "./buylist-export"
 import {
@@ -230,6 +231,7 @@ export function DeckDetailPage({
   const deck = useMemo(() => flattenDeck(deckQueryData?.deck), [deckQueryData?.deck])
   const isInitialDeckLoading = isLoading && !deck
   const isRefreshingDeck = isLoading && Boolean(deck)
+  usePageTitle(deck?.name ?? (isInitialDeckLoading ? "Deck" : "Deck not found"))
   const [isAddCardOpen, setIsAddCardOpen] = useState(false)
   const deckCards = useMemo(() => deck?.deckCards || [], [deck?.deckCards])
   const bulkAllocationPullList = useMemo(

assets/react/src/pages/decks/detail-page.tsx

@@ -3,6 +3,7 @@ import { useMemo } from "react"
 import { EmptyState } from "../../components/card-image"
 import { DeckPlaytester } from "../../components/deck-playtester"
 import { createPlaytestState } from "../../lib/deck-playtest"
+import { usePageTitle } from "../../lib/page-title"
 import { deckPlaytestCards } from "./deck-card-model"
 import { flattenDeck } from "./deck-types"
 import { DeckDocument } from "./queries"
@@ -18,6 +19,7 @@ export function DeckPlaytestPage({ id }: { id: string }) {
     () => createPlaytestState(playtestCards.library, playtestCards.command),
     [playtestCards],
   )
+  usePageTitle(deck?.name ? `${deck.name} Playtest` : isLoading ? "Playtest" : "Deck not found")
 
   if (isLoading) return <EmptyState title="Loading playtest..." />
   if (!deck) return <EmptyState title="Deck not found" />

assets/react/src/pages/decks/playtest-page.tsx

@@ -17,6 +17,7 @@ type CardSearch = {
 const EDHREC_TABS: CardReturnEdhrecTab[] = ["recs", "cuts", "commander"]
 
 export const Route = createFileRoute("/cards/$id")({
+  staticData: { title: "Card" },
   validateSearch: (search: Record<string, unknown>): CardSearch => {
     const returnLocationId =
       typeof search.returnLocationId === "string" && !search.returnLocationId.includes("/")