feat: cloudflare warp custom modules

Author: myamusashi

src/components/bar/exports.ts

@@ -23,6 +23,7 @@ import { Weather } from '../../components/bar/modules/weather/index';
 import { Power } from '../../components/bar/modules/power/index';
 import { Hyprsunset } from '../../components/bar/modules/hyprsunset/index';
 import { Hypridle } from '../../components/bar/modules/hypridle/index';
+import { Warp } from '../../components/bar/modules/warp/index';
 
 export {
     Menu,
@@ -50,4 +51,5 @@ export {
     Power,
     Hyprsunset,
     Hypridle,
+    Warp,
 };

src/components/bar/index.tsx

@@ -24,6 +24,7 @@ import {
     Power,
     Hyprsunset,
     Hypridle,
+    Warp
 } from './exports';
 
 import { WidgetContainer } from './shared/WidgetContainer';
@@ -62,6 +63,7 @@ const widget = {
     power: (): JSX.Element => WidgetContainer(Power()),
     hyprsunset: (): JSX.Element => WidgetContainer(Hyprsunset()),
     hypridle: (): JSX.Element => WidgetContainer(Hypridle()),
+    warp: (): JSX.Element => WidgetContainer(Warp()),
 };
 
 export const Bar = (() => {

src/components/bar/modules/warp/helpers/index.ts

@@ -0,0 +1,17 @@
+import { execAsync, Variable } from "astal";
+
+export const isWarpConnectCommand = `bash -c "warp-cli status | awk {'print $3'}"`
+export const isWarpDisconnectCommand = `bash -c "warp-cli status | head -1 | awk {'print $3'}"`
+
+export const isWarpConnect = Variable(false);
+
+export const toggleWarp = async (isWarpConnect: Variable<boolean>): Promise<void> => {
+    try {
+        await execAsync(`bash -c "warp-cli ${isWarpConnect.get() ? 'disconnect' : 'connect'}"`);
+        
+        const res = await execAsync(isWarpConnect.get() ? isWarpConnectCommand : isWarpDisconnectCommand);
+        isWarpConnect.set(isWarpConnect.get() ? res === 'Disconnected' : res === 'Connected');
+    } catch (err) {
+        await execAsync(`bash -c "notify-send -a 'hyprpanel' 'Warp service not active!' 'Error: ${err}'"`);
+    }
+};

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

@@ -0,0 +1,73 @@
+import options from "src/options";
+import { Module } from "../../shared/Module";
+import { inputHandler, throttleInput } from "../../utils/helpers";
+import { BarBoxChild } from "src/lib/types/bar";
+import { isWarpConnect, toggleWarp } from "./helpers";
+import { bind, Variable } from "astal";
+import { Astal } from "astal/gtk3";
+
+const {
+    label,
+    onIcon,
+    offIcon,
+    onLabel,
+    offLabel,
+    rightClick,
+    middleClick,
+    scrollUp,
+    scrollDown,
+} = options.bar.customModules.warp;
+
+const thorttledToggleWarp = throttleInput(() => toggleWarp(isWarpConnect), 1000);
+
+export const Warp = (): BarBoxChild => {
+    const iconBinding = Variable.derive([bind(isWarpConnect), bind(onIcon), bind(offIcon)], (active, onIcn, offIcn) => {
+        return active ? onIcn : offIcn;
+    })
+
+    const tooltipBinding = Variable.derive([isWarpConnect], (active) => {
+        return active ? 'Connect' : "Disconnect";
+    });
+
+    const labelBinding = Variable.derive([bind(isWarpConnect), bind(onLabel), bind(offLabel)], (active, onLbl, offLbl) => {
+        return active ? onLbl : offLbl;
+    });
+
+    const warpModule = Module({
+        textIcon: iconBinding(),
+        tooltipText: tooltipBinding(),
+        boxClass: 'warp',
+        label: labelBinding(),
+        showLabelBinding: bind(label),
+        props: {
+            setup: (self: Astal.Button) => {
+                inputHandler(self, {
+                    onPrimaryClick: {
+                        fn: () => {
+                            thorttledToggleWarp();
+                        },
+                    },
+                    onSecondaryClick: {
+                        cmd: rightClick,
+                    },
+                    onMiddleClick: {
+                        cmd: middleClick,
+                    },
+                    onScrollUp: {
+                        cmd: scrollUp,
+                    },
+                    onScrollDown: {
+                        cmd: scrollDown,
+                    },
+                });
+            },
+            onDestroy: () => {
+                iconBinding.drop();
+                tooltipBinding.drop();
+                labelBinding.drop();
+            },
+        },
+    });
+
+    return warpModule;
+};

src/lib/types/options.d.ts

@@ -47,7 +47,8 @@ export type BarModule =
     | 'power'
     | 'systray'
     | 'hypridle'
-    | 'hyprsunset';
+    | 'hyprsunset'
+      'warp';
 
 export type BarLayout = {
     left: BarModule[];

src/options.ts

@@ -395,6 +395,15 @@ const options = mkOptions(CONFIG, {
                         icon_background: opt(colors.base2),
                         spacing: opt('0.45em'),
                     },
+                    warp: {
+                        enableBorder: opt(false),
+                        border: opt(colors.yellow),
+                        background: opt(colors.base2),
+                        text: opt(colors.yellow),
+                        icon: opt(colors.yellow),
+                        icon_background: opt(colors.base2),
+                        spacing: opt('0.45em'),
+                    }
                 },
             },
             menus: {
@@ -1142,6 +1151,17 @@ const options = mkOptions(CONFIG, {
                 scrollUp: opt(''),
                 scrollDown: opt(''),
             },
+            warp: {
+                label: opt(true),
+                onIcon: opt(''),
+                offIcon: opt('󰇖'),
+                onLabel: opt('On'),
+                offLabel: opt('Off'),
+                rightClick: opt(''),
+                middleClick: opt(''),
+                scrollUp: opt(''),
+                scrollDown: opt(''),
+            },
         },
     },
 

src/scss/style/bar/style.scss

@@ -448,3 +448,25 @@
     // custom font size
     1.075em //
 );
+
+@include styleModule(
+    //
+    // class name
+    'warp',
+    // label color
+    $bar-buttons-modules-warp-text,
+    // icon color
+    $bar-buttons-modules-warp-icon,
+    // icon background if split style is used
+    $bar-buttons-modules-warp-icon_background,
+    // label background
+    $bar-buttons-modules-warp-background,
+    // inner spacing
+    $bar-buttons-modules-warp-spacing,
+    // if border enabled
+    $bar-buttons-modules-warp-enableBorder,
+    // border color
+    $bar-buttons-modules-warp-border,
+    // custom font size
+    1.075em //
+);