diff --git a/assets/icons/hicolor/scalable/devices/fa-screenshot-symbolic.svg b/assets/icons/hicolor/scalable/devices/fa-screenshot-symbolic.svg
new file mode 100644
index 0000000..f24dd8b
--- /dev/null
+++ b/assets/icons/hicolor/scalable/devices/fa-screenshot-symbolic.svg
@@ -0,0 +1 @@
+
diff --git a/style/_control-center.scss b/style/_control-center.scss
index 7d59d66..63ca0d5 100644
--- a/style/_control-center.scss
+++ b/style/_control-center.scss
@@ -22,15 +22,26 @@ window.control-center {
}
}
+ .system-info {
+ image {
+ -gtk-icon-size: 4rem;
+ }
+ }
+
.header {
.controls {
button {
background-color: $inactive-color;
border-radius: calc($rounded / 1.5);
- padding: 20px;
+ padding: 10px;
+ transition: color 100ms;
&:hover {
- background-color: $bg-color;
+ background-color: rgba($accent, 1);
+
+ image {
+ color: $bg-color;
+ }
}
}
@@ -56,7 +67,7 @@ window.control-center {
}
highlight {
- background-color: $fg-color;
+ background-color: $accent;
min-height: 10px;
min-width: 10px;
border-radius: 10px;
diff --git a/style/_variable.scss b/style/_variable.scss
index f90146e..67eb1c0 100644
--- a/style/_variable.scss
+++ b/style/_variable.scss
@@ -2,5 +2,5 @@ $accent: #54cdb3;
$fg-color: #fff;
$bg-color: #0e0e0e;
$inactive-color: #252525;
-$rounded: 8px;
+$rounded: 14px;
$font-size: 1rem;
diff --git a/widgets/bar/cpu.tsx b/widgets/bar/cpu.tsx
deleted file mode 100644
index e633954..0000000
--- a/widgets/bar/cpu.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createPoll } from "ags/time";
-
-export const CPU = () => {
- const cpu = createPoll("", 5000, [
- "bash",
- "-c",
- "cat /sys/class/thermal/thermal_zone*/temp",
- ]);
-
- return (
-
-
-
- );
-};
diff --git a/widgets/bar/gpu.tsx b/widgets/bar/gpu.tsx
deleted file mode 100644
index f49e8be..0000000
--- a/widgets/bar/gpu.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createPoll } from "ags/time";
-
-export const GPU = () => {
- const gpu = createPoll("", 5000, ["bash", "-c", "supergfxctl -g"]);
-
- return (
-
-
-
- );
-};
diff --git a/widgets/bar/index.tsx b/widgets/bar/index.tsx
index 6688d6b..cdc70c8 100644
--- a/widgets/bar/index.tsx
+++ b/widgets/bar/index.tsx
@@ -1,12 +1,8 @@
import { Astal, Gdk } from "ags/gtk4";
import app from "ags/gtk4/app";
import { Battery } from "./battery";
-import { CPU } from "./cpu";
-import { GPU } from "./gpu";
import { Launcher } from "./launcher";
import { Network } from "./network";
-import { Profile } from "./profile";
-import { Tailscale } from "./tailscale";
import { Time } from "./time";
import { Tray } from "./tray";
import { WorkspaceButton } from "./workspace";
@@ -14,7 +10,7 @@ import { WorkspaceButton } from "./workspace";
export const WINDOW_NAME = "bar";
export const Bar = (gdkmonitor: Gdk.Monitor) => {
- const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+ const { TOP } = Astal.WindowAnchor;
return (
{
cssClasses={["Bar"]}
gdkmonitor={gdkmonitor}
exclusivity={Astal.Exclusivity.EXCLUSIVE}
- anchor={TOP | LEFT | RIGHT}
+ anchor={TOP}
+ widthRequest={1200}
application={app}
>
-
-
-
-
+
+
@@ -40,8 +35,6 @@ export const Bar = (gdkmonitor: Gdk.Monitor) => {
-
-
diff --git a/widgets/bar/profile.tsx b/widgets/bar/profile.tsx
deleted file mode 100644
index f247712..0000000
--- a/widgets/bar/profile.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createPoll } from "ags/time";
-
-export const Profile = () => {
- const profile = createPoll("", 5000, ["bash", "-c", "asusctl profile -p"]);
-
- return (
-
-
-
- );
-};
diff --git a/widgets/bar/tailscale.tsx b/widgets/bar/tailscale.tsx
deleted file mode 100644
index 584516e..0000000
--- a/widgets/bar/tailscale.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createPoll } from "ags/time";
-
-export const Tailscale = () => {
- const tailscale = createPoll("", 5000, [
- "bash",
- "-c",
- "tailscale ping homelab",
- ]);
-
- return (
-
-
-
-
- );
-};
diff --git a/widgets/bar/time.tsx b/widgets/bar/time.tsx
index 58be909..763b1c5 100644
--- a/widgets/bar/time.tsx
+++ b/widgets/bar/time.tsx
@@ -5,7 +5,7 @@ export const Time = () => {
const time = createPoll(
"",
1000,
- () => GLib.DateTime.new_now_local().format("%a %b %d - %I:%M:%S %p")!,
+ () => GLib.DateTime.new_now_local().format("%I:%M %p")!,
);
return ;
diff --git a/widgets/control-center/header.tsx b/widgets/control-center/header.tsx
index c68d557..7bcdef4 100644
--- a/widgets/control-center/header.tsx
+++ b/widgets/control-center/header.tsx
@@ -1,11 +1,18 @@
import { Gdk, Gtk } from "ags/gtk4";
-import { exec } from "ags/process";
+import { execAsync } from "ags/process";
+import { createPoll } from "ags/time";
import GLib from "gi://GLib";
export const Header = () => {
const { VERTICAL } = Gtk.Orientation;
const { CENTER, START, END } = Gtk.Align;
+ const time = createPoll(
+ "",
+ 1000,
+ () => GLib.DateTime.new_now_local().format("%a %b %d - %I:%M:%S %p")!,
+ );
+
return (
{
-
-
+
+
+
-
+
+
+
+
+
+
);
diff --git a/widgets/control-center/index.tsx b/widgets/control-center/index.tsx
index 2ec29fa..824c49e 100644
--- a/widgets/control-center/index.tsx
+++ b/widgets/control-center/index.tsx
@@ -4,6 +4,7 @@ import { Footer } from "./footer";
import { Header } from "./header";
import { NotificationList } from "./notification-list";
import { SlidingControls } from "./sliding-controls";
+import { SystemInfo } from "./system-info";
export const WINDOW_NAME = "control-center";
@@ -14,6 +15,7 @@ export const ControlCenter = (gdkmonitor: Gdk.Monitor) => {
return (
{
+
diff --git a/widgets/control-center/system-info.tsx b/widgets/control-center/system-info.tsx
new file mode 100644
index 0000000..d48e935
--- /dev/null
+++ b/widgets/control-center/system-info.tsx
@@ -0,0 +1,143 @@
+import { createBinding, createComputed } from "ags";
+import { Gtk } from "ags/gtk4";
+import { createPoll } from "ags/time";
+import AstalBattery from "gi://AstalBattery";
+import AstalNetwork from "gi://AstalNetwork";
+
+export const SystemInfo = () => {
+ const cpu = PollCMD("cat /sys/class/thermal/thermal_zone*/temp");
+ const gpu = PollCMD("supergfxctl -g");
+ const profile = PollCMD("asusctl profile -p");
+ const tailscale = PollCMD("tailscale ping homelab");
+
+ const battery = AstalBattery.get_default();
+
+ const percentage = createBinding(battery, "percentage");
+ const charging = createBinding(battery, "charging");
+ const state = createBinding(battery, "state");
+ const energyRate = createBinding(battery, "energyRate");
+
+ const chargingIcon = createComputed(
+ [percentage, charging, state],
+ (percentage, charging, state) => {
+ const batFull = state === AstalBattery.State.FULLY_CHARGED;
+ const p = percentage * 100;
+
+ if (batFull) return "fa-battery-full-symbolic";
+ if (charging) return "fa-battery-charging-symbolic";
+ if (p < 30) return "fa-battery-low-symbolic";
+ return p < 70 ? "fa-battery-medium-symbolic" : "fa-battery-full-symbolic";
+ },
+ );
+
+ const network = AstalNetwork.get_default();
+ const connnectivity = createBinding(network, "connectivity");
+
+ const getNetworkText = (
+ conn: AstalNetwork.Connectivity,
+ net: AstalNetwork.Network,
+ ) => {
+ // no connection
+ if (conn == 1) return "No connection";
+
+ // wired
+ if (net.primary == 1) return "Wired";
+
+ // wifi
+ const wifi = net.wifi;
+ switch (wifi.internet) {
+ case 0:
+ return wifi.ssid;
+ case 1:
+ return "Connecting";
+ case 2:
+ return "Disconnected";
+ }
+
+ return "NA";
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const PollCMD = (cmd: string, ms: number = 5000) => {
+ return createPoll("", ms, ["bash", "-c", cmd]);
+};