Feat: Added a separators module for the bar. (#889)

src/components/bar/exports.ts

@@ -27,6 +27,8 @@ import { Hypridle } from '../../components/bar/modules/hypridle/index';
 import { Cava } from '../../components/bar/modules/cava/index';
 import { WorldClock } from '../../components/bar/modules/worldclock/index';
 
+import { ModuleSeparator } from './modules/separator';
+
 export {
     Menu,
     Workspaces,
@@ -56,4 +58,5 @@ export {
     Hypridle,
     Cava,
     WorldClock,
+    ModuleSeparator,
 };

src/components/bar/index.tsx

@@ -25,6 +25,7 @@ import {
     Hypridle,
     Cava,
     WorldClock,
+    ModuleSeparator,
 } from './exports';
 
 import { WidgetContainer } from './shared/WidgetContainer';
@@ -42,32 +43,33 @@ const { location } = options.theme.bar;
 const { location: borderLocation } = options.theme.bar.border;
 
 let widgets: WidgetMap = {
-    battery: (): JSX.Element => WidgetContainer(BatteryLabel()),
+    battery: () => WidgetContainer(BatteryLabel()),
-    dashboard: (): JSX.Element => WidgetContainer(Menu()),
+    dashboard: () => WidgetContainer(Menu()),
-    workspaces: (monitor: number): JSX.Element => WidgetContainer(Workspaces(monitor)),
+    workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor)),
-    windowtitle: (): JSX.Element => WidgetContainer(ClientTitle()),
+    windowtitle: () => WidgetContainer(ClientTitle()),
-    media: (): JSX.Element => WidgetContainer(Media()),
+    media: () => WidgetContainer(Media()),
-    notifications: (): JSX.Element => WidgetContainer(Notifications()),
+    notifications: () => WidgetContainer(Notifications()),
-    volume: (): JSX.Element => WidgetContainer(Volume()),
+    volume: () => WidgetContainer(Volume()),
-    network: (): JSX.Element => WidgetContainer(Network()),
+    network: () => WidgetContainer(Network()),
-    bluetooth: (): JSX.Element => WidgetContainer(Bluetooth()),
+    bluetooth: () => WidgetContainer(Bluetooth()),
-    clock: (): JSX.Element => WidgetContainer(Clock()),
+    clock: () => WidgetContainer(Clock()),
-    systray: (): JSX.Element => WidgetContainer(SysTray()),
+    systray: () => WidgetContainer(SysTray()),
-    microphone: (): JSX.Element => WidgetContainer(Microphone()),
+    microphone: () => WidgetContainer(Microphone()),
-    ram: (): JSX.Element => WidgetContainer(Ram()),
+    ram: () => WidgetContainer(Ram()),
-    cpu: (): JSX.Element => WidgetContainer(Cpu()),
+    cpu: () => WidgetContainer(Cpu()),
-    cputemp: (): JSX.Element => WidgetContainer(CpuTemp()),
+    cputemp: () => WidgetContainer(CpuTemp()),
-    storage: (): JSX.Element => WidgetContainer(Storage()),
+    storage: () => WidgetContainer(Storage()),
-    netstat: (): JSX.Element => WidgetContainer(Netstat()),
+    netstat: () => WidgetContainer(Netstat()),
-    kbinput: (): JSX.Element => WidgetContainer(KbInput()),
+    kbinput: () => WidgetContainer(KbInput()),
-    updates: (): JSX.Element => WidgetContainer(Updates()),
+    updates: () => WidgetContainer(Updates()),
-    submap: (): JSX.Element => WidgetContainer(Submap()),
+    submap: () => WidgetContainer(Submap()),
-    weather: (): JSX.Element => WidgetContainer(Weather()),
+    weather: () => WidgetContainer(Weather()),
-    power: (): JSX.Element => WidgetContainer(Power()),
+    power: () => WidgetContainer(Power()),
-    hyprsunset: (): JSX.Element => WidgetContainer(Hyprsunset()),
+    hyprsunset: () => WidgetContainer(Hyprsunset()),
-    hypridle: (): JSX.Element => WidgetContainer(Hypridle()),
+    hypridle: () => WidgetContainer(Hypridle()),
-    cava: (): JSX.Element => WidgetContainer(Cava()),
+    cava: () => WidgetContainer(Cava()),
-    worldclock: (): JSX.Element => WidgetContainer(WorldClock()),
+    worldclock: () => WidgetContainer(WorldClock()),
+    separator: () => ModuleSeparator(),
 };
 
 const gdkMonitorMapper = new GdkMonitorMapper();

src/components/bar/modules/separator/index.tsx

@@ -0,0 +1,5 @@
+import Separator from 'src/components/shared/Separator';
+
+export const ModuleSeparator = (): JSX.Element => {
+    return <Separator className={'bar-module-separator'} />;
+};

src/components/settings/pages/config/bar/index.tsx

@@ -140,6 +140,11 @@ export const BarSettings = (): JSX.Element => {
                     type="number"
                 />
 
+                {/* Separator Section */}
+                <Header title="Separator" />
+                <Option opt={options.theme.bar.buttons.separator.margins} title="Margins" type="string" />
+                <Option opt={options.theme.bar.buttons.separator.width} title="Width" type="string" />
+
                 {/* Dashboard Section */}
                 <Header title="Dashboard" />
                 <Option opt={options.bar.launcher.icon} title="Dashboard Menu Icon" type="string" />

src/components/settings/pages/theme/bar/index.tsx

@@ -35,7 +35,7 @@ export const BarTheme = (): JSX.Element => {
                 <Option opt={options.theme.bar.border.color} title="Bar Border Color" type="color" />
                 <Option
                     opt={options.theme.bar.buttons.opacity}
-                    title="Button Opacity"
+                    title="Module Opacity"
                     type="number"
                     increment={5}
                     min={0}
@@ -77,6 +77,10 @@ export const BarTheme = (): JSX.Element => {
                     type="color"
                 />
 
+                {/* Separator Section */}
+                <Header title="Separator" />
+                <Option opt={options.theme.bar.buttons.separator.color} title="Color" type="color" />
+
                 {/* Dashboard Button Section */}
                 <Header title="Dashboard Button" />
                 <Option opt={options.theme.bar.buttons.dashboard.background} title="Background" type="color" />

src/options.ts

@@ -309,6 +309,11 @@ const options = mkOptions({
                     total: opt(colors.lavender),
                     spacing: opt('0.5em'),
                 },
+                separator: {
+                    color: opt(colors.surface2),
+                    margins: opt('0.15em'),
+                    width: opt('0.1em'),
+                },
                 modules: {
                     microphone: {
                         enableBorder: opt(false),

src/scss/main.scss

@@ -53,3 +53,6 @@
 
 //settings dialog
 @import 'style/settings/dialog';
+
+//bar separator
+@import 'style/bar/module-separator';

src/scss/style/bar/module-separator.scss

@@ -0,0 +1,6 @@
+.bar-module-separator {
+    background-color: $bar-buttons-separator-color;
+    opacity: $bar-buttons-opacity * 0.01;
+    margin: $bar-buttons-separator-margins;
+    min-width: $bar-buttons-separator-width;
+}