Add screenshots

widget/Bar.tsx

@@ -37,7 +37,6 @@ export default function Bar(monitor: Hyprland.Monitor) {
 			{workspaces(monitor)}
 			<box halign={Gtk.Align.END}>
 				{player()}
-				{client()}
 				<button><box>
 					<label
 						className="innerButton"

widget/brightness.tsx

@@ -64,7 +64,7 @@ function BrightWindow() {
 				className="toggleButton"
 				onClicked={(self) => {
 					toggleIndicator.toggleClassName("active", !sunset())
-					execAsync("/home/protoshark/.config/scripts/sunset-toggle.sh")
+					execAsync("/home/spingus/.config/scripts/sunset-toggle.sh")
 						.then((out) => (console.log(out)))
 						.catch((out) => (console.log(out)))
 				}}	

widget/client.tsx

@@ -14,23 +14,24 @@ const apps = new Apps.Apps({
 })
 
 function NewClient(client: Hyprland.Client) {
-	let appsClass = null
-	if (client) {
-		if (client.class == "soffice") {
-			client.class = ""
-		}
-		appsClass = apps.exact_query(client.class)[0]
+	let appsClass
+	if (!client) {
+		appsClass = null
 	}
-	let b = <box halign={Gtk.Align.END} className="clientLabel" visible={true}>
+	else if (client.class === "soffice") {
+		appsClass = apps.list.find(app => app.wmClass === "libreoffice-startcenter")
+	} else {
+		appsClass = apps.list.find(app => app.wmClass === client?.class)
+	}
+	return <box halign={Gtk.Align.END} className="clientLabel" visible={true}>
 		<icon 
-			icon={(appsClass) ? appsClass.iconName : "hyprland"}
+			icon={appsClass?.iconName ?? "hyprland"}
 			css="font-size: 24px; margin-right: 4px;"
 		/>
 		<label css="font-family: comfortaa; font-size: 14px;">{
-			(appsClass) ? appsClass.name : "Hyprland"
+			appsClass?.name ?? "Hyprland"
 		}</label>
 	</box>
-	return b
 }
 
 export default function client() {

widget/launcher.tsx

@@ -0,0 +1,46 @@
+import { Astal, Gtk, Widget } from "astal/gtk3"
+import { EventBox, Scrollable } from "astal/gtk3/widget"
+import Apps from "gi://AstalApps"
+const { TOP, RIGHT, BOTTOM } = Astal.WindowAnchor
+const apps = new Apps.Apps({
+	entryMultiplier: 1,
+	categories_multiplier: 0,
+	description_multiplier: 1,
+	executable_multiplier: 1,
+	name_multiplier: 2.5,
+	keywordsMultiplier: 1,
+})
+
+let launcherWindow
+
+function entry(app: Apps.Application) {
+	return <overlay
+		valign={Gtk.Align.START}>
+		<label
+			css={`background: green; border: 4px solid yellow; min-height: 100px;`}>
+		{app.name}</label>
+	</overlay>
+}
+
+export default function launcher() {
+	if (launcherWindow) {
+		launcherWindow.destroy()
+		launcherWindow = null
+		return false
+	}
+	launcherWindow = <window 
+		anchor={ TOP | RIGHT | BOTTOM }
+		className="launcher"
+		namespace="launcher"
+		widthRequest={800}
+		css="background: none;"
+		layer={Astal.Layer.OVERLAY}>
+			<overlay overlay=
+				<eventbox onScroll={() => console.log("scroll")}><box vertical>
+					{apps.list.map(app => entry(app))}
+				</box></eventbox>>
+				<box css="background: linear-gradient(90deg, rgba(0, 0, 0, 0), #000);"/>
+			</overlay>
+	</window>
+	return true
+}

widget/notif.tsx

@@ -5,9 +5,15 @@ import Pango from "gi://Pango?version=1.0"
 const notifs = Notif.get_default()
 
 const { TOP, RIGHT, BOTTOM } = Astal.WindowAnchor
-const notifPlaceholder = "/home/protoshark/.config/ags/assets/notif.svg"
+const notifPlaceholder = "/home/spingus/.config/ags/assets/notif.svg"
 let notifWindow: Widget.Window
+let lastId: number
 
+const wrap = (str: string, chars: number): string => {
+	if (str.length <= chars)
+		return str;
+	return str.substring(0, chars) + "\n" + wrap(str.substring(chars), chars);
+}
 
 function NewNotif(notif: Notif.Notification, inPanel: boolean = true) {
 	return <box
@@ -28,19 +34,13 @@ function NewNotif(notif: Notif.Notification, inPanel: boolean = true) {
 			hexpand>
 			<label 
 				halign={Gtk.Align.START} 
-				css="font-size: 16px;" 
-				wrap={true} 
-				maxWidthChars={20} 
-				wrapMode={Pango.WrapMode.WORD_CHAR}>
-				{notif.summary.substring(0, 80)}
+				css="font-size: 16px;">
+				{wrap(notif.summary, 18)}
 			</label>
 			<label 
 				halign={Gtk.Align.START} 
-				css="font-size: 14px;" 
-				wrap={true} 
-				maxWidthChars={22} 
-				wrapMode={Pango.WrapMode.WORD_CHAR}>
-				{notif.body.substring(0, 88)}
+				css="font-size: 14px;">
+				{wrap(notif.body, 22)}
 			</label>
 		</box>
 		<box vertical valign={Gtk.Align.CENTER}>
@@ -62,7 +62,6 @@ function NotifPanel() {
 			<box>
 				<button 
 					hexpand
-					heightRequest={36}
 					onClicked={() => {
 					for (let n of notifs.notifications) {
 						n.dismiss()
@@ -88,11 +87,9 @@ function notify(notif: Notif.Notification) {
 	let thisNotif = NewNotif(notif)
 	if (notifWindow) {
 		let os = notifWindow.get_child().overlays
-		let top = 12
 		for (let i = os.length-1; i > 0; i--) {
-			top += thisNotif.get_preferred_height()[0] - 40
 			if (os[i].get_preferred_width()[0] >= 352) {
-				os[i].css = `margin-top: ${top}px;`
+				os[i].css = `margin-top: ${(os[i+1]?.get_preferred_height()[0] ?? 20)+thisNotif.get_preferred_height()[0]-20}px;`
 			}
 		}
 		notifWindow.get_child().add_overlay(thisNotif)
@@ -100,8 +97,8 @@ function notify(notif: Notif.Notification) {
 	} else {
 		notifWindow = <window
 			anchor={ TOP | RIGHT }
-			marginTop={36}
 			layer={Astal.Layer.OVERLAY}
+			marginTop={36}
 			css="background: transparent;"
 			namespace="notification">
 			<overlay overlay={thisNotif}>
@@ -116,7 +113,8 @@ function notify(notif: Notif.Notification) {
 	}
 	setTimeout(() => {
 		let os = notifWindow.get_child().overlays
-		thisNotif.css = `margin-right: -352px; margin-top: ${thisNotif.get_preferred_height()[0]-thisNotif.get_child().get_preferred_height()[0]-52}px; transition: cubic-bezier(0.64, 0, 0.78, 0) 0.3s;`
+		let thisIndex = os.findIndex(nb => nb == thisNotif)
+		thisNotif.css = `margin-right: -352px; margin-top: ${(thisIndex === os.length-1) ? 20 : os[thisIndex+1].get_preferred_height()[0]+20}px; transition: cubic-bezier(0.64, 0, 0.78, 0) 0.3s;`
 		setTimeout(() => {
 			let os = notifWindow.get_child().overlays
 			notifWindow.get_child().remove(thisNotif)
@@ -128,12 +126,6 @@ function notify(notif: Notif.Notification) {
 	}, 3000)
 }
 
-function notifCount() {
-	return <label css="padding-top: 2px;">
-		{bind(notifs, "notifications").as(ns => ns.length)}
-	</label>
-}
-
 export default function notifWidget() {
 	return <button
 		onClicked={() => {
@@ -145,11 +137,15 @@ export default function notifWidget() {
 			}
 		}}
 		setup={(self) => self.hook(notifs, "notified", (_, id) => {
-			notify(notifs.get_notification(id))
+			if (lastId === id) {
+				return
+			}
+			lastId = id
+			let notif = notifs.get_notification(id)
+			notify(notif)
 		})}>
 		<box>
 			<icon icon="notif" css="color: white;" />
-			{notifCount()}
 		</box>
 	</button>
 }

widget/power.tsx

@@ -12,7 +12,7 @@ function PowerWindow() {
 		<box vertical css="padding: 6px 0;">
 			{[
 				["Lock", 		"bash -c 'pgrep -x hyprlock || hyprlock &'"	],
-				["Suspend", 	"/home/protoshark/.config/scripts/lock.sh"	],
+				["Suspend", 	"/home/spingus/.config/scripts/lock.sh"		],
 				["Logout", 		"hyprctl dispatch exit"						],
 				["Shutdown", 	"systemctl poweroff"						],
 				["Reboot", 		"systemctl reboot"							],