feat: add search and play from myinstants

2025-08-15 23:45:42 +02:00 · 2025-08-15 23:45:42 +02:00 · 936f82b5be
commit 936f82b5be
parent cdff674766
47 changed files with 1217 additions and 11 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -3,7 +3,7 @@
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
--- a/package.json
+++ b/package.json
@ -29,10 +29,12 @@
    "@electron-toolkit/eslint-config-prettier": "^3.0.0",
    "@electron-toolkit/eslint-config-ts": "^3.0.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
-    "@lucide/svelte": "^0.539.0",
+    "@internationalized/date": "^3.8.2",
+    "@lucide/svelte": "^0.515.0",
    "@sveltejs/vite-plugin-svelte": "^6.1.0",
    "@tailwindcss/vite": "^4.0.0",
    "@types/node": "^22.16.5",
+    "bits-ui": "^2.9.3",
    "clsx": "^2.1.1",
    "electron": "^37.2.3",
    "electron-builder": "^25.1.8",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -27,9 +27,12 @@ importers:
      '@electron-toolkit/tsconfig':
        specifier: ^1.0.1
        version: 1.0.1(@types/node@22.17.1)
+      '@internationalized/date':
+        specifier: ^3.8.2
+        version: 3.8.2
      '@lucide/svelte':
-        specifier: ^0.539.0
-        version: 0.539.0(svelte@5.38.1)
+        specifier: ^0.515.0
+        version: 0.515.0(svelte@5.38.1)
      '@sveltejs/vite-plugin-svelte':
        specifier: ^6.1.0
        version: 6.1.2(svelte@5.38.1)(vite@7.1.2(@types/node@22.17.1)(jiti@2.5.1)(lightningcss@1.30.1))
@ -39,6 +42,9 @@ importers:
      '@types/node':
        specifier: ^22.16.5
        version: 22.17.1
+      bits-ui:
+        specifier: ^2.9.3
+        version: 2.9.3(@internationalized/date@3.8.2)(svelte@5.38.1)
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
@ -432,6 +438,15 @@ packages:
    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.3':
+    resolution: {integrity: sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==}
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
  '@gar/promisify@1.1.3':
    resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}

@ -455,6 +470,9 @@ packages:
    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
    engines: {node: '>=18.18'}

+  '@internationalized/date@3.8.2':
+    resolution: {integrity: sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==}
+
  '@isaacs/balanced-match@4.0.1':
    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
    engines: {node: 20 || >=22}
@ -487,8 +505,8 @@ packages:
  '@jridgewell/trace-mapping@0.3.30':
    resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}

-  '@lucide/svelte@0.539.0':
-    resolution: {integrity: sha512-OWhw4BhHO+owmOE/ijSNLnw/flbW2/DsLzMHAeM8oEjLsO0xE6glX0ADCDwxKItTs5ZJYssfyGNXxMXrea173w==}
+  '@lucide/svelte@0.515.0':
+    resolution: {integrity: sha512-CEAyqcZmNBfYzVgaRmK2RFJP5tnbXxekRyDk0XX/eZQRfsJmkDvmQwXNX8C869BgNeryzmrRyjHhUL6g9ZOHNA==}
    peerDependencies:
      svelte: ^5

@ -653,6 +671,9 @@ packages:
      svelte: ^5.0.0
      vite: ^6.3.0 || ^7.0.0

+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
  '@szmarczak/http-timer@4.0.6':
    resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
    engines: {node: '>=10'}
@ -975,6 +996,13 @@ packages:
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

+  bits-ui@2.9.3:
+    resolution: {integrity: sha512-jSoi3U1pfhLQVKZ3j+1GbeuvT1w6cMbnrVWhObVE+DRuV+zcpKeUnd6zpz7NYF47HsSXVNjI1rJdZH+A5sNsOQ==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@internationalized/date': ^3.8.1
+      svelte: ^5.33.0
+
  bl@4.1.0:
    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}

@ -1693,6 +1721,9 @@ packages:
  inherits@2.0.4:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}

+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
  ip-address@10.0.1:
    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
    engines: {node: '>= 12'}
@ -2399,6 +2430,11 @@ packages:
  run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

+  runed@0.29.2:
+    resolution: {integrity: sha512-0cq6cA6sYGZwl/FvVqjx9YN+1xEBu9sDDyuWdDW1yWX7JF2wmvmVKfH+hVCZs+csW+P3ARH92MjI3H9QTagOQA==}
+    peerDependencies:
+      svelte: ^5.7.0
+
  sade@1.8.1:
    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
    engines: {node: '>=6'}
@ -2520,6 +2556,9 @@ packages:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}

