Rework

app.config.ts

@@ -89,7 +89,7 @@ export default defineConfig({
       ? `/${process.env.GITHUB_REPOSITORY.split("/")[1]}/`
       : "/",
     prerender: {
-      routes: ["/cookmark", "/cookmark/en", "/cookmark/sk"],
+      routes: ["/cookmark"],
     },
   },
 });

src/app.tsx

@@ -14,6 +14,16 @@ export default function App() {
       root={(props) => (
         <MetaProvider>
           <Title>Cookmark</Title>
+          <Link rel="preconnect" href="https://fonts.googleapis.com" />
+          <Link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+          <Link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap"
+          />
+          <Link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap"
+          />
           <InstallPrompt />
           <Suspense>{props.children}</Suspense>
           <Link rel="icon" href={`${base}favicon.ico`} />

src/components/FilterDrawer/FilterDrawer.module.css

@@ -0,0 +1,222 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 40;
+}
+
+.overlay[data-transitioning] {
+  transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 320px;
+  max-width: 90vw;
+  height: 100vh;
+  background: white;
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  transform: translateX(-100%);
+  display: flex;
+  flex-direction: column;
+}
+
+.content[data-transitioning] {
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.content[data-opening] {
+  transform: translateX(0);
+}
+
+.content[data-closing] {
+  transform: translateX(-100%);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-6);
+  border-bottom: 1px solid var(--color-neutral-200);
+}
+
+.title {
+  font-family: var(--font-family-display);
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  color: var(--color-neutral-600);
+  transition: all 0.15s ease-in-out;
+}
+
+.closeButton:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+.closeButton:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.sections {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-6);
+}
+
+.section {
+  margin-bottom: var(--space-6);
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+.sectionTitle {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-neutral-400);
+  margin: 0 0 var(--space-2) 0;
+}
+
+.checkboxGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  padding: var(--space-2) var(--space-2);
+  margin: 0 calc(-1 * var(--space-2));
+  border-radius: var(--radius-md);
+  transition: background-color 0.15s;
+}
+
+.checkboxLabel:hover {
+  background-color: var(--color-neutral-50);
+}
+
+.checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid var(--color-neutral-300);
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+  background-color: white;
+}
+
+.checkbox:hover {
+  border-color: var(--color-neutral-400);
+}
+
+.checkbox:checked {
+  background-color: var(--color-neutral-900);
+  border-color: var(--color-neutral-900);
+}
+
+.checkbox:checked::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-neutral-200);
+}
+
+.checkboxText {
+  font-size: var(--text-sm);
+  color: var(--color-neutral-700);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.checkboxLabel:hover .checkboxText {
+  color: var(--color-neutral-900);
+}
+
+.footer {
+  padding: var(--space-6);
+  border-top: 1px solid var(--color-neutral-200);
+}
+
+.clearButton {
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  background: transparent;
+  border: 1px solid var(--color-neutral-300);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-neutral-600);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+.clearButton:hover {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-400);
+  color: var(--color-neutral-800);
+}
+
+.clearButton:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+@media (max-width: 480px) {
+  .content {
+    width: 100vw;
+    max-width: 100vw;
+  }
+
+  .header {
+    padding: var(--space-4);
+  }
+
+  .sections {
+    padding: var(--space-4);
+  }
+
+  .footer {
+    padding: var(--space-4);
+  }
+}

src/components/FilterDrawer/FilterDrawer.tsx

