feat: add window title, move to top

astal/style.scss

@@ -23,7 +23,7 @@ window.Bar {
   .status-box {
     background-color: $bg-color-6;
     padding: 0 4px;
-    margin: 0 4px;
+    margin: 0 2px;
     font-size: 16px;
   }
 
@@ -31,6 +31,10 @@ window.Bar {
     background-color: $inactive-bg-color;
   }
 
+  .client-title label {
+    font-weight: bold;
+  }
+
   .nix-icon {
     font-size: 24px;
     padding: 0 2px;

astal/tsconfig.json

@@ -2,7 +2,7 @@
     "$schema": "https://json.schemastore.org/tsconfig",
     "compilerOptions": {
         "experimentalDecorators": true,
-        "strict": true,
+        "strict": false,
         "target": "ES2022",
         "module": "ES2022",
         "moduleResolution": "Bundler",

astal/widget/Bar.tsx

@@ -7,9 +7,10 @@ import Ram from "./ram";
 import Disk from "./disk";
 import Battery from "./battery";
 import Time from "./time";
+import Title from "./title";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-  const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor;
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
   //@ts-ignore
   return (
@@ -17,7 +18,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       className="Bar"
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      anchor={BOTTOM | LEFT | RIGHT}
+      anchor={TOP | LEFT | RIGHT}
       application={App}
     >
       <centerbox>
@@ -27,7 +28,9 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
           </box>
           <Workspaces monitor={gdkmonitor} />
         </box>
-        <box></box>
+        <box className="client-title">
+          <Title />
+        </box>
         <box hexpand halign={Gtk.Align.END}>
           <Audio />
           <NetworkModule />

astal/widget/title.tsx

@@ -0,0 +1,16 @@
+import { bind, Variable } from "astal"
+import AstalHyprland from "gi://AstalHyprland?version=0.1";
+
+const hyprland = AstalHyprland.get_default()
+
+function get_title() {
+  return hyprland.focusedClient?.title ?? ""
+}
+
+const title = Variable(get_title()).poll(200, () => get_title())
+
+export default function Title() {
+  return (
+    <label label={title(t => t)} />
+  )
+}