Merge pull request #37 from ryoha000/feat/frontend.onclike.work.brand…

…name

feat: 🎸 summary の ブランド名をクリックしたらサイドバーで検索されるように

src/components/Sidebar/Sidebar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { CollectionElementsWithLabel } from "@/lib/types";
   import { onMount } from "svelte";
   import CollectionElements from "@/components/Sidebar/CollectionElements.svelte";
   import { sidebarCollectionElements } from "@/store/sidebarCollectionElements";
@@ -15,6 +14,7 @@
   import SubHeader from "@/components/Sidebar/SubHeader.svelte";
   import { searchAttributes } from "@/components/Sidebar/searchAttributes";
   import { search } from "@/components/Sidebar/search";
+  import { query } from "@/store/query";
 
   onMount(async () => {
     await sidebarCollectionElements.refetch();
@@ -27,7 +27,7 @@
     elementOptions.set(collectionElementsToOptions(v))
   );
 
-  const { query, filtered } = useFilter(elementOptions, getElementOptions);
+  const { filtered } = useFilter(query, elementOptions, getElementOptions);
   let order = localStorageWritable<SortOrder>("sort-order", "gamename-asc");
   const { attributes, toggleEnable } = searchAttributes();
 

src/components/UI/LinkText.svelte

@@ -1,12 +1,25 @@
 <script lang="ts">
   import { open } from "@tauri-apps/api/shell";
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
 
   export let href: string;
   export let text: string = "";
+
+  export let intercept: boolean = false;
+
+  const handleClick = () => {
+    if (intercept) {
+      dispatch("click", { href });
+    } else {
+      open(href);
+    }
+  };
 </script>
 
 <button
-  on:click={() => open(href)}
+  on:click={handleClick}
   class="text-(body2 text-link) block whitespace-nowrap underline-text-link hover:underline bg-transparent transition-all underline-none"
 >
   <slot>

src/components/UI/Table.svelte

@@ -2,7 +2,8 @@
   export let title: string;
   export let rows: {
     label: string;
-    value: string | { text: string; link: string };
+    value: string;
+    component?: any;
   }[];
 </script>
 
@@ -17,11 +18,9 @@
       >
         {row.label}
       </div>
-      {#if typeof row.value.link === "string"}
-        <div
-          class="p-4 border-(t-1px solid border-primary) text-(body2 text-link)"
-        >
-          {row.value}
+      {#if row.component}
+        <div class="p-4 border-(t-1px solid border-primary)">
+          <svelte:component this={row.component} value={row.value} />
         </div>
       {:else}
         <div

src/components/Work/LinkToSidebar.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import LinkText from "@/components/UI/LinkText.svelte";
+  import { query } from "@/store/query";
+  export let value: string;
+
+  const searchInSidebar = () => {
+    query.set(value);
+  };
+</script>
+
+<LinkText text={value} href={value} intercept on:click={searchInSidebar} />

src/components/Work/WorkMain.svelte

@@ -2,14 +2,19 @@
   import LinkButton from "@/components/UI/LinkButton.svelte";
   import Table from "@/components/UI/Table.svelte";
   import Actions from "@/components/Work/Actions.svelte";
+  import LinkToSidebar from "@/components/Work/LinkToSidebar.svelte";
   import type { Work } from "@/lib/types";
   import { seiya } from "@/store/seiya";
 
   export let work: Work;
 
   $: seiyaUrlPromise = seiya.getUrl(work.name);
   $: summaryValue = [
-    { label: "ブランド", value: work.brandName },
+    {
+      label: "ブランド",
+      value: work.brandName,
+      component: LinkToSidebar,
+    },
     { label: "発売日", value: work.sellday },
     { label: "平均プレイ時間", value: `${work.statistics.playTime}` },
     { label: "中央値", value: `${work.statistics.median}` },

src/lib/filter.ts

@@ -1,7 +1,7 @@
 export type Option<T> = { label: string; value: T; otherLabels?: string[] };
 
 import type { CollectionElement } from "@/lib/types";
-import { writable, type Readable } from "svelte/store";
+import { writable, type Readable, type Writable } from "svelte/store";
 import { toHiragana, toRomaji } from "wanakana";
 
 export const collectionElementsToOptions = (elements: CollectionElement[]) =>
@@ -18,10 +18,10 @@ export const collectionElementsToOptions = (elements: CollectionElement[]) =>
   }));
 
 export const useFilter = <T>(
+  query: Writable<string>,
   options: Readable<Option<T>[]>,
   getOptions: () => Option<T>[]
 ) => {
-  const query = writable("");
   const filtered = writable<Option<T>[]>([...getOptions()]);
 
   const init = () => {

src/store/query.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const query = writable("");