.eslintignore

@@ -1,4 +1,5 @@
 src/graphql/generated.ts
+src/shared
 .eslintrc.js
 graphql-codegen.config.js
 next-env.d.ts

.ncurc.json

@@ -0,0 +1,4 @@
+{
+  "upgrade": false,
+  "reject": ["react-hotkeys-hook"]
+}

README.md

@@ -34,7 +34,7 @@
   - Support for arbitrary React Components and Component Props!
   - Autogenerated multi-level table of content and anchor links for the different headers
 - Styling: [Tailwind CSS](https://tailwindcss.com/)
-  - Support for [Material Icons](https://fonts.google.com/icons)
+  - Support for [Material Symbols](https://fonts.google.com/icons)
   - Support for creating any arbitrary theming mode by swapping CSS variables
   - Support for Container Queries (media queries at the element level)
   - The website has a three-column layout, which turns into one-column + 2 toggleable side-menus if the screen is too narrow.

package.json

@@ -17,8 +17,6 @@
     "prettier": "prettier --end-of-line auto --write ."
   },
   "dependencies": {
-    "@fontsource/material-icons": "^4.5.4",
-    "@fontsource/material-icons-outlined": "^4.5.4",
     "@fontsource/opendyslexic": "^4.5.4",
     "@fontsource/share-tech-mono": "^4.5.9",
     "@fontsource/vollkorn": "^4.5.12",
@@ -26,10 +24,13 @@
     "@tippyjs/react": "^4.2.6",
     "autoprefixer": "^10.4.13",
     "cuid": "^2.1.8",
-    "graphql-request": "^5.0.0",
-    "jotai": "^1.11.0",
-    "markdown-to-jsx": "^7.1.7",
-    "next": "^13.0.6",
+    "isomorphic-dompurify": "^0.25.0",
+    "jotai": "^1.12.1",
+    "markdown-to-jsx": "^7.1.8",
+    "marked": "^4.2.5",
+    "material-symbols": "^0.4.2",
+    "meilisearch": "^0.30.0",
+    "next": "^13.1.1",
     "nodemailer": "^6.8.0",
     "rc-slider": "^10.1.0",
     "react": "18.2.0",
@@ -42,35 +43,38 @@
     "tippy.js": "^6.3.7",
     "turndown": "^7.1.1",
     "ua-parser-js": "^1.0.32",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "zod": "^3.20.2"
   },
   "devDependencies": {
     "@digitak/esrun": "^3.2.15",
-    "@graphql-codegen/cli": "^2.15.0",
-    "@graphql-codegen/typescript": "2.8.3",
+    "@graphql-codegen/cli": "^2.16.3",
+    "@graphql-codegen/typescript": "2.8.7",
     "@graphql-codegen/typescript-graphql-request": "^4.5.8",
-    "@graphql-codegen/typescript-operations": "^2.5.8",
-    "@types/node": "18.11.10",
-    "@types/nodemailer": "^6.4.6",
-    "@types/react": "^18.0.22",
-    "@types/react-dom": "^18.0.9",
+    "@graphql-codegen/typescript-operations": "^2.5.12",
+    "@types/marked": "^4.0.8",
+    "@types/node": "18.11.18",
+    "@types/nodemailer": "^6.4.7",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/string-natural-compare": "^3.0.2",
     "@types/throttle-debounce": "^5.0.0",
     "@types/turndown": "^5.0.1",
     "@types/ua-parser-js": "^0.7.36",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
     "dotenv": "^16.0.3",
-    "eslint": "^8.29.0",
-    "eslint-config-next": "13.0.6",
+    "eslint": "^8.31.0",
+    "eslint-config-next": "13.1.1",
     "eslint-plugin-import": "^2.26.0",
     "graphql": "^16.6.0",
-    "next-sitemap": "^3.1.32",
-    "prettier": "^2.8.0",
-    "prettier-plugin-tailwindcss": "^0.2.0",
+    "graphql-request": "^5.1.0",
+    "next-sitemap": "^3.1.44",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "tailwindcss": "^3.2.4",
-    "ts-unused-exports": "^8.0.0",
-    "typescript": "^4.9.3"
+    "ts-unused-exports": "^9.0.1",
+    "typescript": "^4.9.4"
   },
   "overrides": {
     "react-zoom-pan-pinch": {

public/local-data/websiteInterfaces.json

@@ -185,7 +185,15 @@
           "double_page_view": "Double page view",
           "reset_all_options": "Reset all options",
           "reading_layout": "Reading layout",
-          "quality": "Quality"
+          "quality": "Quality",
+          "only_unavailable_videos": "Only unavailable videos",
+          "oldest": "Oldest",
+          "newest": "Newest",
+          "least_popular": "Least popular",
+          "most_popular": "Most popular",
+          "shortest": "Shortest",
+          "longest": "Longest",
+          "search": "Search"
         }
       },
       {
@@ -372,7 +380,15 @@
           "double_page_view": "Vue 2 pages",
           "reset_all_options": "Réinitialiser les options",
           "reading_layout": "Mode de lecture",
-          "quality": "Qualité"
+          "quality": "Qualité",
+          "only_unavailable_videos": "Seulement les vidéos indisponibles",
+          "oldest": "Plus anciennes",
+          "newest": "Plus récentes",
+          "least_popular": "Plus populaires",
+          "most_popular": "Moins populaires",
+          "shortest": "Plus courtes",
+          "longest": "Plus longues",
+          "search": "Rechercher"
         }
       },
       {
@@ -559,7 +575,15 @@
           "double_page_view": null,
           "reset_all_options": null,
           "reading_layout": null,
-          "quality": null
+          "quality": null,
+          "only_unavailable_videos": null,
+          "oldest": null,
+          "newest": null,
+          "least_popular": null,
+          "most_popular": null,
+          "shortest": null,
+          "longest": null,
+          "search": null
         }
       },
       {
@@ -746,7 +770,15 @@
           "double_page_view": null,
           "reset_all_options": null,
           "reading_layout": null,
-          "quality": null
+          "quality": null,
+          "only_unavailable_videos": null,
+          "oldest": null,
+          "newest": null,
+          "least_popular": null,
+          "most_popular": null,
+          "shortest": null,
+          "longest": null,
+          "search": null
         }
       },
       {
@@ -933,7 +965,15 @@
           "double_page_view": null,
           "reset_all_options": null,
           "reading_layout": null,
-          "quality": null
+          "quality": null,
+          "only_unavailable_videos": null,
+          "oldest": null,
+          "newest": null,
+          "least_popular": null,
+          "most_popular": null,
+          "shortest": null,
+          "longest": null,
+          "search": null
         }
       }
     ]

src/components/AnchorShare.tsx

@@ -1,4 +1,4 @@
-import { Ico, Icon } from "./Ico";
+import { Ico } from "./Ico";
 import { ToolTip } from "./ToolTip";
 import { cJoin } from "helpers/className";
 import { useAtomGetter } from "helpers/atoms";
