Added search bar functionality to page

.gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-reference
+reference
+
+bun.lock

package.json

@@ -14,6 +14,7 @@
         "vite": "^7.1.9"
     },
     "dependencies": {
-        "@fontsource-variable/geist-mono": "^5.2.7"
+        "@fontsource-variable/geist-mono": "^5.2.7",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8"
     }
 }

src/App.svelte

@@ -1,11 +1,12 @@
 <script>
-    import '@fontsource-variable/geist-mono'
+    import '@fontsource-variable/jetbrains-mono'
     import Clock from './lib/components/Clock.svelte'
     import Links from './lib/components/Links.svelte'
     import Settings from './lib/components/Settings.svelte'
     import Stats from './lib/components/Stats.svelte'
     import Todoist from './lib/components/Todoist.svelte'
     import Weather from './lib/components/Weather.svelte'
+    import Search from './lib/components/Search.svelte'
 
     let showSettings = $state(false)
 
@@ -20,6 +21,9 @@
             <Clock />
             <Stats />
         </div>
+        <div class="top">
+            <Search />
+        </div>
         <div class="widgets">
             <Weather />
             <Todoist />

src/app.css

@@ -19,7 +19,7 @@ body {
     background: var(--bg-1);
     color: var(--txt-2);
 
-    font-family: 'Geist Mono Variable', monospace;
+    font-family: 'Jetbrains Mono Variable', monospace;
     font-weight: 400;
     font-size: 100%;
     line-height: 1.5;

src/lib/components/Search.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { settings } from '../settings-store.svelte.js'
+
+    let search_value: string
+
+    let error = false
+    let temp = ''
+
+    export function search_startpage() {
+        if (settings.engineTarget == '') {
+            console.error('invalid search engine')
+            error = true
+            temp = search_value
+            search_value = 'invalid search engine'
+            setTimeout(() => {
+                error = false
+
+                search_value = temp
+                temp = ''
+            }, 3 * 1000)
+            return
+        }
+        const eng = settings.engines.find(
+            (e) => e.title == settings.engineTarget
+        ).url
+
+        const url = `${eng}${encodeURIComponent(search_value)}`
+        window.location.href = url
+    }
+
+    onMount(() => {
+        document.addEventListener('keydown', (event) => {
+            if (event.code == 'Enter') {
+                search_startpage()
+            }
+        })
+    })
+</script>
+
+<div class="panel-wrapper search-wrapper">
+    <span class="widget-label">search</span>
+    <div class="panel">
+        <input
+            type="text"
+            class="search"
+            class:error
+            bind:value={search_value}
+            placeholder="knowledge unfits a man to be a slave..."
+            disabled={error}
+        />
+    </div>
+</div>
+
+<style>
+    .error {
+        color: var(--txt-err);
+    }
+
+    .search-wrapper {
+        border-color: var(--txt-3);
+        width: 100%;
+    }
+
+    .search {
+        padding-left: 20px;
+        background-color: var(--bg-1);
+        position: absolute;
+        border: 2px solid var(--bg-3);
+        height: 100%;
+        inset: 0;
+    }
+</style>

src/lib/components/Settings.svelte

@@ -7,6 +7,8 @@
 
     let { showSettings = false, closeSettings } = $props()
 
+    let addEngines = $state(false)
+
     // @ts-ignore
     const version = __APP_VERSION__
 
@@ -20,6 +22,14 @@
         settings.links = [...settings.links, { title: '', url: '' }]
     }
 
+    function addEngine() {
+        settings.engines = [...settings.engines, { title: '', url: '' }]
+    }
+
+    function removeEngine(index) {
+        settings.engines = settings.engines.filter((_, i) => i !== index)
+    }
+
     function removeLink(index) {
         settings.links = settings.links.filter((_, i) => i !== index)
     }
@@ -174,6 +184,67 @@
                     </RadioButton>
                 </div>
             </div>
+            <div class="group">
+                <div class="links-header">
+                    <div class="links-header">search engine</div>
+                    {#if addEngines}
+                        <button class="add-btn" onclick={addEngine}
+                            >add engine</button
+                        >
+                        <button
+                            class="add-btn"
+                            onclick={() => {
+                                addEngines = false
+                            }}>done</button
+                        >
+                    {:else}
+                        <button
+                            class="add-btn"
+                            onclick={() => {
+                                addEngines = true
+                                addEngine
+                            }}>edit engines</button
+                        >
+                    {/if}
+                </div>
+                {#if !addEngines}
+                    <div class="radio-group">
+                        {#each settings.engines as engine, index}
+                            <RadioButton
+                                bind:group={settings.engineTarget}
+                                value={engine.title}
+                            >
+                                {engine.title}
+                            </RadioButton>
+                        {/each}
+                    </div>
+                {:else}
+                    <div class="links-list">
+                        {#each settings.engines as engine, index}
+                            <div class="link">
+                                <input
+                                    type="text"
+                                    bind:value={engine.title}
+                                    placeholder="title"
+                                    class="link-input name"
+                                />
+                                <input
+                                    type="url"
+                                    bind:value={engine.url}
+                                    placeholder="https://example.com"
+                                    class="link-input"
+                                />
+                                <button
+                                    class="remove-btn"
+                                    onclick={() => removeEngine(index)}
+                                >
+                                    ×
+                                </button>
+                            </div>
+                        {/each}
+                    </div>
+                {/if}
+            </div>
             <div class="group">
                 <div class="links-header">
                     <div class="setting-label">links</div>

src/lib/settings-store.svelte.js

@@ -1,12 +1,17 @@
 let defaultSettings = {
     timeFormat: '12hr',
     todoistApiToken: '',
-    latitude: null,
-    longitude: null,
-    tempUnit: 'fahrenheit',
-    speedUnit: 'mph',
+    latitude: 0,
+    longitude: 0,
+    tempUnit: 'celsius',
+    speedUnit: 'kmh',
     linksPerColumn: 4,
     linkTarget: '_self',
+    engineTarget: 'duckduckgo',
+    engines: [
+        { title: 'google', url: 'https://google.com/search?q=' },
+        { title: 'duckduckgo', url: 'https://duckduckgo.com/?q=' },
+    ],
     links: [
         { title: 'gmail', url: 'https://mail.google.com' },
         { title: 'calendar', url: 'https://calendar.google.com' },