bar: add panel style

scss/bar.scss

@@ -3,26 +3,25 @@
 @use "scheme";
 @use "font";
 
+@mixin bar-spacing($vertical: false) {
+    @include lib.spacing(10, $vertical);
+
+    & > * {
+        @include lib.spacing(10, $vertical);
+    }
+}
+
 .bar {
     @include font.mono;
 
     font-size: lib.s(14);
 
-    .module {
-        @include lib.rounded(8);
-
-        background-color: scheme.$base;
-    }
-
     label.icon {
         font-size: lib.s(18);
     }
 
     .os-icon {
-        @include lib.border(scheme.$yellow);
-
         color: scheme.$yellow;
-        font-size: lib.s(14);
     }
 
     .active-window {
@@ -88,24 +87,26 @@
     }
 
     .power {
-        @include lib.border(scheme.$red);
         @include lib.element-decel;
         @include font.icon;
 
         color: scheme.$red;
         font-weight: bold;
         font-size: lib.s(16);
+
+        &:hover,
+        &:focus {
+            color: color.change(scheme.$red, $alpha: 0.8);
+        }
+
+        &:active {
+            color: color.change(scheme.$red, $alpha: 0.6);
+        }
     }
 
     &.horizontal {
         margin: 10px 10px 0 10px;
 
-        @include lib.spacing(10);
-
-        & > * {
-            @include lib.spacing(10);
-        }
-
         .module {
             padding: lib.s(5) lib.s(10);
 
@@ -147,12 +148,6 @@
     &.vertical {
         margin: 10px 0 10px 10px;
 
-        @include lib.spacing(10, true);
-
-        & > * {
-            @include lib.spacing(10, true);
-        }
-
         .module {
             padding: lib.s(8);
 
@@ -185,4 +180,51 @@
             @include lib.spacing(10, true);
         }
     }
+
+    &.gaps {
+        .module {
+            @include lib.rounded(8);
+
+            background-color: scheme.$base;
+        }
+
+        .os-icon {
+            @include lib.border(scheme.$yellow);
+        }
+
+        .power {
+            @include lib.border(scheme.$red);
+        }
+
+        &.horizontal {
+            @include bar-spacing;
+        }
+
+        &.vertical {
+            @include bar-spacing(true);
+        }
+    }
+
+    &.panel {
+        @include lib.rounded(20);
+        @include lib.border(scheme.$primary, 0.5, 2);
+
+        background-color: scheme.$mantle;
+
+        .os-icon {
+            font-size: lib.s(16);
+        }
+
+        &.horizontal {
+            padding: lib.s(5) lib.s(10);
+        }
+
+        &.vertical {
+            padding: lib.s(10) lib.s(5);
+
+            .os-icon > * {
+                margin-left: lib.s(-7);
+            }
+        }
+    }
 }

src/config/defaults.ts

@@ -8,6 +8,7 @@ export default {
     // Modules
     bar: {
         vertical: true,
+        style: "gaps",
         modules: {
             osIcon: {
                 enabled: true,

src/config/types.ts

@@ -9,6 +9,7 @@ export default {
     "style.vibrant": BOOL,
     // Bar
     "bar.vertical": BOOL,
+    "bar.style": ["gaps", "panel", "embedded"],
     "bar.modules.osIcon.enabled": BOOL,
     "bar.modules.activeWindow.enabled": BOOL,
     "bar.modules.mediaPlaying.enabled": BOOL,

src/modules/bar.tsx

@@ -554,59 +554,63 @@ const bindWidget = (module: keyof typeof config.modules, Widget: () => JSX.Eleme
 const bindCompositeWidget = (module: keyof typeof config.modules, binding: Binding<JSX.Element>) =>
     bind(Variable.derive([config.modules[module].enabled, binding], (e, w) => (e ? w : <Dummy />)));
 
-export default ({ monitor }: { monitor: Monitor }) => (
+export default ({ monitor }: { monitor: Monitor }) => {
-    <window
+    const className = Variable.derive(
-        namespace="caelestia-bar"
+        [bind(config.vertical), bind(config.style)],
-        monitor={monitor.id}
+        (v, s) => `bar ${v ? "vertical" : " horizontal"} ${s}`
-        anchor={bind(config.vertical).as(
+    );
-            v =>
+
-                Astal.WindowAnchor.TOP |
+    return (
-                Astal.WindowAnchor.LEFT |
+        <window
-                (v ? Astal.WindowAnchor.BOTTOM : Astal.WindowAnchor.RIGHT)
+            namespace="caelestia-bar"
-        )}
+            monitor={monitor.id}
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+            anchor={bind(config.vertical).as(
-    >
+                v =>
-        <centerbox
+                    Astal.WindowAnchor.TOP |
-            vertical={bind(config.vertical)}
+                    Astal.WindowAnchor.LEFT |
-            className={bind(config.vertical).as(v => `bar ${v ? "vertical" : " horizontal"}`)}
+                    (v ? Astal.WindowAnchor.BOTTOM : Astal.WindowAnchor.RIGHT)
+            )}
+            exclusivity={Astal.Exclusivity.EXCLUSIVE}
         >
-            <box vertical={bind(config.vertical)}>
+            <centerbox vertical={bind(config.vertical)} className={bind(className)} onDestroy={() => className.drop()}>
-                {bindWidget("osIcon", OSIcon)}
+                <box vertical={bind(config.vertical)}>
-                {bindWidget("activeWindow", ActiveWindow)}
+                    {bindWidget("osIcon", OSIcon)}
-                {bindWidget("mediaPlaying", MediaPlaying)}
+                    {bindWidget("activeWindow", ActiveWindow)}
-                <button
+                    {bindWidget("mediaPlaying", MediaPlaying)}
-                    expand
+                    <button
-                    onScroll={(_, event) =>
+                        expand
-                        event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
+                        onScroll={(_, event) =>
-                    }
+                            event.delta_y > 0 ? (monitor.brightness -= 0.1) : (monitor.brightness += 0.1)
-                />
+                        }
-            </box>
+                    />
-            {bindWidget("workspaces", Workspaces)}
+                </box>
-            <box vertical={bind(config.vertical)}>
+                {bindWidget("workspaces", Workspaces)}
-                <button
+                <box vertical={bind(config.vertical)}>
-                    expand
+                    <button
-                    onScroll={(_, event) => {
+                        expand
-                        const speaker = AstalWp.get_default()?.audio.defaultSpeaker;
+                        onScroll={(_, event) => {
-                        if (!speaker) return;
+                            const speaker = AstalWp.get_default()?.audio.defaultSpeaker;
-                        speaker.mute = false;
+                            if (!speaker) return;
-                        if (event.delta_y > 0) speaker.volume -= 0.1;
+                            speaker.mute = false;
-                        else speaker.volume += 0.1;
+                            if (event.delta_y > 0) speaker.volume -= 0.1;
-                    }}
+                            else speaker.volume += 0.1;
-                />
+                        }}
-                {bindWidget("tray", Tray)}
+                    />
-                {bindWidget("statusIcons", StatusIcons)}
+                    {bindWidget("tray", Tray)}
-                {bindWidget("pkgUpdates", PkgUpdates)}
+                    {bindWidget("statusIcons", StatusIcons)}
-                {bindWidget("notifCount", NotifCount)}
+                    {bindWidget("pkgUpdates", PkgUpdates)}
-                {bindCompositeWidget(
+                    {bindWidget("notifCount", NotifCount)}
-                    "battery",
+                    {bindCompositeWidget(
-                    bind(AstalBattery.get_default(), "isBattery").as(b => (b ? <Battery /> : <Dummy />))
+                        "battery",
-                )}
+                        bind(AstalBattery.get_default(), "isBattery").as(b => (b ? <Battery /> : <Dummy />))
-                {bindCompositeWidget(
+                    )}
-                    "dateTime",
+                    {bindCompositeWidget(
-                    bind(config.vertical).as(v => (v ? <DateTimeVertical /> : <DateTime />))
+                        "dateTime",
-                )}
+                        bind(config.vertical).as(v => (v ? <DateTimeVertical /> : <DateTime />))
-                {bindWidget("power", Power)}
+                    )}
-            </box>
+                    {bindWidget("power", Power)}
-        </centerbox>
+                </box>
-    </window>
+            </centerbox>
-);
+        </window>
+    );
+};