@@ -22,8 +22,8 @@ export const AnchorShare = ({ id, className }: Props): JSX.Element => {
     <ToolTip content={langui.copy_anchor_link} trigger="mouseenter" className="text-sm">
       <ToolTip content={langui.anchor_link_copied} trigger="click" className="text-sm">
         <Ico
-          icon={Icon.Link}
-          className={cJoin("transition-color cursor-pointer hover:text-dark", className)}
+          icon="link"
+          className={cJoin("cursor-pointer transition-colors hover:text-dark", className)}
           onClick={() => {
             navigator.clipboard.writeText(
               `${process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname}#${id}`

src/components/AppLayout.tsx

@@ -1,7 +1,8 @@
 import Head from "next/head";
 import { useSwipeable } from "react-swipeable";
+import { MaterialSymbol } from "material-symbols";
 import { layout } from "../../design.config";
-import { Ico, Icon } from "./Ico";
+import { Ico } from "./Ico";
 import { MainPanel } from "./Panels/MainPanel";
 import { isDefined, isUndefined } from "helpers/asserts";
 import { cIf, cJoin } from "helpers/className";
@@ -28,7 +29,7 @@ export interface AppLayoutRequired {
 
 interface Props extends AppLayoutRequired {
   subPanel?: React.ReactNode;
-  subPanelIcon?: Icon;
+  subPanelIcon?: MaterialSymbol;
   contentPanel?: React.ReactNode;
   contentPanelScroolbar?: boolean;
 }
@@ -39,7 +40,7 @@ export const AppLayout = ({
   subPanel,
   contentPanel,
   openGraph,
-  subPanelIcon = Icon.Tune,
+  subPanelIcon = "tune",
   contentPanelScroolbar = true,
 }: Props): JSX.Element => {
   const isMainPanelReduced = useAtomGetter(atoms.layout.mainPanelReduced);
@@ -148,10 +149,7 @@ export const AppLayout = ({
         {isDefined(contentPanel) ? (
           contentPanel
         ) : (
-          <ContentPlaceholder
-            message={langui.select_option_sidebar ?? ""}
-            icon={Icon.ChevronLeft}
-          />
+          <ContentPlaceholder message={langui.select_option_sidebar ?? ""} icon={"chevron_left"} />
         )}
       </div>
 
@@ -195,7 +193,7 @@ export const AppLayout = ({
           cIf(!is1ColumnLayout, "hidden")
         )}>
         <Ico
-          icon={isMainPanelOpened ? Icon.Close : Icon.Menu}
+          icon={isMainPanelOpened ? "close" : "menu"}
           className="cursor-pointer !text-2xl"
           onClick={() => {
             setMainPanelOpened((current) => !current);
@@ -213,7 +211,7 @@ export const AppLayout = ({
         </p>
         {isDefined(subPanel) && !turnSubIntoContent && (
           <Ico
-            icon={isSubPanelOpened ? Icon.Close : subPanelIcon}
+            icon={isSubPanelOpened ? "close" : subPanelIcon}
             className="cursor-pointer !text-2xl"
             onClick={() => {
               setSubPanelOpened((current) => !current);
@@ -230,7 +228,7 @@ export const AppLayout = ({
 
 interface ContentPlaceholderProps {
   message: string;
-  icon?: Icon;
+  icon?: MaterialSymbol;
 }
 
 const ContentPlaceholder = ({ message, icon }: ContentPlaceholderProps): JSX.Element => (

src/components/Chronicles/ChroniclesList.tsx

@@ -4,7 +4,7 @@ import { TranslatedChroniclePreview } from "./ChroniclePreview";
 import { GetChroniclesChaptersQuery } from "graphql/generated";
 import { filterHasAttributes } from "helpers/asserts";
 import { prettyInlineTitle, prettySlug, sJoin } from "helpers/formatters";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { compareDate } from "helpers/date";
 import { TranslatedProps } from "types/TranslatedProps";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
@@ -33,7 +33,7 @@ const ChroniclesList = ({ chronicles, currentSlug, title }: Props): JSX.Element
     <div>
       <div className="grid place-content-center">
         <div className="grid cursor-pointer grid-cols-[1em_1fr] gap-4" onClick={toggleOpen}>
-          <Ico className="!text-xl" icon={isOpen ? Icon.ArrowDropUp : Icon.ArrowDropDown} />
+          <Ico className="!text-xl" icon={isOpen ? "arrow_drop_up" : "arrow_drop_down"} />
           <p className="mb-4 font-headers text-xl">{title}</p>
         </div>
       </div>

src/components/Containers/Paginator.tsx

@@ -0,0 +1,63 @@
+import { Ico } from "components/Ico";
+import { PageSelector } from "components/Inputs/PageSelector";
+import { atoms } from "contexts/atoms";
+import { isUndefined } from "helpers/asserts";
+import { useAtomGetter } from "helpers/atoms";
+import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
+import { Ids } from "types/ids";
+
+interface Props {
+  page: number;
+  onPageChange: (newPage: number) => void;
+  totalNumberOfPages: number | null | undefined;
+  children: React.ReactNode;
+}
+
+export const Paginator = ({
+  page,
+  onPageChange,
+  totalNumberOfPages,
+  children,
+}: Props): JSX.Element => {
+  useScrollTopOnChange(Ids.ContentPanel, [page]);
+  if (totalNumberOfPages === 0) return <DefaultRenderWhenEmpty />;
+  if (isUndefined(totalNumberOfPages) || totalNumberOfPages < 2) return <>{children}</>;
+  return (
+    <>
+      <PageSelector
+        page={page}
+        onChange={onPageChange}
+        pagesCount={totalNumberOfPages}
+        className="mb-12"
+      />
+      {children}
+      <PageSelector
+        page={page}
+        onChange={onPageChange}
+        pagesCount={totalNumberOfPages}
+        className="mt-12"
+      />
+    </>
+  );
+};
+
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  PRIVATE COMPONENTS  ╰──────────────────────────────────────
+ */
+
+const DefaultRenderWhenEmpty = () => {
+  const is3ColumnsLayout = useAtomGetter(atoms.containerQueries.is3ColumnsLayout);
+  const langui = useAtomGetter(atoms.localData.langui);
+  return (
+    <div className="grid h-full place-content-center">
+      <div
+        className="grid grid-flow-col place-items-center gap-9 rounded-2xl border-2 border-dotted
+        border-dark p-8 text-dark opacity-40">
+        {is3ColumnsLayout && <Ico icon="chevron_left" className="!text-[300%]" />}
+        <p className="max-w-xs text-2xl">{langui.no_results_message}</p>
+        {!is3ColumnsLayout && <Ico icon="chevron_right" className="!text-[300%]" />}
+      </div>
+    </div>
+  );
+};

src/components/Containers/Popup.tsx

@@ -3,6 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { cIf, cJoin } from "helpers/className";
 import { atoms } from "contexts/atoms";
 import { useAtomSetter } from "helpers/atoms";
+import { Button } from "components/Inputs/Button";
 
 /*
  *                                        ╭─────────────╮
@@ -16,6 +17,7 @@ interface Props {
   fillViewport?: boolean;
   hideBackground?: boolean;
   padding?: boolean;
+  withCloseButton?: boolean;
 }
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
@@ -27,10 +29,11 @@ export const Popup = ({
   fillViewport,
   hideBackground = false,
   padding = true,
+  withCloseButton = true,
 }: Props): JSX.Element => {
   const setMenuGesturesEnabled = useAtomSetter(atoms.layout.menuGesturesEnabled);
 
-  useHotkeys("escape", () => onCloseRequest?.(), {}, [onCloseRequest]);
+  useHotkeys("escape", () => onCloseRequest?.(), { enabled: isVisible }, [onCloseRequest]);
 
   useEffect(() => {
     setMenuGesturesEnabled(!isVisible);
@@ -55,9 +58,18 @@ export const Popup = ({
           "grid place-items-center gap-4 transition-transform",
           cIf(padding, "p-10"),
           cIf(isVisible, "scale-100", "scale-0"),
-          cIf(fillViewport, "absolute inset-10", "relative max-h-[80vh] overflow-y-auto"),
+          cIf(
+            fillViewport,
+            "absolute inset-10 content-start overflow-scroll",
+            "relative max-h-[80vh] overflow-y-auto"
+          ),
           cIf(!hideBackground, "rounded-lg bg-light shadow-2xl shadow-shade")
         )}>
+        {withCloseButton && (
+          <div className="absolute right-6 top-6">
+            <Button icon="close" onClick={onCloseRequest} />
+          </div>
+        )}
         {children}
       </div>
     </div>

src/components/Inputs/Button.tsx

@@ -1,6 +1,7 @@
 import { MouseEventHandler, useCallback } from "react";
+import { MaterialSymbol } from "material-symbols";
 import { Link } from "./Link";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/asserts";
 import { TranslatedProps } from "types/TranslatedProps";
@@ -16,7 +17,7 @@ interface Props {
   className?: string;
   href?: string;
   active?: boolean;
-  icon?: Icon;
+  icon?: MaterialSymbol;
   text?: string | null | undefined;
   alwaysNewTab?: boolean;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -34,7 +35,7 @@ export const Button = ({
   id,
   onClick,
   onMouseUp,
-  active,
+  active = false,
   className,
   icon,
   text,
@@ -81,7 +82,13 @@ export const Button = ({
           </div>
         )}
         {isDefinedAndNotEmpty(icon) && (
-          <Ico className="[font-size:150%] [line-height:0.66]" icon={icon} />
+          <Ico
+            className="[font-size:150%] [line-height:0.66]"
+            icon={icon}
+            isFilled={active}
+            opticalSize={size === "normal" ? 24 : 20}
+            weight={size === "normal" ? 500 : 800}
+          />
         )}
         {isDefinedAndNotEmpty(text) && <p className="-translate-y-[0.05em] text-center">{text}</p>}
       </div>

src/components/Inputs/LanguageSwitcher.tsx

@@ -1,7 +1,6 @@
 import { Fragment } from "react";
 import { ToolTip } from "../ToolTip";
 import { Button } from "./Button";
-import { Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
 import { prettyLanguage } from "helpers/formatters";
 import { iterateMap } from "helpers/others";
@@ -54,7 +53,7 @@ export const LanguageSwitcher = ({
       }>
       <Button
         badgeNumber={showBadge && locales.size > 1 ? locales.size : undefined}
-        icon={Icon.Translate}
+        icon="translate"
         size={size}
       />
     </ToolTip>

src/components/Inputs/OrderableList.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useCallback } from "react";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { arrayMove } from "helpers/others";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
 
@@ -71,7 +71,7 @@ export const OrderableList = ({ onChange, items, insertLabels }: Props): JSX.Ele
             <div className="grid grid-rows-[.8em_.8em] place-items-center">
               {index > 0 && (
                 <Ico
-                  icon={Icon.ArrowDropUp}
+                  icon="arrow_drop_up"
                   className="row-start-1 cursor-pointer"
                   onClick={() => {
                     updateOrder(index, index - 1);
@@ -80,7 +80,7 @@ export const OrderableList = ({ onChange, items, insertLabels }: Props): JSX.Ele
               )}
               {index < items.length - 1 && (
                 <Ico
-                  icon={Icon.ArrowDropDown}
+                  icon="arrow_drop_down"
                   className="row-start-2 cursor-pointer"
                   onClick={() => {
                     updateOrder(index, index + 1);

src/components/Inputs/PageSelector.tsx

@@ -1,5 +1,4 @@
 import { ButtonGroup } from "./ButtonGroup";
-import { Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
 
 /*
@@ -21,25 +20,25 @@ export const PageSelector = ({ page, className, pagesCount, onChange }: Props):
     className={cJoin("flex flex-row place-content-center", className)}
     buttonsProps={[
       {
-        onClick: () => onChange(0),
-        disabled: page === 0,
-        icon: Icon.FirstPage,
+        onClick: () => onChange(1),
+        disabled: page === 1,
+        icon: "first_page",
       },
       {
-        onClick: () => page > 0 && onChange(page - 1),
-        disabled: page === 0,
-        icon: Icon.NavigateBefore,
+        onClick: () => page > 1 && onChange(page - 1),
+        disabled: page === 1,
+        icon: "navigate_before",
       },
-      { text: `${page + 1} / ${pagesCount}` },
+      { text: `${page} / ${pagesCount}` },
       {
-        onClick: () => page < pagesCount - 1 && onChange(page + 1),
-        disabled: page === pagesCount - 1,
-        icon: Icon.NavigateNext,
+        onClick: () => page < pagesCount && onChange(page + 1),
+        disabled: page === pagesCount,
+        icon: "navigate_next",
       },
       {
-        onClick: () => onChange(pagesCount - 1),
-        disabled: page === pagesCount - 1,
-        icon: Icon.LastPage,
+        onClick: () => onChange(pagesCount),
+        disabled: page === pagesCount,
+        icon: "last_page",
       },
     ]}
   />

src/components/Inputs/Select.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useCallback, useRef } from "react";
 import { useBoolean, useOnClickOutside } from "usehooks-ts";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 
 /*
@@ -72,12 +72,12 @@ export const Select = ({
         </p>
         {value >= 0 && allowEmpty && (
           <Ico
-            icon={Icon.Close}
+            icon="close"
             className="!text-xs"
             onClick={() => !disabled && onSelectionChanged(-1)}
           />
         )}
-        <Ico onClick={tryToggling} icon={isOpened ? Icon.ArrowDropUp : Icon.ArrowDropDown} />
+        <Ico onClick={tryToggling} icon={isOpened ? "arrow_drop_up" : "arrow_drop_down"} />
       </div>
       <div className={cJoin("left-0 right-0 rounded-b-[1em]", cIf(isOpened, "absolute", "hidden"))}>
         {options.map((option, index) => (

src/components/Inputs/TextInput.tsx

@@ -1,4 +1,4 @@
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
 
@@ -12,7 +12,7 @@ interface Props {
   onChange: (newValue: string) => void;
   className?: string;
   name?: string;
-  placeholder?: string;
+  placeholder?: string | null;
   disabled?: boolean;
 }
 
@@ -33,7 +33,7 @@ export const TextInput = ({
       name={name}
       value={value}
       disabled={disabled}
-      placeholder={placeholder}
+      placeholder={placeholder ?? undefined}
       onChange={(event) => {
         onChange(event.target.value);
       }}
@@ -42,7 +42,7 @@ export const TextInput = ({
       <div className="absolute right-4 top-0 bottom-0 grid place-items-center">
         <Ico
           className={cJoin("!text-xs", cIf(disabled, "opacity-30 grayscale", "cursor-pointer"))}
-          icon={Icon.Close}
+          icon="close"
           onClick={() => !disabled && onChange("")}
         />
       </div>

src/components/Library/PreviewCardCTAs.tsx

@@ -1,4 +1,3 @@
-import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { ToolTip } from "components/ToolTip";
 import { LibraryItemUserStatus } from "types/types";
@@ -31,7 +30,7 @@ export const PreviewCardCTAs = ({ id, expand = false }: Props): JSX.Element => {
       )}>
       <ToolTip content={langui.want_it} disabled={expand}>
         <Button
-          icon={Icon.Favorite}
+          icon="favorite"
           text={expand ? langui.want_it : undefined}
           active={libraryItemUserStatus[id] === LibraryItemUserStatus.Want}
           onClick={(event) => {
@@ -49,7 +48,7 @@ export const PreviewCardCTAs = ({ id, expand = false }: Props): JSX.Element => {
       </ToolTip>
       <ToolTip content={langui.have_it} disabled={expand}>
         <Button
-          icon={Icon.BackHand}
+          icon="back_hand"
           text={expand ? langui.have_it : undefined}
           active={libraryItemUserStatus[id] === LibraryItemUserStatus.Have}
           onClick={(event) => {

src/components/LightBox.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Img } from "./Img";
 import { Button } from "./Inputs/Button";
-import { Icon } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { useFullscreen } from "hooks/useFullscreen";
 import { Ids } from "types/ids";
@@ -142,24 +141,17 @@ const ControlButtons = ({
   const is1ColumnLayout = useAtomGetter(atoms.containerQueries.is1ColumnLayout);
 
   const PreviousButton = () => (
-    <Button
-      icon={Icon.NavigateBefore}
-      onClick={onPressPrevious}
-      disabled={!isPreviousImageAvailable}
-    />
+    <Button icon="navigate_before" onClick={onPressPrevious} disabled={!isPreviousImageAvailable} />
   );
   const NextButton = () => (
-    <Button icon={Icon.NavigateNext} onClick={onPressNext} disabled={!isNextImageAvailable} />
+    <Button icon="navigate_next" onClick={onPressNext} disabled={!isNextImageAvailable} />
   );
 
   const FullscreenButton = () => (
-    <Button
-      icon={isFullscreen ? Icon.FullscreenExit : Icon.Fullscreen}
-      onClick={toggleFullscreen}
-    />
+    <Button icon={isFullscreen ? "fullscreen_exit" : "fullscreen"} onClick={toggleFullscreen} />
   );
 
-  const CloseButton = () => <Button onClick={onCloseRequest} icon={Icon.Close} />;
+  const CloseButton = () => <Button onClick={onCloseRequest} icon="close" />;
 
   return is1ColumnLayout ? (
     <>

src/components/Markdown/Markdawn.tsx

@@ -10,7 +10,7 @@ import { getAssetURL, ImageQuality } from "helpers/img";
 import { isDefined, isDefinedAndNotEmpty, isUndefined } from "helpers/asserts";
 import { AnchorShare } from "components/AnchorShare";
 import { useIntersectionList } from "hooks/useIntersectionList";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
@@ -268,9 +268,9 @@ const Header = ({ level, title, slug }: HeaderProps): JSX.Element => {
       <div className="ml-10 flex place-items-center gap-4">
         {title === "* * *" ? (
           <div className="mt-8 mb-12 space-x-3 text-dark">
-            <Ico icon={Icon.Emergency} />
-            <Ico icon={Icon.Emergency} />
-            <Ico icon={Icon.Emergency} />
+            <Ico icon="emergency" />
+            <Ico icon="emergency" />
+            <Ico icon="emergency" />
           </div>
         ) : (
           <div className="font-headers">{title}</div>

src/components/Markdown/Markdown.tsx

@@ -0,0 +1,21 @@
+import DOMPurify from "isomorphic-dompurify";
+import { marked } from "marked";
+
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
+interface MarkdownProps {
+  className?: string;
+  text: string;
+}
+
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
+export const Markdown = ({ className, text }: MarkdownProps): JSX.Element => (
+  <div
+    className={className}
+    dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked(text)) }}
+  />
+);

src/components/PanelComponents/NavOption.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import { MouseEventHandler, useCallback } from "react";
-import { Ico, Icon } from "components/Ico";
+import { MaterialSymbol } from "material-symbols";
+import { Ico } from "components/Ico";
 import { ToolTip } from "components/ToolTip";
 import { cIf, cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
@@ -15,7 +16,7 @@ import { DownPressable } from "components/Containers/DownPressable";
 
 interface Props {
   url: string;
-  icon?: Icon;
+  icon?: MaterialSymbol;
   title: string | null | undefined;
   subtitle?: string | null | undefined;
   border?: boolean;

src/components/PanelComponents/PanelHeader.tsx

@@ -1,4 +1,5 @@
-import { Ico, Icon } from "components/Ico";
+import { MaterialSymbol } from "material-symbols";
+import { Ico } from "components/Ico";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
 
 /*
@@ -7,7 +8,7 @@ import { isDefinedAndNotEmpty } from "helpers/asserts";
  */
 
 interface Props {
-  icon?: Icon;
+  icon?: MaterialSymbol;
   title: string | null | undefined;
   description?: string | null | undefined;
 }

src/components/PanelComponents/ReturnButton.tsx

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { TranslatedProps } from "types/TranslatedProps";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
@@ -32,7 +31,7 @@ export const ReturnButton = ({ href, title, displayOnlyOn, className }: Props):
         (!is3ColumnsLayout && displayOnlyOn === "1ColumnLayout") ||
         isUndefined(displayOnlyOn)) && (
         <div className={className}>
-          <Button href={href} text={`${langui.return_to} ${title}`} icon={Icon.NavigateBefore} />
+          <Button href={href} text={`${langui.return_to} ${title}`} icon="navigate_before" />
         </div>
       )}
     </>

src/components/Panels/MainPanel.tsx

@@ -2,7 +2,6 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { Button } from "components/Inputs/Button";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { ToolTip } from "components/ToolTip";
-import { Icon } from "components/Ico";
 import { cIf, cJoin } from "helpers/className";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
 import { Link } from "components/Inputs/Link";
@@ -22,6 +21,7 @@ export const MainPanel = (): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const [isMainPanelReduced, setMainPanelReduced] = useAtomPair(atoms.layout.mainPanelReduced);
   const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);
+  const setSearchOpened = useAtomSetter(atoms.layout.searchOpened);
 
   return (
     <div
@@ -46,7 +46,7 @@ export const MainPanel = (): JSX.Element => {
               setMainPanelReduced((current) => !current);
             }}
             className="z-50 bg-light !px-2"
-            icon={isMainPanelReduced ? Icon.ChevronRight : Icon.ChevronLeft}
+            icon={isMainPanelReduced ? "chevron_right" : "chevron_left"}
           />
         </div>
       )}
@@ -73,15 +73,24 @@ export const MainPanel = (): JSX.Element => {
             )}>
             <ToolTip
               content={<h3 className="text-2xl">{langui.open_settings}</h3>}
-              placement="right"
-              className="text-left"
-              disabled={!isMainPanelReduced}>
+              placement={isMainPanelReduced ? "right" : "top"}>
               <Button
                 onClick={() => {
                   setSettingsOpened(true);
                   sendAnalytics("Settings", "Open settings");
                 }}
-                icon={Icon.Settings}
+                icon="discover_tune"
+              />
+            </ToolTip>
+            <ToolTip
+              content={<h3 className="text-2xl">{langui.open_search}</h3>}
+              placement={isMainPanelReduced ? "right" : "top"}>
+              <Button
+                onClick={() => {
+                  setSearchOpened(true);
+                  sendAnalytics("Search", "Open search");
+                }}
+                icon="search"
               />
             </ToolTip>
           </div>
@@ -92,7 +101,7 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="/library"
-        icon={Icon.LibraryBooks}
+        icon="auto_stories"
         title={langui.library}
         subtitle={langui.library_short_description}
         reduced={isMainPanelReduced && is3ColumnsLayout}
@@ -100,7 +109,7 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="/contents"
-        icon={Icon.Workspaces}
+        icon="workspaces"
         title={langui.contents}
         subtitle={langui.contents_short_description}
         reduced={isMainPanelReduced && is3ColumnsLayout}
@@ -108,7 +117,7 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="/wiki"
-        icon={Icon.TravelExplore}
+        icon="travel_explore"
         title={langui.wiki}
         subtitle={langui.wiki_short_description}
         reduced={isMainPanelReduced && is3ColumnsLayout}
@@ -116,7 +125,7 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="/chronicles"
-        icon={Icon.WatchLater}
+        icon="schedule"
         title={langui.chronicles}
         subtitle={langui.chronicles_short_description}
         reduced={isMainPanelReduced && is3ColumnsLayout}
@@ -126,7 +135,7 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="/news"
-        icon={Icon.Feed}
+        icon="newspaper"
         title={langui.news}
         reduced={isMainPanelReduced && is3ColumnsLayout}
       />
@@ -134,7 +143,7 @@ export const MainPanel = (): JSX.Element => {
       {/*
       <NavOption
         url="/merch"
-        icon={Icon.Store}
+        icon="store"
         title={langui.merch}
         reduced={isMainPanelReduced && is3ColumnsLayout}
       />
@@ -142,21 +151,21 @@ export const MainPanel = (): JSX.Element => {
 
       <NavOption
         url="https://gallery.accords-library.com/posts/"
-        icon={Icon.Collections}
+        icon="perm_media"
         title={langui.gallery}
         reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
         url="/archives"
-        icon={Icon.Inventory2}
+        icon="save"
         title={langui.archives}
         reduced={isMainPanelReduced && is3ColumnsLayout}
       />
 
       <NavOption
         url="/about-us"
-        icon={Icon.Info}
+        icon="info"
         title={langui.about_us}
         reduced={isMainPanelReduced && is3ColumnsLayout}
       />

src/components/Panels/SearchPopup.tsx

@@ -0,0 +1,449 @@
+import { useEffect, useState } from "react";
+import { MaterialSymbol } from "material-symbols";
+import { Popup } from "components/Containers/Popup";
+import { sendAnalytics } from "helpers/analytics";
+import { atoms } from "contexts/atoms";
+import { useAtomPair, useAtomGetter } from "helpers/atoms";
+import { TextInput } from "components/Inputs/TextInput";
+import { containsHighlight, CustomSearchResponse, meiliSearch } from "helpers/search";
+import { PreviewCard, TranslatedPreviewCard } from "components/PreviewCard";
+import { filterDefined, filterHasAttributes, isDefined } from "helpers/asserts";
+import {
+  MeiliContent,
+  MeiliIndices,
+  MeiliLibraryItem,
+  MeiliPost,
+  MeiliVideo,
+  MeiliWikiPage,
+} from "shared/meilisearch-graphql-typings/meiliTypes";
+import { getVideoThumbnailURL } from "helpers/videos";
+import { UpPressable } from "components/Containers/UpPressable";
+import { prettyItemSubType, prettySlug } from "helpers/formatters";
+import { Ico } from "components/Ico";
+
+/*
+ *                                         ╭─────────────╮
+ * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
+ */
+
+const SEARCH_LIMIT = 8;
+
+/*
+ *                                         ╭─────────────╮
+ * ────────────────────────────────────────╯  COMPONENT  ╰──────────────────────────────────────────
+ */
+
+export const SearchPopup = (): JSX.Element => {
+  const [isSearchOpened, setSearchOpened] = useAtomPair(atoms.layout.searchOpened);
+  const [query, setQuery] = useState("");
+  const langui = useAtomGetter(atoms.localData.langui);
+  const [libraryItems, setLibraryItems] = useState<CustomSearchResponse<MeiliLibraryItem>>();
+  const [contents, setContents] = useState<CustomSearchResponse<MeiliContent>>();
+  const [videos, setVideos] = useState<CustomSearchResponse<MeiliVideo>>();
+  const [posts, setPosts] = useState<CustomSearchResponse<MeiliPost>>();
+  const [wikiPages, setWikiPages] = useState<CustomSearchResponse<MeiliWikiPage>>();
+
+  useEffect(() => {
+    const fetchLibraryItems = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.LIBRARY_ITEM, query, {
+        limit: SEARCH_LIMIT,
+        attributesToRetrieve: [
+          "title",
+          "subtitle",
+          "descriptions",
+          "id",
+          "slug",
+          "thumbnail",
+          "release_date",
+          "price",
+          "categories",
+          "metadata",
+        ],
+        attributesToHighlight: ["title", "subtitle", "descriptions"],
+        attributesToCrop: ["descriptions"],
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("descriptions"))) {
+          item._formatted.descriptions = filterDefined(item._formatted.descriptions).filter(
+            (description) => containsHighlight(JSON.stringify(description))
+          );
+        }
+        return item;
+      });
+      setLibraryItems(searchResult);
+    };
+
+    const fetchContents = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.CONTENT, query, {
+        limit: SEARCH_LIMIT,
+        attributesToRetrieve: ["translations", "id", "slug", "categories", "type", "thumbnail"],
+        attributesToHighlight: ["translations"],
+        attributesToCrop: ["translations.displayable_description"],
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) {
+          item._formatted.translations = filterDefined(item._formatted.translations).filter(
+            (translation) => containsHighlight(JSON.stringify(translation))
+          );
+        }
+        return item;
+      });
+      setContents(searchResult);
+    };
+
+    const fetchVideos = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.VIDEOS, query, {
+        limit: SEARCH_LIMIT,
+        attributesToRetrieve: [
+          "title",
+          "channel",
+          "uid",
+          "published_date",
+          "views",
+          "duration",
+          "description",
+        ],
+        attributesToHighlight: ["title", "channel", "description"],
+        attributesToCrop: ["description"],
+      });
+      setVideos(searchResult);
+    };
+
+    const fetchPosts = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.POST, query, {
+        limit: SEARCH_LIMIT,
+        attributesToRetrieve: ["translations", "thumbnail", "slug", "date", "categories"],
+        attributesToHighlight: ["translations.title", "translations.excerpt", "translations.body"],
+        attributesToCrop: ["translations.body"],
+        filter: ["hidden = false"],
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) {
+          item._formatted.translations = filterDefined(item._formatted.translations).filter(
+            (translation) => JSON.stringify(translation).includes("</mark>")
+          );
+        }
+        return item;
+      });
+      setPosts(searchResult);
+    };
+
+    const fetchWikiPages = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.WIKI_PAGE, query, {
+        limit: SEARCH_LIMIT,
+        attributesToHighlight: [
+          "translations.title",
+          "translations.aliases",
+          "translations.summary",
+          "translations.displayable_description",
+        ],
+        attributesToCrop: ["translations.displayable_description"],
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (
+          Object.keys(item._matchesPosition).filter((match) => match.startsWith("translations"))
+            .length > 0
+        ) {
+          item._formatted.translations = filterDefined(item._formatted.translations).filter(
+            (translation) => JSON.stringify(translation).includes("</mark>")
+          );
+        }
+        return item;
+      });
+      setWikiPages(searchResult);
+    };
+
+    if (query === "") {
+      setWikiPages(undefined);
+      setLibraryItems(undefined);
+      setContents(undefined);
+      setVideos(undefined);
+      setPosts(undefined);
+    } else {
+      fetchWikiPages();
+      fetchLibraryItems();
+      fetchContents();
+      fetchVideos();
+      fetchPosts();
+    }
+  }, [query]);
+
+  return (
+    <Popup
+      isVisible={isSearchOpened}
+      onCloseRequest={() => {
+        setSearchOpened(false);
+        sendAnalytics("Search", "Close search");
+      }}
+      fillViewport>
+      <h2 className="inline-flex place-items-center gap-2 text-2xl">
+        <Ico icon="search" isFilled />
+        {langui.search}
+      </h2>
+      <TextInput onChange={setQuery} value={query} placeholder={langui.search_title} />
+
+      <div className="flex w-full flex-wrap gap-12 gap-x-16">
+        {isDefined(libraryItems) && (
+          <SearchResultSection
+            title={langui.library}
+            icon="auto_stories"
+            href={`/library?page=1&query=${query}\
+&sort=0&primary=true&secondary=true&subitems=true&status=all`}
+            totalHits={libraryItems.estimatedTotalHits}>
+            <div className="flex flex-wrap items-start gap-x-6 gap-y-8">
+              {libraryItems.hits.map((item) => (
+                <TranslatedPreviewCard
+                  key={item.id}
+                  className="w-56"
+                  href={`/library/${item.slug}`}
+                  translations={filterHasAttributes(item._formatted.descriptions, [
+                    "language.data.attributes.code",
+                  ] as const).map((translation) => ({
+                    language: translation.language.data.attributes.code,
+                    title: item.title,
+                    subtitle: item.subtitle,
+                    description: containsHighlight(translation.description)
+                      ? translation.description
+                      : undefined,
+                  }))}
+                  fallback={{ title: item._formatted.title, subtitle: item._formatted.subtitle }}
+                  thumbnail={item.thumbnail?.data?.attributes}
+                  thumbnailAspectRatio="21/29.7"
+                  thumbnailRounded={false}
+                  keepInfoVisible
+                  topChips={
+                    item.metadata && item.metadata.length > 0 && item.metadata[0]
+                      ? [prettyItemSubType(item.metadata[0])]
+                      : []
+                  }
+                  bottomChips={item.categories?.data.map(
+                    (category) => category.attributes?.short ?? ""
+                  )}
+                  metadata={{
+                    releaseDate: item.release_date,
+                    price: item.price,
+                    position: "Bottom",
+                  }}
+                />
+              ))}
+            </div>
+          </SearchResultSection>
+        )}
+
+        {isDefined(contents) && (
+          <SearchResultSection
+            title={langui.contents}
+            icon="workspaces"
+            href={`/contents/all?page=1&query=${query}&sort=0`}
+            totalHits={contents.estimatedTotalHits}>
+            <div className="flex flex-wrap items-start gap-x-6 gap-y-8">
+              {contents.hits.map((item) => (
+                <TranslatedPreviewCard
+                  key={item.id}
+                  className="w-56"
+                  href={`/contents/${item.slug}`}
+                  translations={filterHasAttributes(item._formatted.translations, [
+                    "language.data.attributes.code",
+                  ] as const).map(({ displayable_description, language, ...otherAttributes }) => ({
+                    ...otherAttributes,
+                    description: containsHighlight(displayable_description)
+                      ? displayable_description
+                      : undefined,
+                    language: language.data.attributes.code,
+                  }))}
+                  fallback={{ title: prettySlug(item.slug) }}
+                  thumbnail={item.thumbnail?.data?.attributes}
+                  thumbnailAspectRatio="3/2"
+                  thumbnailForceAspectRatio
+                  topChips={
+                    item.type?.data?.attributes
+                      ? [
+                          item.type.data.attributes.titles?.[0]
+                            ? item.type.data.attributes.titles[0]?.title
+                            : prettySlug(item.type.data.attributes.slug),
+                        ]
+                      : undefined
+                  }
+                  bottomChips={item.categories?.data.map(
+                    (category) => category.attributes?.short ?? ""
+                  )}
+                  keepInfoVisible
+                />
+              ))}
+            </div>
+          </SearchResultSection>
+        )}
+
+        {isDefined(wikiPages) && (
+          <SearchResultSection
+            title={langui.wiki}
+            icon="travel_explore"
+            href={`/wiki?page=1&query=${query}`}
+            totalHits={wikiPages.estimatedTotalHits}>
+            <div className="flex flex-wrap items-start gap-x-6 gap-y-8">
+              {wikiPages.hits.map((item) => (
+                <TranslatedPreviewCard
+                  key={item.id}
+                  className="w-56"
+                  href={`/wiki/${item.slug}`}
+                  translations={filterHasAttributes(item._formatted.translations, [
+                    "language.data.attributes.code",
+                  ] as const).map(
+                    ({
+                      aliases,
+                      summary,
+                      displayable_description,
+                      language,
+                      ...otherAttributes
+                    }) => ({
+                      ...otherAttributes,
+                      subtitle:
+                        aliases && aliases.length > 0
+                          ? aliases.map((alias) => alias?.alias).join("・")
+                          : undefined,
+                      description: containsHighlight(displayable_description)
+                        ? displayable_description
+                        : summary,
+                      language: language.data.attributes.code,
+                    })
+                  )}
+                  fallback={{ title: prettySlug(item.slug) }}
+                  thumbnail={item.thumbnail?.data?.attributes}
+                  thumbnailAspectRatio={"4/3"}
+                  thumbnailRounded
+                  thumbnailForceAspectRatio
+                  keepInfoVisible
+                  topChips={filterHasAttributes(item.tags?.data, ["attributes"] as const).map(
+                    (tag) => tag.attributes.titles?.[0]?.title ?? prettySlug(tag.attributes.slug)
+                  )}
+                  bottomChips={filterHasAttributes(item.categories?.data, [
+                    "attributes",
+                  ] as const).map((category) => category.attributes.short)}
+                />
+              ))}
+            </div>
+          </SearchResultSection>
+        )}
+
+        {isDefined(posts) && (
+          <SearchResultSection
+            title={langui.news}
+            icon="newspaper"
+            href={`/news?page=1&query=${query}`}
+            totalHits={posts.estimatedTotalHits}>
+            <div className="flex flex-wrap items-start gap-x-6 gap-y-8">
+              {posts.hits.map((item) => (
+                <TranslatedPreviewCard
+                  className="w-56"
+                  key={item.id}
+                  href={`/news/${item.slug}`}
+                  translations={filterHasAttributes(item._formatted.translations, [
+                    "language.data.attributes.code",
+                  ] as const).map(({ excerpt, body, language, ...otherAttributes }) => ({
+                    ...otherAttributes,
+                    description: containsHighlight(excerpt)
+                      ? excerpt
+                      : containsHighlight(body)
+                      ? body
+                      : excerpt,
+                    language: language.data.attributes.code,
+                  }))}
+                  fallback={{ title: prettySlug(item.slug) }}
+                  thumbnail={item.thumbnail?.data?.attributes}
+                  thumbnailAspectRatio="3/2"
+                  thumbnailForceAspectRatio
+                  keepInfoVisible
+                  bottomChips={item.categories?.data.map(
+                    (category) => category.attributes?.short ?? ""
+                  )}
+                  metadata={{
+                    releaseDate: item.date,
+                    releaseDateFormat: "long",
+                    position: "Top",
+                  }}
+                />
+              ))}
+            </div>
+          </SearchResultSection>
+        )}
+
+        {isDefined(videos) && (
+          <SearchResultSection
+            title={langui.videos}
+            icon="movie"
+            href={`/archives/videos?page=1&query=${query}&sort=1&gone=`}
+            totalHits={videos.estimatedTotalHits}>
+            <div className="flex flex-wrap items-start gap-x-6 gap-y-8">
+              {videos.hits.map((item) => (
+                <PreviewCard
+                  className="w-56"
+                  key={item.uid}
+                  href={`/archives/videos/v/${item.uid}`}
+                  title={item._formatted.title}
+                  thumbnail={getVideoThumbnailURL(item.uid)}
+                  thumbnailAspectRatio="16/9"
+                  thumbnailForceAspectRatio
+                  keepInfoVisible
+                  metadata={{
+                    releaseDate: item.published_date,
+                    views: item.views,
+                    author: item._formatted.channel?.data?.attributes?.title,
+                    position: "Top",
+                  }}
+                  description={
+                    item._matchesPosition.description &&
+                    item._matchesPosition.description.length > 0
+                      ? item._formatted.description
+                      : undefined
+                  }
+                  hoverlay={{
+                    __typename: "Video",
+                    duration: item.duration,
+                  }}
+                />
+              ))}
+            </div>
+          </SearchResultSection>
+        )}
+      </div>
+    </Popup>
+  );
+};
+
+interface SearchResultSectionProps {
+  title?: string | null;
+  icon: MaterialSymbol;
+  href: string;
+  totalHits?: number;
+  children: React.ReactNode;
+}
+
+const SearchResultSection = ({
+  title,
+  icon,
+  href,
+  totalHits,
+  children,
+}: SearchResultSectionProps) => (
+  <>
+    {isDefined(totalHits) && totalHits > 0 && (
+      <div>
+        <div className="mb-6 grid place-content-start">
+          <UpPressable
+            className="grid grid-cols-[auto_1fr] place-items-center gap-6 px-6 py-4"
+            href={href}>
+            <Ico icon={icon} className="!text-3xl" isFilled />
+            <div>
+              <p className="font-headers text-lg">{title}</p>
+              {isDefined(totalHits) && totalHits > SEARCH_LIMIT && (
+                /* TODO: Langui */
+                <p className="text-sm">{`(showing ${SEARCH_LIMIT} out of ${totalHits} results)`}</p>
+              )}
+            </div>
+          </UpPressable>
+        </div>
+        {children}
+      </div>
+    )}
+  </>
+);

src/components/Panels/SettingsPopup.tsx

@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { Icon } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
 import { OrderableList } from "components/Inputs/OrderableList";
@@ -14,6 +13,7 @@ import { filterHasAttributes, isDefined } from "helpers/asserts";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter, useAtomPair } from "helpers/atoms";
 import { ThemeMode } from "contexts/settings";
