feat: increase workspace

main.tsx

@@ -1,10 +1,8 @@
 import { For, This, createBinding } from "ags";
 import app from "ags/gtk4/app";
 import { Bar } from "./widgets/bar";
-import { Launcher } from "./widgets/launcher";
 import { Notifications } from "./widgets/notifications";
 import { ControlCenter } from "./widgets/control-center";
-import { WallpaperManager } from "./widgets/wallpaper-manager";
 
 export const Main = () => {
   const monitors = createBinding(app, "monitors");
@@ -14,10 +12,8 @@ export const Main = () => {
       {(monitor) => (
         <This this={app}>
           <Bar gdkmonitor={monitor} />
-          <Launcher gdkmonitor={monitor} />
           <Notifications gdkmonitor={monitor} />
           <ControlCenter gdkmonitor={monitor} />
-          <WallpaperManager gdkmonitor={monitor} />
         </This>
       )}
     </For>

style/_launcher.scss

@@ -1,40 +0,0 @@
-@use "./_variable.scss" as *;
-
-window.launcher {
-  background: $bg-color;
-  border-radius: $rounded;
-  padding: 10px;
-  font-size: $font-size;
-
-  .search {
-    min-width: 300px;
-    padding: 10px;
-    color: rgba($fg-color, 0.5);
-  }
-
-  separator {
-    border: 1px solid rgba($inactive-color, 0.5);
-  }
-
-  .list {
-    background: $bg-color;
-  }
-
-  .button {
-    border-radius: $rounded;
-    padding: 10px;
-
-    &:hover,
-    &:focus {
-      background: $inactive-color;
-    }
-
-    image {
-      -gtk-icon-size: 1.5rem;
-    }
-  }
-
-  .name {
-    color: $fg-color;
-  }
-}

style/_wallpaper-manager.scss

@@ -1,30 +0,0 @@
-@use "./_variable.scss" as *;
-@use "sass:math";
-@use "sass:list";
-
-window.wallpaper-manager {
-  background: $bg-color;
-  color: $fg-color;
-  min-width: 400px;
-  margin: 10px;
-  padding: 20px;
-  border-radius: $rounded;
-
-  .button {
-    border-radius: $rounded;
-    opacity: 0.5;
-
-    &:hover,
-    &:focus {
-      opacity: 1;
-    }
-  }
-
-  picture {
-    border-radius: $rounded;
-
-    &:hover {
-      background: $inactive-color;
-    }
-  }
-}

style/main.scss

@@ -4,14 +4,8 @@
 // bar
 @use "./_bar.scss";
 
-// launcher
-@use "./_launcher.scss";
-
 // notifications
 @use "./_notification.scss";
 
 // control center
 @use "./_control-center.scss";
-
-// wallpaper manager
-@use "./_wallpaper-manager.scss";

widgets/bar/index.tsx

@@ -9,6 +9,7 @@ import { WorkspaceButton } from "./workspace";
 import { Bluetooth } from "./bluetooth";
 import { Cava } from "./cava";
 import { onCleanup } from "gnim";
+import { execAsync } from "ags/process";
 
 export const WINDOW_NAME = "bar";
 
@@ -29,7 +30,10 @@ export const Bar = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
     >
       <centerbox>
         <box spacing={10} $type="start">
-          <Launcher windowName="launcher" icon="nix-symbolic" />
+          <Launcher
+            icon="nix-symbolic"
+            onClicked={() => execAsync("vicinae toggle")}
+          />
           <Network />
           <Battery />
         </box>
@@ -44,7 +48,10 @@ export const Bar = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
           <Bluetooth />
           <Tray />
           <Time />
-          <Launcher windowName="control-center" icon="fa-ghost-symbolic" />
+          <Launcher
+            icon="fa-ghost-symbolic"
+            onClicked={() => app.toggle_window("control-center")}
+          />
         </box>
       </centerbox>
     </window>

widgets/bar/launcher.tsx

@@ -1,20 +1,15 @@
-import { Gdk } from "ags/gtk4";
+import { Gdk, Gtk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import { WINDOW_NAME as APP_LAUNCHER_WINDOW_NAME } from "../launcher";
-import { WINDOW_NAME as CONTROL_CENTER_WINDOW_NAME } from "../control-center";
 
 type Props = {
   icon: string;
-  windowName:
+  onClicked?: ((source: Gtk.Button) => void) | undefined;
-  | typeof APP_LAUNCHER_WINDOW_NAME
-  | typeof CONTROL_CENTER_WINDOW_NAME;
 };
 
-export const Launcher = ({ icon, windowName }: Props) => {
+export const Launcher = ({ icon, onClicked }: Props) => {
   return (
     <button
       cssClasses={["launcher"]}
-      onClicked={() => app.toggle_window(windowName)}
+      onClicked={onClicked}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
     >
       <image iconName={icon} />

widgets/bar/workspace.tsx

@@ -33,7 +33,7 @@ const Workspace = ({ ws }: WsButtonProps) => {
 };
 
 export const WorkspaceButton = () => {
-  const range = Array.from({ length: 5 + 1 }, (_, i) => i);
+  const range = Array.from({ length: 6 + 1 }, (_, i) => i);
   return (
     <box cssClasses={["workspace-container"]} spacing={4}>
       {range.map((i) => (

widgets/launcher/index.tsx

@@ -1,98 +0,0 @@
-import { createState, For, onCleanup } from "ags";
-import { Astal, Gdk, Gtk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import AstalApps from "gi://AstalApps";
-
-export const WINDOW_NAME = "launcher";
-
-let searchEntry: Gtk.Entry;
-const apps = new AstalApps.Apps();
-const [searchText, setSearchText] = createState("");
-
-const hide = () => {
-  app.get_window(WINDOW_NAME)?.set_visible(false);
-};
-
-const AppButton = ({ app }: { app: AstalApps.Application }) => {
-  return (
-    <button
-      cssClasses={["button"]}
-      onClicked={() => {
-        hide();
-        app.launch();
-      }}
-      cursor={Gdk.Cursor.new_from_name("pointer", null)}
-    >
-      <box spacing={6} halign={Gtk.Align.START} valign={Gtk.Align.CENTER}>
-        <image iconName={app.iconName} iconSize={Gtk.IconSize.LARGE} />
-        <label cssClasses={["name"]} xalign={0} label={app.name} />
-      </box>
-    </button>
-  );
-};
-
-const AppList = () => {
-  const appList = searchText((text) => apps.fuzzy_query(text));
-
-  return (
-    <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={350}>
-      <box
-        spacing={5}
-        orientation={Gtk.Orientation.VERTICAL}
-        cssClasses={["list"]}
-      >
-        <For each={appList}>{(app) => <AppButton app={app} />}</For>
-      </box>
-    </Gtk.ScrolledWindow>
-  );
-};
-
-const AppSearch = () => {
-  return (
-    <entry
-      $={(ref) => (searchEntry = ref)}
-      cssClasses={["search"]}
-      text={searchText}
-      placeholderText="Search..."
-      onNotifyText={({ text }) => setSearchText(text)}
-    />
-  );
-};
-
-export const Launcher = ({ gdkmonitor }: { gdkmonitor: Gdk.Monitor }) => {
-  return (
-    <window
-      name={WINDOW_NAME}
-      cssClasses={["launcher"]}
-      gdkmonitor={gdkmonitor}
-      application={app}
-      exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      keymode={Astal.Keymode.ON_DEMAND}
-      onNotifyVisible={({ visible }) => {
-        if (visible) searchEntry.grab_focus();
-        else searchEntry.set_text("");
-      }}
-      $={(self) => onCleanup(() => self.destroy())}
-    >
-      <Gtk.EventControllerKey onKeyPressed={onKey} />
-
-      <box orientation={Gtk.Orientation.VERTICAL} spacing={5}>
-        <AppSearch />
-        <Gtk.Separator orientation={Gtk.Orientation.HORIZONTAL} />
-        <AppList />
-      </box>
-    </window>
-  );
-};
-
-const onKey = (
-  _e: Gtk.EventControllerKey,
-  keyval: number,
-  _: number,
-  mod: number,
-) => {
-  if (keyval === Gdk.KEY_Escape) {
-    app.toggle_window(WINDOW_NAME);
-    return;
-  }
-};

widgets/wallpaper-manager/index.tsx

@@ -1,100 +0,0 @@
-import { onCleanup } from "ags";
-import { Astal, Gdk, Gtk } from "ags/gtk4";
-import app from "ags/gtk4/app";
-import { exec } from "ags/process";
-import Gio from "gi://Gio";
-import GLib from "gi://GLib";
-
-export const WINDOW_NAME = "wallpaper-manager";
-
-// @TODO wallpaper cache
-const wallpaperPath = `/home/tux/Wallpapers/new`;
-const imageFormats = [".jpeg", ".jpg", ".webp", ".png"];
-
-export const WallpaperManager = ({
-  gdkmonitor,
-}: {
-  gdkmonitor: Gdk.Monitor;
-}) => {
-  const { TOP, BOTTOM, LEFT } = Astal.WindowAnchor;
-  const { VERTICAL } = Gtk.Orientation;
-  const wallpaperList = getWallpaperList(wallpaperPath);
-
-  return (
-    <window
-      name={WINDOW_NAME}
-      cssClasses={["wallpaper-manager"]}
-      gdkmonitor={gdkmonitor}
-      application={app}
-      keymode={Astal.Keymode.ON_DEMAND}
-      anchor={TOP | BOTTOM | LEFT}
-      $={(self) => onCleanup(() => self.destroy())}
-    >
-      <Gtk.EventControllerKey onKeyPressed={onKey} />
-      <scrolledwindow>
-        <box orientation={VERTICAL} spacing={20}>
-          {wallpaperList.map((wall) => (
-            <button
-              cssClasses={["button"]}
-              cursor={Gdk.Cursor.new_from_name("pointer", null)}
-              onClicked={() => setWallpaper(wall)}
-            >
-              <Gtk.Picture
-                file={Gio.file_new_for_path(`${wallpaperPath}/${wall}`)}
-                heightRequest={200}
-                widthRequest={200}
-                hexpand
-                vexpand
-                cssClasses={["wallpaper-picture"]}
-                contentFit={Gtk.ContentFit.COVER}
-              />
-            </button>
-          ))}
-        </box>
-      </scrolledwindow>
-    </window>
-  );
-};
-
-const onKey = (
-  _e: Gtk.EventControllerKey,
-  keyval: number,
-  _: number,
-  mod: number,
-) => {
-  if (keyval === Gdk.KEY_Escape) {
-    app.toggle_window(WINDOW_NAME);
-    return;
-  }
-};
-
-function getWallpaperList(path: string) {
-  const dir = Gio.file_new_for_path(path);
-  const fileEnum = dir.enumerate_children(
-    "standard::name",
-    Gio.FileQueryInfoFlags.NONE,
-    null,
-  );
-
-  const files: string[] = [];
-  let i = fileEnum.next_file(null);
-  while (i) {
-    let fileName = i.get_name();
-    if (imageFormats.some((fmt) => fileName.endsWith(fmt))) {
-      files.push(fileName);
-    }
-    i = fileEnum.next_file(null);
-  }
-  return files;
-}
-
-const setWallpaper = (name: string) => {
-  const hyprctl = GLib.find_program_in_path("hyprctl");
-  const imagePath = `${wallpaperPath}/${name}`;
-
-  if (!hyprctl) return;
-
-  exec([hyprctl, "hyprpaper", "wallpaper", `,${imagePath},`]);
-
-  app.toggle_window(WINDOW_NAME);
-};