refactor: trim PR debloat and fix transformers build

Extract shared helpers for home notices, timetable subtitles, and theme images; dedupe global search, Select, and build scripts while preserving behaviour. Add @huggingface/transformers as a direct dependency and resolve ORT WASM paths via require.resolve so pnpm postinstall and Vite can bundle vector search. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-28 17:21:05 +00:00 · 2026-06-28 10:30:25 +09:30
parent dcb4dd2f5e
commit 4fda63dedd
76 changed files with 2003 additions and 4149 deletions
@@ -11,20 +11,14 @@
  let activeIndex = $state(0);
  let root: HTMLDivElement | undefined = $state();
  let trigger: HTMLButtonElement | undefined = $state();
-  let listbox: HTMLUListElement | undefined = $state();
+  let listbox: HTMLDivElement | undefined = $state();

  const selectedLabel = $derived(
    options.find((option) => option.value === value)?.label ?? value,
  );

-  const selectedIndex = $derived(
-    options.findIndex((option) => option.value === value),
-  );
-
  const activeDescendantId = $derived(
-    isOpen && options[activeIndex]
-      ? optionId(options[activeIndex].value)
-      : undefined,
+    isOpen && options[activeIndex] ? optionId(options[activeIndex].value) : undefined,
  );

  function optionId(optionValue: string): string {
@@ -33,24 +27,13 @@

  function openMenu(preferredIndex?: number) {
    isOpen = true;
-    activeIndex =
-      preferredIndex ??
-      (selectedIndex >= 0 ? selectedIndex : 0);
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    activeIndex = preferredIndex ?? (selectedIndex >= 0 ? selectedIndex : 0);
  }

  function closeMenu(returnFocus = true) {
    isOpen = false;
-    if (returnFocus) {
-      trigger?.focus();
-    }
-  }
-
-  function toggleOpen() {
-    if (isOpen) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
+    if (returnFocus) trigger?.focus();
  }

  function selectValue(nextValue: string) {
@@ -58,41 +41,27 @@
    closeMenu();
  }

-  function selectActive() {
-    const option = options[activeIndex];
-    if (option) {
-      selectValue(option.value);
-    }
-  }
-
  function moveActive(delta: number) {
    if (!options.length) return;
    activeIndex = (activeIndex + delta + options.length) % options.length;
  }

-  function onTriggerKeydown(event: KeyboardEvent) {
+  function handleKeydown(event: KeyboardEvent, inListbox = false) {
    switch (event.key) {
      case "ArrowDown":
+      case "ArrowUp": {
        event.preventDefault();
-        if (isOpen) {
-          moveActive(1);
-        } else {
-          openMenu();
-        }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        if (isOpen) {
-          moveActive(-1);
-        } else {
-          openMenu();
-        }
+        const delta = event.key === "ArrowDown" ? 1 : -1;
+        if (isOpen || inListbox) moveActive(delta);
+        else openMenu();
        break;
+      }
      case "Enter":
      case " ":
        event.preventDefault();
        if (isOpen) {
-          selectActive();
+          const option = options[activeIndex];
+          if (option) selectValue(option.value);
        } else {
          openMenu();
        }
@@ -103,38 +72,20 @@
          closeMenu();
        }
        break;
-    }
-  }
-
-  function onListboxKeydown(event: KeyboardEvent) {
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        moveActive(1);
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        moveActive(-1);
-        break;
      case "Home":
-        event.preventDefault();
-        activeIndex = 0;
+        if (inListbox) {
+          event.preventDefault();
+          activeIndex = 0;
+        }
        break;
      case "End":
-        event.preventDefault();
-        activeIndex = Math.max(0, options.length - 1);
-        break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        selectActive();
-        break;
-      case "Escape":
-        event.preventDefault();
-        closeMenu();
+        if (inListbox) {
+          event.preventDefault();
+          activeIndex = Math.max(0, options.length - 1);
+        }
        break;
      case "Tab":
-        closeMenu(false);
+        if (inListbox) closeMenu(false);
        break;
    }
  }
