From fd21264e91b092ebee8e2f49b71effe2f70fa939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Sat, 15 Jun 2024 13:08:50 +0200
Subject: [PATCH] feat: highlight active filters

---
 src/components/filters/primitives/filter-container.tsx    | 1 +
 src/components/ui/collapsible.module.css                  | 8 ++++++++
 src/components/ui/collapsible.tsx                         | 4 +++-
 src/pages/deck-create/deck-create-choose-investigator.tsx | 3 +++
 src/pages/deck-create/deck-create.module.css              | 2 ++
 src/pages/deck-create/deck-create.tsx                     | 3 +++
 src/pages/deck-view/deck-view.module.css                  | 6 ++++--
 src/pages/deck-view/sidebar/sidebar.module.css            | 1 -
 8 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/filters/primitives/filter-container.tsx b/src/components/filters/primitives/filter-container.tsx
index e56fbd26..990229d6 100644
--- a/src/components/filters/primitives/filter-container.tsx
+++ b/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>
diff --git a/src/components/ui/collapsible.module.css b/src/components/ui/collapsible.module.css
index e193f58c..4ab595a0 100644
--- a/src/components/ui/collapsible.module.css
+++ b/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 > * + * {
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index cacaafcf..23a44e6b 100644
--- a/src/components/ui/collapsible.tsx
+++ b/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}
     >
diff --git a/src/pages/deck-create/deck-create-choose-investigator.tsx b/src/pages/deck-create/deck-create-choose-investigator.tsx
index 52475e10..b5e5f528 100644
--- a/src/pages/deck-create/deck-create-choose-investigator.tsx
+++ b/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 () => {
diff --git a/src/pages/deck-create/deck-create.module.css b/src/pages/deck-create/deck-create.module.css
index f27ab3a9..f5370867 100644
--- a/src/pages/deck-create/deck-create.module.css
+++ b/src/pages/deck-create/deck-create.module.css
@@ -91,6 +91,8 @@
 
 .editor-nav {
   padding: 0.25rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .card-selections {
diff --git a/src/pages/deck-create/deck-create.tsx b/src/pages/deck-create/deck-create.tsx
index f0eaeedd..a45e1b8a 100644
--- a/src/pages/deck-create/deck-create.tsx
+++ b/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 () => {
diff --git a/src/pages/deck-view/deck-view.module.css b/src/pages/deck-view/deck-view.module.css
index 99884f66..75fa9e98 100644
--- a/src/pages/deck-view/deck-view.module.css
+++ b/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 {
diff --git a/src/pages/deck-view/sidebar/sidebar.module.css b/src/pages/deck-view/sidebar/sidebar.module.css
index 0161a58b..f57c8c91 100644
--- a/src/pages/deck-view/sidebar/sidebar.module.css
+++ b/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 {