widget toggles

Author: refact0r

src/App.svelte

@@ -70,15 +70,29 @@
 
 <main>
     <div class="container">
-        <div class="top">
-            <Clock />
-            <Stats />
-        </div>
-        <div class="widgets">
-            <Weather />
-            <Tasks />
-        </div>
-        <Links />
+        {#if settings.showClock || settings.showStats}
+            <div class="top">
+                {#if settings.showClock}
+                    <Clock />
+                {/if}
+                {#if settings.showStats}
+                    <Stats class={!settings.showClock ? 'expand' : ''} />
+                {/if}
+            </div>
+        {/if}
+        {#if settings.showWeather || settings.showTasks}
+            <div class="widgets">
+                {#if settings.showWeather}
+                    <Weather class={!settings.showTasks ? 'expand' : ''} />
+                {/if}
+                {#if settings.showTasks}
+                    <Tasks />
+                {/if}
+            </div>
+        {/if}
+        {#if settings.showLinks}
+            <Links />
+        {/if}
     </div>
 
     <button

src/lib/components/Checkbox.svelte

@@ -0,0 +1,40 @@
+<script>
+    let { checked = $bindable(false), children } = $props()
+</script>
+
+<label>
+    <input type="checkbox" bind:checked />
+    <span class="checkbox-indicator">
+        {#if checked}
+            [<span class="checkbox-x">x</span>]
+        {:else}
+            [ ]
+        {/if}
+    </span>
+    <span class="checkbox-content">
+        {@render children?.()}
+    </span>
+</label>
+
+<style>
+    label {
+        display: block;
+        cursor: pointer;
+    }
+
+    label input[type='checkbox'] {
+        display: none;
+    }
+
+    .checkbox-indicator {
+        color: var(--txt-3);
+    }
+
+    .checkbox-x {
+        color: var(--txt-2);
+    }
+
+    label:hover .checkbox-indicator {
+        color: var(--txt-2);
+    }
+</style>

src/lib/components/Links.svelte

@@ -39,6 +39,7 @@
 <style>
     .panel {
         display: flex;
+        gap: 1.5rem;
     }
     .link:hover span {
         color: var(--txt-2);
@@ -47,6 +48,6 @@
         color: var(--txt-3);
     }
     .column {
-        width: 100%;
+        flex-grow: 1;
     }
 </style>

src/lib/components/Settings.svelte

@@ -7,6 +7,7 @@
     } from '../settings-store.svelte.js'
     import { themeNames, themes } from '../themes.js'
     import RadioButton from './RadioButton.svelte'
+    import Checkbox from './Checkbox.svelte'
     import { createTaskBackend } from '../backends/index.js'
     import { isChrome } from '../browser-detect.js'
 
@@ -202,6 +203,18 @@
         </div>
 
         <div class="content">
+            <div class="group">
+                <div class="setting-label">widgets</div>
+                <div class="checkbox-group">
+                    <Checkbox bind:checked={settings.showClock}>clock</Checkbox>
+                    <Checkbox bind:checked={settings.showStats}>stats</Checkbox>
+                    <Checkbox bind:checked={settings.showWeather}>
+                        weather
+                    </Checkbox>
+                    <Checkbox bind:checked={settings.showTasks}>tasks</Checkbox>
+                    <Checkbox bind:checked={settings.showLinks}>links</Checkbox>
+                </div>
+            </div>
             <div class="group">
                 <div class="setting-label">theme</div>
                 <div class="theme-grid">
@@ -671,7 +684,8 @@
         font-size: 0.9rem;
         flex: 1;
     }
-    .radio-group {
+    .radio-group,
+    .checkbox-group {
         display: flex;
         gap: 3ch;
     }

src/lib/components/Stats.svelte

@@ -1,6 +1,8 @@
 <script>
     import { onMount, onDestroy } from 'svelte'
 
+    let { class: className = '' } = $props()
+
     let loadTime = $state(0)
     let latency = $state(null)
     let viewportWidth = $state(0)
@@ -91,7 +93,7 @@
     })
 </script>
 
-<div class="panel-wrapper">
+<div class="panel-wrapper {className}">
     <div class="panel-label">stats</div>
     <div class="panel">
         <div>load <span class="bright">{loadTime} ms</span></div>
@@ -105,4 +107,7 @@
 </div>
 
 <style>
+    .panel-wrapper.expand {
+        flex-grow: 1;
+    }
 </style>

src/lib/components/Weather.svelte

@@ -3,6 +3,8 @@
     import WeatherAPI from '../weather-api.js'
     import { settings } from '../settings-store.svelte.js'
 
+    let { class: className = '' } = $props()
+
     let current = $state(null)
     let forecast = $state([])
     let loading = $state(false)
@@ -135,7 +137,7 @@
     })
 </script>
 
-<div class="panel-wrapper">
+<div class="panel-wrapper {className}">
     <button class="widget-label" onclick={refreshWeather} disabled={loading}>
         {loading ? 'loading...' : 'weather'}
     </button>
@@ -203,6 +205,9 @@
     .panel-wrapper {
         flex-shrink: 0;
     }
+    .panel-wrapper.expand {
+        flex-grow: 1;
+    }
     .temp {
         font-size: 2rem;
         font-weight: 300;

src/lib/settings-store.svelte.js

@@ -33,6 +33,11 @@ let defaultSettings = {
         { title: 'feedly', url: 'https://feedly.com' },
     ],
     customCSS: '',
+    showClock: true,
+    showStats: true,
+    showWeather: true,
+    showTasks: true,
+    showLinks: true,
 }
 
 function loadSettings() {