Implement filtering and sorting, and set up drizzle client on web

apps/web/package.json

@@ -34,12 +34,13 @@
     "@tanstack/react-query": "^5.82.2",
     "@tanstack/react-query-devtools": "^5.82.2",
     "@tanstack/react-router": "^1.119.0",
+    "@tanstack/zod-adapter": "^1.150.0",
     "@tursodatabase/sync-wasm": "^0.3.2",
     "@uidotdev/usehooks": "^2.4.1",
     "better-auth": "1.4.9",
     "date-fns": "^3.6.0",
     "dompurify": "^3.3.0",
-    "drizzle-orm": "^0.45.1",
+    "drizzle-orm": "1.0.0-beta.10-4a43a22",
     "input-otp": "1.4.2",
     "jotai": "^2.7.0",
     "lucide-react": "^0.507.0",

apps/web/src/components/TagsCombobox.tsx

@@ -2,6 +2,7 @@ import { cn } from "@bahar/design-system";
 import { useDebounce } from "@uidotdev/usehooks";
 import { Check, ChevronDown, X } from "lucide-react";
 import {
+  type FC,
   type KeyboardEvent,
   type ReactNode,
   startTransition,
@@ -11,6 +12,46 @@ import {
   useState,
 } from "react";
 
+export const TagPill: FC<{
+  disabled?: boolean;
+  onClick?: () => void;
+  tagValue: string;
+}> = ({ tagValue, disabled, onClick }) => {
+  return (
+    <button
+      className="inline-flex max-w-[calc(100%-8px)] items-center gap-1.5 rounded border bg-transparent py-1 pr-1.5 pl-2.5 text-sm active:bg-muted/50"
+      disabled={disabled}
+      key={tagValue}
+      onClick={(e) => {
+        e.stopPropagation();
+        // On touch devices (mobile), clicking anywhere on the pill removes it
+        if (window.matchMedia("(pointer: coarse)").matches) {
+          onClick?.();
+        }
+      }}
+      type="button"
+    >
+      <span className="truncate">{tagValue}</span>
+      <button
+        className="size-4 shrink-0 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick?.();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.stopPropagation();
+            onClick?.();
+          }
+        }}
+        type="button"
+      >
+        <X className="size-3.5" />
+      </button>
+    </button>
+  );
+};
+
 export interface TagsComboboxProps<T> {
   /** Selected tag values */
   value: string[];
@@ -210,7 +251,6 @@ export function TagsCombobox<T>({
 
   return (
     <div className={cn("relative", className)} ref={containerRef}>
-      {/* Anchor - Tags + Input */}
       <div
         className={cn(
           "relative flex min-h-10 w-full flex-row flex-wrap items-center gap-1.5 rounded-md border border-input bg-background py-2 text-sm shadow-xs",
@@ -225,36 +265,14 @@ export function TagsCombobox<T>({
         }}
       >
         {value.map((tagValue) => (
-          <button
-            className="inline-flex max-w-[calc(100%-8px)] cursor-pointer items-center gap-1.5 rounded border bg-transparent py-1 pr-1.5 pl-2.5 text-sm active:bg-muted/50"
+          <TagPill
             disabled={disabled}
             key={tagValue}
-            onClick={(e) => {
-              e.stopPropagation();
-              // On touch devices (mobile), clicking anywhere on the pill removes it
-              if (window.matchMedia("(pointer: coarse)").matches) {
-                removeTag(tagValue);
-              }
+            onClick={() => {
+              removeTag(tagValue);
             }}
-            type="button"
-          >
-            <span className="truncate">{tagValue}</span>
-            <span
-              className="size-4 shrink-0 rounded-sm opacity-70 transition-opacity hover:opacity-100"
-              onClick={(e) => {
-                e.stopPropagation();
-                removeTag(tagValue);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.stopPropagation();
-                  removeTag(tagValue);
-                }
-              }}
-            >
-              <X className="size-3.5" />
-            </span>
-          </button>
+            tagValue={tagValue}
+          />
         ))}
 
         <input

apps/web/src/components/features/decks/DeckDialogContent.tsx

@@ -171,7 +171,7 @@ export const DeckDialogContent = ({
       if (!isEditing) {
         form.reset();
       }
-    } catch (err) {
+    } catch (_err) {
       if (isEditing) {
         toast.error(t`There was an error updating the deck`, {
           description: t`Your deck was not updated. Please try again.`,
@@ -309,7 +309,7 @@ export const DeckDialogContent = ({
                               />
                             </FormControl>
 
-                            <FormLabel className="!mt-0 cursor-pointer font-normal text-sm">
+                            <FormLabel className="mt-0! cursor-pointer font-normal text-sm">
                               {getTypeLabel(type)}
                             </FormLabel>
                           </FormItem>

apps/web/src/components/features/dictionary/filters/DictionaryFilters.tsx

@@ -0,0 +1,159 @@
+import { Button } from "@bahar/web-ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@bahar/web-ui/components/select";
+import { Separator } from "@bahar/web-ui/components/separator";
+import { Trans } from "@lingui/react/macro";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { ArrowDownUp, FunnelXIcon, SlidersHorizontal } from "lucide-react";
+import { TagsFilter } from "@/components/features/dictionary/filters/TagsFilter";
+import { TagPill } from "@/components/TagsCombobox";
+
+type SortOption = "relevance" | "updatedAt" | "createdAt";
+
+const SortOptionLabel = ({ option }: { option: SortOption }) => {
+  switch (option) {
+    case "relevance":
+      return <Trans>Relevance</Trans>;
+    case "updatedAt":
+      return <Trans>Recently updated</Trans>;
+    case "createdAt":
+      return <Trans>Recently added</Trans>;
+  }
+};
+
+const sortOptions: SortOption[] = ["relevance", "updatedAt", "createdAt"];
+
+export const DictionaryFilters = () => {
+  const navigate = useNavigate();
+  const { tags: filteredTags, sort } = useSearch({
+    from: "/_authorized-layout/_search-layout",
+  });
+
+  const hasActiveFilters = !!filteredTags?.length && filteredTags.length > 0;
+
+  const clearAllFilters = () => {
+    navigate({ to: "/" });
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-4">
+        <section className="flex flex-row items-center gap-x-4">
+          <div className="flex items-center gap-1.5 text-muted-foreground">
+            <SlidersHorizontal className="h-4 w-4" />
+            <span className="font-medium text-sm">
+              <Trans>Filters</Trans>
+            </span>
+          </div>
+
+          <Separator className="shrink bg-linear-to-r from-border/50 via-border to-border/50" />
+        </section>
+
+        <section className="flex flex-col gap-y-2">
+          <p className="font-medium text-muted-foreground text-sm">
+            <Trans>Tags</Trans>
+          </p>
+
+          <TagsFilter />
+
+          {filteredTags?.length ? (
+            <ul className="flex flex-wrap gap-2">
+              {filteredTags.map((tag) => (
+                <TagPill
+                  key={tag}
+                  onClick={() => {
+                    const shouldRemove = filteredTags?.some((t) => t === tag);
+
+                    if (shouldRemove) {
+                      const newTags = filteredTags?.filter((t) => t !== tag);
+
+                      navigate({
+                        to: "/",
+                        search: {
+                          tags: newTags?.length ? newTags : undefined,
+                          sort,
+                        },
+                      });
+                    } else {
+                      navigate({
+                        to: "/",
+                        search: {
+                          tags: [...(filteredTags ?? []), tag],
+                          sort,
+                        },
+                      });
+                    }
+                  }}
+                  tagValue={tag}
+                />
+              ))}
+            </ul>
+          ) : null}
+        </section>
+
+        <section className="flex flex-row items-center gap-x-4">
+          <div className="flex items-center gap-1.5 text-muted-foreground">
+            <ArrowDownUp className="h-4 w-4" />
+            <span className="whitespace-nowrap font-medium text-sm">
+              <Trans>Sort by</Trans>
+            </span>
+          </div>
+
+          <Separator className="shrink bg-linear-to-r from-border/50 via-border to-border/50" />
+        </section>
+
+        <section className="flex flex-col gap-y-2">
+          <Select
+            onValueChange={(value: SortOption) => {
+              navigate({
+                to: "/",
+                search: {
+                  tags: filteredTags?.length ? filteredTags : undefined,
+                  sort: value === "relevance" ? undefined : value,
+                },
+              });
+            }}
+            value={sort ?? "relevance"}
+          >
+            <SelectTrigger className="w-max min-w-[200px] gap-x-2">
+              <SelectValue />
+            </SelectTrigger>
+
+            <SelectContent>
+              <SelectGroup>
+                {sortOptions.map((option) => (
+                  <SelectItem
+                    className="cursor-pointer"
+                    key={option}
+                    value={option}
+                  >
+                    <SortOptionLabel option={option} />
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </section>
+
+        {hasActiveFilters && (
+          <Button
+            className="h-8 w-max px-2 text-muted-foreground hover:text-foreground"
+            onClick={clearAllFilters}
+            size="sm"
+            variant="ghost"
+          >
+            <FunnelXIcon />
+
+            <Trans>Clear all filters</Trans>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};