@@ -0,0 +1,141 @@
+import Drawer from "@corvu/drawer";
+import { type Component, For } from "solid-js";
+import type { DifficultyFilter, DifficultyValue } from "~/constants/difficultyOptions";
+import { difficultyOptions, tagOptions, timeOptions } from "~/constants/filterOptions";
+import { strings } from "~/constants/strings";
+import type { TagFilter, TagValue } from "~/constants/tagOptions";
+import type { TimeFilter, TimeValue } from "~/constants/timeOptions";
+import styles from "./FilterDrawer.module.css";
+
+type FilterDrawerProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  difficultyFilter: DifficultyFilter;
+  timeFilter: TimeFilter;
+  tagFilter: TagFilter;
+  onDifficultyChange: (difficulty: DifficultyFilter) => void;
+  onTimeChange: (time: TimeFilter) => void;
+  onTagChange: (tag: TagFilter) => void;
+  onClearAll: () => void;
+};
+
+const FilterDrawer: Component<FilterDrawerProps> = (props) => {
+  const handleDifficultyToggle = (value: DifficultyValue) => {
+    const current = props.difficultyFilter;
+    const newFilter = current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value];
+    props.onDifficultyChange(newFilter as DifficultyFilter);
+  };
+
+  const handleTimeToggle = (value: TimeValue) => {
+    const current = props.timeFilter;
+    const newFilter = current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value];
+    props.onTimeChange(newFilter as TimeFilter);
+  };
+
+  const handleTagToggle = (value: TagValue) => {
+    const current = props.tagFilter;
+    const newFilter = current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value];
+    props.onTagChange(newFilter as TagFilter);
+  };
+
+  const hasAnyFilter = () =>
+    props.difficultyFilter.length > 0 || props.timeFilter.length > 0 || props.tagFilter.length > 0;
+
+  return (
+    <Drawer open={props.open} onOpenChange={props.onOpenChange} side="left">
+      <Drawer.Portal>
+        <Drawer.Overlay class={styles.overlay} aria-hidden="true" />
+        <Drawer.Content
+          class={styles.content}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="filter-drawer-title"
+        >
+          <div class={styles.header}>
+            <h2 id="filter-drawer-title" class={styles.title}>
+              {strings.filterDrawer.title}
+            </h2>
+            <Drawer.Close class={styles.closeButton} aria-label="Close filters">
+              <span class="material-symbols-outlined">close</span>
+            </Drawer.Close>
+          </div>
+
+          <div class={styles.sections}>
+            <div class={styles.section}>
+              <h3 class={styles.sectionTitle}>{strings.filters.difficulty}</h3>
+              <div class={styles.checkboxGroup}>
+                <For each={difficultyOptions}>
+                  {(option) => (
+                    <label class={styles.checkboxLabel}>
+                      <input
+                        type="checkbox"
+                        checked={props.difficultyFilter.includes(option.value)}
+                        onChange={() => handleDifficultyToggle(option.value)}
+                        class={styles.checkbox}
+                      />
+                      <span class={styles.checkboxText}>{option.label}</span>
+                    </label>
+                  )}
+                </For>
+              </div>
+            </div>
+
+            <div class={styles.section}>
+              <h3 class={styles.sectionTitle}>{strings.filters.time}</h3>
+              <div class={styles.checkboxGroup}>
+                <For each={timeOptions}>
+                  {(option) => (
+                    <label class={styles.checkboxLabel}>
+                      <input
+                        type="checkbox"
+                        checked={props.timeFilter.includes(option.value)}
+                        onChange={() => handleTimeToggle(option.value)}
+                        class={styles.checkbox}
+                      />
+                      <span class={styles.checkboxText}>{option.label}</span>
+                    </label>
+                  )}
+                </For>
+              </div>
+            </div>
+
+            <div class={styles.section}>
+              <h3 class={styles.sectionTitle}>{strings.filters.tags}</h3>
+              <div class={styles.checkboxGroup}>
+                <For each={tagOptions}>
+                  {(option) => (
+                    <label class={styles.checkboxLabel}>
+                      <input
+                        type="checkbox"
+                        checked={props.tagFilter.includes(option.value)}
+                        onChange={() => handleTagToggle(option.value)}
+                        class={styles.checkbox}
+                      />
+                      <span class={styles.checkboxText}>{option.label}</span>
+                    </label>
+                  )}
+                </For>
+              </div>
+            </div>
+          </div>
+
+          {hasAnyFilter() && (
+            <div class={styles.footer}>
+              <button type="button" class={styles.clearButton} onClick={props.onClearAll}>
+                {strings.filterDrawer.clearAll}
+              </button>
+            </div>
+          )}
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer>
+  );
+};
+
+export default FilterDrawer;