settings reset, tab title

Author: refact0r

src/App.svelte

@@ -36,6 +36,10 @@
         applyTheme(settings.currentTheme)
     })
 
+    $effect(() => {
+        document.title = settings.tabTitle || '~'
+    })
+
     $effect(() => {
         saveSettings(settings)
     })

src/lib/components/Settings.svelte

@@ -1,6 +1,10 @@
 <script>
     import { fade, fly } from 'svelte/transition'
-    import { saveSettings, settings } from '../settings-store.svelte.js'
+    import {
+        saveSettings,
+        settings,
+        resetSettings,
+    } from '../settings-store.svelte.js'
     import { themeNames, themes } from '../themes.js'
     import RadioButton from './RadioButton.svelte'
 
@@ -27,6 +31,15 @@
             handleClose()
         }
     }
+
+    function handleReset() {
+        if (
+            confirm('are you sure you want to reset all settings to default?')
+        ) {
+            resetSettings()
+            saveSettings(settings)
+        }
+    }
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -88,7 +101,17 @@
                     id="font"
                     type="text"
                     bind:value={settings.font}
-                    placeholder="e.g., Geist Mono Variable, Monaco, Courier New"
+                    placeholder="Geist Mono Variable"
+                />
+            </div>
+
+            <div class="group">
+                <label for="tab-title">tab title</label>
+                <input
+                    id="tab-title"
+                    type="text"
+                    bind:value={settings.tabTitle}
+                    placeholder="~"
                 />
             </div>
 
@@ -209,13 +232,16 @@
                 </div>
             </div>
             <div class="version">
-                re-start
-                {#if version}v{version}
-                {/if} • made with ❤️ by
+                <a href="https://github.com/refact0r/re-start" target="_blank">
+                    re-start
+                    {#if version}v{version}
+                    {/if}</a
+                >
+                • made with ❤️ by
                 <a href="https://refact0r.dev" target="_blank">refact0r</a>
                 •
-                <a href="https://github.com/refact0r/re-start" target="_blank"
-                    >github</a
+                <button class="reset-link" onclick={handleReset}
+                    >reset settings</button
                 >
             </div>
         </div>
@@ -306,6 +332,14 @@
     }
     .version {
         color: var(--txt-3);
+
+        a {
+            text-decoration: underline;
+        }
+
+        a:hover {
+            color: var(--txt-2);
+        }
     }
     .theme-grid {
         display: grid;
@@ -330,4 +364,17 @@
         display: flex;
         gap: 3ch;
     }
+    .reset-link {
+        background: none;
+        border: none;
+        color: var(--txt-3);
+        cursor: pointer;
+        padding: 0;
+        font-size: inherit;
+        font-family: inherit;
+        text-decoration: underline;
+    }
+    .reset-link:hover {
+        color: var(--txt-2);
+    }
 </style>

src/lib/settings-store.svelte.js

@@ -2,6 +2,7 @@ let defaultSettings = {
     timeFormat: '12hr',
     font: 'Geist Mono Variable',
     currentTheme: 'default',
+    tabTitle: '~',
     todoistApiToken: '',
     latitude: null,
     longitude: null,
@@ -51,4 +52,17 @@ export function saveSettings(settings) {
     }
 }
 
+export function resetSettings() {
+    try {
+        localStorage.removeItem('settings')
+        // Reset the settings object to default
+        const newSettings = loadSettings()
+        Object.assign(settings, newSettings)
+        return true
+    } catch (error) {
+        console.error('failed to reset settings:', error)
+        return false
+    }
+}
+
 export const settings = $state(loadSettings())