add support for deck filters and navigation updates

- Introduced `/decks/filter/:kind` route for deck filtering.
- Updated default deck kind to "popular".
- Adjusted navigation and state handling for consistent user experience.
- Improved UI components for deck views.

Author: marcelpanse

frontend/src/App.tsx

@@ -82,7 +82,8 @@ function App() {
         { path: '/collection/missions', element: <Missions /> },
         { path: '/collection/:friendId?', element: <Collection /> },
         { path: '/collection/:friendId/trade', element: <TradeWithRedirect /> }, // support old trading path
-        { path: '/decks', element: <Decks /> },
+        { path: '/decks', element: <Navigate to="/decks/filter/popular" replace /> },
+        { path: '/decks/filter/:kind', element: <Decks /> },
         { path: '/decks/edit/:id?', element: <DeckBuilder /> },
         { path: '/decks/:id', element: <DeckView /> },
         { path: '/scan', element: <Scan /> },

frontend/src/pages/decks/DeckView.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import { useQuery } from '@tanstack/react-query'
-import { ChevronRight, Heart, HeartMinus, HeartPlus } from 'lucide-react'
-import { Link, useLocation, useParams } from 'react-router'
+import { ChevronLeft, ChevronRight, Heart, HeartMinus, HeartPlus } from 'lucide-react'
+import { Link, useLocation, useNavigate, useParams } from 'react-router'
 import { CardLine } from '@/components/CardLine'
 import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button'
@@ -17,6 +17,7 @@ import { getDeckCardCounts, getMissingCardsCount } from './utils'
 export default function DeckView() {
   const { id: deckId } = useParams()
   const location = useLocation()
+  const navigate = useNavigate()
 
   const { data: account } = useAccount()
   const { data: ownedCards } = useCollection()
@@ -49,7 +50,11 @@ export default function DeckView() {
       <h2 className="text-lg font-semibold">{deck.name}</h2>
       <div className="flex items-center gap-2">
         <h3>Energy</h3>
-        <span className="inline-flex gap-1">{deck.energy.map(showCardType)}</span>
+        <span className="inline-flex gap-1">
+          {deck.energy.map((x) => (
+            <span key={x}>{showCardType(x)}</span>
+          ))}
+        </span>
       </div>
       <h3>Cards {missingCards > 0 && <span className="text-neutral-400 text-sm"> ({missingCards} missing)</span>}</h3>
       <ul className="overflow-y-auto space-y-1">
@@ -74,7 +79,7 @@ export default function DeckView() {
           )
         })}
       </ul>
-      <div className="flex items-center mt-2">
+      <div className="flex items-center mt-2 justify-between">
         {deck.is_public ? (
           deck.email !== undefined && deck.email === account?.email ? (
             <p className="flex items-center gap-1">
@@ -97,12 +102,19 @@ export default function DeckView() {
         ) : (
           <span className="italic text-neutral-400 text-sm">Private</span>
         )}
-        <Link className="ml-auto" to={`/decks/edit/${isOwn ? deck.id : ''}`} state={isOwn ? deck : { ...deck, id: undefined }}>
-          <Button>
-            {isOwn ? 'Edit' : 'Copy and edit'}
-            <ChevronRight />
+
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" onClick={() => navigate(-1)}>
+            <ChevronLeft /> Back
           </Button>
-        </Link>
+
+          <Link to={`/decks/edit/${isOwn ? deck.id : ''}`} state={isOwn ? deck : { ...deck, id: undefined }}>
+            <Button>
+              {isOwn ? 'Edit' : 'Copy and edit'}
+              <ChevronRight />
+            </Button>
+          </Link>
+        </div>
       </div>
     </div>
   )

frontend/src/pages/decks/Decks.tsx

@@ -1,6 +1,6 @@
 import { ChevronFirst, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useState } from 'react'
-import { Link } from 'react-router'
+import { Link, useNavigate, useParams } from 'react-router'
 import ErrorAlert from '@/components/ErrorAlert'
 import { TabsFilter, ToggleFilter } from '@/components/Filters'
 import { Spinner } from '@/components/Spinner'
@@ -12,9 +12,18 @@ import { energies } from '@/types'
 import { DeckItem } from './DeckItem'
 
 export default function Decks() {
-  const [filters, setFilters] = useState<DeckFilters>({ kind: 'my', page: 0, energy: [] })
+  const navigate = useNavigate()
+  const { kind } = useParams<{ kind: DeckFilters['kind'] }>()
+  const validKind = kind && deckKinds.includes(kind) ? kind : 'popular'
+
+  const [filters, setFilters] = useState<DeckFilters>({ kind: validKind, page: 0, energy: [] })
   const { data, isLoading, isError, error } = useDecksSearch(filters)
 
+  const handleKindChange = (newKind: DeckFilters['kind']) => {
+    setFilters((prev) => ({ ...prev, kind: newKind, page: 0 }))
+    navigate(`/decks/filter/${newKind}`, { replace: true })
+  }
+
   return (
     <div className="flex gap-4 flex-col sm:flex-row sm:w-fit mx-auto px-1">
       <div className="flex flex-col gap-2">
@@ -28,7 +37,7 @@ export default function Decks() {
           className="w-full"
           options={deckKinds}
           value={filters.kind}
-          onChange={(kind) => setFilters((prev) => ({ ...prev, kind }))}
+          onChange={handleKindChange}
           show={(kind) => `${kind.charAt(0).toUpperCase() + kind.slice(1)} decks`}
         />
         <ToggleFilter options={energies} value={filters.energy} onChange={(energy) => setFilters((prev) => ({ ...prev, energy }))} show={showCardType} />

frontend/src/services/decks/deckService.ts

@@ -1,7 +1,7 @@
 import { supabase } from '@/lib/supabase'
 import type { Deck, Energy } from '@/types'
 
-export const deckKinds = ['my', 'liked', 'community'] as const
+export const deckKinds = ['popular', 'liked', 'my'] as const
 
 export interface DeckFilters {
   kind: (typeof deckKinds)[number]
@@ -15,13 +15,13 @@ export async function getDeck(id: number) {
   2. Public decks have column `likes`, which private decks don't, and private decks have column `email` which public don't.
      So to have both columns for a user looking at his public deck, we need to merge the results.
   */
-  const [personal, community] = await Promise.all([
+  const [personal, popular] = await Promise.all([
     supabase.from('decks').select('*').eq('id', id).maybeSingle(),
     supabase.from('public_decks').select('*').eq('id', id).maybeSingle(),
   ])
   let res = {}
-  if (!community.error && !!community.data) {
-    res = { ...res, ...community.data, is_public: true }
+  if (!popular.error && !!popular.data) {
+    res = { ...res, ...popular.data, is_public: true }
   }
   if (!personal.error && !!personal.data) {
     res = { ...res, ...personal.data }
@@ -30,7 +30,7 @@ export async function getDeck(id: number) {
     // at least one query succeded
     return res as Deck
   }
-  console.error('supabase error?', personal.error, community.error)
+  console.error('supabase error?', personal.error, popular.error)
   throw new Error('Failed fetching deck')
 }
 
@@ -43,7 +43,7 @@ export async function getDecks(filters: DeckFilters) {
     tbl = tbl.from('decks').select('*', { count: 'exact' })
   } else if (filters.kind === 'liked') {
     tbl = tbl.from('deck_likes').select('*, public_decks!id(*)', { count: 'exact' })
-  } else if (filters.kind === 'community') {
+  } else if (filters.kind === 'popular') {
     tbl = tbl.from('public_decks').select('*', { count: 'exact' }).order('likes', { ascending: false })
   }