✨ Add input value prop to TabItem and TabList components

jaem1n207 · Jan 30, 2024 · 5be3a57 · 5be3a57
1 parent 4dd2a80
commit 5be3a57
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/lib/tabs/tab-item.svelte b/src/lib/tabs/tab-item.svelte
@@ -6,8 +6,10 @@
   import { selectedTabStore } from '$lib/tabs/selectedTabStore';
   import { cn } from '$lib/utils';
 
+  import HighlightMatches from '../components/highlight-matches.svelte';
   import { getTabIdentifier } from './utils.tabs';
 
+  export let inputValue: string;
   export let tab: chrome.tabs.Tab;
   export let isDisabled: boolean;
 
@@ -37,6 +39,6 @@
     <Avatar.Image src={tab.favIconUrl} alt={tab.title} />
     <Avatar.Fallback><Image /></Avatar.Fallback>
   </Avatar.Root>
-  <span class="line-clamp-2 text-xs">{tab.title}</span>
+  <HighlightMatches class="line-clamp-2 text-xs" match={inputValue} value={tab.title} />
   <Command.CommandShortcut class="size-5">↵</Command.CommandShortcut>
 </Command.Item>
diff --git a/src/lib/tabs/tab-list.svelte b/src/lib/tabs/tab-list.svelte
@@ -9,6 +9,7 @@
   import { chromeApi, tabKeys } from './utils.tabs';
 
   export let isSyncing: boolean;
+  export let inputValue: string;
 
   const tabs = createQuery({
     queryKey: tabKeys.lists(),
@@ -46,7 +47,7 @@
     </Command.Empty>
     <Command.Group heading={getLocalMessage('tabs')}>
       {#each $tabs.data as tab (tab.id)}
-        <TabItem {tab} isDisabled={isSyncing || isGoogleService(tab.url ?? '')} />
+        <TabItem {inputValue} {tab} isDisabled={isSyncing || isGoogleService(tab.url ?? '')} />
       {/each}
     </Command.Group>
   {:else}

diff --git a/src/lib/tabs/tabs-cmdk.svelte b/src/lib/tabs/tabs-cmdk.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query';
+  import { onMount } from 'svelte';
 
   import * as Command from '$lib/components/ui/command';
   import { isEmptyString, isHTMLElement } from '$lib/is';
@@ -12,7 +13,6 @@
   import SubCommand from './sub-command.svelte';
   import TabList from './tab-list.svelte';
   import { chromeApi, tabKeys } from './utils.tabs';
-  import { onMount } from 'svelte';
 
   const syncTabIds = createQuery({
     queryKey: tabKeys.sync(),
@@ -97,6 +97,6 @@
       <Command.Shortcut class="size-5">/</Command.Shortcut>
     </div>
   </Command.Input>
-  <TabList {isSyncing} />
+  <TabList {inputValue} {isSyncing} />
   <SubCommand {isSyncing} {resetInputValue} />
 </Command.Root>