feat(costumes): filter by limited, collab, and story, improve filters ui

NieR-Rein-Guide · Feb 1, 2023 · b05abdb · b05abdb
1 parent 9feb20d
commit b05abdb
Show file tree

Hide file tree

Showing 9 changed files with 1,063 additions and 331 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@mui/material": "^5.10.1",
     "@mui/x-date-pickers": "^5.0.0-beta.6",
     "@prisma/client": "^4.9.0",
+    "@radix-ui/react-popover": "^1.0.3",
     "@reach/accordion": "^0.16.1",
     "@reach/dialog": "^0.16.0",
     "@reach/disclosure": "^0.16.0",

diff --git a/public/icons/lunar-tear.png b/public/icons/lunar-tear.png
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx
@@ -64,6 +64,7 @@ import Element from "./Element";
 import getCostumeLevelsByRarity from "@utils/getCostumeLevelsByRarity";
 import switchImg from "../../public/icons/switch.png";
 import { chaptersIcons } from "@utils/chaptersIcons";
+import { LimitedCostume } from "./LimitedCostume";
 
 const ModelWithNoSSR = dynamic(() => import("@components/Model"), {
   ssr: false,
@@ -232,32 +233,7 @@ function CostumeDetails({
               </div>
               <span className="uppercase text-beige">{costume.title}</span>
               {costume.link.is_limited && (
-                <Tooltip
-                  title={
-                    <div className="flex flex-col text-center">
-                      <a
-                        href="#sources"
-                        className="text-blue-300 underline-dotted"
-                      >
-                        Obtainable from {costume.sources.length} source
-                        {costume.sources.length > 1 ? "s" : ""}
-                      </a>
-
-                      <img
-                        loading="lazy"
-                        className="h-16 object-contain"
-                        src="/images/yudilbroke.webp"
-                        alt="Yudil broke"
-                      />
-                    </div>
-                  }
-                >
-                  <div className="inline-flex rounded-full bg-white bg-opacity-10 px-2 py-1 cursor-help">
-                    <p className="font-display text-lg font-semibold text-rarity-4 leading-none">
-                      Limited costume
-                    </p>
-                  </div>
-                </Tooltip>
+                <LimitedCostume isLogoOnly events={costume.link.events} />
               )}
               {costume.link.is_collab && (
                 <div className="inline-flex rounded-full bg-white bg-opacity-10 px-2 py-1">

diff --git a/src/components/DatabaseNavbar.tsx b/src/components/DatabaseNavbar.tsx
@@ -1,6 +1,7 @@
 import { useSettingsStore } from "@store/settings";
 import { useRouter } from "next/router";
 import { MdFilterAlt, MdViewColumn, MdViewComfy } from "react-icons/md";
+import * as Popover from "@radix-ui/react-popover";
 
 import loadoutsIcon from "../../public/icons/loadout.png";
 import charactersIcon from "../../public/icons/characters.png";
@@ -12,8 +13,10 @@ import emblemsIcon from "../../public/icons/emblems.png";
 import storiesIcon from "../../public/icons/stories.png";
 import noticesIcon from "../../public/icons/notices.png";
 import eventsIcon from "../../public/icons/events.png";
-import { ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { Button, ToggleButton, ToggleButtonGroup } from "@mui/material";
 import Checkbox from "./form/Checkbox";
+import { FiFilter } from "react-icons/fi";
+import { useCostumesFilters } from "@store/costumes-filters";
 
 const SUPPORTED_MULTIPLE_DISPLAY = ["/characters", "/weapons"];
 
@@ -72,8 +75,10 @@ export const ITEMS = [
 
 export default function DatabaseNavbar({
   children,
+  middleChildren,
 }: {
-  children?: JSX.Element;
+  children?: JSX.Element[] | JSX.Element;
+  middleChildren?: JSX.Element[] | JSX.Element;
 }) {
   const router = useRouter();
   const databaseDisplayType = useSettingsStore(
@@ -86,6 +91,8 @@ export default function DatabaseNavbar({
   const setShowInventory = useSettingsStore((state) => state.setShowInventory);
   const order = useSettingsStore((state) => state.order);
   const setOrder = useSettingsStore((state) => state.setOrder);
+  const hasFilters = useCostumesFilters((state) => state.computed.hasFilters);
+  const activeCount = useCostumesFilters((state) => state.computed.activeCount);
 
   if (SUPPORTED_MULTIPLE_DISPLAY.includes(router.asPath)) {
     return (
@@ -98,6 +105,34 @@ export default function DatabaseNavbar({
               setState={(e) => setShowInventory(e.target.checked)}
             />
 
+            {children && (
+              <Popover.Root>
+                <Popover.Trigger asChild>
+                  <Button
+                    color={hasFilters ? "secondary" : "primary"}
+                    variant="outlined"
+                    component="label"
+                    startIcon={<FiFilter />}
+                  >
+                    <span>
+                      {hasFilters ? `${activeCount} filters applied` : "Filter"}
+                    </span>
+                  </Button>
+                </Popover.Trigger>
+                <Popover.Portal>
+                  <Popover.Content
+                    className="PopoverContent bg-grey-dark border border-beige border-opacity-50 p-4"
+                    sideOffset={5}
+                  >
+                    <div className="grid md:grid-cols-2 gap-2 max-w-xl">
+                      {children}
+                    </div>
+                    <Popover.Arrow className="PopoverArrow" />
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover.Root>
+            )}
+
             {databaseDisplayType !== "table" && (
               <Checkbox
                 label="Library view"
@@ -107,7 +142,7 @@ export default function DatabaseNavbar({
             )}
           </div>
 
-          {children}
+          {middleChildren}
 
           <ToggleButtonGroup
             value={databaseDisplayType}