From 1b1d05e65393fb3a5cae175ed9d8343a8930ee73 Mon Sep 17 00:00:00 2001
From: ryoha000 <the7uya@gmail.com>
Date: Thu, 28 Dec 2023 12:10:54 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20summary=20=E3=81=AE=20?=
 =?UTF-8?q?=E3=83=96=E3=83=A9=E3=83=B3=E3=83=89=E5=90=8D=E3=82=92=E3=82=AF?=
 =?UTF-8?q?=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97=E3=81=9F=E3=82=89=E3=82=B5?=
 =?UTF-8?q?=E3=82=A4=E3=83=89=E3=83=90=E3=83=BC=E3=81=A7=E6=A4=9C=E7=B4=A2?=
 =?UTF-8?q?=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/Sidebar.svelte    |  4 ++--
 src/components/UI/LinkText.svelte        | 15 ++++++++++++++-
 src/components/UI/Table.svelte           | 11 +++++------
 src/components/Work/LinkToSidebar.svelte | 11 +++++++++++
 src/components/Work/WorkMain.svelte      |  7 ++++++-
 src/lib/filter.ts                        |  4 ++--
 src/store/query.ts                       |  3 +++
 7 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Work/LinkToSidebar.svelte
 create mode 100644 src/store/query.ts

diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index 7bad438..e49af9a 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/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();
 
diff --git a/src/components/UI/LinkText.svelte b/src/components/UI/LinkText.svelte
index 9b92795..fb9a1dc 100644
--- a/src/components/UI/LinkText.svelte
+++ b/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>
diff --git a/src/components/UI/Table.svelte b/src/components/UI/Table.svelte
index 4e3ed32..6d10eb9 100644
--- a/src/components/UI/Table.svelte
+++ b/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
diff --git a/src/components/Work/LinkToSidebar.svelte b/src/components/Work/LinkToSidebar.svelte
new file mode 100644
index 0000000..392bab0
--- /dev/null
+++ b/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} />
diff --git a/src/components/Work/WorkMain.svelte b/src/components/Work/WorkMain.svelte
index d1f5daf..2ae0549 100644
--- a/src/components/Work/WorkMain.svelte
+++ b/src/components/Work/WorkMain.svelte
@@ -2,6 +2,7 @@
   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";
 
@@ -9,7 +10,11 @@
 
   $: 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}` },
diff --git a/src/lib/filter.ts b/src/lib/filter.ts
index 21b9067..a3d901a 100644
--- a/src/lib/filter.ts
+++ b/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 = () => {
diff --git a/src/store/query.ts b/src/store/query.ts
new file mode 100644
index 0000000..8f929cf
--- /dev/null
+++ b/src/store/query.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const query = writable("");