feat(app): prefer user fansub

packages/app/src/layouts/Layout.astro

@@ -107,6 +107,7 @@ function followSearch(params: Record<string, string>) {
               <span>字幕组</span>
               <div slot="dropdown" class="mt4">
                 <div
+                  id="fansub-dropdown"
                   class="w-[180px] max-h-[600px] overflow-y-auto rounded-md border shadow-box bg-light-100 divide-y"
                 >
                   {
@@ -123,7 +124,9 @@ function followSearch(params: Record<string, string>) {
                     fansubs.map((t) => (
                       <a
                         href={`/resources/1?${followSearch({ fansubId: '' + t.id })}`}
-                        class="px2 py1 block text-base-600 text-link-active"
+                        class="fansub-item px2 py1 block text-base-600 text-link-active"
+                        data-fansub-id={t.id}
+                        data-fansub-name={t.name}
                       >
                         {t.name}
                       </a>
@@ -179,6 +182,8 @@ function followSearch(params: Record<string, string>) {
 
     <Loading />
 
+    <script src="../logic/prefer.ts"></script>
+
     <style is:global>
       @import '@onekuma/preset.css';
       @import '@onekuma/reset/tailwind.css';

packages/app/src/logic/prefer.ts

@@ -0,0 +1,45 @@
+import type { ResolvedFilterOptions } from 'animegarden';
+
+import { preferFansubs } from '../state';
+
+document.addEventListener('astro:page-load', () => {
+  const resp = document.querySelector('#fetch-response') as HTMLElement | null;
+  if (resp) {
+    const filter = JSON.parse(resp.dataset.filter ?? '') as ResolvedFilterOptions;
+    if (filter.fansubId) {
+      const fansub = new Set([...filter.fansubId, ...preferFansubs.get()].filter(Boolean));
+      preferFansubs.set(fansub);
+      reorderFansub(fansub);
+    }
+  }
+});
+
+export function reorderFansub(order: Set<number>) {
+  const dropdown = document.querySelector('#fansub-dropdown') as HTMLElement | null;
+  if (dropdown) {
+    const children = Array.from(dropdown.children).filter((n) =>
+      n.classList.contains('fansub-item')
+    ) as HTMLElement[];
+    const map = new Map<number, HTMLElement>();
+    const otherItem: HTMLElement[] = [];
+    for (const c of children) {
+      if (c.dataset.fansubId) {
+        const id = +c.dataset.fansubId;
+        map.set(id, c);
+        if (!order.has(id)) {
+          otherItem.push(c);
+        }
+      }
+    }
+
+    for (const id of order) {
+      const c = map.get(id);
+      if (c) {
+        dropdown.appendChild(c);
+      }
+    }
+    for (const c of otherItem) {
+      dropdown.appendChild(c);
+    }
+  }
+}

packages/app/src/pages/resources/[page].astro

@@ -34,19 +34,15 @@ const exclude = params.exclude;
 
 const env = getRuntimeEnv(Astro.locals);
 
-const {
-  ok,
-  complete,
-  resources,
-  filter: searchParams,
-  timestamp
-} = await fetchResources(
+const resp = await fetchResources(
   { ...params, page },
   {
     fetch: wfetch(env?.worker)
   }
 );
 
+const { ok, complete, resources, filter: searchParams, timestamp } = resp;
+
 const keywords = {
   search: searchParams?.search ? removeQuote(searchParams.search) : [...(search ?? [])],
   include: searchParams?.include ? searchParams.include : [...(include ?? [])],
@@ -179,6 +175,9 @@ const keywords = {
     }
   </div>
 
+  <!-- Pass fetch response to the client -->
+  <div id="fetch-response" class="hidden" data-filter={JSON.stringify(searchParams)}></div>
+
   <style>
     .keyword {
       display: inline-flex;

packages/app/src/state.ts

@@ -25,3 +25,8 @@ export function removeHistory(item: string) {
 export function clearHistories() {
   histories.set([]);
 }
+
+export const preferFansubs = persistentAtom<Set<number>>('animegarden:fansubs', new Set(), {
+  encode: (t) => JSON.stringify([...t]),
+  decode: (t) => new Set(JSON.parse(t) as number[])
+});