From df90f6e00c8627308bc3304cda8848a9c8e81749 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Sp=C3=B6ttel?=
 <1682504+fspoettel@users.noreply.github.com>
Date: Tue, 18 Jun 2024 20:16:51 +0200
Subject: [PATCH] feat: add filter shortcut for types

---
 .../filters/primitives/multiselect-filter.tsx |  3 ++
 src/components/filters/type-filter.tsx        | 35 ++++++++++++++++++-
 src/components/ui/toggle-group.module.css     |  8 ++++-
 src/pages/deck-view/deck-view.module.css      |  4 +--
 src/store/slices/lists.ts                     |  6 ++--
 5 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/components/filters/primitives/multiselect-filter.tsx b/src/components/filters/primitives/multiselect-filter.tsx
index 248836ff..21104ad2 100644
--- a/src/components/filters/primitives/multiselect-filter.tsx
+++ b/src/components/filters/primitives/multiselect-filter.tsx
@@ -8,6 +8,7 @@ import { FilterContainer } from "./filter-container";
 
 type Props<T extends Coded> = {
   changes?: string;
+  children: React.ReactNode;
   id: number;
   itemToString?: (val: T) => string;
   nameRenderer?: (val: T) => React.ReactNode;
@@ -20,6 +21,7 @@ type Props<T extends Coded> = {
 
 export function MultiselectFilter<T extends Coded>({
   changes,
+  children,
   id,
   itemToString,
   nameRenderer,
@@ -55,6 +57,7 @@ export function MultiselectFilter<T extends Coded>({
     <FilterContainer
       filterString={changes}
       onOpenChange={onOpenChange}
+      nonCollapsibleContent={children}
       onReset={onReset}
       open={open}
       title={title}
diff --git a/src/components/filters/type-filter.tsx b/src/components/filters/type-filter.tsx
index e44ac81d..c0a43888 100644
--- a/src/components/filters/type-filter.tsx
+++ b/src/components/filters/type-filter.tsx
@@ -1,5 +1,8 @@
+import { useCallback } from "react";
+
 import { useStore } from "@/store";
 import {
+  selectActiveList,
   selectActiveListFilter,
   selectMultiselectChanges,
   selectTypeOptions,
@@ -8,13 +11,17 @@ import type { Type } from "@/store/services/queries.types";
 import { isTypeFilterObject } from "@/store/slices/lists.type-guards";
 import { assert } from "@/utils/assert";
 
+import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group";
 import { MultiselectFilter } from "./primitives/multiselect-filter";
 
 const nameRenderer = (item: Type) => item.name;
 const itemToString = (item: Type) => item.name.toLowerCase();
 
 export function TypeFilter({ id }: { id: number }) {
+  const activeList = useStore(selectActiveList);
   const filter = useStore((state) => selectActiveListFilter(state, id));
+  const setFilterValue = useStore((state) => state.setFilterValue);
+
   assert(
     isTypeFilterObject(filter),
     `TypeFilter instantiated with '${filter?.type}'`,
@@ -23,6 +30,13 @@ export function TypeFilter({ id }: { id: number }) {
   const changes = selectMultiselectChanges(filter.value);
   const options = useStore(selectTypeOptions);
 
+  const handleApplyShortcut = useCallback(
+    (value: string[]) => {
+      setFilterValue(id, value);
+    },
+    [id, setFilterValue, filter.value],
+  );
+
   return (
     <MultiselectFilter
       changes={changes}
@@ -34,6 +48,25 @@ export function TypeFilter({ id }: { id: number }) {
       placeholder="Select type(s)..."
       title="Type"
       value={filter.value}
-    />
+    >
+      {!filter.open && activeList?.cardType === "player" && (
+        <ToggleGroup
+          full
+          type="multiple"
+          onValueChange={handleApplyShortcut}
+          value={filter.value}
+        >
+          <ToggleGroupItem value="asset" size="small-type">
+            Asset
+          </ToggleGroupItem>
+          <ToggleGroupItem value="event" size="small-type">
+            Event
+          </ToggleGroupItem>
+          <ToggleGroupItem value="skill" size="small-type">
+            Skill
+          </ToggleGroupItem>
+        </ToggleGroup>
+      )}
+    </MultiselectFilter>
   );
 }
diff --git a/src/components/ui/toggle-group.module.css b/src/components/ui/toggle-group.module.css
index dcf09ed8..544da99b 100644
--- a/src/components/ui/toggle-group.module.css
+++ b/src/components/ui/toggle-group.module.css
@@ -72,6 +72,12 @@
   &:hover:not([data-state="on"]),
   &:active:not([data-state="on"]),
   &:focus-visible:not([data-state="on"]) {
-    background: var(--nord-2);
+    background: var(--nord-1);
+  }
+
+  &:hover[data-state="on"],
+  &:active[data-state="on"],
+  &:focus-visible[data-state="on"] {
+    background: var(--nord-3);
   }
 }
diff --git a/src/pages/deck-view/deck-view.module.css b/src/pages/deck-view/deck-view.module.css
index 75fa9e98..5d0d2328 100644
--- a/src/pages/deck-view/deck-view.module.css
+++ b/src/pages/deck-view/deck-view.module.css
@@ -3,7 +3,7 @@
   row-gap: 1rem;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: min-content min-content min-content min-content;
+  grid-template-rows: min-content min-content min-content;
   grid-template-areas:
     "header"
     "sidebar"
@@ -16,7 +16,7 @@
     grid-template-areas:
       "sidebar header"
       "sidebar decklist";
-    grid-template-rows: min-content min-content 1fr;
+    grid-template-rows: min-content 1fr;
   }
 }
 
diff --git a/src/store/slices/lists.ts b/src/store/slices/lists.ts
index eb8edd2a..a87f4bdc 100644
--- a/src/store/slices/lists.ts
+++ b/src/store/slices/lists.ts
@@ -539,12 +539,12 @@ export function makePlayerCardsList(
 ): List {
   const filters: FilterKey[] = [
     "faction",
+    "type",
+    "level",
     "ownership",
     "investigator",
-    "level",
     "cost",
     "trait",
-    "type",
     "subtype",
     "asset",
     "skillIcons",
@@ -593,10 +593,10 @@ export function makeEncounterCardsList(
 ): List {
   const filters: FilterKey[] = [
     "faction",
+    "type",
     "ownership",
     "cost",
     "trait",
-    "type",
     "subtype",
     "asset",
     "skillIcons",