+  style-to-object@1.0.9:
+    resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==}
+
  sumchecker@3.0.1:
    resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
    engines: {node: '>= 8.0'}
@ -2545,6 +2584,12 @@ packages:
      svelte:
        optional: true

+  svelte-toolbelt@0.9.3:
+    resolution: {integrity: sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw==}
+    engines: {node: '>=18', pnpm: '>=8.7.0'}
+    peerDependencies:
+      svelte: ^5.30.2
+
  svelte@5.38.1:
    resolution: {integrity: sha512-fO6CLDfJYWHgfo6lQwkQU2vhCiHc2MBl6s3vEhK+sSZru17YL4R5s1v14ndRpqKAIkq8nCz6MTk1yZbESZWeyQ==}
    engines: {node: '>=18'}
@ -2553,6 +2598,9 @@ packages:
    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
    engines: {node: ^14.18.0 || >=16.0.0}

+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
  tailwind-merge@3.0.2:
    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}

@ -2614,6 +2662,9 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
  tw-animate-css@1.3.6:
    resolution: {integrity: sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==}

@ -3139,6 +3190,17 @@ snapshots:
      '@eslint/core': 0.15.2
      levn: 0.4.1

+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.3':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/utils@0.2.10': {}
+
  '@gar/promisify@1.1.3': {}

  '@humanfs/core@0.19.1': {}
@ -3154,6 +3216,10 @@ snapshots:

  '@humanwhocodes/retry@0.4.3': {}

+  '@internationalized/date@3.8.2':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
  '@isaacs/balanced-match@4.0.1': {}

  '@isaacs/brace-expansion@5.0.0':
@ -3192,7 +3258,7 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

-  '@lucide/svelte@0.539.0(svelte@5.38.1)':
+  '@lucide/svelte@0.515.0(svelte@5.38.1)':
    dependencies:
      svelte: 5.38.1

@ -3324,6 +3390,10 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
  '@szmarczak/http-timer@4.0.6':
    dependencies:
      defer-to-connect: 2.0.1
@ -3700,6 +3770,17 @@ snapshots:

  base64-js@1.5.1: {}

+  bits-ui@2.9.3(@internationalized/date@3.8.2)(svelte@5.38.1):
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/dom': 1.7.3
+      '@internationalized/date': 3.8.2
+      esm-env: 1.2.2
+      runed: 0.29.2(svelte@5.38.1)
+      svelte: 5.38.1
+      svelte-toolbelt: 0.9.3(svelte@5.38.1)
+      tabbable: 6.2.0
+
  bl@4.1.0:
    dependencies:
      buffer: 5.7.1
@ -4600,6 +4681,8 @@ snapshots:

  inherits@2.0.4: {}

+  inline-style-parser@0.2.4: {}
+
  ip-address@10.0.1: {}

  is-ci@3.0.1:
@ -5199,6 +5282,11 @@ snapshots:
    dependencies:
      queue-microtask: 1.2.3

+  runed@0.29.2(svelte@5.38.1):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.38.1
+
  sade@1.8.1:
    dependencies:
      mri: 1.2.0
@ -5313,6 +5401,10 @@ snapshots:

  strip-json-comments@3.1.1: {}

+  style-to-object@1.0.9:
+    dependencies:
+      inline-style-parser: 0.2.4
+
  sumchecker@3.0.1:
    dependencies:
      debug: 4.4.1
@ -5346,6 +5438,13 @@ snapshots:
    optionalDependencies:
      svelte: 5.38.1

+  svelte-toolbelt@0.9.3(svelte@5.38.1):
+    dependencies:
+      clsx: 2.1.1
+      runed: 0.29.2(svelte@5.38.1)
+      style-to-object: 1.0.9
+      svelte: 5.38.1
+
  svelte@5.38.1:
    dependencies:
      '@jridgewell/remapping': 2.3.5
@ -5367,6 +5466,8 @@ snapshots:
    dependencies:
      '@pkgr/core': 0.2.9

+  tabbable@6.2.0: {}
+
  tailwind-merge@3.0.2: {}

  tailwind-merge@3.3.1: {}
@ -5436,6 +5537,8 @@ snapshots:
    dependencies:
      typescript: 5.9.2

+  tslib@2.8.1: {}
+
  tw-animate-css@1.3.6: {}

  type-check@0.4.0:
