Add screenshots

README.md

@@ -0,0 +1,6 @@
+# Hypr!Lazer
+
+An AGSv2 config that aims to replicate the design language of osu!lazer.
+
+### Power
+![assets/screensohts/power.png]

app.ts

@@ -2,13 +2,27 @@ import { App } from "astal/gtk3"
 import style from "./style.scss"
 import Bar from "./widget/Bar"
 import Hyprland from "gi://AstalHyprland"
+import launcher from "./widget/launcher"
 
 const hyprland = Hyprland.get_default()
 
 App.start({
     css: style,
-	icons: "/home/protoshark/.config/ags/assets/",
-    main() {
-		hyprland.monitors.map((monitor) => Bar(monitor))
+	icons: "/home/spingus/.config/ags/assets/",
+	requestHandler: (request: string, res: (response: any) => void) => {
+		if (request === "launch") {
+			if (launcher()) {
+				res("Opening launcher")
+			} else {
+				res("Closing launcher")
+			}
+			return
+		}
+		res("Unknown command")
+	},
+    main: () => {
+		hyprland.monitors.map((mon) => {
+			Bar(mon)
+		})
     },
 })

assets/archlinux.svg

@@ -0,0 +1,9 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M186.575 162.152C204.721 177.464 234.004 193.426 259.419 203.385C237.557 187.519 215.801 169.636 194.085 146.23C212.161 107.684 233.745 54.4437 255.997 0.0976562C292.277 92.7957 359.897 232.3 450.483 397.816C425.873 384.303 403.575 376.609 380.553 370.664C388.183 375.019 406.218 384.861 417.79 392.772C436.07 405.269 452.988 418.935 468.897 432.021C483.097 458.131 497.471 484.781 512 511.901C439.744 470.064 369.527 436.174 312 425.706C330.833 321.235 257.12 259.599 215.24 326.096C199.114 351.699 194.753 393.883 202.4 425.229C129.667 439.235 58.503 478.44 0 511.902C68.143 388.425 137.038 263.253 186.575 162.152Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="74.981" y1="436.949" x2="436.88" y2="74.9114" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0072FF"/>
+<stop offset="1" stop-color="#00E5A1"/>
+</linearGradient>
+</defs>
+</svg>

assets/lock-symbolic.svg

@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-␍<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-␍<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-␍<g id="SVGRepo_iconCarrier"> <path d="M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C15.9474 10 16.5286 10 17 10.0288M7 10.0288C6.41168 10.0647 5.99429 10.1455 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C18.0057 10.1455 17.5883 10.0647 17 10.0288M7 10.0288V8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8V10.0288" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""/> </g>
-␍</svg>

style.scss

@@ -327,9 +327,9 @@ button {
   background: $background-3;
   border-radius: 10px;
   padding: 8px;
-  box-shadow: 0 0 16px 4px black;
+  box-shadow: 0 0 10px 4px black;
   min-width: 300px;
-  margin: 12px 12px 40px 40px;
+  margin: 20px 20px 20px 40px;
 }
 
 .notifIcon {

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"							],