add collected page and move the checkbox

src/app/page.tsx

@@ -14,6 +14,7 @@ export default function Page() {
   const [collected, setCollected] = useState<Set<string>>(new Set());
   const [setId, setSetId] = useState('');
   const [note, setNote] = useState<string | null>(null);
+  const [tab, setTab] = useState<'uncollected' | 'collected'>('uncollected');
 
   useEffect(() => {
     setCollected(loadChecklist());
@@ -63,6 +64,15 @@ export default function Page() {
     return bySet;
   }, [cards, query, setId]);
 
+  const filteredCollectedCount = useMemo(() => filtered.filter((c) => collected.has(c.id)).length, [filtered, collected]);
+  const filteredUncollectedCount = useMemo(() => filtered.filter((c) => !collected.has(c.id)).length, [filtered, collected]);
+
+  const displayed = useMemo(() => {
+    return tab === 'collected'
+      ? filtered.filter((c) => collected.has(c.id))
+      : filtered.filter((c) => !collected.has(c.id));
+  }, [filtered, collected, tab]);
+
   const setOptions = useMemo(() => {
     const map = new Map<string, string>();
     for (const c of cards) {
@@ -95,10 +105,40 @@ export default function Page() {
               {note}
             </div>
           ) : null}
-          <div className="mb-4 text-sm text-slate-600">
-            Showing {filtered.length} of {cards.length} cards.
+          <div className="mb-3 flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setTab('uncollected')}
+              className={`px-3 py-1.5 text-sm rounded border transition ${
+                tab === 'uncollected'
+                  ? 'bg-sky-600 text-white border-sky-600'
+                  : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'
+              }`}
+              aria-pressed={tab === 'uncollected'}
+            >
+              Uncollected <span className="ml-1 inline-block rounded bg-white/20 px-1.5 py-0.5 text-xs border border-white/30">
+                {filteredUncollectedCount}
+              </span>
+            </button>
+            <button
+              type="button"
+              onClick={() => setTab('collected')}
+              className={`px-3 py-1.5 text-sm rounded border transition ${
+                tab === 'collected'
+                  ? 'bg-sky-600 text-white border-sky-600'
+                  : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-50'
+              }`}
+              aria-pressed={tab === 'collected'}
+            >
+              Collected <span className="ml-1 inline-block rounded bg-white/20 px-1.5 py-0.5 text-xs border border-white/30">
+                {filteredCollectedCount}
+              </span>
+            </button>
           </div>
-          <CardGrid cards={filtered} collected={collected} onToggle={toggleCollected} />
+          <div className="mb-4 text-sm text-slate-600">
+            Showing {displayed.length} of {filtered.length} cards in this tab.
+          </div>
+          <CardGrid cards={displayed} collected={collected} onToggle={toggleCollected} />
         </>
       )}
     </main>