--- a/src/main/crawler.js
+++ b/src/main/crawler.js
@ -0,0 +1,29 @@
+// this file has to be copied into main.ts executejs for search every time it is changed
+
+document.body.style = '' // enable scroll even with consent popup
+
+// using var to rpevent redeclaration errors
+var soundsEl = document.getElementsByClassName('instant')
+
+var sounds = []
+
+Array.from(soundsEl).forEach((e) => {
+  const childrens = Array.from(e.children)
+
+  let nameEl = childrens.find((e) => {
+    return e.classList.contains('instant-link')
+  })
+  let name = nameEl?.textContent
+  let link = nameEl?.href
+
+  let buttonEl = childrens.find((e) => {
+    return e.classList.contains('small-button')
+  })
+  let src = window.location.origin + buttonEl?.getAttribute('onclick')?.split("'")[1]
+
+  sounds.push({ name, link, src })
+})
+
+sounds // executeJavascript returns the last expression
+
+// window.scrollBy(0, 500)
--- a/src/main/index.ts
+++ b/src/main/index.ts
@ -2,6 +2,9 @@ import { app, shell, BrowserWindow, ipcMain } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
+import { Sound } from './types'
+
+let crawlerWindow: BrowserWindow

 function createWindow(): void {
  // Create the browser window.
@ -17,6 +20,16 @@ function createWindow(): void {
    }
  })

+  crawlerWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: true,
+    webPreferences: {
+      sandbox: false,
+      contextIsolation: false
+    }
+  })
+
  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })
@ -59,6 +72,8 @@ app.whenReady().then(() => {
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
+
+  crawlerWindow.loadURL('https://www.myinstants.com')
 })

 // Quit when all windows are closed, except on macOS. There, it's common
