feat: highlight active filters

src/components/filters/primitives/filter-container.tsx

@@ -49,6 +49,7 @@ export function FilterContainer({
       open={open}
       sub={alwaysShowFilterString || !open ? filterString || "All" : undefined}
       title={title}
+      variant={filterString && filterString !== "All" ? "active" : undefined}
     >
       {nonCollapsibleContent}
       <CollapsibleContent>{children}</CollapsibleContent>

src/components/ui/collapsible.module.css

@@ -2,10 +2,18 @@
   padding: 0.5rem;
   border: 1px solid transparent;
   border-radius: var(--rounded);
+
+  &.active {
+    border-color: var(--nord-6);
+  }
 }
 
 .collapsible[data-state="open"] {
   border: 1px solid rgba(255, 255, 255, 0.05);
+
+  &.active {
+    border-color: var(--nord-6);
+  }
 }
 
 .collapsible > * + * {

src/components/ui/collapsible.tsx

@@ -18,6 +18,7 @@ type Props = Omit<CollapsibleProps, "title"> & {
   sub?: React.ReactNode;
   title: React.ReactNode;
   header?: React.ReactNode;
+  variant?: "active";
 };
 
 export function Collapsible({
@@ -29,12 +30,13 @@ export function Collapsible({
   sub,
   title,
   header,
+  variant,
   ...rest
 }: Props) {
   return (
     <Root
       {...rest}
-      className={clsx(css["collapsible"], className)}
+      className={clsx(css["collapsible"], variant && css[variant], className)}
       onOpenChange={onOpenChange}
       open={open}
     >

src/pages/deck-create/deck-create-choose-investigator.tsx

@@ -5,6 +5,7 @@ import { Filters } from "@/components/filters/filters";
 import { Button } from "@/components/ui/button";
 import { ListLayout } from "@/layouts/list-layout";
 import { useStore } from "@/store";
+import { useDocumentTitle } from "@/utils/use-document-title";
 import { useGoBack } from "@/utils/useBack";
 
 import { DeckCollection } from "../browse/deck-collection/deck-collection";
@@ -16,6 +17,8 @@ function DeckCreateChooseInvestigator() {
   const resetFilters = useStore((state) => state.resetFilters);
   const setActiveList = useStore((state) => state.setActiveList);
 
+  useDocumentTitle("Choose investigator");
+
   useEffect(() => {
     setActiveList("create_deck");
     return () => {

src/pages/deck-create/deck-create.module.css

@@ -91,6 +91,8 @@
 
 .editor-nav {
   padding: 0.25rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .card-selections {

src/pages/deck-create/deck-create.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useParams } from "wouter";
 
 import { useStore } from "@/store";
+import { useDocumentTitle } from "@/utils/use-document-title";
 
 import { DeckCreateInner } from "./deck-create-inner";
 
@@ -12,6 +13,8 @@ function DeckCreate() {
   const destroy = useStore((state) => state.resetCreate);
   const initialize = useStore((state) => state.initCreate);
 
+  useDocumentTitle("Create deck");
+
   useEffect(() => {
     initialize(code);
     return () => {

src/pages/deck-view/deck-view.module.css

@@ -7,7 +7,6 @@
   grid-template-areas:
     "header"
     "sidebar"
-    "description"
     "decklist";
 
   padding-bottom: 1rem;
@@ -16,7 +15,6 @@
     grid-template-columns: 24rem 1fr;
     grid-template-areas:
       "sidebar header"
-      "sidebar description"
       "sidebar decklist";
     grid-template-rows: min-content min-content 1fr;
   }
@@ -36,6 +34,10 @@
 
 .content {
   grid-area: decklist;
+
+  & > * + * {
+    margin-top: 1rem;
+  }
 }
 
 .floating {

src/pages/deck-view/sidebar/sidebar.module.css

@@ -15,7 +15,6 @@
   flex-flow: row wrap;
   gap: 1rem;
   list-style: none;
-  margin-top: 1rem;
 }
 
 .detail {