tux/tpanel
1
0
Fork 0
mirror of https://github.com/tuxdotrs/tpanel.git synced 2026-03-22 01:16:32 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: remove launcher and wallpaper manager

Browse Source
This commit is contained in:
tux
2026-02-17 17:50:13 +05:30
parent 69b93ca32f
commit 00e8ee6d8b
8 changed files with 13 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
main.tsx
View File

@@ -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>

40
style/_launcher.scss
View File

@@ -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;
}
}

30
style/_wallpaper-manager.scss
View File

@@ -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;
}
}
}

6
style/main.scss
View File

@@ -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";

11
widgets/bar/index.tsx
View File

@@ -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>

13
widgets/bar/launcher.tsx
View File

@@ -1,20 +1,15 @@
import { Gdk } 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";
import { Gdk, Gtk } from "ags/gtk4";
type Props = {
icon: string;
windowName:
| typeof APP_LAUNCHER_WINDOW_NAME
| typeof CONTROL_CENTER_WINDOW_NAME;
onClicked?: ((source: Gtk.Button) => void) | undefined;
};
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} />

98
widgets/launcher/index.tsx
View File

@@ -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;
}
};

100
widgets/wallpaper-manager/index.tsx
View File

@@ -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);
};