@ -72,3 +87,35 @@ app.on('window-all-closed', () => {

 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
+ipcMain.handle('search', async (_, searchValue) => {
+  if (searchValue) {
+    await crawlerWindow.loadURL(`https://www.myinstants.com/en/search/?name=${searchValue}`)
+  }
+
+  return await crawlerWindow.webContents
+    .executeJavaScript(`document.body.style = '' // enable scroll even with consent popup
+
+// using var to rpevent redeclaration errors
+var soundsEl = document.getElementsByClassName('instant')
+
+var sounds = []
+
+Array.from(soundsEl).forEach((e) => {
+  const childrens = Array.from(e.children)
+
+  let nameEl = childrens.find((e) => {
+    return e.classList.contains('instant-link')
+  })
+  let name = nameEl?.textContent
+  let link = nameEl?.href
+
+  let buttonEl = childrens.find((e) => {
+    return e.classList.contains('small-button')
+  })
+  let src = window.location.origin + buttonEl?.getAttribute('onclick')?.split("'")[1]
+
+  sounds.push({ name, link, src })
+})
+
+sounds`)
+})
--- a/src/main/types.ts
+++ b/src/main/types.ts
@ -0,0 +1,4 @@
+export type Sound = {
+    name: string,
+    src: string
+}
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@ -1,8 +1,14 @@
-import { contextBridge } from 'electron'
+import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'

 // Custom APIs for renderer
-const api = {}
+const api = {
+  search: async (searchValue: string) => {
+    let a= await ipcRenderer.invoke("search", searchValue)
+    console.log(a)
+    return a
+  }
+}

 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -6,7 +6,7 @@
  <title>Electron</title>
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" />
+    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; media-src https://www.myinstants.com; img-src 'self' data:" />
  <meta name="theme-color" content="dakr" />
 </head>

--- a/src/renderer/src/App.svelte
+++ b/src/renderer/src/App.svelte
@ -1 +1,186 @@
-<script lang="ts"></script>
+<script lang="ts">
+  import { _Audio } from '$lib/audio'
+  import { Button } from '$lib/components/ui/button'
+  import { Input } from '$lib/components/ui/input/'
+  import * as Table from '$lib/components/ui/table/'
+  import * as Dialog from '$lib/components/ui/dialog/'
+  import { onMount } from 'svelte'
+  import * as Select from '$lib/components/ui/select'
+  import * as RadioGroup from '$lib/components/ui/radio-group/'
+  import { Label } from '$lib/components/ui/label/'
+
+  type Sound = {
+    name: string
+    // author: string
+    // favorited: number
+    // viewed: number
+    link: string
+    src: string
+  }
+  let sounds: Sound[] = $state([])
+
+  let searchValue = $state('')
+
+  function debounce(func, delay) {
+    let timeout
+    return function (...args) {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        func.apply(this, args)
+      }, delay)
+    }
+  }
+
+  async function search(): Promise<void> {
+    sounds = await window.api.search(searchValue)
+    console.log(sounds)
+  }
+
+  const dSearch = debounce(search, 500)
+
+  let sound: _Audio
+  function play(src: string): void {
+    if (!localStorage.getItem('output_device_id')) {
+      return alert('Please select an audio device to ouput sounds.')
+    }
+    if (sound) {
+      sound.stop()
+    }
+    sound = new _Audio(src)
+    sound.setOuputDevice(localStorage.getItem('output_device_id'))
+    sound.play()
+  }
+
+  let showSelectDeviceDialog = $state(false)
+
+  let devices: MediaDeviceInfo[] = $state([])
+
+  let device = $state(localStorage.getItem('output_device_id'))
+
+  const triggerContent: string = $derived(
+    devices.find((d) => d.deviceId === device)?.label ?? 'Select a device'
+  )
+
+  let kinds = $state([])
+
+  let kind = $state('audiooutput')
+
+  async function updateDevices(): Promise<void> {
+    devices = await navigator.mediaDevices.enumerateDevices()
+    kinds = []
+    devices.forEach((d) => {
+      if (!kinds.includes(d.kind)) {
+        kinds.push(d.kind)
+      }
+    })
+    devices = devices.filter((d) => d.kind === kind)
+  }
+
+  onMount(async () => {
+    sounds = await window.api.search()
+    updateDevices()
+    console.log(devices)
+
+    if (!localStorage.getItem('output_device_id')) {
+      showSelectDeviceDialog = true
+    }
+  })
+</script>
+
+<header class="absolute top-0 left-0 h-16 w-full">
+  <Input
+    placeholder="Search a sound"
+    class="absolute top-[50%] left-[50%] w-[calc(100%-64px)] translate-[-50%]"
+    bind:value={searchValue}
+    onkeyup={dSearch} />
+</header>
+
+<main
+  class="absolute top-16 left-[50%] h-[calc(100%-128px)] w-[calc(100%-64px)] translate-x-[-50%] overflow-y-scroll">
+  <Table.Root>
+    <!-- <Table.Header>
+      <Table.Row>
+        <Table.Head class="w-[100px]">Sound</Table.Head>
+        <Table.Head>Author</Table.Head>
+        <Table.Head>Favorited</Table.Head>
+        <Table.Head>Viewed</Table.Head>
+        <Table.Head class="text-right"></Table.Head>
+        <Table.Head class="text-right"></Table.Head>
+      </Table.Row>
+    </Table.Header> -->
+    <Table.Body>
+      {#each sounds as sound (sound)}
+        <Table.Row>
+          <Table.Cell class="font-medium"
+            ><Button variant="link" href={sound.link} target="_blank">{sound.name}</Button
+            ></Table.Cell>
+          <!-- <Table.Cell>{sound.author}</Table.Cell>
+          <Table.Cell>{sound.favorited}</Table.Cell>
+          <Table.Cell>{sound.viewed}</Table.Cell> -->
+          <Table.Cell class="text-right">
+            <Button variant="link">Add to favorites</Button></Table.Cell>
+          <Table.Cell class="text-right">
+            <Button
+              class="mr-4"
+              onclick={() => {
+                play(sound.src)
+              }}>Play</Button>
+          </Table.Cell>
+        </Table.Row>
+      {/each}
+    </Table.Body>
+  </Table.Root>
+</main>
+
+<footer class="absolute bottom-0 left-0 h-16 w-full">
+  <Dialog.Root open={showSelectDeviceDialog}>
+    <Dialog.Trigger
+      ><Button
+        class="absolute top-[50%] right-8 w-fit translate-y-[-50%]"
+        onclick={() => {
+          showSelectDeviceDialog = true
+        }}>Select audio device</Button
+      ></Dialog.Trigger>
+    <Dialog.Content class="max-w-[425px]">
+      <Dialog.Header>
+        <Dialog.Title>Select audio device</Dialog.Title>
+        <Dialog.Description>Usually you should select "CABLE Input"</Dialog.Description>
+      </Dialog.Header>
+      <RadioGroup.Root bind:value={kind} onValueChange={updateDevices}>
+        {#each kinds as kind (kind)}
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value={kind} />
+            <Label for="r1">{kind}</Label>
+          </div>
+        {/each}
+      </RadioGroup.Root>
+      <Select.Root type="single" name="device" bind:value={device}>
+        <Select.Trigger class="w-full">
+          {triggerContent}
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Group>
+            <Select.Label>Devices</Select.Label>
+            {#each devices as device (`${device.deviceId}`)}
+              <Select.Item value={device.deviceId} label={device.label}>
+                {device.label}
+              </Select.Item>
+            {/each}
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>
+      <Dialog.Footer>
+        <Button
+          type="button"
+          class="w-full"
+          onclick={() => {
+            console.log('save')
+            if (device !== '') {
+              localStorage.setItem('output_device_id', device)
+            } else localStorage.removeItem('output_device_id')
+            showSelectDeviceDialog = false
+          }}>Save</Button>
+      </Dialog.Footer>
+    </Dialog.Content>
+  </Dialog.Root>
+</footer>
--- a/src/renderer/src/lib/audio.ts
+++ b/src/renderer/src/lib/audio.ts
@ -0,0 +1,21 @@
+export class _Audio {
+  src: string
+  audio: HTMLAudioElement
+  constructor(src: string) {
+    this.src = src
+    this.audio = new Audio(src)
+  }
+
+  play() {
+    this.audio.play()
+  }
+
+  stop() {
+    this.audio.pause()
+    this.audio.remove()
+  }
+
+  setOuputDevice(id: string) {
+    this.audio.setSinkId(id)
+  }
+}
--- a/src/renderer/src/lib/components/ui/dialog/dialog-close.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-close.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
--- a/src/renderer/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-content.svelte
@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-description.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-footer.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-header.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-overlay.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-title.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/dialog/dialog-trigger.svelte
+++ b/src/renderer/src/lib/components/ui/dialog/dialog-trigger.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
--- a/src/renderer/src/lib/components/ui/dialog/index.ts
+++ b/src/renderer/src/lib/components/ui/dialog/index.ts
@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
--- a/src/renderer/src/lib/components/ui/input/index.ts
+++ b/src/renderer/src/lib/components/ui/input/index.ts
@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
--- a/src/renderer/src/lib/components/ui/input/input.svelte
+++ b/src/renderer/src/lib/components/ui/input/input.svelte
@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
--- a/src/renderer/src/lib/components/ui/label/index.ts
+++ b/src/renderer/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
--- a/src/renderer/src/lib/components/ui/label/label.svelte
+++ b/src/renderer/src/lib/components/ui/label/label.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+		className
+	)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/radio-group/index.ts
+++ b/src/renderer/src/lib/components/ui/radio-group/index.ts
@ -0,0 +1,10 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+
+export {
+	Root,
+	Item,
+	//
+	Root as RadioGroup,
+	Item as RadioGroupItem,
+};
--- a/src/renderer/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/src/renderer/src/lib/components/ui/radio-group/radio-group-item.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+			{#if checked}
+				<CircleIcon
+					class="fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>
--- a/src/renderer/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/src/renderer/src/lib/components/ui/radio-group/radio-group.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-3", className)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/select/index.ts
+++ b/src/renderer/src/lib/components/ui/select/index.ts
@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+};
--- a/src/renderer/src/lib/components/ui/select/select-content.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-content.svelte
@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
--- a/src/renderer/src/lib/components/ui/select/select-group-heading.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-group-heading.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
--- a/src/renderer/src/lib/components/ui/select/select-group.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-group.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />
--- a/src/renderer/src/lib/components/ui/select/select-item.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-item.svelte
@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
--- a/src/renderer/src/lib/components/ui/select/select-label.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-label.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/renderer/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-scroll-down-button.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
--- a/src/renderer/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-scroll-up-button.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
--- a/src/renderer/src/lib/components/ui/select/select-separator.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-separator.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/select/select-trigger.svelte
+++ b/src/renderer/src/lib/components/ui/select/select-trigger.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
--- a/src/renderer/src/lib/components/ui/separator/index.ts
+++ b/src/renderer/src/lib/components/ui/separator/index.ts
@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
--- a/src/renderer/src/lib/components/ui/separator/separator.svelte
+++ b/src/renderer/src/lib/components/ui/separator/separator.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator"
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		className
+	)}
+	{...restProps}
+/>
--- a/src/renderer/src/lib/components/ui/table/index.ts
+++ b/src/renderer/src/lib/components/ui/table/index.ts
@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
--- a/src/renderer/src/lib/components/ui/table/table-body.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-body.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
--- a/src/renderer/src/lib/components/ui/table/table-caption.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-caption.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
--- a/src/renderer/src/lib/components/ui/table/table-cell.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-cell.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		"whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
--- a/src/renderer/src/lib/components/ui/table/table-footer.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-footer.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
--- a/src/renderer/src/lib/components/ui/table/table-head.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-head.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
--- a/src/renderer/src/lib/components/ui/table/table-header.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-header.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
--- a/src/renderer/src/lib/components/ui/table/table-row.svelte
+++ b/src/renderer/src/lib/components/ui/table/table-row.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
--- a/src/renderer/src/lib/components/ui/table/table.svelte
+++ b/src/renderer/src/lib/components/ui/table/table.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>