feat: add filter shortcut for types

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}

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>
   );
 }

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);
   }
 }

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;
   }
 }
 

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",