+import { Ico } from "components/Ico";
 
 export const SettingsPopup = (): JSX.Element => {
   const [preferredLanguages, setPreferredLanguages] = useAtomPair(
@@ -50,7 +50,10 @@ export const SettingsPopup = (): JSX.Element => {
         setSettingsOpened(false);
         sendAnalytics("Settings", "Close settings");
       }}>
-      <h2 className="text-2xl">{langui.settings}</h2>
+      <h2 className="inline-flex place-items-center gap-2 text-2xl">
+        <Ico icon="discover_tune" isFilled />
+        {langui.settings}
+      </h2>
 
       <div
         className={cJoin(
@@ -154,7 +157,7 @@ export const SettingsPopup = (): JSX.Element => {
                       })}%)`
                     );
                   },
-                  icon: Icon.TextDecrease,
+                  icon: "text_decrease",
                 },
                 {
                   onClick: () => {
@@ -175,7 +178,7 @@ export const SettingsPopup = (): JSX.Element => {
                       })}%)`
                     );
                   },
-                  icon: Icon.TextIncrease,
+                  icon: "text_increase",
                 },
               ]}
             />

src/components/PreviewCard.tsx

@@ -1,9 +1,10 @@
 import { useCallback } from "react";
 import { useRouter } from "next/router";
-import { Chip } from "./Chip";
-import { Ico, Icon } from "./Ico";
-import { Img } from "./Img";
-import { UpPressable } from "./Containers/UpPressable";
+import { Markdown } from "./Markdown/Markdown";
+import { Chip } from "components/Chip";
+import { Ico } from "components/Ico";
+import { Img } from "components/Img";
+import { UpPressable } from "components/Containers/UpPressable";
 import { DatePickerFragment, PricePickerFragment, UploadImageFragment } from "graphql/generated";
 import { cIf, cJoin } from "helpers/className";
 import { prettyDate, prettyDuration, prettyPrice, prettyShortenNumber } from "helpers/formatters";
@@ -48,6 +49,7 @@ interface Props {
       }
     | { __typename: "anotherHoverlayName" };
   disabled?: boolean;
+  className?: string;
 }
 
 // ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