@@ -145,8 +96,7 @@
    queueMicrotask(() => listbox?.focus());

    const onPointerDown = (event: PointerEvent) => {
-      const path = event.composedPath();
-      if (root && path.includes(root)) return;
+      if (root && event.composedPath().includes(root)) return;
      closeMenu(false);
    };

@@ -163,8 +113,8 @@
    aria-haspopup="listbox"
    aria-expanded={isOpen}
    aria-controls={listboxId}
-    onclick={toggleOpen}
-    onkeydown={onTriggerKeydown}
+    onclick={() => (isOpen ? closeMenu() : openMenu())}
+    onkeydown={(event) => handleKeydown(event)}
  >
    <span class="select-label">{selectedLabel}</span>
    <span class="select-icon" aria-hidden="true">
@@ -179,35 +129,32 @@
  </button>

  {#if isOpen}
-    <ul
+    <div
      bind:this={listbox}
      id={listboxId}
      class="select-menu"
      role="listbox"
      tabindex="-1"
      aria-activedescendant={activeDescendantId}
-      onkeydown={onListboxKeydown}
+      onkeydown={(event) => handleKeydown(event, true)}
    >
      {#each options as option, index (option.value)}
-        <li
+        <button
+          type="button"
          id={optionId(option.value)}
          role="option"
          aria-selected={option.value === value}
+          class="select-option"
+          class:is-selected={option.value === value}
+          class:is-active={index === activeIndex}
+          tabindex="-1"
+          onclick={() => selectValue(option.value)}
+          onmouseenter={() => (activeIndex = index)}
        >
-          <button
-            type="button"
-            class="select-option"
-            class:is-selected={option.value === value}
-            class:is-active={index === activeIndex}
-            tabindex="-1"
-            onclick={() => selectValue(option.value)}
-            onmouseenter={() => (activeIndex = index)}
-          >
-            {option.label}
-          </button>
-        </li>
+          {option.label}
+        </button>
      {/each}
-    </ul>
+    </div>
  {/if}
 </div>

@@ -239,14 +186,14 @@
      box-shadow 180ms ease;
  }

-  .select-trigger:hover {
+  .select-trigger:hover,
+  .select-trigger:focus-visible {
+    outline: none;
    background: var(--theme-secondary, #e5e7eb);
    border-color: var(--theme-offset-bg, var(--theme-secondary, #d4d4d8));
  }

  .select-trigger:focus-visible {
-    outline: none;
-    background: var(--theme-secondary, #e5e7eb);
    border-color: color-mix(in srgb, var(--text-primary) 22%, var(--theme-secondary, #e5e7eb) 78%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 12%, transparent);
  }
@@ -268,9 +215,11 @@
    left: 0;
    right: 0;
    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
    margin: 0;
    padding: 0.5rem;
-    list-style: none;
    border: 1px solid var(--theme-offset-bg, var(--theme-secondary, #e5e7eb));
    border-radius: 14px;
    background: var(--theme-primary, #ffffff);
@@ -279,9 +228,6 @@
      0 8px 10px -6px rgb(0 0 0 / 0.2);
    max-height: 18rem;
    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
  }

  .select-menu:focus-visible {
@@ -310,12 +256,9 @@

  .select-option:hover,
  .select-option:focus-visible,
-  .select-option.is-active {
+  .select-option.is-active,
+  .select-option.is-selected {
    outline: none;
    background: var(--theme-secondary, #e5e7eb);
  }
-
-  .select-option.is-selected {
-    background: var(--theme-secondary, #e5e7eb);
-  }
 </style>
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { LUCIDE_MOON_PATH } from "@/lib/icons/lucideMoon";
+
  let { class: className = "w-5 h-5" }: { class?: string } = $props();
 </script>

@@ -9,5 +11,5 @@
  class={className}
  aria-hidden="true"
 >
-  <path d="M12,3C7.03,3 3,7.03 3,12C3,16.97 7.03,21 12,21C16.97,21 21,16.97 21,12C21,11.54 20.96,11.08 20.9,10.64C19.92,12.01 18.32,12.9 16.5,12.9C13.52,12.9 11.1,10.48 11.1,7.5C11.1,5.68 11.99,4.08 13.36,3.1C12.92,3.04 12.46,3 12,3Z" />
+  <path d={LUCIDE_MOON_PATH} />
 </svg>
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { LUCIDE_SUN_PATH } from "@/lib/icons/lucideSun";
+
  let { class: className = "w-5 h-5" }: { class?: string } = $props();
 </script>

@@ -9,5 +11,5 @@
  class={className}
  aria-hidden="true"
 >
-  <path d="M12,7C9.24,7 7,9.24 7,12C7,14.76 9.24,17 12,17C14.76,17 17,14.76 17,12C17,9.24 14.76,7 12,7M2,13H4C4.55,13 5,12.55 5,12C5,11.45 4.55,11 4,11H2C1.45,11 1,11.45 1,12C1,12.55 1.45,13 2,13M20,13H22C22.55,13 23,12.55 23,12C23,11.45 22.55,11 22,11H20C19.45,11 19,11.45 19,12C19,12.55 19.45,13 20,13M11,2V4C11,4.55 11.45,5 12,5C12.55,5 13,4.55 13,4V2C13,1.45 12.55,1 12,1C11.45,1 11,1.45 11,2M11,20V22C11,22.55 11.45,23 12,23C12.55,23 13,22.55 13,22V20C13,19.45 12.55,19 12,19C11.45,19 11,19.45 11,20M5.99,4.58C5.6,4.19 4.96,4.19 4.58,4.58C4.19,4.96 4.19,5.6 4.58,5.99L5.64,7.05C6.03,7.44 6.67,7.44 7.05,7.05C7.44,6.67 7.44,6.03 7.05,5.64L5.99,4.58M18.36,16.95C17.97,16.56 17.33,16.56 16.95,16.95C16.56,17.33 16.56,17.97 16.95,18.36L18.01,19.42C18.4,19.81 19.04,19.81 19.42,19.42C19.81,19.04 19.81,18.4 19.42,18.01L18.36,16.95M19.42,5.99C19.81,5.6 19.81,4.96 19.42,4.58C19.04,4.19 18.4,4.19 18.01,4.58L16.95,5.64C16.56,6.03 16.56,6.67 16.95,7.05C17.33,7.44 17.97,7.44 18.36,7.05L19.42,5.99M7.05,18.36C7.44,17.97 7.44,17.33 7.05,16.95C6.67,16.56 6.03,16.56 5.64,16.95L4.58,18.01C4.19,18.4 4.19,19.04 4.58,19.42C4.96,19.81 5.6,19.81 5.99,19.42L7.05,18.36Z" />
+  <path d={LUCIDE_SUN_PATH} />
 </svg>
@@ -13,6 +13,10 @@
  let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
  let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));

+  function setError(e: unknown) {
+    error = e instanceof Error ? e.message : 'An unknown error occurred';
+  }
+
  async function getTheme() {
    return localStorage.getItem('selectedBackground');
  }
@@ -41,11 +45,7 @@
      await writeData(fileId, fileType, blob);
      backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
    } catch (e) {
-      if (e instanceof Error) {
-        error = e.message;
-      } else {
-        error = 'An unknown error occurred';
-      }
+      setError(e);
    }
  }

@@ -78,11 +78,7 @@
        selectNoBackground();
      }
    } catch (e) {
-      if (e instanceof Error) {
-        error = e.message;
-      } else {
-        error = 'An unknown error occurred';
-      }
+      setError(e);
    }
  }

@@ -105,11 +101,7 @@
        selectNoBackground();
      }
    } catch (e) {
-      if (e instanceof Error) {
-        error = `Failed to delete background: ${e.message}`;
-      } else {
-        error = 'An unknown error occurred';
-      }
+      error = e instanceof Error ? `Failed to delete background: ${e.message}` : 'An unknown error occurred';
    }
  }

@@ -1,11 +1,7 @@
 <script lang="ts">
  import { blobToDataUrl } from '@/plugins/built-in/themes/themeImageUrl'

-  let {
-    source,
-    alt = '',
-    class: className = '',
-  } = $props<{
+  let { source, alt = '', class: className = '' } = $props<{
    source: string | Blob | null | undefined
    alt?: string
    class?: string
@@ -24,7 +20,7 @@
      return
    }
    let cancelled = false
-    blobToDataUrl(value).then((url) => {
+    void blobToDataUrl(value).then((url) => {
      if (!cancelled) src = url
    })
    return () => {
@@ -34,5 +30,5 @@
 </script>

 {#if src}
-  <img src={src} alt={alt} class={className} />
+  <img {src} {alt} class={className} />
 {/if}
@@ -315,40 +315,36 @@
          <h2 class="text-sm font-bold">Maximum Subjects</h2>
          <p class="text-xs">Number of subjects to include, ordered by soonest due date</p>
        </div>
-        <div>
-          <Select
-            value={String($settingsState.homeUpcomingSubjectsMax ?? 5)}
-            onChange={(value: string) => (settingsState.homeUpcomingSubjectsMax = Number(value))}
-            options={[
-              { value: "0", label: "All" },
-              { value: "3", label: "3" },
-              { value: "5", label: "5" },
-              { value: "7", label: "7" },
-              { value: "10", label: "10" },
-              { value: "15", label: "15" },
-            ]}
-          />
-        </div>
+        <Select
+          value={String($settingsState.homeUpcomingSubjectsMax ?? 5)}
+          onChange={(value: string) => (settingsState.homeUpcomingSubjectsMax = Number(value))}
+          options={[
+            { value: "0", label: "All" },
+            { value: "3", label: "3" },
+            { value: "5", label: "5" },
+            { value: "7", label: "7" },
+            { value: "10", label: "10" },
+            { value: "15", label: "15" },
+          ]}
+        />
      </div>
      <div class="flex justify-between items-center px-4 py-3 pl-6 border-t border-zinc-100 dark:border-zinc-700/50">
        <div class="pr-4">
          <h2 class="text-sm font-bold">Maximum Assessments per Subject</h2>
          <p class="text-xs">Assessments shown for each included subject</p>
        </div>
-        <div>
-          <Select
-            value={String($settingsState.homeUpcomingAssessmentsPerSubjectMax ?? 0)}
-            onChange={(value: string) => (settingsState.homeUpcomingAssessmentsPerSubjectMax = Number(value))}
-            options={[
-              { value: "0", label: "All" },
-              { value: "1", label: "1" },
-              { value: "2", label: "2" },
-              { value: "3", label: "3" },
-              { value: "5", label: "5" },
-              { value: "10", label: "10" },
-            ]}
-          />
-        </div>
+        <Select
+          value={String($settingsState.homeUpcomingAssessmentsPerSubjectMax ?? 0)}
+          onChange={(value: string) => (settingsState.homeUpcomingAssessmentsPerSubjectMax = Number(value))}
+          options={[
+            { value: "0", label: "All" },
+            { value: "1", label: "1" },
+            { value: "2", label: "2" },
+            { value: "3", label: "3" },
+            { value: "5", label: "5" },
+            { value: "10", label: "10" },
+          ]}
+        />
      </div>
    </div>
  </div>
@@ -76,26 +76,17 @@
    await themeManager.disableTheme();

    if (themeID) {
-      const tempTheme = await themeManager.getTheme(themeID)
-
-      if (!tempTheme) return
-
-      // convert temptheme to LoadedCustomTheme
-      const loadedTheme = {
-        ...tempTheme,
-        CustomImages: tempTheme.CustomImages.map(image => ({
-          ...image
-        }))
-      }
+      const tempTheme = await themeManager.getTheme(themeID);
+      if (!tempTheme) return;

      theme = {
-        ...loadedTheme,
-        adaptiveCssVariables: loadedTheme.adaptiveCssVariables ?? [],
+        ...tempTheme,
+        adaptiveCssVariables: tempTheme.adaptiveCssVariables ?? [],
        forceTheme:
-          loadedTheme.forceTheme ??
-          (loadedTheme.forceDark !== undefined ? true : undefined),
-      }
-      themeLoaded = true
+          tempTheme.forceTheme ??
+          (tempTheme.forceDark !== undefined ? true : undefined),
+      };
+      themeLoaded = true;
    } else {
      themeLoaded = true
    }