feat: add option to enable volume slider by default

Author: blaiyz

src/components/NowPlaying.svelte

@@ -105,7 +105,11 @@
           </span>
         </SmoothDiv>
       </button>
-      <SmoothDiv height={false} outerClass="flex justify-end" innerClass="flex justify-end">
+      <SmoothDiv
+        height={false}
+        outerClass="flex justify-end"
+        innerClass="flex justify-end"
+      >
         {#if !toggleModes.clickThrough}
           <button
             class="transition h-full hover:text-zb-accent hover:scale-125 relative flex items-center justify-end"

src/components/SmoothDiv.svelte

@@ -49,11 +49,17 @@
       {@render children()}
     </div>
   {:else if width}
-    <div class="w-fit h-full {innerClass}" bind:clientWidth={widthSpring.target}>
+    <div
+      class="w-fit h-full {innerClass}"
+      bind:clientWidth={widthSpring.target}
+    >
       {@render children()}
     </div>
   {:else if height}
-    <div class="h-fit w-full {innerClass}" bind:clientHeight={heightSpring.target}>
+    <div
+      class="h-fit w-full {innerClass}"
+      bind:clientHeight={heightSpring.target}
+    >
       {@render children()}
     </div>
   {/if}

src/components/VolumeControl/VolumeControl.svelte

@@ -11,7 +11,8 @@
   import "./VolumeControl.css";
   import { toggleModes } from "$lib/binding_modes.svelte";
   import { fly } from "svelte/transition";
-  import { config } from "$lib/config.svelte";
+  import { config, configLoaded } from "$lib/config.svelte";
+  import { onMount } from "svelte";
 
   let audio = $derived(providers.audio);
   let device = $derived(audio?.defaultPlaybackDevice);
@@ -28,6 +29,13 @@
     newVolume = Math.max(0, Math.min(100, newVolume));
     audio?.setVolume(newVolume);
   };
+
+  onMount(async () => {
+    await configLoaded;
+    if (config.enableVolumeSlider) {
+      sliderOpen = true;
+    }
+  });
 </script>
 
 {#if device}

src/components/Workspaces.svelte

@@ -65,7 +65,7 @@
           <Button
             class="h-[2rem] box-border text-zb-ws-{globalIndex} {workspace.isDisplayed
               ? `border-zb-ws-${globalIndex} hover:border-blend-70 active:!border-blend-50`
-              : ''} {toggleModes.clickThrough 
+              : ''} {toggleModes.clickThrough
               ? 'aspect-square'
               : 'min-w-14 px-2'}"
             callback={() =>

src/lib/config.svelte.ts

@@ -81,6 +81,11 @@ export interface Config {
    */
   clickThroughByDefault: boolean;
 
+  /**
+   * Enable volume slider by default.
+   */
+  enableVolumeSlider: boolean;
+
   // Individual section toggles
 
   showHeartButton: boolean;

static/config.json

@@ -22,8 +22,9 @@
   },
   "backgroundEffect": "inherit",
   "enableAutoTiling": true,
-  "clickThroughByDefault": false,
   "showFullDateByDefault": false,
+  "clickThroughByDefault": false,
+  "enableVolumeSlider": false,
   "showHeartButton": true,
   "showCpuSection": true,
   "showMemorySection": true,

static/schema.json

@@ -89,6 +89,10 @@
       "description": "Whether to enable built-in automatic tiling of windows.",
       "type": "boolean"
     },
+    "enableVolumeSlider": {
+      "description": "Enable volume slider by default.",
+      "type": "boolean"
+    },
     "gradient": {
       "$ref": "#/definitions/GradientDirection",
       "description": "The direction of the background gradient.\n\n`top`- From top to transparent bottom.\n\n`bottom`- From bottom to transparent top.\n\n`solid`- Solid color background.\n\n`disabled`- Background color is disabled."

static/zpack.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://github.com/glzr-io/zebar/raw/v3.1.1/resources/zpack-schema.json",
   "name": "neosoft-zebar",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "A highly customizable (and smooooooth) Zebar build",
   "tags": [
     "glazewm",