@@ -68,6 +70,7 @@ export const PreviewCard = ({
   metadata,
   hoverlay,
   infoAppend,
+  className,
   disabled = false,
 }: Props): JSX.Element => {
   const currency = useAtomGetter(atoms.settings.currency);
@@ -81,26 +84,26 @@ export const PreviewCard = ({
         <div className="flex w-full flex-row flex-wrap gap-x-3">
           {metadata.releaseDate && (
             <p className="text-sm">
-              <Ico icon={Icon.Event} className="mr-1 translate-y-[.15em] !text-base" />
+              <Ico icon="event" className="mr-1 translate-y-[.15em] !text-base" />
               {prettyDate(metadata.releaseDate, router.locale)}
             </p>
           )}
           {metadata.price && (
             <p className="justify-self-end text-sm">
-              <Ico icon={Icon.ShoppingCart} className="mr-1 translate-y-[.15em] !text-base" />
+              <Ico icon="shopping_cart" className="mr-1 translate-y-[.15em] !text-base" />
               {prettyPrice(metadata.price, currencies, currency)}
             </p>
           )}
           {metadata.views && (
             <p className="text-sm">
-              <Ico icon={Icon.Visibility} className="mr-1 translate-y-[.15em] !text-base" />
+              <Ico icon="visibility" className="mr-1 translate-y-[.15em] !text-base" />
               {prettyShortenNumber(metadata.views)}
             </p>
           )}
           {metadata.author && (
             <p className="text-sm">
-              <Ico icon={Icon.Person} className="mr-1 translate-y-[.15em] !text-base" />
-              {metadata.author}
+              <Ico icon="person" className="mr-1 translate-y-[.15em] !text-base" />
+              <Markdown text={metadata.author} className="inline-block" />
             </p>
           )}
         </div>
@@ -109,7 +112,11 @@ export const PreviewCard = ({
   );
 
   return (
-    <UpPressable className="grid items-end text-left" href={href} noBackground disabled={disabled}>
+    <UpPressable
+      className={cJoin("grid items-end text-left", className)}
+      href={href}
+      noBackground
+      disabled={disabled}>
       <div className={cJoin("group", cIf(disabled, "pointer-events-none touch-none select-none"))}>
         {thumbnail ? (
           <div
@@ -132,17 +139,16 @@ export const PreviewCard = ({
             {hoverlay && hoverlay.__typename === "Video" && (
               <>
                 <div
-                  className="group absolute inset-0 grid place-content-center bg-shade bg-opacity-0
-                  text-light transition-colors
-                  hover:bg-opacity-50">
+                  className="absolute inset-0 grid place-content-center bg-shade bg-opacity-0
+                  text-light transition-colors group-hover:bg-opacity-50">
                   <Ico
-                    icon={Icon.PlayCircleOutline}
-                    className="!text-6xl text-black opacity-0 drop-shadow-lg transition-opacity
-                  shadow-shade group-hover:opacity-100"
+                    icon="play_circle"
+                    className="!text-6xl text-light opacity-0 drop-shadow-lg transition-opacity
+                    shadow-shade group-hover:opacity-100 dark:text-black"
                   />
                 </div>
                 <div
-                  className="absolute right-2 bottom-2 rounded-full bg-black bg-opacity-60 px-2
+                  className="absolute right-2 bottom-2 rounded-full bg-black/60 px-2
                   text-light">
                   {prettyDuration(hoverlay.duration)}
                 </div>
@@ -174,24 +180,27 @@ export const PreviewCard = ({
           {topChips && topChips.length > 0 && (
             <div
               className="grid grid-flow-col place-content-start gap-1 overflow-x-scroll
-            scrollbar-none">
+              scrollbar-none">
               {topChips.map((text, index) => (
                 <Chip key={index} text={text} />
               ))}
             </div>
           )}
           <div className="my-1">
-            {pre_title && <p className="mb-1 leading-none break-words">{pre_title}</p>}
+            {pre_title && <Markdown text={pre_title} className="mb-1 leading-none break-words" />}
             {title && (
-              <p className="font-headers text-lg font-bold leading-none break-words">{title}</p>
+              <Markdown
+                text={title}
+                className="font-headers text-lg font-bold leading-none break-words"
+              />
             )}
-            {subtitle && <p className="leading-none break-words">{subtitle}</p>}
+            {subtitle && <Markdown text={subtitle} className="leading-none break-words" />}
           </div>
-          {description && <p>{description}</p>}
+          {description && <Markdown text={description} className="break-words" />}
           {bottomChips && bottomChips.length > 0 && (
             <div
               className="grid grid-flow-col place-content-start gap-1 overflow-x-scroll
-            scrollbar-none">
+              scrollbar-none">
               {bottomChips.map((text, index) => (
                 <Chip key={index} className="text-sm" text={text} />
               ))}

src/components/SmartList.tsx

@@ -3,7 +3,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import naturalCompare from "string-natural-compare";
 import { Chip } from "./Chip";
 import { PageSelector } from "./Inputs/PageSelector";
-import { Ico, Icon } from "./Ico";
+import { Ico } from "./Ico";
 import { cJoin } from "helpers/className";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/asserts";
 import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
@@ -70,10 +70,10 @@ export const SmartList = <T,>({
   sortingFunction = defaultSortingFunction,
   className,
 }: Props<T>): JSX.Element => {
-  const [page, setPage] = useState(0);
+  const [page, setPage] = useState(1);
   const langui = useAtomGetter(atoms.localData.langui);
   useScrollTopOnChange(Ids.ContentPanel, [page], paginationScroolTop);
-  useEffect(() => setPage(0), [searchingTerm, groupingFunction, groupSortingFunction]);
+  useEffect(() => setPage(1), [searchingTerm, groupingFunction, groupSortingFunction]);
 
   const searchFilter = useCallback(() => {
     if (isDefinedAndNotEmpty(searchingTerm) && isDefined(searchingBy)) {
@@ -158,9 +158,9 @@ export const SmartList = <T,>({
     return memo;
   })();
 
-  useHotkeys("left", () => setPage((current) => current - 1), { enabled: page > 0 });
+  useHotkeys("left", () => setPage((current) => current - 1), { enabled: page > 1 });
   useHotkeys("right", () => setPage((current) => current + 1), {
-    enabled: page < pages.length - 1,
+    enabled: page < pages.length,
   });
 
   return (
@@ -170,8 +170,8 @@ export const SmartList = <T,>({
       )}
 
       <div className="mb-8">
-        {(pages[page]?.length ?? 0) > 0 ? (
-          pages[page]?.map(
+        {(pages[page - 1]?.length ?? 0) > 0 ? (
+          pages[page - 1]?.map(
             (group) =>
               group.items.length > 0 && (
                 <Fragment key={group.name}>
@@ -229,9 +229,9 @@ const DefaultRenderWhenEmpty = () => {
       <div
         className="grid grid-flow-col place-items-center gap-9 rounded-2xl border-2 border-dotted
         border-dark p-8 text-dark opacity-40">
-        {is3ColumnsLayout && <Ico icon={Icon.ChevronLeft} className="!text-[300%]" />}
+        {is3ColumnsLayout && <Ico icon="chevron_left" className="!text-[300%]" />}
         <p className="max-w-xs text-2xl">{langui.no_results_message}</p>
-        {!is3ColumnsLayout && <Ico icon={Icon.ChevronRight} className="!text-[300%]" />}
+        {!is3ColumnsLayout && <Ico icon="chevron_right" className="!text-[300%]" />}
       </div>
     </div>
   );

src/contexts/appLayout.ts

@@ -7,6 +7,7 @@ import { atoms } from "contexts/atoms";
 export const useAppLayout = (): void => {
   const router = useRouter();
 
+  const setSearchOpened = useAtomSetter(atoms.layout.searchOpened);
   const setSettingsOpened = useAtomSetter(atoms.layout.settingsOpened);
   const setMainPanelOpened = useAtomSetter(atoms.layout.mainPanelOpened);
   const setSubPanelOpened = useAtomSetter(atoms.layout.subPanelOpened);
@@ -14,6 +15,7 @@ export const useAppLayout = (): void => {
   useEffect(() => {
     router.events.on("routeChangeStart", () => {
       console.log("[Router Events] on routeChangeStart");
+      setSearchOpened(false);
       setSettingsOpened(false);
       setMainPanelOpened(false);
       setSubPanelOpened(false);
@@ -23,7 +25,7 @@ export const useAppLayout = (): void => {
       console.log("[Router Events] on hashChangeStart");
       setSubPanelOpened(false);
     });
-  }, [router, setSettingsOpened, setMainPanelOpened, setSubPanelOpened]);
+  }, [router, setSettingsOpened, setMainPanelOpened, setSubPanelOpened, setSearchOpened]);
 
   useScrollIntoView();
 };

src/contexts/atoms.ts

@@ -14,13 +14,15 @@ import { lightBox } from "contexts/LightBoxProvider";
 /* [ APPLAYOUT ATOMS ] */
 
 const mainPanelReduced = atomPairing(atomWithStorage("isMainPanelReduced", false));
-const settingsOpened = atomPairing(atomWithStorage("isSettingsOpened", false));
-const subPanelOpened = atomPairing(atomWithStorage("isSubPanelOpened", false));
-const mainPanelOpened = atomPairing(atomWithStorage("isMainPanelOpened", false));
+const searchOpened = atomPairing(atom(false));
+const settingsOpened = atomPairing(atom(false));
+const subPanelOpened = atomPairing(atom(false));
+const mainPanelOpened = atomPairing(atom(false));
 const menuGesturesEnabled = atomPairing(atomWithStorage("isMenuGesturesEnabled", false));
 const terminalMode = atom((get) => get(settings.playerName[0]) === "root");
 
 const layout = {
+  searchOpened,
   mainPanelReduced,
   settingsOpened,
   subPanelOpened,

src/graphql/operations/getContents.graphql

@@ -1,75 +0,0 @@
-query getContents($language_code: String) {
-  contents(pagination: { limit: -1 }) {
-    data {
-      id
-      attributes {
-        slug
-        translations(pagination: { limit: -1 }) {
-          pre_title
-          title
-          subtitle
-          language {
-            data {
-              attributes {
-                code
-              }
-            }
-          }
-        }
-        categories(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              name
-              short
-            }
-          }
-        }
-        type {
-          data {
-            attributes {
-              slug
-              titles(filters: { language: { code: { eq: $language_code } } }) {
-                title
-              }
-            }
-          }
-        }
-        ranged_contents(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              slug
-              scan_set {
-                id
-              }
-              library_item {
-                data {
-                  attributes {
-                    slug
-                    title
-                    subtitle
-                    thumbnail {
-                      data {
-                        attributes {
-                          ...uploadImage
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        thumbnail {
-          data {
-            attributes {
-              ...uploadImage
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/graphql/operations/getLibraryItemsPreview.graphql

@@ -1,107 +0,0 @@
-query getLibraryItemsPreview($language_code: String) {
-  libraryItems(pagination: { limit: -1 }) {
-    data {
-      id
-      attributes {
-        title
-        subtitle
-        slug
-        root_item
-        primary
-        thumbnail {
-          data {
-            attributes {
-              ...uploadImage
-            }
-          }
-        }
-        release_date {
-          ...datePicker
-        }
-        price {
-          ...pricePicker
-        }
-        categories(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              name
-              short
-            }
-          }
-        }
-        metadata {
-          __typename
-          ... on ComponentMetadataBooks {
-            subtype {
-              data {
-                attributes {
-                  slug
-                  titles(filters: { language: { code: { eq: $language_code } } }) {
-                    title
-                  }
-                }
-              }
-            }
-          }
-          ... on ComponentMetadataGame {
-            platforms(pagination: { limit: -1 }) {
-              data {
-                id
-                attributes {
-                  short
-                }
-              }
-            }
-          }
-          ... on ComponentMetadataVideo {
-            subtype {
-              data {
-                attributes {
-                  slug
-                  titles(filters: { language: { code: { eq: $language_code } } }) {
-                    title
-                  }
-                }
-              }
-            }
-          }
-          ... on ComponentMetadataAudio {
-            subtype {
-              data {
-                attributes {
-                  slug
-                  titles(filters: { language: { code: { eq: $language_code } } }) {
-                    title
-                  }
-                }
-              }
-            }
-          }
-          ... on ComponentMetadataGroup {
-            subtype {
-              data {
-                attributes {
-                  slug
-                  titles(filters: { language: { code: { eq: $language_code } } }) {
-                    title
-                  }
-                }
-              }
-            }
-            subitems_type {
-              data {
-                attributes {
-                  slug
-                  titles(filters: { language: { code: { eq: $language_code } } }) {
-                    title
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/graphql/operations/getPostsPreview.graphql

@@ -1,46 +0,0 @@
-query getPostsPreview {
-  posts(filters: { hidden: { eq: false } }) {
-    data {
-      id
-      attributes {
-        slug
-        date {
-          ...datePicker
-        }
-        categories(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              short
-            }
-          }
-        }
-        thumbnail {
-          data {
-            attributes {
-              ...uploadImage
-            }
-          }
-        }
-        translations(pagination: { limit: -1 }) {
-          language {
-            data {
-              attributes {
-                code
-              }
-            }
-          }
-          title
-          excerpt
-          thumbnail {
-            data {
-              attributes {
-                ...uploadImage
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/graphql/operations/getVideoChannel.graphql

@@ -5,29 +5,6 @@ query getVideoChannel($channel: String) {
         uid
         title
         subscribers
-        videos(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              uid
-              title
-              views
-              duration
-              gone
-              categories(pagination: { limit: -1 }) {
-                data {
-                  id
-                  attributes {
-                    short
-                  }
-                }
-              }
-              published_date {
-                ...datePicker
-              }
-            }
-          }
-        }
       }
     }
   }

src/graphql/operations/getVideosPreview.graphql

@@ -1,33 +0,0 @@
-query getVideosPreview {
-  videos(pagination: { limit: -1 }) {
-    data {
-      id
-      attributes {
-        uid
-        title
-        views
-        duration
-        gone
-        categories(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              short
-            }
-          }
-        }
-        published_date {
-          ...datePicker
-        }
-        channel {
-          data {
-            attributes {
-              uid
-              title
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/graphql/operations/getWikiPagesPreviews.graphql

@@ -1,58 +0,0 @@
-query getWikiPagesPreviews($language_code: String) {
-  wikiPages(pagination: { limit: -1 }) {
-    data {
-      id
-      attributes {
-        slug
-        thumbnail {
-          data {
-            attributes {
-              ...uploadImage
-            }
-          }
-        }
-        categories(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              name
-              short
-            }
-          }
-        }
-        tags(pagination: { limit: -1 }) {
-          data {
-            id
-            attributes {
-              slug
-              titles(filters: { language: { code: { eq: $language_code } } }) {
-                language {
-                  data {
-                    attributes {
-                      code
-                    }
-                  }
-                }
-                title
-              }
-            }
-          }
-        }
-        translations(pagination: { limit: -1 }) {
-          title
-          aliases(pagination: { limit: -1 }) {
-            alias
-          }
-          summary
-          language {
-            data {
-              attributes {
-                code
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/graphql/operations/local-data/localDataGetWebsiteInterfaces.graphql

@@ -191,6 +191,14 @@ query localDataGetWebsiteInterfaces {
         reset_all_options
         reading_layout
         quality
+        only_unavailable_videos
+        oldest
+        newest
+        least_popular
+        most_popular
+        shortest
+        longest
+        search
       }
     }
   }

src/helpers/analytics.ts

@@ -1,6 +1,8 @@
 export const sendAnalytics = (category: string, event: string): void => {
+  const eventName = `[${category}] ${event}`;
+  console.log(`Event: ${eventName}`);
   try {
-    umami(`[${category}] ${event}`);
+    umami(eventName);
   } catch (error) {
     if (error instanceof ReferenceError) return;
     console.log(error);

src/helpers/asserts.ts

@@ -36,7 +36,7 @@ type Split<Str, Acc extends string[] = []> = Str extends `${infer Head}.${infer
   ? [...Acc, Last]
   : never;
 
-export type SelectiveNonNullable<T, P extends PathDot<T>> = Recursive<NonNullable<T>, Split<P>>;
+type SelectiveNonNullable<T, P extends PathDot<T>> = Recursive<NonNullable<T>, Split<P>>;
 
 export const isDefined = <T>(t: T): t is NonNullable<T> => t !== null && t !== undefined;
 

src/helpers/date.ts

@@ -1,5 +1,10 @@
-import { isUndefined } from "./asserts";
-import { DatePickerFragment } from "graphql/generated";
+import { isDefined, isUndefined } from "./asserts";
+
+type DatePickerFragment = {
+  year?: number | null;
+  month?: number | null;
+  day?: number | null;
+};
 
 export const compareDate = (
   a: DatePickerFragment | null | undefined,
@@ -8,10 +13,11 @@ export const compareDate = (
   if (isUndefined(a) || isUndefined(b)) {
     return 0;
   }
-  const dateA = (a.year ?? Infinity) * 365 + (a.month ?? 12) * 31 + (a.day ?? 31);
-  const dateB = (b.year ?? Infinity) * 365 + (b.month ?? 12) * 31 + (b.day ?? 31);
-  return dateA - dateB;
+  return dateInDays(a) - dateInDays(b);
 };
 
+const dateInDays = (date: DatePickerFragment | null | undefined): number =>
+  isDefined(date) ? (date.year ?? Infinity) * 365 + (date.month ?? 12) * 31 + (date.day ?? 31) : 0;
+
 export const datePickerToDate = (date: DatePickerFragment): Date =>
   new Date(date.year ?? 0, date.month ? date.month - 1 : 0, date.day ?? 1);

src/helpers/formatters.ts

@@ -208,12 +208,12 @@ export const prettyItemSubType = (
 /* eslint-enable id-denylist */
 
 export const prettyShortenNumber = (number: number): string => {
-  if (number > 1000000) {
-    return number.toLocaleString(undefined, {
+  if (number > 1_000_000) {
+    return `${(number / 1_000_000).toLocaleString(undefined, {
       maximumSignificantDigits: 3,
-    });
-  } else if (number > 1000) {
-    return `${(number / 1000).toLocaleString(undefined, {
+    })}M`;
+  } else if (number > 1_000) {
+    return `${(number / 1_000).toLocaleString(undefined, {
       maximumSignificantDigits: 2,
     })}K`;
   }

src/helpers/search.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line import/named
+import { MatchesPosition, MeiliSearch, SearchParams, SearchResponse } from "meilisearch";
+import { isDefined } from "./asserts";
+import { MeiliDocumentsType } from "shared/meilisearch-graphql-typings/meiliTypes";
+
+const meili = new MeiliSearch({
+  host: process.env.NEXT_PUBLIC_URL_MEILISEARCH ?? "",
+  apiKey: process.env.NEXT_PUBLIC_MEILISEARCH_KEY,
+});
+
+interface CustomSearchParams
+  extends Omit<
+    SearchParams,
+    "cropMarker" | "highlightPostTag" | "highlightPreTag" | "q" | "showMatchesPosition"
+  > {}
+
+type CustomHit<T = Record<string, any>> = T & {
+  _formatted: Partial<T>;
+  _matchesPosition: MatchesPosition<T>;
+};
+
+type CustomHits<T = Record<string, any>> = CustomHit<T>[];
+
+export interface CustomSearchResponse<T> extends Omit<SearchResponse<T>, "hits"> {
+  hits: CustomHits<T>;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const meiliSearch = async <I extends MeiliDocumentsType["index"]>(
+  indexName: I,
+  query: string,
+  options: CustomSearchParams
+) => {
+  const index = meili.index(indexName);
+  return (await index.search<Extract<MeiliDocumentsType, { index: I }>["documents"]>(query, {
+    ...options,
+    attributesToHighlight: options.attributesToHighlight ?? ["*"],
+    highlightPreTag: "<mark>",
+    highlightPostTag: "</mark>",
+    showMatchesPosition: true,
+    cropLength: 20,
+    cropMarker: "...",
+  })) as unknown as CustomSearchResponse<Extract<MeiliDocumentsType, { index: I }>["documents"]>;
+};
+
+export const containsHighlight = (text: string | null | undefined): boolean =>
+  isDefined(text) && text.includes("</mark>");

src/hooks/useTypedRouter.ts

@@ -0,0 +1,36 @@
+import { NextRouter, useRouter } from "next/router";
+import { useCallback } from "react";
+import { z } from "zod";
+
+interface TypeRouter<T extends z.Schema> extends Omit<NextRouter, "query"> {
+  query: z.TypeOf<T>;
+  updateQuery: (queryParams: z.TypeOf<T>) => void;
+}
+
+export const useTypedRouter = <T extends z.Schema>(schema: T): TypeRouter<T> => {
+  const { query, ...router } = useRouter();
+
+  const updateQuery = useCallback(
+    async (queryParams: z.TypeOf<T>) => {
+      Object.keys(queryParams).map((key: keyof typeof queryParams) => {
+        if (typeof queryParams[key] === "boolean") {
+          queryParams[key] = queryParams[key] ? "true" : undefined;
+        }
+      });
+      await router.replace(
+        { pathname: router.pathname, query: { ...query, ...queryParams } },
+        undefined,
+        {
+          shallow: true,
+        }
+      );
+    },
+    [router, query]
+  );
+
+  return {
+    query: schema.parse(query) as z.infer<typeof schema>,
+    updateQuery,
+    ...router,
+  };
+};

src/pages/_app.tsx

@@ -1,5 +1,4 @@
-import "@fontsource/material-icons";
-import "@fontsource/material-icons-outlined";
+import "material-symbols/rounded.css";
 import "@fontsource/opendyslexic/400.css";
 import "@fontsource/share-tech-mono/400.css";
 import "@fontsource/opendyslexic/700.css";
@@ -23,6 +22,7 @@ import { SettingsPopup } from "components/Panels/SettingsPopup";
 import { useSettings } from "contexts/settings";
 import { useContainerQueries } from "contexts/containerQueries";
 import { useWebkitFixes } from "contexts/webkitFixes";
+import { SearchPopup } from "components/Panels/SearchPopup";
 
 const AccordsLibraryApp = (props: AppProps): JSX.Element => {
   useLocalData();
@@ -33,6 +33,7 @@ const AccordsLibraryApp = (props: AppProps): JSX.Element => {
 
   return (
     <>
+      <SearchPopup />
       <SettingsPopup />
       <LightBoxProvider />
       <Script

src/pages/about-us/index.tsx

@@ -1,6 +1,5 @@
 import { GetStaticProps } from "next";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
-import { Icon } from "components/Ico";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
@@ -24,7 +23,7 @@ const AboutUs = (props: Props): JSX.Element => {
       subPanel={
         <SubPanel>
           <PanelHeader
-            icon={Icon.Info}
+            icon="info"
             title={langui.about_us}
             description={langui.about_us_description}
           />

src/pages/api/revalidate.ts

@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { i18n } from "../../../next.config";
 import { cartesianProduct } from "helpers/others";
-import { filterHasAttributes, isDefined } from "helpers/asserts";
+import { filterHasAttributes } from "helpers/asserts";
 import { fetchLocalData } from "graphql/fetchLocalData";
 import { getReadySdk } from "graphql/sdk";
 
@@ -169,13 +169,11 @@ const Revalidate = async (
 
   switch (body.model) {
     case "post": {
-      paths.push(`/news`);
       paths.push(`/news/${body.entry.slug}`);
       break;
     }
 
     case "library-item": {
-      paths.push(`/library`);
       paths.push(`/library/${body.entry.slug}`);
       paths.push(`/library/${body.entry.slug}/reader`);
 
@@ -193,8 +191,6 @@ const Revalidate = async (
     }
 
     case "content": {
-      paths.push(`/contents`);
-      paths.push(`/contents/all`);
       paths.push(`/contents/${body.entry.slug}`);
 
       if (body.entry.folder.count > 0 || body.entry.ranged_contents.count > 0) {
@@ -205,7 +201,11 @@ const Revalidate = async (
 
         const folderSlug = content.contents?.data[0]?.attributes?.folder?.data?.attributes?.slug;
         if (folderSlug) {
-          paths.push(`/contents/folder/${folderSlug}`);
+          if (folderSlug === "root") {
+            paths.push(`/contents`);
+          } else {
+            paths.push(`/contents/folder/${folderSlug}`);
+          }
         }
 
         filterHasAttributes(content.contents?.data[0]?.attributes?.ranged_contents?.data, [
@@ -248,8 +248,9 @@ const Revalidate = async (
     case "contents-folder": {
       if (body.entry.slug === "root") {
         paths.push(`/contents`);
+      } else {
+        paths.push(`/contents/folder/${body.entry.slug}`);
       }
-      paths.push(`/contents/folder/${body.entry.slug}`);
 
       if (
         body.entry.contents.count > 0 ||
@@ -278,7 +279,6 @@ const Revalidate = async (
     }
 
     case "wiki-page": {
-      paths.push(`/wiki`);
       paths.push(`/wiki/${body.entry.slug}`);
       break;
     }
@@ -306,13 +306,7 @@ const Revalidate = async (
 
     case "video": {
       if (body.entry.uid) {
-        paths.push(`/archives/videos`);
         paths.push(`/archives/videos/v/${body.entry.uid}`);
-        const video = await sdk.getVideo({ uid: body.entry.uid });
-        const channelUid = video.videos?.data[0]?.attributes?.channel?.data?.attributes?.uid;
-        if (isDefined(channelUid)) {
-          paths.push(`/archives/videos/c/${channelUid}`);
-        }
       }
       break;
     }

src/pages/archives/index.tsx

@@ -3,7 +3,6 @@ import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
-import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
 import { getLangui } from "graphql/fetchLocalData";
@@ -21,11 +20,7 @@ const Archives = (props: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const subPanel = (
     <SubPanel>
-      <PanelHeader
-        icon={Icon.Inventory}
-        title={langui.archives}
-        description={langui.archives_description}
-      />
+      <PanelHeader icon="save" title={langui.archives} description={langui.archives_description} />
       <HorizontalLine />
       <NavOption title={"Videos"} url="/archives/videos/" border />
     </SubPanel>

src/pages/archives/videos/c/[uid].tsx

@@ -1,29 +1,33 @@
 import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBoolean } from "usehooks-ts";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Switch } from "components/Inputs/Switch";
+import { TextInput } from "components/Inputs/TextInput";
+import { WithLabel } from "components/Inputs/WithLabel";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { PreviewCard } from "components/PreviewCard";
-import { GetVideoChannelQuery } from "graphql/generated";
-import { getReadySdk } from "graphql/sdk";
-import { getVideoThumbnailURL } from "helpers/videos";
-import { Icon } from "components/Ico";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { WithLabel } from "components/Inputs/WithLabel";
-import { filterHasAttributes, isDefined } from "helpers/asserts";
 import { getOpenGraph } from "helpers/openGraph";
-import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
-import { SmartList } from "components/SmartList";
-import { cIf } from "helpers/className";
-import { TextInput } from "components/Inputs/TextInput";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { CustomSearchResponse, meiliSearch } from "helpers/search";
+import { MeiliIndices, MeiliVideo } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { PreviewCard } from "components/PreviewCard";
+import { filterHasAttributes, isDefined, isDefinedAndNotEmpty } from "helpers/asserts";
+import { getVideoThumbnailURL } from "helpers/videos";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { Select } from "components/Inputs/Select";
+import { sendAnalytics } from "helpers/analytics";
+import { Button } from "components/Inputs/Button";
+import { GetVideoChannelQuery } from "graphql/generated";
+import { getReadySdk } from "graphql/sdk";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -32,95 +36,240 @@ import { useAtomGetter } from "helpers/atoms";
 
 const DEFAULT_FILTERS_STATE = {
   searchName: "",
+  page: 1,
+  sortingMethod: 1,
+  onlyShowGone: false,
+  keepInfoVisible: true,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+  sort: z.coerce.number().min(0).max(5).optional(),
+  gone: z.coerce.boolean().optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
 interface Props extends AppLayoutRequired {
-  channel: NonNullable<GetVideoChannelQuery["videoChannels"]>["data"][number]["attributes"];
+  channel: NonNullable<
+    NonNullable<GetVideoChannelQuery["videoChannels"]>["data"][number]["attributes"]
+  >;
 }
 
 const Channel = ({ channel, ...otherProps }: Props): JSX.Element => {
-  const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const router = useTypedRouter(queryParamSchema);
 
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
+  const sortingMethods = useMemo(
+    () => [
+      { meiliAttribute: "sortable_published_date:asc", displayedName: langui.oldest },
+      { meiliAttribute: "sortable_published_date:desc", displayedName: langui.newest },
+      { meiliAttribute: "views:asc", displayedName: langui.least_popular },
+      { meiliAttribute: "views:desc", displayedName: langui.most_popular },
+      { meiliAttribute: "duration:asc", displayedName: langui.shortest },
+      { meiliAttribute: "duration:desc", displayedName: langui.longest },
+    ],
+    [
+      langui.least_popular,
+      langui.longest,
+      langui.most_popular,
+      langui.newest,
+      langui.oldest,
+      langui.shortest,
+    ]
+  );
+
+  const {
+    value: keepInfoVisible,
+    toggle: toggleKeepInfoVisible,
+    setValue: setKeepInfoVisible,
+  } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
+
+  const {
+    value: onlyShowGone,
+    toggle: toggleOnlyShowGone,
+    setValue: setOnlyShowGone,
+  } = useBoolean(router.query.gone ?? DEFAULT_FILTERS_STATE.onlyShowGone);
+
+  const [query, setQuery] = useState<string>(
+    router.query.query ?? DEFAULT_FILTERS_STATE.searchName
+  );
+
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+
+  const [sortingMethod, setSortingMethod] = useState<number>(
+    router.query.sort ?? DEFAULT_FILTERS_STATE.sortingMethod
+  );
+
+  const [videos, setVideos] = useState<CustomSearchResponse<MeiliVideo>>();
+
+  useEffect(() => {
+    const fetchVideos = async () => {
+      const currentSortingMethod = sortingMethods[sortingMethod];
+      const searchResult = await meiliSearch(MeiliIndices.VIDEOS, query, {
+        hitsPerPage: 25,
+        page,
+        attributesToRetrieve: [
+          "title",
+          "channel",
+          "uid",
+          "published_date",
+          "views",
+          "duration",
+          "description",
+        ],
+        attributesToHighlight: ["title", "channel", "description"],
+        attributesToCrop: ["description"],
+        sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined,
+        filter: [onlyShowGone ? "gone = true" : "", `channel_uid = ${channel.uid}`],
+      });
+
+      setVideos(searchResult);
+    };
+    fetchVideos();
+  }, [query, page, sortingMethod, onlyShowGone, channel, sortingMethods]);
+
+  useEffect(() => {
+    if (router.isReady)
+      router.updateQuery({
+        page,
+        query,
+        sort: sortingMethod,
+        gone: onlyShowGone,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, query, sortingMethod, onlyShowGone, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+      if (isDefined(router.query.sort)) setSortingMethod(router.query.sort);
+      if (isDefined(router.query.gone)) setOnlyShowGone(router.query.gone);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
 
   const subPanel = (
     <SubPanel>
       <ReturnButton
-        href="/archives/videos/"
+        href="/archives/videos"
         title={langui.videos}
         displayOnlyOn={"3ColumnsLayout"}
         className="mb-10"
       />
 
       <PanelHeader
-        icon={Icon.Movie}
-        title={langui.videos}
-        description={langui.archives_description}
+        icon="movie"
+        title={channel.title}
+        description={`${channel.subscribers.toLocaleString()} ${langui.subscribers?.toLowerCase()}`}
       />
 
       <HorizontalLine />
 
       <TextInput
         className="mb-6 w-full"
-        placeholder={langui.search_title ?? "Search title..."}
-        value={searchName}
-        onChange={setSearchName}
+        placeholder={langui.search_title}
+        value={query}
+        onChange={(newQuery) => {
+          setPage(1);
+          setQuery(newQuery);
+          if (isDefinedAndNotEmpty(newQuery)) {
+            sendAnalytics("Videos", "Change search term");
+          } else {
+            sendAnalytics("Videos", "Clear search term");
+          }
+        }}
       />
 
+      <WithLabel label={langui.order_by}>
+        <Select
+          className="w-full"
+          options={sortingMethods.map((item) => item.displayedName ?? "")}
+          value={sortingMethod}
+          onChange={(newSort) => {
+            setPage(1);
+            setSortingMethod(newSort);
+            sendAnalytics(
+              "Videos",
+              `Change sorting method (${sortingMethods.map((item) => item.displayedName)[newSort]})`
+            );
+          }}
+        />
+      </WithLabel>
+
+      <WithLabel label={langui.only_unavailable_videos}>
+        <Switch
+          value={onlyShowGone}
+          onClick={() => {
+            toggleOnlyShowGone();
+          }}
+        />
+      </WithLabel>
+
       {hoverable && (
         <WithLabel label={langui.always_show_info}>
           <Switch value={keepInfoVisible} onClick={toggleKeepInfoVisible} />
         </WithLabel>
       )}
+
+      <Button
+        className="mt-8"
+        text={langui.reset_all_filters}
+        icon="settings_backup_restore"
+        onClick={() => {
+          setOnlyShowGone(DEFAULT_FILTERS_STATE.onlyShowGone);
+          setPage(DEFAULT_FILTERS_STATE.page);
+          setQuery(DEFAULT_FILTERS_STATE.searchName);
+          setSortingMethod(DEFAULT_FILTERS_STATE.sortingMethod);
+          setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
+          sendAnalytics("Videos", "Reset all filters");
+        }}
+      />
     </SubPanel>
   );
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(channel?.videos?.data, ["id", "attributes"] as const)}
-        getItemId={(item) => item.id}
-        renderItem={({ item }) => (
-          <PreviewCard
-            href={`/archives/videos/v/${item.attributes.uid}`}
-            title={item.attributes.title}
-            thumbnail={getVideoThumbnailURL(item.attributes.uid)}
-            thumbnailAspectRatio="16/9"
-            thumbnailForceAspectRatio
-            keepInfoVisible={keepInfoVisible}
-            metadata={{
-              releaseDate: item.attributes.published_date,
-              views: item.attributes.views,
-              author: channel?.title,
-              position: "Top",
-            }}
-            hoverlay={{
-              __typename: "Video",
-              duration: item.attributes.duration,
-            }}
-          />
-        )}
-        className={cIf(
-          isContentPanelAtLeast4xl,
-          "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
-          "grid-cols-2 gap-x-3 gap-y-5"
-        )}
-        groupingFunction={() => [channel?.title ?? ""]}
-        paginationItemPerPage={25}
-        searchingTerm={searchName}
-        searchingBy={(item) => item.attributes.title}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={videos?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-start
+          gap-x-6 gap-y-8">
+          {videos?.hits.map((item) => (
+            <PreviewCard
+              key={item.uid}
+              href={`/archives/videos/v/${item.uid}`}
+              title={item._formatted.title}
+              thumbnail={getVideoThumbnailURL(item.uid)}
+              thumbnailAspectRatio="16/9"
+              thumbnailForceAspectRatio
+              keepInfoVisible={keepInfoVisible}
+              metadata={{
+                releaseDate: item.published_date,
+                views: item.views,
+                author: item._formatted.channel?.data?.attributes?.title,
+                position: "Top",
+              }}
+              description={
+                item._matchesPosition.description && item._matchesPosition.description.length > 0
+                  ? item._formatted.description
+                  : undefined
+              }
+              hoverlay={{
+                __typename: "Video",
+                duration: item.duration,
+              }}
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
-
   return <AppLayout subPanel={subPanel} contentPanel={contentPanel} {...otherProps} />;
 };
 export default Channel;
@@ -138,10 +287,6 @@ export const getStaticProps: GetStaticProps = async (context) => {
   });
   if (!channel.videoChannels?.data[0]?.attributes) return { notFound: true };
 
-  channel.videoChannels.data[0].attributes.videos?.data
-    .sort((a, b) => compareDate(a.attributes?.published_date, b.attributes?.published_date))
-    .reverse();
-
   const props: Props = {
     channel: channel.videoChannels.data[0].attributes,
     openGraph: getOpenGraph(langui, channel.videoChannels.data[0].attributes.title),

src/pages/archives/videos/index.tsx

@@ -1,9 +1,8 @@
 import { GetStaticProps } from "next";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBoolean } from "usehooks-ts";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
-import { SmartList } from "components/SmartList";
-import { Icon } from "components/Ico";
 import { Switch } from "components/Inputs/Switch";
 import { TextInput } from "components/Inputs/TextInput";
 import { WithLabel } from "components/Inputs/WithLabel";
@@ -11,19 +10,22 @@ import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { ReturnButton } from "components/PanelComponents/ReturnButton";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { PreviewCard } from "components/PreviewCard";
-import { GetVideosPreviewQuery } from "graphql/generated";
-import { getReadySdk } from "graphql/sdk";
-import { filterHasAttributes } from "helpers/asserts";
-import { getVideoThumbnailURL } from "helpers/videos";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { getOpenGraph } from "helpers/openGraph";
-import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
-import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { CustomSearchResponse, meiliSearch } from "helpers/search";
+import { MeiliIndices, MeiliVideo } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { PreviewCard } from "components/PreviewCard";
+import { isDefined, isDefinedAndNotEmpty } from "helpers/asserts";
+import { getVideoThumbnailURL } from "helpers/videos";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { Select } from "components/Inputs/Select";
+import { sendAnalytics } from "helpers/analytics";
+import { Button } from "components/Inputs/Button";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -32,25 +34,120 @@ import { useAtomGetter } from "helpers/atoms";
 
 const DEFAULT_FILTERS_STATE = {
   searchName: "",
+  page: 1,
+  sortingMethod: 1,
+  onlyShowGone: false,
+  keepInfoVisible: true,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+  sort: z.coerce.number().min(0).max(5).optional(),
+  gone: z.coerce.boolean().optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
-interface Props extends AppLayoutRequired {
-  videos: NonNullable<GetVideosPreviewQuery["videos"]>["data"];
-}
+interface Props extends AppLayoutRequired {}
 
-const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
+const Videos = ({ ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const router = useTypedRouter(queryParamSchema);
 
-  const { value: keepInfoVisible, toggle: toggleKeepInfoVisible } = useBoolean(true);
+  const sortingMethods = useMemo(
+    () => [
+      { meiliAttribute: "sortable_published_date:asc", displayedName: langui.oldest },
+      { meiliAttribute: "sortable_published_date:desc", displayedName: langui.newest },
+      { meiliAttribute: "views:asc", displayedName: langui.least_popular },
+      { meiliAttribute: "views:desc", displayedName: langui.most_popular },
+      { meiliAttribute: "duration:asc", displayedName: langui.shortest },
+      { meiliAttribute: "duration:desc", displayedName: langui.longest },
+    ],
+    [
+      langui.least_popular,
+      langui.longest,
+      langui.most_popular,
+      langui.newest,
+      langui.oldest,
+      langui.shortest,
+    ]
+  );
 
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
+  const {
+    value: keepInfoVisible,
+    toggle: toggleKeepInfoVisible,
+    setValue: setKeepInfoVisible,
+  } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
+
+  const {
+    value: onlyShowGone,
+    toggle: toggleOnlyShowGone,
+    setValue: setOnlyShowGone,
+  } = useBoolean(router.query.gone ?? DEFAULT_FILTERS_STATE.onlyShowGone);
+
+  const [query, setQuery] = useState<string>(
+    router.query.query ?? DEFAULT_FILTERS_STATE.searchName
+  );
+
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+
+  const [sortingMethod, setSortingMethod] = useState<number>(
+    router.query.sort ?? DEFAULT_FILTERS_STATE.sortingMethod
+  );
+
+  const [videos, setVideos] = useState<CustomSearchResponse<MeiliVideo>>();
+
+  useEffect(() => {
+    const fetchVideos = async () => {
+      const currentSortingMethod = sortingMethods[sortingMethod];
+      const searchResult = await meiliSearch(MeiliIndices.VIDEOS, query, {
+        hitsPerPage: 25,
+        page,
+        attributesToRetrieve: [
+          "title",
+          "channel",
+          "uid",
+          "published_date",
+          "views",
+          "duration",
+          "description",
+        ],
+        attributesToHighlight: ["title", "channel", "description"],
+        attributesToCrop: ["description"],
+        sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined,
+        filter: onlyShowGone ? ["gone = true"] : undefined,
+      });
+
+      setVideos(searchResult);
+    };
+    fetchVideos();
+  }, [query, page, sortingMethod, onlyShowGone, sortingMethods]);
+
+  useEffect(() => {
+    if (router.isReady)
+      router.updateQuery({
+        page,
+        query,
+        sort: sortingMethod,
+        gone: onlyShowGone,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, query, sortingMethod, onlyShowGone, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+      if (isDefined(router.query.sort)) setSortingMethod(router.query.sort);
+      if (isDefined(router.query.gone)) setOnlyShowGone(router.query.gone);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
 
   const subPanel = (
     <SubPanel>
@@ -61,59 +158,107 @@ const Videos = ({ videos, ...otherProps }: Props): JSX.Element => {
         className="mb-10"
       />
 
-      <PanelHeader icon={Icon.Movie} title="Videos" description={langui.archives_description} />
+      <PanelHeader icon="movie" title={langui.videos} description={langui.archives_description} />
 
       <HorizontalLine />
 
       <TextInput
         className="mb-6 w-full"
-        placeholder={langui.search_title ?? "Search title..."}
-        value={searchName}
-        onChange={setSearchName}
+        placeholder={langui.search_title}
+        value={query}
+        onChange={(newQuery) => {
+          setPage(1);
+          setQuery(newQuery);
+          if (isDefinedAndNotEmpty(newQuery)) {
+            sendAnalytics("Videos", "Change search term");
+          } else {
+            sendAnalytics("Videos", "Clear search term");
+          }
+        }}
       />
 
+      <WithLabel label={langui.order_by}>
+        <Select
+          className="w-full"
+          options={sortingMethods.map((item) => item.displayedName ?? "")}
+          value={sortingMethod}
+          onChange={(newSort) => {
+            setPage(1);
+            setSortingMethod(newSort);
+            sendAnalytics(
+              "Videos",
+              `Change sorting method (${sortingMethods.map((item) => item.displayedName)[newSort]})`
+            );
+          }}
+        />
+      </WithLabel>
+
+      <WithLabel label={langui.only_unavailable_videos}>
+        <Switch
+          value={onlyShowGone}
+          onClick={() => {
+            toggleOnlyShowGone();
+          }}
+        />
+      </WithLabel>
+
       {hoverable && (
         <WithLabel label={langui.always_show_info}>
           <Switch value={keepInfoVisible} onClick={toggleKeepInfoVisible} />
         </WithLabel>
       )}
+
+      <Button
+        className="mt-8"
+        text={langui.reset_all_filters}
+        icon="settings_backup_restore"
+        onClick={() => {
+          setPage(1);
+          setOnlyShowGone(DEFAULT_FILTERS_STATE.onlyShowGone);
+          setPage(DEFAULT_FILTERS_STATE.page);
+          setQuery(DEFAULT_FILTERS_STATE.searchName);
+          setSortingMethod(DEFAULT_FILTERS_STATE.sortingMethod);
+          setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
+          sendAnalytics("Videos", "Reset all filters");
+        }}
+      />
     </SubPanel>
   );
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(videos, ["id", "attributes"] as const)}
-        getItemId={(item) => item.id}
-        renderItem={({ item }) => (
-          <PreviewCard
-            href={`/archives/videos/v/${item.attributes.uid}`}
-            title={item.attributes.title}
-            thumbnail={getVideoThumbnailURL(item.attributes.uid)}
-            thumbnailAspectRatio="16/9"
-            thumbnailForceAspectRatio
-            keepInfoVisible={keepInfoVisible}
-            metadata={{
-              releaseDate: item.attributes.published_date,
-              views: item.attributes.views,
-              author: item.attributes.channel?.data?.attributes?.title,
-              position: "Top",
-            }}
-            hoverlay={{
-              __typename: "Video",
-              duration: item.attributes.duration,
-            }}
-          />
-        )}
-        className={cIf(
-          isContentPanelAtLeast4xl,
-          "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
-          "grid-cols-2 gap-x-3 gap-y-5"
-        )}
-        paginationItemPerPage={25}
-        searchingTerm={searchName}
-        searchingBy={(item) => item.attributes.title}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={videos?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-start
+              gap-x-6 gap-y-8">
+          {videos?.hits.map((item) => (
+            <PreviewCard
+              key={item.uid}
+              href={`/archives/videos/v/${item.uid}`}
+              title={item._formatted.title}
+              thumbnail={getVideoThumbnailURL(item.uid)}
+              thumbnailAspectRatio="16/9"
+              thumbnailForceAspectRatio
+              keepInfoVisible={keepInfoVisible}
+              metadata={{
+                releaseDate: item.published_date,
+                views: item.views,
+                author: item._formatted.channel?.data?.attributes?.title,
+                position: "Top",
+              }}
+              description={
+                item._matchesPosition.description && item._matchesPosition.description.length > 0
+                  ? item._formatted.description
+                  : undefined
+              }
+              hoverlay={{
+                __typename: "Video",
+                duration: item.duration,
+              }}
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
   return <AppLayout subPanel={subPanel} contentPanel={contentPanel} {...otherProps} />;
@@ -125,17 +270,9 @@ export default Videos;
  * ───────────────────────────────────╯  NEXT DATA FETCHING  ╰──────────────────────────────────────
  */
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const sdk = getReadySdk();
+export const getStaticProps: GetStaticProps = (context) => {
   const langui = getLangui(context.locale);
-  const videos = await sdk.getVideosPreview();
-  if (!videos.videos) return { notFound: true };
-  videos.videos.data
-    .sort((a, b) => compareDate(a.attributes?.published_date, b.attributes?.published_date))
-    .reverse();
-
   const props: Props = {
-    videos: videos.videos.data,
     openGraph: getOpenGraph(langui, langui.videos ?? "Videos"),
   };
   return {

src/pages/archives/videos/v/[uid].tsx

@@ -2,7 +2,7 @@ import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { HorizontalLine } from "components/HorizontalLine";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { Button } from "components/Inputs/Button";
 import { InsetBox } from "components/Containers/InsetBox";
 import { NavOption } from "components/PanelComponents/NavOption";
@@ -79,18 +79,18 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
             <h1 className="text-2xl">{video.title}</h1>
             <div className="flex w-full flex-row flex-wrap gap-x-6">
               <p>
-                <Ico icon={Icon.Event} className="mr-1 translate-y-[.15em] !text-base" />
+                <Ico icon="event" className="mr-1 translate-y-[.15em] !text-base" />
                 {prettyDate(video.published_date, router.locale)}
               </p>
               <p>
-                <Ico icon={Icon.Visibility} className="mr-1 translate-y-[.15em] !text-base" />
+                <Ico icon="visibility" className="mr-1 translate-y-[.15em] !text-base" />
                 {isContentPanelAtLeast4xl
                   ? video.views.toLocaleString()
                   : prettyShortenNumber(video.views)}
               </p>
               {video.channel?.data?.attributes && (
                 <p>
-                  <Ico icon={Icon.ThumbUp} className="mr-1 translate-y-[.15em] !text-base" />
+                  <Ico icon="thumb_up" className="mr-1 translate-y-[.15em] !text-base" />
                   {isContentPanelAtLeast4xl
                     ? video.likes.toLocaleString()
                     : prettyShortenNumber(video.likes)}
@@ -109,7 +109,8 @@ const Video = ({ video, ...otherProps }: Props): JSX.Element => {
               <h2 className="text-2xl">{langui.channel}</h2>
               <div>
                 <Button
-                  href={`/archives/videos/c/${video.channel.data.attributes.uid}`}
+                  href={`/archives/videos/c/${video.channel.data.attributes.uid}\
+?page=1&query=&sort=1&gone=`}
                   text={video.channel.data.attributes.title}
                 />
                 <p>

src/pages/chronicles/[slug]/index.tsx

@@ -13,7 +13,6 @@ import { HorizontalLine } from "components/HorizontalLine";
 import { GetChroniclesChaptersQuery } from "graphql/generated";
 import { prettyInlineTitle, prettySlug } from "helpers/formatters";
 import { ReturnButton } from "components/PanelComponents/ReturnButton";
-import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
 import { getDescription } from "helpers/description";
@@ -21,6 +20,8 @@ import { TranslatedChroniclesList } from "components/Chronicles/ChroniclesList";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
+import { Ids } from "types/ids";
 
 /*
  *                                           ╭────────╮
@@ -34,6 +35,8 @@ interface Props extends AppLayoutRequired {
 
 const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
+  useScrollTopOnChange(Ids.ContentPanel, [chronicle.slug]);
+
   const [selectedTranslation, LanguageSwitcher, languageSwitcherProps] = useSmartLanguage({
     items: chronicle.translations,
     languageExtractor: useCallback(
@@ -143,7 +146,7 @@ const Chronicle = ({ chronicle, chapters, ...otherProps }: Props): JSX.Element =
     <AppLayout
       contentPanel={contentPanel}
       subPanel={subPanel}
-      subPanelIcon={Icon.FormatListNumbered}
+      subPanelIcon="format_list_numbered"
       {...otherProps}
     />
   );

src/pages/chronicles/index.tsx

@@ -2,7 +2,6 @@ import { GetStaticProps } from "next";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
-import { Icon } from "components/Ico";
 import { getReadySdk } from "graphql/sdk";
 import { GetChroniclesChaptersQuery } from "graphql/generated";
 import { filterHasAttributes } from "helpers/asserts";
@@ -28,7 +27,7 @@ const Chronicles = ({ chapters, ...otherProps }: Props): JSX.Element => {
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon={Icon.WatchLater}
+        icon="schedule"
         title={langui.chronicles}
         description={langui.chronicles_description}
       />

src/pages/contents/all.tsx

@@ -1,36 +1,35 @@
 import { GetStaticProps } from "next";
-import { useState, useCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBoolean } from "usehooks-ts";
-import naturalCompare from "string-natural-compare";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Select } from "components/Inputs/Select";
 import { Switch } from "components/Inputs/Switch";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { getReadySdk } from "graphql/sdk";
-import { prettyInlineTitle, prettySlug } from "helpers/formatters";
 import { TextInput } from "components/Inputs/TextInput";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { Button } from "components/Inputs/Button";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { Icon } from "components/Ico";
 import {
   filterDefined,
   filterHasAttributes,
+  isDefined,
   isDefinedAndNotEmpty,
-  SelectiveNonNullable,
 } from "helpers/asserts";
-import { GetContentsQuery } from "graphql/generated";
-import { SmartList } from "components/SmartList";
 import { getOpenGraph } from "helpers/openGraph";
 import { HorizontalLine } from "components/HorizontalLine";
-import { TranslatedPreviewCard } from "components/PreviewCard";
-import { cJoin, cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { containsHighlight, CustomSearchResponse, meiliSearch } from "helpers/search";
+import { MeiliContent, MeiliIndices } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { TranslatedPreviewCard } from "components/PreviewCard";
+import { prettySlug } from "helpers/formatters";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -38,108 +37,117 @@ import { useAtomGetter } from "helpers/atoms";
  */
 
 const DEFAULT_FILTERS_STATE = {
-  groupingMethod: -1,
-  keepInfoVisible: false,
-  searchName: "",
+  sortingMethod: 0,
+  keepInfoVisible: true,
+  query: "",
+  page: 1,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+  sort: z.coerce.number().min(0).max(5).optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
-interface Props extends AppLayoutRequired {
-  contents: NonNullable<GetContentsQuery["contents"]>["data"];
-}
+interface Props extends AppLayoutRequired {}
 
-const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
+const Contents = (props: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
   const langui = useAtomGetter(atoms.localData.langui);
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+  const router = useTypedRouter(queryParamSchema);
 
-  const [groupingMethod, setGroupingMethod] = useState<number>(
-    DEFAULT_FILTERS_STATE.groupingMethod
+  const sortingMethods = useMemo(
+    () => [
+      { meiliAttribute: "slug:asc", displayedName: langui.name },
+      { meiliAttribute: "sortable_updated_date:asc", displayedName: langui.oldest },
+      { meiliAttribute: "sortable_updated_date:desc", displayedName: langui.newest },
+    ],
+    [langui.name, langui.newest, langui.oldest]
   );
+
+  const [sortingMethod, setSortingMethod] = useState<number>(
+    router.query.sort ?? DEFAULT_FILTERS_STATE.sortingMethod
+  );
+
   const {
     value: keepInfoVisible,
     toggle: toggleKeepInfoVisible,
     setValue: setKeepInfoVisible,
   } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
 
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+  const [contents, setContents] = useState<CustomSearchResponse<MeiliContent>>();
+  const [query, setQuery] = useState(router.query.query ?? DEFAULT_FILTERS_STATE.query);
 
-  const groupingFunction = useCallback(
-    (
-      item: SelectiveNonNullable<
-        NonNullable<GetContentsQuery["contents"]>["data"][number],
-        "attributes" | "id"
-      >
-    ): string[] => {
-      switch (groupingMethod) {
-        case 0: {
-          const categories = filterHasAttributes(item.attributes.categories?.data, [
-            "attributes",
-          ] as const);
-          if (categories.length > 0) {
-            return categories.map((category) => category.attributes.name);
-          }
-          return [langui.no_category ?? "No category"];
+  useEffect(() => {
+    const fetchPosts = async () => {
+      const currentSortingMethod = sortingMethods[sortingMethod];
+      const searchResult = await meiliSearch(MeiliIndices.CONTENT, query, {
+        attributesToRetrieve: ["translations", "id", "slug", "categories", "type", "thumbnail"],
+        attributesToHighlight: ["translations"],
+        attributesToCrop: ["translations.displayable_description"],
+        hitsPerPage: 25,
+        page,
+        sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined,
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) {
+          item._formatted.translations = filterDefined(item._formatted.translations).filter(
+            (translation) => containsHighlight(JSON.stringify(translation))
+          );
         }
-        case 1: {
-          return [
-            item.attributes.type?.data?.attributes?.titles?.[0]?.title ??
-            item.attributes.type?.data?.attributes?.slug
-              ? prettySlug(item.attributes.type.data.attributes.slug)
-              : langui.no_type ?? "No type",
-          ];
-        }
-        default: {
-          return [""];
-        }
-      }
-    },
-    [groupingMethod, langui]
-  );
+        return item;
+      });
+      setContents(searchResult);
+    };
+    fetchPosts();
+  }, [query, page, sortingMethod, sortingMethods]);
 
-  const filteringFunction = useCallback(
-    (item: SelectiveNonNullable<Props["contents"][number], "attributes" | "id">) => {
-      if (searchName.length > 1) {
-        if (
-          filterDefined(item.attributes.translations).find((translation) =>
-            prettyInlineTitle(translation.pre_title, translation.title, translation.subtitle)
-              .toLowerCase()
-              .includes(searchName.toLowerCase())
-          )
-        ) {
-          return true;
-        }
-        return false;
-      }
-      return true;
-    },
-    [searchName]
-  );
+  useEffect(() => {
+    if (router.isReady)
+      router.updateQuery({
+        page,
+        query,
+        sort: sortingMethod,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, query, sortingMethod, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+      if (isDefined(router.query.sort)) setSortingMethod(router.query.sort);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
 
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon={Icon.Workspaces}
+        icon="workspaces"
         title={langui.contents}
         description={langui.contents_description}
       />
 
       <HorizontalLine />
 
-      <Button href="/contents" text={langui.switch_to_folder_view} icon={Icon.Folder} />
+      <Button href="/contents" text={langui.switch_to_folder_view} icon="folder" />
 
       <HorizontalLine />
 
       <TextInput
         className="mb-6 w-full"
         placeholder={langui.search_title ?? "Search..."}
-        value={searchName}
+        value={query}
         onChange={(name) => {
-          setSearchName(name);
+          setPage(1);
+          setQuery(name);
           if (isDefinedAndNotEmpty(name)) {
             sendAnalytics("Contents/All", "Change search term");
           } else {
@@ -148,19 +156,19 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
         }}
       />
 
-      <WithLabel label={langui.group_by}>
+      <WithLabel label={langui.order_by}>
         <Select
           className="w-full"
-          options={[langui.category ?? "Category", langui.type ?? "Type"]}
-          value={groupingMethod}
-          onChange={(value) => {
-            setGroupingMethod(value);
+          options={sortingMethods.map((item) => item.displayedName ?? "")}
+          value={sortingMethod}
+          onChange={(newSort) => {
+            setPage(1);
+            setSortingMethod(newSort);
             sendAnalytics(
               "Contents/All",
-              `Change grouping method (${["none", "category", "type"][value + 1]})`
+              `Change sorting method (${sortingMethods.map((item) => item.displayedName)[newSort]})`
             );
           }}
-          allowEmpty
         />
       </WithLabel>
 
@@ -179,10 +187,11 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
       <Button
         className="mt-8"
         text={langui.reset_all_filters}
-        icon={Icon.Replay}
+        icon="settings_backup_restore"
         onClick={() => {
-          setSearchName(DEFAULT_FILTERS_STATE.searchName);
-          setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
+          setPage(1);
+          setQuery(DEFAULT_FILTERS_STATE.query);
+          setSortingMethod(DEFAULT_FILTERS_STATE.sortingMethod);
           setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
           sendAnalytics("Contents/All", "Reset all filters");
         }}
@@ -192,71 +201,49 @@ const Contents = ({ contents, ...otherProps }: Props): JSX.Element => {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(contents, ["attributes", "id"] as const)}
-        getItemId={(item) => item.id}
-        renderItem={({ item }) => (
-          <TranslatedPreviewCard
-            href={`/contents/${item.attributes.slug}`}
-            translations={filterHasAttributes(item.attributes.translations, [
-              "language.data.attributes.code",
-            ] as const).map((translation) => ({
-              pre_title: translation.pre_title,
-              title: translation.title,
-              subtitle: translation.subtitle,
-              language: translation.language.data.attributes.code,
-            }))}
-            fallback={{ title: prettySlug(item.attributes.slug) }}
-            thumbnail={item.attributes.thumbnail?.data?.attributes}
-            thumbnailAspectRatio="3/2"
-            thumbnailForceAspectRatio
-            topChips={
-              item.attributes.type?.data?.attributes
-                ? [
-                    item.attributes.type.data.attributes.titles?.[0]
-                      ? item.attributes.type.data.attributes.titles[0]?.title
-                      : prettySlug(item.attributes.type.data.attributes.slug),
-                  ]
-                : undefined
-            }
-            bottomChips={item.attributes.categories?.data.map(
-              (category) => category.attributes?.short ?? ""
-            )}
-            keepInfoVisible={keepInfoVisible}
-          />
-        )}
-        className={cJoin(
-          "items-end",
-          cIf(
-            isContentPanelAtLeast4xl,
-            "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
-            "grid-cols-2 gap-x-3 gap-y-5"
-          )
-        )}
-        groupingFunction={groupingFunction}
-        filteringFunction={filteringFunction}
-        searchingTerm={searchName}
-        searchingBy={(item) =>
-          `
-            ${item.attributes.slug}
-            ${filterDefined(item.attributes.translations)
-              .map((translation) =>
-                prettyInlineTitle(translation.pre_title, translation.title, translation.subtitle)
-              )
-              .join(" ")}`
-        }
-        paginationItemPerPage={50}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={contents?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-start
+              gap-x-6 gap-y-8">
+          {contents?.hits.map((item) => (
+            <TranslatedPreviewCard
+              key={item.id}
+              href={`/contents/${item.slug}`}
+              translations={filterHasAttributes(item._formatted.translations, [
+                "language.data.attributes.code",
+              ] as const).map(({ displayable_description, language, ...otherAttributes }) => ({
+                ...otherAttributes,
+                description: containsHighlight(displayable_description)
+                  ? displayable_description
+                  : undefined,
+                language: language.data.attributes.code,
+              }))}
+              fallback={{ title: prettySlug(item.slug) }}
+              thumbnail={item.thumbnail?.data?.attributes}
+              thumbnailAspectRatio="3/2"
+              thumbnailForceAspectRatio
+              topChips={
+                item.type?.data?.attributes
+                  ? [
+                      item.type.data.attributes.titles?.[0]
+                        ? item.type.data.attributes.titles[0]?.title
+                        : prettySlug(item.type.data.attributes.slug),
+                    ]
+                  : undefined
+              }
+              bottomChips={item.categories?.data.map(
+                (category) => category.attributes?.short ?? ""
+              )}
+              keepInfoVisible={keepInfoVisible}
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
 
   return (
-    <AppLayout
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-      subPanelIcon={Icon.Search}
-      {...otherProps}
-    />
+    <AppLayout subPanel={subPanel} contentPanel={contentPanel} subPanelIcon="search" {...props} />
   );
 };
 export default Contents;
@@ -266,22 +253,10 @@ export default Contents;
  * ───────────────────────────────────╯  NEXT DATA FETCHING  ╰──────────────────────────────────────
  */
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const sdk = getReadySdk();
+export const getStaticProps: GetStaticProps = (context) => {
   const langui = getLangui(context.locale);
-  const contents = await sdk.getContents({
-    language_code: context.locale ?? "en",
-  });
-  if (!contents.contents) return { notFound: true };
-
-  contents.contents.data.sort((a, b) => {
-    const titleA = a.attributes?.slug ?? "";
-    const titleB = b.attributes?.slug ?? "";
-    return naturalCompare(titleA, titleB);
-  });
 
   const props: Props = {
-    contents: contents.contents.data,
     openGraph: getOpenGraph(langui, langui.contents ?? "Contents"),
   };
   return {

src/pages/contents/folder/[slug].tsx

@@ -9,7 +9,7 @@ import { GetContentsFolderQuery } from "graphql/generated";
 import { getDefaultPreferredLanguages, staticSmartLanguage } from "helpers/locales";
 import { prettySlug } from "helpers/formatters";
 import { SmartList } from "components/SmartList";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { Button, TranslatedButton } from "components/Inputs/Button";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
@@ -39,14 +39,14 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon={Icon.Workspaces}
+        icon="workspaces"
         title={langui.contents}
         description={langui.contents_description}
       />
 
       <HorizontalLine />
 
-      <Button href="/contents/all" text={langui.switch_to_grid_view} icon={Icon.Apps} />
+      <Button href="/contents/all" text={langui.switch_to_grid_view} icon="apps" />
     </SubPanel>
   );
 
@@ -56,7 +56,7 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen
         {folder.parent_folder?.data?.attributes && (
           <>
             {folder.parent_folder.data.attributes.slug === "root" ? (
-              <Button href="/contents" icon={Icon.Home} />
+              <Button href="/contents" icon="home" />
             ) : (
               <TranslatedButton
                 href={`/contents/folder/${folder.parent_folder.data.attributes.slug}`}
@@ -71,12 +71,12 @@ const ContentsFolder = ({ openGraph, folder, ...otherProps }: Props): JSX.Elemen
                 }}
               />
             )}
-            <Ico icon={Icon.ChevronRight} />
+            <Ico icon="chevron_right" />
           </>
         )}
 
         {folder.slug === "root" ? (
-          <Button href="/contents" icon={Icon.Home} active />
+          <Button href="/contents" icon="home" active />
         ) : (
           <TranslatedButton
             translations={filterHasAttributes(folder.titles, [

src/pages/dev/editor.tsx

@@ -7,7 +7,6 @@ import { Markdawn, TableOfContents } from "components/Markdown/Markdawn";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { Popup } from "components/Containers/Popup";
 import { ToolTip } from "components/ToolTip";
-import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 
@@ -208,15 +207,15 @@ const Editor = (props: Props): JSX.Element => {
               <Button onClick={() => preline("###### ")} text={"H6"} />
             </div>
           }>
-          <Button icon={Icon.Title} />
+          <Button icon="title" />
         </ToolTip>
 
         <ToolTip placement="bottom" content={<h3 className="text-lg">Toggle Bold</h3>}>
-          <Button onClick={() => toggleWrap("**")} icon={Icon.FormatBold} />
+          <Button onClick={() => toggleWrap("**")} icon="format_bold" />
         </ToolTip>
 
         <ToolTip placement="bottom" content={<h3 className="text-lg">Toggle Italic</h3>}>
-          <Button onClick={() => toggleWrap("_")} icon={Icon.FormatItalic} />
+          <Button onClick={() => toggleWrap("_")} icon="format_italic" />
         </ToolTip>
 
         <ToolTip
@@ -230,7 +229,7 @@ const Editor = (props: Props): JSX.Element => {
               </p>
             </>
           }>
-          <Button onClick={() => toggleWrap("`")} icon={Icon.Code} />
+          <Button onClick={() => toggleWrap("`")} icon="code" />
         </ToolTip>
 
         <ToolTip
@@ -246,7 +245,7 @@ const Editor = (props: Props): JSX.Element => {
               insert("[^x]");
               appendDoc("\n\n[^x]: This is a footnote.");
             }}
-            icon={Icon.Superscript}
+            icon="superscript"
           />
         </ToolTip>
 
@@ -267,7 +266,7 @@ const Editor = (props: Props): JSX.Element => {
                       <h3 className="text-lg">Transcript container</h3>
                     </>
                   }>
-                  <Button onClick={() => wrap("Transcript", {}, true)} icon={Icon.AddBox} />
+                  <Button onClick={() => wrap("Transcript", {}, true)} icon="add_box" />
                 </ToolTip>
                 <ToolTip
                   placement="right"
@@ -282,20 +281,20 @@ const Editor = (props: Props): JSX.Element => {
                   }>
                   <Button
                     onClick={() => wrap("Line", { name: "speaker" })}
-                    icon={Icon.RecordVoiceOver}
+                    icon="record_voice_over"
                   />
                 </ToolTip>
               </div>
             </>
           }>
-          <Button icon={Icon.RecordVoiceOver} />
+          <Button icon="record_voice_over" />
         </ToolTip>
 
         <ToolTip placement="bottom" content={<h3 className="text-lg">Inset box</h3>}>
-          <Button onClick={() => wrap("InsetBox", {}, true)} icon={Icon.CheckBoxOutlineBlank} />
+          <Button onClick={() => wrap("InsetBox", {}, true)} icon="check_box_outline_blank" />
         </ToolTip>
         <ToolTip placement="bottom" content={<h3 className="text-lg">Scene break</h3>}>
-          <Button onClick={() => insert("\n* * *\n")} icon={Icon.MoreHoriz} />
+          <Button onClick={() => insert("\n* * *\n")} icon="more_horiz" />
         </ToolTip>
         <ToolTip
           content={
@@ -311,7 +310,7 @@ const Editor = (props: Props): JSX.Element => {
                 }>
                 <Button
                   onClick={() => insert("[Link name](https://domain.com)")}
-                  icon={Icon.Link}
+                  icon="link"
                   text={"External"}
                 />
               </ToolTip>
@@ -326,7 +325,7 @@ const Editor = (props: Props): JSX.Element => {
                     </p>
                   </>
                 }>
-                <Button onClick={() => wrap("IntraLink", {})} icon={Icon.Link} text={"Internal"} />
+                <Button onClick={() => wrap("IntraLink", {})} icon="link" text={"Internal"} />
               </ToolTip>
               <ToolTip
                 placement="right"
@@ -341,19 +340,19 @@ const Editor = (props: Props): JSX.Element => {
                 }>
                 <Button
                   onClick={() => wrap("IntraLink", { target: "target" })}
-                  icon={Icon.Link}
+                  icon="link"
                   text="Internal (w/ target)"
                 />
               </ToolTip>
             </div>
           }>
-          <Button icon={Icon.Link} />
+          <Button icon="link" />
         </ToolTip>
 
         <ToolTip
           placement="bottom"
           content={<h3 className="text-lg">Player&rsquo;s name placeholder</h3>}>
-          <Button onClick={() => insert("@player")} icon={Icon.Person} />
+          <Button onClick={() => insert("@player")} icon="person" />
         </ToolTip>
 
         <ToolTip placement="bottom" content={<h3 className="text-lg">Open HTML Converter</h3>}>
@@ -361,7 +360,7 @@ const Editor = (props: Props): JSX.Element => {
             onClick={() => {
               setConverterOpened(true);
             }}
-            icon={Icon.Html}
+            icon="html"
           />
         </ToolTip>
       </div>

src/pages/dev/showcase/design-system.tsx

@@ -7,7 +7,6 @@ import { getLangui } from "graphql/fetchLocalData";
 import { getOpenGraph } from "helpers/openGraph";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { Button } from "components/Inputs/Button";
-import { Icon } from "components/Ico";
 import { cJoin } from "helpers/className";
 import { HorizontalLine } from "components/HorizontalLine";
 import { Switch } from "components/Inputs/Switch";
@@ -172,24 +171,24 @@ const DesignSystem = (props: Props): JSX.Element => {
           <p>Icon + Text</p>
 
           <p className="self-center justify-self-start">Normal</p>
-          <Button icon={Icon.Check} />
+          <Button icon="check" />
           <Button text="Label" />
-          <Button icon={Icon.NavigateBefore} text="Label" />
+          <Button icon="navigate_before" text="Label" />
 
           <p className="self-center justify-self-start">Active</p>
-          <Button icon={Icon.Camera} active />
+          <Button icon="camera" active />
           <Button text="Label" active />
-          <Button icon={Icon.NavigateBefore} text="Label" active />
+          <Button icon="navigate_before" text="Label" active />
 
           <p className="self-center justify-self-start">Disabled</p>
-          <Button icon={Icon.Air} disabled />
+          <Button icon="air" disabled />
           <Button text="Label" disabled />
-          <Button icon={Icon.NavigateBefore} text="Label" disabled />
+          <Button icon="navigate_before" text="Label" disabled />
 
           <p className="self-center justify-self-start">Badge</p>
-          <Button icon={Icon.Snooze} badgeNumber={5} />
+          <Button icon="snooze" badgeNumber={5} />
           <Button text="Label" badgeNumber={12} />
-          <Button icon={Icon.NavigateBefore} text="Label" badgeNumber={201} />
+          <Button icon="navigate_before" text="Label" badgeNumber={201} />
         </div>
 
         <HorizontalLine />
@@ -197,43 +196,39 @@ const DesignSystem = (props: Props): JSX.Element => {
 
         <div className="grid grid-cols-[repeat(4,auto)] place-content-center gap-4">
           <p className="self-center justify-self-start">Normal</p>
-          <Button icon={Icon.Check} size={"small"} />
+          <Button icon="check" size={"small"} />
           <Button text="Label" size={"small"} />
-          <Button icon={Icon.NavigateBefore} text="Label" size={"small"} />
+          <Button icon="navigate_before" text="Label" size={"small"} />
 
           <p className="self-center justify-self-start">Active</p>
-          <Button icon={Icon.Camera} active size={"small"} />
+          <Button icon="camera" active size={"small"} />
           <Button text="Label" active size={"small"} />
-          <Button icon={Icon.NavigateBefore} text="Label" active size={"small"} />
+          <Button icon="navigate_before" text="Label" active size={"small"} />
 
           <p className="self-center justify-self-start">Disabled</p>
-          <Button icon={Icon.Air} disabled size={"small"} />
+          <Button icon="air" disabled size={"small"} />
           <Button text="Label" disabled size={"small"} />
-          <Button icon={Icon.NavigateBefore} text="Label" disabled size={"small"} />
+          <Button icon="navigate_before" text="Label" disabled size={"small"} />
 
           <p className="self-center justify-self-start">Badge</p>
-          <Button icon={Icon.Snooze} badgeNumber={5} size={"small"} />
+          <Button icon="snooze" badgeNumber={5} size={"small"} />
           <Button text="Label" badgeNumber={12} size={"small"} />
-          <Button icon={Icon.NavigateBefore} text="Label" badgeNumber={201} size={"small"} />
+          <Button icon="navigate_before" text="Label" badgeNumber={201} size={"small"} />
         </div>
 
         <HorizontalLine />
         <h3 className="text-xl">Groups</h3>
         <div className="grid place-items-center gap-4">
-          <ButtonGroup buttonsProps={[{ icon: Icon.CallEnd }, { icon: Icon.ZoomInMap }]} />
+          <ButtonGroup buttonsProps={[{ icon: "call_end" }, { icon: "zoom_in_map" }]} />
           <ButtonGroup
-            buttonsProps={[
-              { icon: Icon.CarCrash },
-              { icon: Icon.TimeToLeave },
-              { icon: Icon.LeakAdd },
-            ]}
+            buttonsProps={[{ icon: "car_crash" }, { icon: "timelapse" }, { icon: "leak_add" }]}
           />
           <ButtonGroup
             buttonsProps={[
-              { icon: Icon.CarCrash },
-              { icon: Icon.TimeToLeave, text: "Label", active: true },
+              { icon: "car_crash" },
+              { icon: "timelapse", text: "Label", active: true },
               { text: "Another Label" },
-              { icon: Icon.Cable },
+              { icon: "cable" },
             ]}
           />
           <ButtonGroup
@@ -244,7 +239,7 @@ const DesignSystem = (props: Props): JSX.Element => {
                 onClick: () => setButtonGroupState(0),
               },
               {
-                icon: Icon.AdUnits,
+                icon: "ad_units",
                 text: "Label",
                 active: buttonGroupState === 1,
                 onClick: () => setButtonGroupState(1),
@@ -255,7 +250,7 @@ const DesignSystem = (props: Props): JSX.Element => {
                 onClick: () => setButtonGroupState(2),
               },
               {
-                icon: Icon.Security,
+                icon: "security",
                 active: buttonGroupState === 3,
                 onClick: () => setButtonGroupState(3),
               },
@@ -462,52 +457,41 @@ const DesignSystem = (props: Props): JSX.Element => {
 
           <p>Normal</p>
           <NavOption title="Title" url="#" />
-          <NavOption icon={Icon.Home} title="Title" url="#" />
+          <NavOption icon="home" title="Title" url="#" />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" />
+          <NavOption title="Title" subtitle="This is a subtitle" url="#" icon="calendar_month" />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.CalendarMonth}
-          />
-          <NavOption
-            title="Title"
-            subtitle="This is a subtitle"
-            url="#"
-            icon={Icon.AccountBalance}
+            icon="account_balance"
             reduced
           />
 
           <p>Border</p>
           <NavOption title="Title" url="#" border />
-          <NavOption icon={Icon.TravelExplore} title="Title" url="#" border />
+          <NavOption icon="travel_explore" title="Title" url="#" border />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" border />
-          <NavOption title="Title" subtitle="This is a subtitle" url="#" icon={Icon.Help} border />
+          <NavOption title="Title" subtitle="This is a subtitle" url="#" icon="help" border />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.TableRestaurant}
+            icon="table_restaurant"
             border
             reduced
           />
 
           <p>Active</p>
           <NavOption title="Title" url="#" active />
-          <NavOption icon={Icon.Hail} title="Title" url="#" active />
+          <NavOption icon="hail" title="Title" url="#" active />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" active />
+          <NavOption title="Title" subtitle="This is a subtitle" url="#" icon="grading" active />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Grading}
-            active
-          />
-          <NavOption
-            title="Title"
-            subtitle="This is a subtitle"
-            url="#"
-            icon={Icon.Timer}
+            icon="timer"
             active
             reduced
           />
@@ -517,13 +501,13 @@ const DesignSystem = (props: Props): JSX.Element => {
             <br />+ Border
           </p>
           <NavOption title="Title" url="#" active />
-          <NavOption icon={Icon.Upcoming} title="Title" url="#" active border />
+          <NavOption icon="upcoming" title="Title" url="#" active border />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" active border />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Gamepad}
+            icon="gamepad"
             active
             border
           />
@@ -531,7 +515,7 @@ const DesignSystem = (props: Props): JSX.Element => {
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Scale}
+            icon="scale"
             active
             border
             reduced
@@ -539,20 +523,20 @@ const DesignSystem = (props: Props): JSX.Element => {
 
           <p>Disabled</p>
           <NavOption title="Title" url="#" disabled />
-          <NavOption icon={Icon.Lan} title="Title" url="#" disabled />
+          <NavOption icon="lan" title="Title" url="#" disabled />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" disabled />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.AlignHorizontalRight}
+            icon="align_horizontal_right"
             disabled
           />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.YoutubeSearchedFor}
+            icon="youtube_searched_for"
             reduced
             disabled
           />
@@ -562,13 +546,13 @@ const DesignSystem = (props: Props): JSX.Element => {
             <br />+ Border
           </p>
           <NavOption title="Title" url="#" border disabled />
-          <NavOption icon={Icon.Sanitizer} title="Title" url="#" border disabled />
+          <NavOption icon="sanitizer" title="Title" url="#" border disabled />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" border disabled />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Pages}
+            icon="pages"
             border
             disabled
           />
@@ -576,7 +560,7 @@ const DesignSystem = (props: Props): JSX.Element => {
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Synagogue}
+            icon="synagogue"
             border
             reduced
             disabled
@@ -587,13 +571,13 @@ const DesignSystem = (props: Props): JSX.Element => {
             <br />+ Active
           </p>
           <NavOption title="Title" url="#" active disabled />
-          <NavOption icon={Icon.Stairs} title="Title" url="#" active disabled />
+          <NavOption icon="stairs" title="Title" url="#" active disabled />
           <NavOption title="Title" subtitle="This is a subtitle" url="#" active disabled />
           <NavOption
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Park}
+            icon="park"
             active
             disabled
           />
@@ -601,7 +585,7 @@ const DesignSystem = (props: Props): JSX.Element => {
             title="Title"
             subtitle="This is a subtitle"
             url="#"
-            icon={Icon.Password}
+            icon="password"
             active
             reduced
             disabled

src/pages/library/[slug]/index.tsx

@@ -42,7 +42,7 @@ import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { isUntangibleGroupItem } from "helpers/libraryItem";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { WithLabel } from "components/Inputs/WithLabel";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { cJoin, cIf } from "helpers/className";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { getOpenGraph } from "helpers/openGraph";
@@ -740,7 +740,7 @@ const ContentLine = ({
         className={`grid-flow-col place-content-start place-items-center gap-2 ${
           isOpened ? "grid" : "hidden"
         }`}>
-        <Ico icon={Icon.SubdirectoryArrowRight} className="text-dark" />
+        <Ico icon={"subdirectory_arrow_right"} className="text-dark" />
 
         {hasScanSet || isDefined(content) ? (
           <>

src/pages/library/[slug]/reader.tsx

@@ -2,8 +2,8 @@ import { GetStaticPaths, GetStaticPathsResult, GetStaticProps } from "next";
 import { Fragment, useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import Slider from "rc-slider";
-import { useRouter } from "next/router";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import {
   Enum_Componentmetadatabooks_Page_Order as PageOrder,
@@ -22,7 +22,6 @@ import { cIf, cJoin } from "helpers/className";
 import { clamp, isInteger } from "helpers/numbers";
 import { SubPanel } from "components/Containers/SubPanel";
 import { Button } from "components/Inputs/Button";
-import { Icon } from "components/Ico";
 import { Ids } from "types/ids";
 import { Switch } from "components/Inputs/Switch";
 import { WithLabel } from "components/Inputs/WithLabel";
@@ -40,6 +39,15 @@ import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
 import { FilterSettings, useReaderSettings } from "hooks/useReaderSettings";
 import { useIsWebkit } from "hooks/useIsWebkit";
+import { useTypedRouter } from "hooks/useTypedRouter";
+
+type BookType = "book" | "manga";
+type DisplayMode = "double" | "single";
+
+/*
+ *                                         ╭─────────────╮
+ * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
+ */
 
 const CUSTOM_DARK_DROPSHADOW = `
   drop-shadow(0 0    0.5em rgb(var(--theme-color-shade) / 30%))
@@ -56,8 +64,10 @@ const CUSTOM_LIGHT_DROPSHADOW = `
 const SIDEPAGES_PAGE_COUNT_ON_TEXTURE = 200;
 const SIDEPAGES_PAGE_WIDTH = 0.02;
 
-type BookType = "book" | "manga";
-type DisplayMode = "double" | "single";
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+});
 
 /*
  *                                           ╭────────╮
@@ -107,7 +117,7 @@ const LibrarySlug = ({
   const [displayMode, setDisplayMode] = useState<DisplayMode>(
     is1ColumnLayout ? "single" : "double"
   );
-  const router = useRouter();
+  const router = useTypedRouter(queryParamSchema);
   const isWebkit = useIsWebkit();
 
   const { isFullscreen, toggleFullscreen, requestFullscreen } = useFullscreen(Ids.ContentPanel);
@@ -119,12 +129,7 @@ const LibrarySlug = ({
 
   const changeCurrentPageIndex = useCallback(
     (callbackFn: (current: number) => number) => {
-      setCurrentPageIndex((current) => {
-        let result = callbackFn(current);
-        result = clamp(result, 0, pages.length - 1);
-        window.history.replaceState({}, "", `?page=${result - 1}`);
-        return result;
-      });
+      setCurrentPageIndex((current) => clamp(callbackFn(current), 0, pages.length - 1));
     },
     [pages.length]
   );
@@ -132,13 +137,19 @@ const LibrarySlug = ({
   useEffect(() => setDisplayMode(is1ColumnLayout ? "single" : "double"), [is1ColumnLayout]);
 
   useEffect(() => {
-    const indexQueryString = router.asPath.indexOf("?page=");
-    if (indexQueryString > 0) {
-      const page = parseInt(router.asPath.slice(indexQueryString + "?page=".length), 10);
-      changeCurrentPageIndex(() => page + 1);
+    if (router.isReady)
+      router.updateQuery({
+        page: currentPageIndex - 1,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPageIndex, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setCurrentPageIndex(router.query.page + 1);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [router.asPath]);
+  }, [router.isReady]);
 
   const changeDisplayMode = useCallback(
     (newDisplayMode: DisplayMode) => {
@@ -311,13 +322,13 @@ const LibrarySlug = ({
         <ButtonGroup
           buttonsProps={[
             {
-              icon: Icon.Description,
+              icon: "description",
               tooltip: langui.single_page_view,
               active: displayMode === "single",
               onClick: () => changeDisplayMode("single"),
             },
             {
-              icon: Icon.AutoStories,
+              icon: "auto_stories",
               tooltip: langui.double_page_view,
               active: displayMode === "double",
               onClick: () => changeDisplayMode("double"),
@@ -347,7 +358,7 @@ const LibrarySlug = ({
       <Button
         className="mt-8"
         text={langui.reset_all_options}
-        icon={Icon.Replay}
+        icon="settings_backup_restore"
         onClick={() => {
           resetReaderSettings();
           setDisplayMode(is1ColumnLayout ? "single" : "double");
@@ -364,7 +375,6 @@ const LibrarySlug = ({
           onZoom={(zoom) => setCurrentZoom(zoom.state.scale)}
           panning={{ disabled: currentZoom <= 1, velocityDisabled: false }}
           doubleClick={{ disabled: true, mode: "reset" }}
-          zoomAnimation={{ size: 0.1 }}
           velocityAnimation={{ animationTime: 0, equalToMove: true }}>
           <TransformComponent
             wrapperStyle={{ overflow: "visible", placeSelf: "center" }}
@@ -497,12 +507,12 @@ const LibrarySlug = ({
           />
           <div className="flex gap-2">
             <Button
-              icon={isGalleryMode ? Icon.ExpandMore : Icon.ExpandLess}
+              icon={isGalleryMode ? "expand_more" : "expand_less"}
               onClick={() => setIsGalleryMode((current) => !current)}
               size="small"
             />
             <Button
-              icon={isFullscreen ? Icon.FullscreenExit : Icon.Fullscreen}
+              icon={isFullscreen ? "fullscreen_exit" : "fullscreen"}
               onClick={toggleFullscreen}
               size="small"
             />
@@ -688,9 +698,8 @@ interface PageFiltersProps {
 }
 
 const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
-  const isDarkMode = useAtomGetter(atoms.settings.darkMode);
   const commonCss = cJoin(
-    "absolute inset-0",
+    "absolute inset-0 dark:opacity-100",
     cIf(page === "right", "[background-position-x:-100%]")
   );
 
@@ -700,9 +709,9 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
         <div
           className={cJoin(
             commonCss,
-            `bg-blend-multiply mix-blend-exclusion [background-image:url(/reader/paper.webp)]
-          [background-size:20vmin_20vmin]`,
-            cIf(bookType === "book", "bg-[#000]/60")
+            `mix-blend-exclusion [background-image:url(/reader/paper.webp)]
+            [background-size:20vmin_20vmin]`,
+            cIf(bookType === "book", "opacity-60 dark:opacity-60")
           )}
         />
       )}
@@ -711,9 +720,8 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
         <div
           className={cJoin(
             commonCss,
-            `bg-blend-lighten mix-blend-multiply [background-image:url(/reader/book-fold.webp)]
-          [background-size:200%_100%]`,
-            cIf(!isDarkMode, "bg-[#FFF]/50")
+            `opacity-50 mix-blend-multiply
+            [background-image:url(/reader/book-fold.webp)] [background-size:200%_100%]`
           )}
         />
       )}
@@ -723,8 +731,7 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
           <div
             className={cJoin(
               commonCss,
-              `bg-blend-lighten mix-blend-multiply [background-size:200%_100%]`,
-              cIf(!isDarkMode, "bg-[#FFF]/50"),
+              "opacity-50 mix-blend-multiply [background-size:200%_100%]",
               cIf(
                 page === "single",
                 "[background-image:url(/reader/lighting-single-page.webp)]",
@@ -735,8 +742,8 @@ const PageFilters = ({ page, bookType, options }: PageFiltersProps) => {
           <div
             className={cJoin(
               commonCss,
-              `bg-blend-lighten mix-blend-soft-light [background-size:200%_100%]`,
-              cIf(!isDarkMode, "bg-[#FFF]/30"),
+              `bg-[#FFF]/30 bg-blend-lighten mix-blend-soft-light [background-size:200%_100%]
+               dark:bg-[#000]`,
               cIf(
                 page === "single",
                 "[background-image:url(/reader/specular-single-page.webp)]",

src/pages/library/index.tsx

@@ -1,44 +1,41 @@
 import { GetStaticProps } from "next";
-import { useState, useCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBoolean } from "usehooks-ts";
-import naturalCompare from "string-natural-compare";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Select } from "components/Inputs/Select";
 import { Switch } from "components/Inputs/Switch";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { GetLibraryItemsPreviewQuery } from "graphql/generated";
-import { getReadySdk } from "graphql/sdk";
-import { prettyInlineTitle, prettyItemSubType } from "helpers/formatters";
 import { LibraryItemUserStatus } from "types/types";
-import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { TextInput } from "components/Inputs/TextInput";
 import { Button } from "components/Inputs/Button";
-import { PreviewCardCTAs } from "components/Library/PreviewCardCTAs";
-import { isUntangibleGroupItem } from "helpers/libraryItem";
-import { PreviewCard } from "components/PreviewCard";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
 import { ButtonGroup } from "components/Inputs/ButtonGroup";
 import {
+  filterDefined,
   filterHasAttributes,
   isDefined,
   isDefinedAndNotEmpty,
   isUndefined,
-  SelectiveNonNullable,
 } from "helpers/asserts";
-import { convertPrice } from "helpers/numbers";
-import { SmartList } from "components/SmartList";
 import { getOpenGraph } from "helpers/openGraph";
-import { compareDate } from "helpers/date";
 import { HorizontalLine } from "components/HorizontalLine";
-import { cIf, cJoin } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { containsHighlight, CustomSearchResponse, meiliSearch } from "helpers/search";
+import { MeiliIndices, MeiliLibraryItem } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { TranslatedPreviewCard } from "components/PreviewCard";
+import { prettyItemSubType } from "helpers/formatters";
+import { isUntangibleGroupItem } from "helpers/libraryItem";
+import { PreviewCardCTAs } from "components/Library/PreviewCardCTAs";
 import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -46,52 +43,69 @@ import { useLibraryItemUserStatus } from "hooks/useLibraryItemUserStatus";
  */
 
 const DEFAULT_FILTERS_STATE = {
-  searchName: "",
+  query: "",
   showSubitems: false,
   showPrimaryItems: true,
   showSecondaryItems: false,
+  page: 1,
   sortingMethod: 0,
-  groupingMethod: -1,
   keepInfoVisible: false,
   filterUserStatus: undefined,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+  sort: z.coerce.number().min(0).max(5).optional(),
+  subitems: z.coerce.boolean().optional(),
+  primary: z.coerce.boolean().optional(),
+  secondary: z.coerce.boolean().optional(),
+  status: z.coerce.string().optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
-interface Props extends AppLayoutRequired {
-  items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
-}
+interface Props extends AppLayoutRequired {}
 
-const Library = ({ items, ...otherProps }: Props): JSX.Element => {
+const Library = (props: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
   const langui = useAtomGetter(atoms.localData.langui);
-  const currencies = useAtomGetter(atoms.localData.currencies);
-
   const { libraryItemUserStatus } = useLibraryItemUserStatus();
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
 
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
+  const sortingMethods = useMemo(
+    () => [
+      { meiliAttribute: "sortable_name:asc", displayedName: langui.name },
+      { meiliAttribute: "sortable_date:asc", displayedName: langui.release_date },
+      { meiliAttribute: "sortable_price:asc", displayedName: langui.price },
+    ],
+    [langui.name, langui.price, langui.release_date]
+  );
+
+  const router = useTypedRouter(queryParamSchema);
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+  const [libraryItems, setLibraryItems] = useState<CustomSearchResponse<MeiliLibraryItem>>();
+  const [query, setQuery] = useState(router.query.query ?? DEFAULT_FILTERS_STATE.query);
 
   const {
     value: showSubitems,
     toggle: toggleShowSubitems,
     setValue: setShowSubitems,
-  } = useBoolean(DEFAULT_FILTERS_STATE.showSubitems);
+  } = useBoolean(router.query.subitems ?? DEFAULT_FILTERS_STATE.showSubitems);
 
   const {
     value: showPrimaryItems,
     toggle: toggleShowPrimaryItems,
     setValue: setShowPrimaryItems,
-  } = useBoolean(DEFAULT_FILTERS_STATE.showPrimaryItems);
+  } = useBoolean(router.query.primary ?? DEFAULT_FILTERS_STATE.showPrimaryItems);
 
   const {
     value: showSecondaryItems,
     toggle: toggleShowSecondaryItems,
     setValue: setShowSecondaryItems,
-  } = useBoolean(DEFAULT_FILTERS_STATE.showSecondaryItems);
+  } = useBoolean(router.query.secondary ?? DEFAULT_FILTERS_STATE.showSecondaryItems);
 
   const {
     value: keepInfoVisible,
@@ -99,141 +113,142 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
     setValue: setKeepInfoVisible,
   } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
 
-  const [sortingMethod, setSortingMethod] = useState<number>(DEFAULT_FILTERS_STATE.sortingMethod);
-
-  const [groupingMethod, setGroupingMethod] = useState<number>(
-    DEFAULT_FILTERS_STATE.groupingMethod
+  const [sortingMethod, setSortingMethod] = useState<number>(
+    router.query.sort ?? DEFAULT_FILTERS_STATE.sortingMethod
   );
 
   const [filterUserStatus, setFilterUserStatus] = useState<LibraryItemUserStatus | undefined>(
-    DEFAULT_FILTERS_STATE.filterUserStatus
+    fromStringToLibraryItemUserStatus(router.query.status) ?? DEFAULT_FILTERS_STATE.filterUserStatus
   );
 
-  const filteringFunction = useCallback(
-    (item: SelectiveNonNullable<Props["items"][number], "attributes" | "id">) => {
-      if (!showSubitems && !item.attributes.root_item) return false;
-      if (showSubitems && isUntangibleGroupItem(item.attributes.metadata?.[0])) {
-        return false;
-      }
-      if (item.attributes.primary && !showPrimaryItems) return false;
-      if (!item.attributes.primary && !showSecondaryItems) return false;
+  useEffect(() => {
+    const fetchLibraryItems = async () => {
+      const currentSortingMethod = sortingMethods[sortingMethod];
+      const filter: string[] = [];
 
-      if (isDefined(filterUserStatus) && item.id) {
-        if (isUntangibleGroupItem(item.attributes.metadata?.[0])) {
-          return false;
-        }
+      if (!showPrimaryItems && !showSecondaryItems) {
+        filter.push("primary NOT EXISTS");
+      } else if (showPrimaryItems && !showSecondaryItems) {
+        filter.push("primary = true");
+      } else if (!showPrimaryItems && showSecondaryItems) {
+        filter.push("primary = false");
+      }
+
+      if (showSubitems) {
+        filter.push("untangible_group_item = false");
+      } else {
+        filter.push("root_item = true");
+      }
+
+      if (isDefined(filterUserStatus)) {
+        filter.push("untangible_group_item = false");
         if (filterUserStatus === LibraryItemUserStatus.None) {
-          if (libraryItemUserStatus[item.id]) {
-            return false;
-          }
-        } else if (filterUserStatus !== libraryItemUserStatus[item.id]) {
-          return false;
+          filter.push(
+            `id NOT IN [${Object.entries(libraryItemUserStatus)
+              .filter(([, value]) => value !== filterUserStatus)
+              .map(([id]) => id)
+              .join(", ")}]`
+          );
+        } else {
+          filter.push(
+            `id IN [${Object.entries(libraryItemUserStatus)
+              .filter(([, value]) => value === filterUserStatus)
+              .map(([id]) => id)
+              .join(", ")}]`
+          );
         }
       }
-      return true;
-    },
-    [libraryItemUserStatus, filterUserStatus, showPrimaryItems, showSecondaryItems, showSubitems]
-  );
 
-  const sortingFunction = useCallback(
-    (
-      a: SelectiveNonNullable<Props["items"][number], "attributes" | "id">,
-      b: SelectiveNonNullable<Props["items"][number], "attributes" | "id">
-    ) => {
-      switch (sortingMethod) {
-        case 0: {
-          const titleA = prettyInlineTitle("", a.attributes.title, a.attributes.subtitle);
-          const titleB = prettyInlineTitle("", b.attributes.title, b.attributes.subtitle);
-          return naturalCompare(titleA, titleB);
+      const searchResult = await meiliSearch(MeiliIndices.LIBRARY_ITEM, query, {
+        hitsPerPage: 25,
+        page,
+        attributesToRetrieve: [
+          "title",
+          "subtitle",
+          "descriptions",
+          "id",
+          "slug",
+          "thumbnail",
+          "release_date",
+          "price",
+          "categories",
+          "metadata",
+        ],
+        attributesToHighlight: ["title", "subtitle", "descriptions"],
+        attributesToCrop: ["descriptions"],
+        sort: isDefined(currentSortingMethod) ? [currentSortingMethod.meiliAttribute] : undefined,
+        filter,
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("descriptions"))) {
+          item._formatted.descriptions = filterDefined(item._formatted.descriptions).filter(
+            (description) => containsHighlight(JSON.stringify(description))
+          );
         }
-        case 1: {
-          const commonCurrency = currencies[0];
-          if (isUndefined(commonCurrency)) return 0;
+        return item;
+      });
+      setLibraryItems(searchResult);
+    };
+    fetchLibraryItems();
+  }, [
+    filterUserStatus,
+    libraryItemUserStatus,
+    page,
+    query,
+    showPrimaryItems,
+    showSecondaryItems,
+    showSubitems,
+    sortingMethod,
+    sortingMethods,
+  ]);
 
-          const priceA = a.attributes.price
-            ? convertPrice(a.attributes.price, commonCurrency)
-            : Infinity;
-          const priceB = b.attributes.price
-            ? convertPrice(b.attributes.price, commonCurrency)
-            : Infinity;
-          return priceA - priceB;
-        }
-        case 2: {
-          return compareDate(a.attributes.release_date, b.attributes.release_date);
-        }
-        default:
-          return 0;
-      }
-    },
-    [currencies, sortingMethod]
-  );
+  useEffect(() => {
+    if (router.isReady) {
+      router.updateQuery({
+        page,
+        query,
+        sort: sortingMethod,
+        primary: showPrimaryItems,
+        secondary: showSecondaryItems,
+        subitems: showSubitems,
+        status: fromLibraryItemUserStatusToString(filterUserStatus),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    page,
+    query,
+    sortingMethod,
+    router.isReady,
+    showPrimaryItems,
+    showSecondaryItems,
+    showSubitems,
+    filterUserStatus,
+  ]);
 
-  const groupingFunction = useCallback(
-    (item: SelectiveNonNullable<Props["items"][number], "attributes" | "id">): string[] => {
-      switch (groupingMethod) {
-        case 0: {
-          const categories = filterHasAttributes(item.attributes.categories?.data, [
-            "attributes",
-          ] as const);
-          if (categories.length > 0) {
-            return categories.map((category) => category.attributes.name);
-          }
-          return [langui.no_category ?? "No category"];
-        }
-        case 1: {
-          if (item.attributes.metadata && item.attributes.metadata.length > 0) {
-            switch (item.attributes.metadata[0]?.__typename) {
-              case "ComponentMetadataAudio":
-                return [langui.audio ?? "Audio"];
-              case "ComponentMetadataGame":
-                return [langui.game ?? "Game"];
-              case "ComponentMetadataBooks":
-                return [langui.textual ?? "Textual"];
-              case "ComponentMetadataVideo":
-                return [langui.video ?? "Video"];
-              case "ComponentMetadataOther":
-                return [langui.other ?? "Other"];
-              case "ComponentMetadataGroup": {
-                switch (item.attributes.metadata[0]?.subitems_type?.data?.attributes?.slug) {
-                  case "audio":
-                    return [langui.audio ?? "Audio"];
-                  case "video":
-                    return [langui.video ?? "Video"];
-                  case "game":
-                    return [langui.game ?? "Game"];
-                  case "textual":
-                    return [langui.textual ?? "Textual"];
-                  case "mixed":
-                    return [langui.group ?? "Group"];
-                  default: {
-                    return [langui.no_type ?? "No type"];
-                  }
-                }
-              }
-              default:
-                return [langui.no_type ?? "No type"];
-            }
-          } else {
-            return [langui.no_type ?? "No type"];
-          }
-        }
-        case 2: {
-          if (item.attributes.release_date?.year) {
-            return [item.attributes.release_date.year.toString()];
-          }
-          return [langui.no_year ?? "No year"];
-        }
-        default:
-          return [""];
-      }
-    },
-    [groupingMethod, langui]
-  );
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+      if (isDefined(router.query.sort)) setSortingMethod(router.query.sort);
+      if (isDefined(router.query.primary)) setShowPrimaryItems(router.query.primary);
+      if (isDefined(router.query.secondary)) setShowSecondaryItems(router.query.secondary);
+      if (isDefined(router.query.subitems)) setShowSubitems(router.query.subitems);
+      if (isDefined(router.query.status))
+        setFilterUserStatus(fromStringToLibraryItemUserStatus(router.query.status));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
+  useEffect(() => {
+    const totalPages = libraryItems?.totalPages;
+    if (isDefined(totalPages) && totalPages < page && totalPages >= 1) setPage(totalPages);
+  }, [libraryItems?.totalPages, page]);
 
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon={Icon.LibraryBooks}
+        icon="auto_stories"
         title={langui.library}
         description={langui.library_description}
       />
@@ -243,9 +258,10 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
       <TextInput
         className="mb-6 w-full"
         placeholder={langui.search_title ?? "Search..."}
-        value={searchName}
+        value={query}
         onChange={(name) => {
-          setSearchName(name);
+          setPage(1);
+          setQuery(name);
           if (isDefinedAndNotEmpty(name)) {
             sendAnalytics("Library", "Change search term");
           } else {
@@ -254,40 +270,17 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
         }}
       />
 
-      <WithLabel label={langui.group_by}>
-        <Select
-          className="w-full"
-          options={[
-            langui.category ?? "Category",
-            langui.type ?? "Type",
-            langui.release_year ?? "Year",
-          ]}
-          value={groupingMethod}
-          onChange={(value) => {
-            setGroupingMethod(value);
-            sendAnalytics(
-              "Library",
-              `Change grouping method (${["none", "category", "type", "year"][value + 1]})`
-            );
-          }}
-          allowEmpty
-        />
-      </WithLabel>
-
       <WithLabel label={langui.order_by}>
         <Select
           className="w-full"
-          options={[
-            langui.name ?? "Name",
-            langui.price ?? "Price",
-            langui.release_date ?? "Release date",
-          ]}
+          options={sortingMethods.map((item) => item.displayedName ?? "")}
           value={sortingMethod}
-          onChange={(value) => {
-            setSortingMethod(value);
+          onChange={(newSort) => {
+            setPage(1);
+            setSortingMethod(newSort);
             sendAnalytics(
               "Library",
-              `Change sorting method (${["name", "price", "release date"][value]})`
+              `Change sorting method (${sortingMethods.map((item) => item.displayedName)[newSort]})`
             );
           }}
         />
@@ -297,6 +290,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
         <Switch
           value={showSubitems}
           onClick={() => {
+            setPage(1);
             toggleShowSubitems();
             sendAnalytics("Library", `${showSubitems ? "Hide" : "Show"} subitems`);
           }}
@@ -307,6 +301,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
         <Switch
           value={showPrimaryItems}
           onClick={() => {
+            setPage(1);
             toggleShowPrimaryItems();
             sendAnalytics("Library", `${showPrimaryItems ? "Hide" : "Show"} primary items`);
           }}
@@ -317,6 +312,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
         <Switch
           value={showSecondaryItems}
           onClick={() => {
+            setPage(1);
             toggleShowSecondaryItems();
             sendAnalytics("Library", `${showSecondaryItems ? "Hide" : "Show"} secondary items`);
           }}
@@ -340,8 +336,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
         buttonsProps={[
           {
             tooltip: langui.only_display_items_i_want,
-            icon: Icon.Favorite,
+            icon: "favorite",
             onClick: () => {
+              setPage(1);
               setFilterUserStatus(LibraryItemUserStatus.Want);
               sendAnalytics("Library", "Set filter status (I want)");
             },
@@ -349,8 +346,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
           },
           {
             tooltip: langui.only_display_items_i_have,
-            icon: Icon.BackHand,
+            icon: "back_hand",
             onClick: () => {
+              setPage(1);
               setFilterUserStatus(LibraryItemUserStatus.Have);
               sendAnalytics("Library", "Set filter status (I have)");
             },
@@ -358,8 +356,9 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
           },
           {
             tooltip: langui.only_display_unmarked_items,
-            icon: Icon.RadioButtonUnchecked,
+            icon: "nearby_off",
             onClick: () => {
+              setPage(1);
               setFilterUserStatus(LibraryItemUserStatus.None);
               sendAnalytics("Library", "Set filter status (unmarked)");
             },
@@ -369,6 +368,7 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
             tooltip: langui.only_display_unmarked_items,
             text: langui.all,
             onClick: () => {
+              setPage(1);
               setFilterUserStatus(undefined);
               sendAnalytics("Library", "Set filter status (all)");
             },
@@ -380,14 +380,13 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
       <Button
         className="mt-8"
         text={langui.reset_all_filters}
-        icon={Icon.Replay}
+        icon="settings_backup_restore"
         onClick={() => {
-          setSearchName(DEFAULT_FILTERS_STATE.searchName);
+          setQuery(DEFAULT_FILTERS_STATE.query);
           setShowSubitems(DEFAULT_FILTERS_STATE.showSubitems);
           setShowPrimaryItems(DEFAULT_FILTERS_STATE.showPrimaryItems);
           setShowSecondaryItems(DEFAULT_FILTERS_STATE.showSecondaryItems);
           setSortingMethod(DEFAULT_FILTERS_STATE.sortingMethod);
-          setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
           setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
           setFilterUserStatus(DEFAULT_FILTERS_STATE.filterUserStatus);
           sendAnalytics("Library", "Reset all filters");
@@ -398,63 +397,54 @@ const Library = ({ items, ...otherProps }: Props): JSX.Element => {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(items, ["id", "attributes"] as const)}
-        getItemId={(item) => item.id}
-        renderItem={({ item }) => (
-          <PreviewCard
-            href={`/library/${item.attributes.slug}`}
-            title={item.attributes.title}
-            subtitle={item.attributes.subtitle}
-            thumbnail={item.attributes.thumbnail?.data?.attributes}
-            thumbnailAspectRatio="21/29.7"
-            thumbnailRounded={false}
-            keepInfoVisible={keepInfoVisible}
-            topChips={
-              item.attributes.metadata &&
-              item.attributes.metadata.length > 0 &&
-              item.attributes.metadata[0]
-                ? [prettyItemSubType(item.attributes.metadata[0])]
-                : []
-            }
-            bottomChips={item.attributes.categories?.data.map(
-              (category) => category.attributes?.short ?? ""
-            )}
-            metadata={{
-              releaseDate: item.attributes.release_date,
-              price: item.attributes.price,
-              position: "Bottom",
-            }}
-            infoAppend={
-              !isUntangibleGroupItem(item.attributes.metadata?.[0]) && (
-                <PreviewCardCTAs id={item.id} />
-              )
-            }
-          />
-        )}
-        className={cJoin(
-          "grid-cols-2 items-end",
-          cIf(isContentPanelAtLeast4xl, "grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]")
-        )}
-        searchingTerm={searchName}
-        sortingFunction={sortingFunction}
-        groupingFunction={groupingFunction}
-        searchingBy={(item) =>
-          prettyInlineTitle("", item.attributes.title, item.attributes.subtitle)
-        }
-        filteringFunction={filteringFunction}
-        paginationItemPerPage={25}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={libraryItems?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(12rem,1fr))] items-end
+              gap-x-6 gap-y-8">
+          {libraryItems?.hits.map((item) => (
+            <TranslatedPreviewCard
+              key={item.id}
+              href={`/library/${item.slug}`}
+              translations={filterHasAttributes(item._formatted.descriptions, [
+                "language.data.attributes.code",
+              ] as const).map((translation) => ({
+                language: translation.language.data.attributes.code,
+                title: item.title,
+                subtitle: item.subtitle,
+                description: containsHighlight(translation.description)
+                  ? translation.description
+                  : undefined,
+              }))}
+              fallback={{ title: item._formatted.title, subtitle: item._formatted.subtitle }}
+              thumbnail={item.thumbnail?.data?.attributes}
+              thumbnailAspectRatio="21/29.7"
+              thumbnailRounded={false}
+              keepInfoVisible={keepInfoVisible}
+              topChips={
+                item.metadata && item.metadata.length > 0 && item.metadata[0]
+                  ? [prettyItemSubType(item.metadata[0])]
+                  : []
+              }
+              bottomChips={item.categories?.data.map(
+                (category) => category.attributes?.short ?? ""
+              )}
+              metadata={{
+                releaseDate: item.release_date,
+                price: item.price,
+                position: "Bottom",
+              }}
+              infoAppend={
+                !isUntangibleGroupItem(item.metadata?.[0]) && <PreviewCardCTAs id={item.id} />
+              }
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
 
   return (
-    <AppLayout
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-      subPanelIcon={Icon.Search}
-      {...otherProps}
-    />
+    <AppLayout subPanel={subPanel} contentPanel={contentPanel} subPanelIcon="search" {...props} />
   );
 };
 export default Library;
@@ -464,19 +454,40 @@ export default Library;
  * ───────────────────────────────────╯  NEXT DATA FETCHING  ╰──────────────────────────────────────
  */
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const sdk = getReadySdk();
+export const getStaticProps: GetStaticProps = (context) => {
   const langui = getLangui(context.locale);
-  const items = await sdk.getLibraryItemsPreview({
-    language_code: context.locale ?? "en",
-  });
-  if (!items.libraryItems?.data) return { notFound: true };
-
   const props: Props = {
-    items: items.libraryItems.data,
     openGraph: getOpenGraph(langui, langui.library ?? "Library"),
   };
   return {
     props: props,
   };
 };
+
+const fromLibraryItemUserStatusToString = (status: LibraryItemUserStatus | undefined): string => {
+  switch (status) {
+    case LibraryItemUserStatus.None:
+      return "none";
+    case LibraryItemUserStatus.Have:
+      return "have";
+    case LibraryItemUserStatus.Want:
+      return "want";
+    default:
+      return "all";
+  }
+};
+
+const fromStringToLibraryItemUserStatus = (
+  status: string | undefined
+): LibraryItemUserStatus | undefined => {
+  switch (status) {
+    case "none":
+      return LibraryItemUserStatus.None;
+    case "have":
+      return LibraryItemUserStatus.Have;
+    case "want":
+      return LibraryItemUserStatus.Want;
+    default:
+      return undefined;
+  }
+};

src/pages/merch/index.tsx

@@ -2,7 +2,6 @@ import { GetStaticProps } from "next";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
-import { Icon } from "components/Ico";
 import { getOpenGraph } from "helpers/openGraph";
 import { getLangui } from "graphql/fetchLocalData";
 import { atoms } from "contexts/atoms";
@@ -20,11 +19,7 @@ const Merch = (props: Props): JSX.Element => {
     <AppLayout
       subPanel={
         <SubPanel>
-          <PanelHeader
-            icon={Icon.Store}
-            title={langui.merch}
-            description={langui.merch_description}
-          />
+          <PanelHeader icon="store" title={langui.merch} description={langui.merch_description} />
         </SubPanel>
       }
       {...props}

src/pages/news/index.tsx

@@ -1,31 +1,35 @@
 import { GetStaticProps } from "next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useBoolean } from "usehooks-ts";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { Switch } from "components/Inputs/Switch";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { SubPanel } from "components/Containers/SubPanel";
-import { GetPostsPreviewQuery } from "graphql/generated";
-import { getReadySdk } from "graphql/sdk";
-import { prettySlug } from "helpers/formatters";
-import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { TextInput } from "components/Inputs/TextInput";
 import { Button } from "components/Inputs/Button";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import { filterHasAttributes, isDefinedAndNotEmpty } from "helpers/asserts";
-import { SmartList } from "components/SmartList";
+import {
+  filterDefined,
+  filterHasAttributes,
+  isDefined,
+  isDefinedAndNotEmpty,
+} from "helpers/asserts";
 import { getOpenGraph } from "helpers/openGraph";
-import { compareDate } from "helpers/date";
 import { TranslatedPreviewCard } from "components/PreviewCard";
 import { HorizontalLine } from "components/HorizontalLine";
-import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
 import { Terminal } from "components/Cli/Terminal";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { containsHighlight, CustomSearchResponse, meiliSearch } from "helpers/search";
+import { MeiliIndices, MeiliPost } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { prettySlug } from "helpers/formatters";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -33,43 +37,94 @@ import { useAtomGetter } from "helpers/atoms";
  */
 
 const DEFAULT_FILTERS_STATE = {
-  searchName: "",
+  query: "",
   keepInfoVisible: true,
+  page: 1,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
-interface Props extends AppLayoutRequired {
-  posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
-}
+interface Props extends AppLayoutRequired {}
 
-const News = ({ posts, ...otherProps }: Props): JSX.Element => {
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
+const News = ({ ...otherProps }: Props): JSX.Element => {
   const langui = useAtomGetter(atoms.localData.langui);
   const hoverable = useDeviceSupportsHover();
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
+  const router = useTypedRouter(queryParamSchema);
+
+  const [query, setQuery] = useState(router.query.query ?? DEFAULT_FILTERS_STATE.query);
+
   const {
     value: keepInfoVisible,
     toggle: toggleKeepInfoVisible,
     setValue: setKeepInfoVisible,
   } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
+
   const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
 
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+  const [posts, setPosts] = useState<CustomSearchResponse<MeiliPost>>();
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.POST, query, {
+        hitsPerPage: 25,
+        page,
+        attributesToRetrieve: ["translations", "thumbnail", "slug", "date", "categories"],
+        attributesToHighlight: ["translations.title", "translations.excerpt", "translations.body"],
+        attributesToCrop: ["translations.body"],
+        sort: ["sortable_date:desc"],
+        filter: ["hidden = false"],
+      });
+      searchResult.hits = searchResult.hits.map((item) => {
+        if (Object.keys(item._matchesPosition).some((match) => match.startsWith("translations"))) {
+          item._formatted.translations = filterDefined(item._formatted.translations).filter(
+            (translation) => JSON.stringify(translation).includes("</mark>")
+          );
+        }
+        return item;
+      });
+      setPosts(searchResult);
+    };
+    fetchPosts();
+  }, [query, page]);
+
+  useEffect(() => {
+    if (router.isReady)
+      router.updateQuery({
+        page,
+        query,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, query, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
   const subPanel = (
     <SubPanel>
-      <PanelHeader icon={Icon.Feed} title={langui.news} description={langui.news_description} />
+      <PanelHeader icon="newspaper" title={langui.news} description={langui.news_description} />
 
       <HorizontalLine />
 
       <TextInput
         className="mb-6 w-full"
         placeholder={langui.search_title ?? "Search..."}
-        value={searchName}
+        value={query}
         onChange={(name) => {
-          setSearchName(name);
+          setQuery(name);
           if (isDefinedAndNotEmpty(name)) {
             sendAnalytics("News", "Change search term");
           } else {
@@ -93,9 +148,9 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
       <Button
         className="mt-8"
         text={langui.reset_all_filters}
-        icon={Icon.Replay}
+        icon="settings_backup_restore"
         onClick={() => {
-          setSearchName(DEFAULT_FILTERS_STATE.searchName);
+          setQuery(DEFAULT_FILTERS_STATE.query);
           setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
           sendAnalytics("News", "Reset all filters");
         }}
@@ -105,66 +160,54 @@ const News = ({ posts, ...otherProps }: Props): JSX.Element => {
 
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(posts, ["attributes", "id"] as const)}
-        getItemId={(post) => post.id}
-        renderItem={({ item: post }) => (
-          <TranslatedPreviewCard
-            href={`/news/${post.attributes.slug}`}
-            translations={filterHasAttributes(post.attributes.translations, [
-              "language.data.attributes.code",
-            ] as const).map((translation) => ({
-              language: translation.language.data.attributes.code,
-              title: translation.title,
-              description: translation.excerpt,
-            }))}
-            fallback={{ title: prettySlug(post.attributes.slug) }}
-            thumbnail={post.attributes.thumbnail?.data?.attributes}
-            thumbnailAspectRatio="3/2"
-            thumbnailForceAspectRatio
-            bottomChips={post.attributes.categories?.data.map(
-              (category) => category.attributes?.short ?? ""
-            )}
-            keepInfoVisible={keepInfoVisible}
-            metadata={{
-              releaseDate: post.attributes.date,
-              releaseDateFormat: "long",
-              position: "Top",
-            }}
-          />
-        )}
-        className={cIf(
-          isContentPanelAtLeast4xl,
-          "grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8",
-          "grid-cols-2 gap-x-4 gap-y-6"
-        )}
-        searchingTerm={searchName}
-        searchingBy={(post) =>
-          `${prettySlug(post.attributes.slug)} ${post.attributes.translations
-            ?.map((translation) => translation?.title)
-            .join(" ")}`
-        }
-        paginationItemPerPage={25}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={posts?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-start
+              gap-x-6 gap-y-8">
+          {posts?.hits.map((item) => (
+            <TranslatedPreviewCard
+              key={item.id}
+              href={`/news/${item.slug}`}
+              translations={filterHasAttributes(item._formatted.translations, [
+                "language.data.attributes.code",
+              ] as const).map(({ excerpt, body, language, ...otherAttributes }) => ({
+                ...otherAttributes,
+                description: containsHighlight(excerpt)
+                  ? excerpt
+                  : containsHighlight(body)
+                  ? body
+                  : excerpt,
+                language: language.data.attributes.code,
+              }))}
+              fallback={{ title: prettySlug(item.slug) }}
+              thumbnail={item.thumbnail?.data?.attributes}
+              thumbnailAspectRatio="3/2"
+              thumbnailForceAspectRatio
+              keepInfoVisible={keepInfoVisible}
+              bottomChips={item.categories?.data.map(
+                (category) => category.attributes?.short ?? ""
+              )}
+              metadata={{
+                releaseDate: item.date,
+                releaseDateFormat: "long",
+                position: "Top",
+              }}
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
 
   if (isTerminalMode) {
-    return (
-      <Terminal
-        parentPath="/"
-        childrenPaths={filterHasAttributes(posts, ["attributes"] as const).map(
-          (post) => post.attributes.slug
-        )}
-      />
-    );
+    return <Terminal parentPath="/" childrenPaths={posts?.hits.map((post) => post.slug) ?? []} />;
   }
 
   return (
     <AppLayout
       subPanel={subPanel}
       contentPanel={contentPanel}
-      subPanelIcon={Icon.Search}
+      subPanelIcon="search"
       {...otherProps}
     />
   );
@@ -176,25 +219,12 @@ export default News;
  * ───────────────────────────────────╯  NEXT DATA FETCHING  ╰──────────────────────────────────────
  */
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const sdk = getReadySdk();
+export const getStaticProps: GetStaticProps = (context) => {
   const langui = getLangui(context.locale);
-  const posts = await sdk.getPostsPreview();
-  if (!posts.posts) return { notFound: true };
-
   const props: Props = {
-    posts: sortPosts(posts.posts.data),
     openGraph: getOpenGraph(langui, langui.news ?? "News"),
   };
   return {
     props: props,
   };
 };
-
-/*
- *                                      ╭───────────────────╮
- * ─────────────────────────────────────╯  PRIVATE METHODS  ╰───────────────────────────────────────
- */
-
-const sortPosts = (posts: Props["posts"]): Props["posts"] =>
-  posts.sort((a, b) => compareDate(a.attributes?.date, b.attributes?.date)).reverse();

src/pages/wiki/[slug]/index.tsx

@@ -146,7 +146,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
                             "/contents/",
                             definition.source.data.attributes.content.data.attributes.slug
                           )
-                        : cJoin(
+                        : sJoin(
                             "/library/",
                             definition.source?.data?.attributes?.ranged_content?.data?.attributes
                               ?.library_item?.data?.attributes?.slug
@@ -165,6 +165,10 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
                 </div>
               )
             )}
+
+            {isDefined(selectedTranslation.body) && (
+              <div className="whitespace-pre-line">{selectedTranslation.body.body}</div>
+            )}
           </div>
         </>
       )}

src/pages/wiki/chronology.tsx

@@ -19,7 +19,7 @@ import { getOpenGraph } from "helpers/openGraph";
 import { useSmartLanguage } from "hooks/useSmartLanguage";
 import { ToolTip } from "components/ToolTip";
 import { Chip } from "components/Chip";
-import { Ico, Icon } from "components/Ico";
+import { Ico } from "components/Ico";
 import { AnchorShare } from "components/AnchorShare";
 import { datePickerToDate } from "helpers/date";
 import { TranslatedProps } from "types/TranslatedProps";
@@ -333,7 +333,7 @@ export const ChronologyEvent = ({ event, id }: ChronologyEventProps): JSX.Elemen
                 `(${event.source.data.attributes?.name})`
               ) : (
                 <div className="flex items-center gap-1">
-                  <Ico icon={Icon.Warning} className="!text-sm" />
+                  <Ico icon="warning" className="!text-sm" />
                   {langui.no_source_warning}
                 </div>
               )}

src/pages/wiki/index.tsx

@@ -1,13 +1,11 @@
 import { GetStaticProps } from "next";
-import { useCallback, useState } from "react";
+import { useEffect, useState } from "react";
 import { useBoolean } from "usehooks-ts";
+import { z } from "zod";
 import { AppLayout, AppLayoutRequired } from "components/AppLayout";
 import { NavOption } from "components/PanelComponents/NavOption";
 import { PanelHeader } from "components/PanelComponents/PanelHeader";
 import { SubPanel } from "components/Containers/SubPanel";
-import { Icon } from "components/Ico";
-import { getReadySdk } from "graphql/sdk";
-import { GetWikiPageQuery, GetWikiPagesPreviewsQuery } from "graphql/generated";
 import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
 import { HorizontalLine } from "components/HorizontalLine";
 import { Button } from "components/Inputs/Button";
@@ -15,23 +13,18 @@ import { Switch } from "components/Inputs/Switch";
 import { TextInput } from "components/Inputs/TextInput";
 import { WithLabel } from "components/Inputs/WithLabel";
 import { useDeviceSupportsHover } from "hooks/useMediaQuery";
-import {
-  filterDefined,
-  filterHasAttributes,
-  isDefinedAndNotEmpty,
-  SelectiveNonNullable,
-} from "helpers/asserts";
-import { SmartList } from "components/SmartList";
-import { Select } from "components/Inputs/Select";
+import { filterHasAttributes, isDefined, isDefinedAndNotEmpty } from "helpers/asserts";
 import { prettySlug } from "helpers/formatters";
 import { getOpenGraph } from "helpers/openGraph";
 import { TranslatedPreviewCard } from "components/PreviewCard";
-import { cIf } from "helpers/className";
 import { getLangui } from "graphql/fetchLocalData";
 import { sendAnalytics } from "helpers/analytics";
-import { Terminal } from "components/Cli/Terminal";
 import { atoms } from "contexts/atoms";
 import { useAtomGetter } from "helpers/atoms";
+import { useTypedRouter } from "hooks/useTypedRouter";
+import { MeiliIndices, MeiliWikiPage } from "shared/meilisearch-graphql-typings/meiliTypes";
+import { containsHighlight, CustomSearchResponse, meiliSearch } from "helpers/search";
+import { Paginator } from "components/Containers/Paginator";
 
 /*
  *                                         ╭─────────────╮
@@ -39,31 +32,28 @@ import { useAtomGetter } from "helpers/atoms";
  */
 
 const DEFAULT_FILTERS_STATE = {
-  searchName: "",
+  query: "",
   keepInfoVisible: true,
-  groupingMethod: -1,
+  page: 1,
 };
 
+const queryParamSchema = z.object({
+  query: z.coerce.string().optional(),
+  page: z.coerce.number().positive().optional(),
+});
+
 /*
  *                                           ╭────────╮
  * ──────────────────────────────────────────╯  PAGE  ╰─────────────────────────────────────────────
  */
 
-interface Props extends AppLayoutRequired {
-  pages: NonNullable<GetWikiPagesPreviewsQuery["wikiPages"]>["data"];
-}
+interface Props extends AppLayoutRequired {}
 
-const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
+const Wiki = (props: Props): JSX.Element => {
   const hoverable = useDeviceSupportsHover();
   const langui = useAtomGetter(atoms.localData.langui);
-  const isContentPanelAtLeast4xl = useAtomGetter(atoms.containerQueries.isContentPanelAtLeast4xl);
-  const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
-
-  const [searchName, setSearchName] = useState(DEFAULT_FILTERS_STATE.searchName);
-
-  const [groupingMethod, setGroupingMethod] = useState<number>(
-    DEFAULT_FILTERS_STATE.groupingMethod
-  );
+  const router = useTypedRouter(queryParamSchema);
+  const [query, setQuery] = useState(router.query.query ?? DEFAULT_FILTERS_STATE.query);
 
   const {
     value: keepInfoVisible,
@@ -71,10 +61,48 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
     setValue: setKeepInfoVisible,
   } = useBoolean(DEFAULT_FILTERS_STATE.keepInfoVisible);
 
+  const [page, setPage] = useState<number>(router.query.page ?? DEFAULT_FILTERS_STATE.page);
+  const [wikiPages, setWikiPages] = useState<CustomSearchResponse<MeiliWikiPage>>();
+
+  useEffect(() => {
+    const fetchWikiPages = async () => {
+      const searchResult = await meiliSearch(MeiliIndices.WIKI_PAGE, query, {
+        hitsPerPage: 25,
+        page,
+        attributesToHighlight: [
+          "translations.title",
+          "translations.aliases",
+          "translations.summary",
+          "translations.displayable_description",
+        ],
+        attributesToCrop: ["translations.displayable_description"],
+      });
+      setWikiPages(searchResult);
+    };
+    fetchWikiPages();
+  }, [query, page]);
+
+  useEffect(() => {
+    if (router.isReady)
+      router.updateQuery({
+        page,
+        query,
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, query, router.isReady]);
+
+  useEffect(() => {
+    if (router.isReady) {
+      if (isDefined(router.query.page)) setPage(router.query.page);
+      if (isDefined(router.query.query)) setQuery(router.query.query);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady]);
+
   const subPanel = (
     <SubPanel>
       <PanelHeader
-        icon={Icon.TravelExplore}
+        icon="travel_explore"
         title={langui.wiki}
         description={langui.wiki_description}
       />
@@ -84,9 +112,10 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
       <TextInput
         className="mb-6 w-full"
         placeholder={langui.search_title ?? "Search..."}
-        value={searchName}
+        value={query}
         onChange={(name) => {
-          setSearchName(name);
+          setPage(1);
+          setQuery(name);
           if (isDefinedAndNotEmpty(name)) {
             sendAnalytics("Wiki", "Change search term");
           } else {
@@ -95,19 +124,6 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
         }}
       />
 
-      <WithLabel label={langui.group_by}>
-        <Select
-          className="w-full"
-          options={[langui.category ?? "Category"]}
-          value={groupingMethod}
-          onChange={(value) => {
-            setGroupingMethod(value);
-            sendAnalytics("Wiki", `Change grouping method (${["none", "category"][value + 1]})`);
-          }}
-          allowEmpty
-        />
-      </WithLabel>
-
       {hoverable && (
         <WithLabel label={langui.always_show_info}>
           <Switch
@@ -123,10 +139,10 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
       <Button
         className="mt-8"
         text={langui.reset_all_filters}
-        icon={Icon.Replay}
+        icon="settings_backup_restore"
         onClick={() => {
-          setSearchName(DEFAULT_FILTERS_STATE.searchName);
-          setGroupingMethod(DEFAULT_FILTERS_STATE.groupingMethod);
+          setPage(1);
+          setQuery(DEFAULT_FILTERS_STATE.query);
           setKeepInfoVisible(DEFAULT_FILTERS_STATE.keepInfoVisible);
           sendAnalytics("Wiki", "Reset all filters");
         }}
@@ -140,104 +156,52 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
     </SubPanel>
   );
 
-  const groupingFunction = useCallback(
-    (
-      item: SelectiveNonNullable<
-        NonNullable<GetWikiPageQuery["wikiPages"]>["data"][number],
-        "attributes" | "id"
-      >
-    ): string[] => {
-      switch (groupingMethod) {
-        case 0: {
-          const categories = filterHasAttributes(item.attributes.categories?.data, [
-            "attributes",
-          ] as const);
-          if (categories.length > 0) {
-            return categories.map((category) => category.attributes.name);
-          }
-          return [langui.no_category ?? "No category"];
-        }
-        default: {
-          return [""];
-        }
-      }
-    },
-    [groupingMethod, langui]
-  );
-
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.Full}>
-      <SmartList
-        items={filterHasAttributes(pages, ["id", "attributes"] as const)}
-        getItemId={(item) => item.id}
-        renderItem={({ item }) => (
-          <TranslatedPreviewCard
-            href={`/wiki/${item.attributes.slug}`}
-            translations={filterHasAttributes(item.attributes.translations, [
-              "language.data.attributes.code",
-            ] as const).map((translation) => ({
-              title: translation.title,
-              subtitle:
-                translation.aliases && translation.aliases.length > 0
-                  ? translation.aliases.map((alias) => alias?.alias).join("・")
-                  : undefined,
-              description: translation.summary,
-              language: translation.language.data.attributes.code,
-            }))}
-            fallback={{ title: prettySlug(item.attributes.slug) }}
-            thumbnail={item.attributes.thumbnail?.data?.attributes}
-            thumbnailAspectRatio={"4/3"}
-            thumbnailRounded
-            thumbnailForceAspectRatio
-            keepInfoVisible={keepInfoVisible}
-            topChips={filterHasAttributes(item.attributes.tags?.data, ["attributes"] as const).map(
-              (tag) => tag.attributes.titles?.[0]?.title ?? prettySlug(tag.attributes.slug)
-            )}
-            bottomChips={filterHasAttributes(item.attributes.categories?.data, [
-              "attributes",
-            ] as const).map((category) => category.attributes.short)}
-          />
-        )}
-        className={cIf(
-          isContentPanelAtLeast4xl,
-          "grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-x-6 gap-y-8",
-          "grid-cols-2 gap-x-3 gap-y-5"
-        )}
-        searchingTerm={searchName}
-        searchingBy={(item) =>
-          filterDefined(item.attributes.translations)
-            .map(
-              (translation) =>
-                `${translation.title} ${filterDefined(translation.aliases)
-                  .map((alias) => alias.alias)
-                  .join(" ")}`
-            )
-            .join(" ")
-        }
-        groupingFunction={groupingFunction}
-        paginationItemPerPage={25}
-      />
+      <Paginator page={page} onPageChange={setPage} totalNumberOfPages={wikiPages?.totalPages}>
+        <div
+          className="grid grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] items-start
+              gap-x-6 gap-y-8">
+          {wikiPages?.hits.map((item) => (
+            <TranslatedPreviewCard
+              key={item.id}
+              href={`/wiki/${item.slug}`}
+              translations={filterHasAttributes(item._formatted.translations, [
+                "language.data.attributes.code",
+              ] as const).map(
+                ({ aliases, summary, displayable_description, language, ...otherAttributes }) => ({
+                  ...otherAttributes,
+                  subtitle:
+                    aliases && aliases.length > 0
+                      ? aliases.map((alias) => alias?.alias).join("・")
+                      : undefined,
+                  description: containsHighlight(displayable_description)
+                    ? displayable_description
+                    : summary,
+                  language: language.data.attributes.code,
+                })
+              )}
+              fallback={{ title: prettySlug(item.slug) }}
+              thumbnail={item.thumbnail?.data?.attributes}
+              thumbnailAspectRatio={"4/3"}
+              thumbnailRounded
+              thumbnailForceAspectRatio
+              keepInfoVisible
+              topChips={filterHasAttributes(item.tags?.data, ["attributes"] as const).map(
+                (tag) => tag.attributes.titles?.[0]?.title ?? prettySlug(tag.attributes.slug)
+              )}
+              bottomChips={filterHasAttributes(item.categories?.data, ["attributes"] as const).map(
+                (category) => category.attributes.short
+              )}
+            />
+          ))}
+        </div>
+      </Paginator>
     </ContentPanel>
   );
 
-  if (isTerminalMode) {
-    return (
-      <Terminal
-        parentPath="/"
-        childrenPaths={filterHasAttributes(pages, ["attributes"] as const).map(
-          (page) => page.attributes.slug
-        )}
-      />
-    );
-  }
-
   return (
-    <AppLayout
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-      subPanelIcon={Icon.Search}
-      {...otherProps}
-    />
+    <AppLayout subPanel={subPanel} contentPanel={contentPanel} subPanelIcon="search" {...props} />
   );
 };
 export default Wiki;
@@ -247,31 +211,12 @@ export default Wiki;
  * ───────────────────────────────────╯  NEXT DATA FETCHING  ╰──────────────────────────────────────
  */
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const sdk = getReadySdk();
+export const getStaticProps: GetStaticProps = (context) => {
   const langui = getLangui(context.locale);
-  const pages = await sdk.getWikiPagesPreviews({
-    language_code: context.locale ?? "en",
-  });
-  if (!pages.wikiPages?.data) return { notFound: true };
-
   const props: Props = {
-    pages: sortPages(pages.wikiPages.data),
     openGraph: getOpenGraph(langui, langui.wiki ?? "Wiki"),
   };
   return {
     props: props,
   };
 };
-
-/*
- *                                      ╭───────────────────╮
- * ─────────────────────────────────────╯  PRIVATE METHODS  ╰───────────────────────────────────────
- */
-
-const sortPages = (pages: Props["pages"]): Props["pages"] =>
-  pages.sort((a, b) => {
-    const slugA = a.attributes?.slug ?? "";
-    const slugB = b.attributes?.slug ?? "";
-    return slugA.localeCompare(slugB);
-  });

src/shared/meilisearch-graphql-typings/meiliTypes.ts

@@ -0,0 +1,88 @@
+import {
+  ContentAttributesFragment,
+  GetContentQuery,
+  GetLibraryItemQuery,
+  GetPostQuery,
+  GetVideoQuery,
+  GetWikiPageQuery,
+  LibraryItemAttributesFragment,
+  PostAttributesFragment,
+  VideoAttributesFragment,
+  WikiPageAttributesFragment,
+} from "./generated";
+
+export interface MeiliLibraryItem extends LibraryItemAttributesFragment {
+  id: string;
+  sortable_name: string;
+  sortable_price: number | undefined;
+  sortable_date: number | undefined;
+  untangible_group_item: boolean;
+}
+
+export interface MeiliContent
+  extends Omit<ContentAttributesFragment, "translations" | "updatedAt"> {
+  id: string;
+  translations: (Omit<
+    NonNullable<NonNullable<ContentAttributesFragment["translations"]>[number]>,
+    "text_set" | "description"
+  > & {
+    displayable_description?: string | null;
+  })[];
+  sortable_updated_date: number;
+}
+
+export interface MeiliVideo extends VideoAttributesFragment {
+  id: string;
+  sortable_published_date: number;
+  channel_uid?: string;
+}
+
+export interface MeiliPost extends PostAttributesFragment {
+  id: string;
+  sortable_date: number;
+}
+
+export interface MeiliWikiPage extends Omit<WikiPageAttributesFragment, "translations"> {
+  id: string;
+  translations: (Omit<
+    NonNullable<NonNullable<WikiPageAttributesFragment["translations"]>[number]>,
+    "body"
+  > & {
+    displayable_description?: string | null;
+  })[];
+}
+
+export enum MeiliIndices {
+  LIBRARY_ITEM = "library-item",
+  CONTENT = "content",
+  VIDEOS = "video",
+  POST = "post",
+  WIKI_PAGE = "wiki-page",
+}
+
+export type MeiliDocumentsType =
+  | {
+      index: MeiliIndices.LIBRARY_ITEM;
+      documents: MeiliLibraryItem;
+      strapi: GetLibraryItemQuery["libraryItem"];
+    }
+  | {
+      index: MeiliIndices.CONTENT;
+      documents: MeiliContent;
+      strapi: GetContentQuery["content"];
+    }
+  | {
+      index: MeiliIndices.VIDEOS;
+      documents: MeiliVideo;
+      strapi: GetVideoQuery["video"];
+    }
+  | {
+      index: MeiliIndices.POST;
+      documents: MeiliPost;
+      strapi: GetPostQuery["post"];
+    }
+  | {
+      index: MeiliIndices.WIKI_PAGE;
+      documents: MeiliWikiPage;
+      strapi: GetWikiPageQuery["wikiPage"];
+    };

src/styles/others.css

@@ -23,8 +23,14 @@ h6 {
   @apply bg-dark text-light;
 }
 
+/* MARKS */
+
 mark {
-  @apply bg-mid px-2;
+  @apply -mx-1 inline-block bg-mid px-1 text-black dark:bg-dark/50;
+}
+
+mark + mark {
+  @apply ml-0 pl-0;
 }
 
 /* INPUT */

tailwind.config.js

@@ -5,7 +5,7 @@ const rgb = (color) => [color.r, color.g, color.b].join(" ");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
+  darkMode: ["class", ".set-theme-dark"],
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
     colors: {