myputer specific changes

homes/modules/ags/config.js

@@ -0,0 +1,26 @@
+import { AppLauncher } from "./widgets/applauncher.js"
+import { Notifications } from "./widgets/notifications.js"
+
+const date = Variable('', {
+  poll: [1000, 'date'],
+})
+
+const Bar = (monitor = 0) => Widget.Window({
+    monitor,
+    name: 'bar${monitor}',
+    anchor: ['top', 'left', 'right'],
+    child: Widget.Label({ label: date.bind() }), 
+  })
+
+App.config({
+  style: "./style.css",
+  // icons: "./assets",
+  windows: [
+    Bar(),
+    AppLauncher,
+    Notifications()
+  ]
+  // gtkTheme: "Adwaita-dark",
+  // cursorTheme: "Qogir",
+  // iconTheme: "MoreWaita",[]
+})

homes/modules/ags/default.nix

@@ -0,0 +1,12 @@
+{pkgs, ...}: {
+  programs.ags = {
+    enable = true;
+    configDir = ./.;
+
+    extraPackages = with pkgs; [
+      gtksourceview
+      webkitgtk
+      accountsservice
+    ];
+  };
+}

homes/modules/ags/widgets/applauncher.js

@@ -0,0 +1,125 @@
+const { query } = await Service.import("applications");
+const WINDOW_NAME = "applauncher";
+
+const AppItem = app => Widget.Button({
+  on_clicked: () => {
+    App.closeWindow(WINDOW_NAME)
+    app.launch()
+  },
+  attribute: { app },
+  child: Widget.Box({
+    children: [
+      Widget.Icon({
+        icon: app.icon_name || "",
+        size: 42,
+      }),
+      Widget.Label({
+        class_name: "title",
+        label: app.name,
+        xalign: 0,
+        vpack: "center",
+        truncate: "end",
+        css: "margin-left: 10px;"
+      }),
+    ],
+  }),
+})
+
+const AppLauncherWidget = ({ width = 500, height = 500, spacing = 12 }) => {
+  let applications = query("").map(AppItem)
+
+  const list = Widget.Box({
+    vertical: true,
+    children: applications,
+    spacing,
+  })
+
+  function refresh() {
+    applications = query("").map(AppItem)
+    list.children = applications
+  }
+
+  const entry = Widget.Entry({
+    placeholder_text: "Search",
+    hexpand: true,
+    css: "min-height: 50px;",
+
+    // launch first item when Enter is pressed
+    on_accept: () => {
+      // only consider applications that are visible in the list
+      const results = applications.filter((item) => item.visible);
+      if (results[0]) {
+        App.toggleWindow(WINDOW_NAME);
+        results[0].attribute.app.launch()
+      }
+    },
+
+    // filter the applications based on search term
+    on_change: ({ text }) => applications.forEach(item => {
+        item.visible = item.attribute.app.match(text ?? "")
+      }),
+  })
+
+  return Widget.Box({
+    vertical: false,
+    children: [
+      // LEFT
+      Widget.Box({
+        vertical: true,
+        css: `min-width: ${width}px;`
+           + `min-height: ${height}px;` 
+           + "background-image: url('https://images2.alphacoders.com/135/1351579.png');"
+           + "background-size: cover;"
+           + "background-position: center;"
+           + "background-repeat: no-repeat;",
+        children: [
+          // align the entry field with the app list
+          Widget.Box({
+            css: `margin: ${spacing * 2}px;`,
+            child: entry,
+          }),
+        ],
+      }),
+
+      // RIGHT
+      Widget.Box({
+        vertical: true,
+        css: `margin: ${spacing * 2}px;`,
+        child:
+          // make scrollable
+          Widget.Scrollable({
+            hscroll: "never",
+            css: `min-width: ${width}px; min-height: ${height}px;`,
+            child: list,
+          }),
+        
+        setup: self => self.hook(App, (_, windowName, visible) => {
+          if (windowName !== WINDOW_NAME)
+            return
+
+          // when the launcher becomes visible
+          if (visible) {
+            refresh()
+            entry.text = ""
+            entry.grab_focus()
+          }
+        }),
+      }),
+    ],
+  })
+}
+
+// the app launcher should be a singleton
+export const AppLauncher = Widget.Window({
+  name: WINDOW_NAME,
+  setup: self => self.keybind("Escape", () => {
+    App.closeWindow(WINDOW_NAME)
+  }),
+  visible: false,
+  keymode: "exclusive",
+  child: AppLauncherWidget({
+    width: 500,
+    height: 500,
+    spacing: 12,
+  }),
+})

homes/modules/ags/widgets/bar.ts

@@ -0,0 +1,38 @@
+import options from "options"p
+
+const { start, center, end } = options.bar.layout
+
+// place all your bar widgets in here
+const widgets = {
+  expander: () => Widget.Box({ expand: true}),
+}
+
+
+//export type BarWidget = keyof typeof widget;
+
+export default (monitor: number) => Widget.Window({
+  monitor,
+  class_name: "bar",
+  name: "bar-${monitor}",
+  // anchor: position.bind().as(pos => [pos, "left", "right"]),
+  anchor: ["top", "left", "right"],
+  child: Widget.CenterBox({
+    // ensure bar is shown
+    css: "min-width: 2px; min-height: 2px;"
+    startWidget: Widget.Box({
+      hexpand: true,
+      // map all start widgets to be childen
+      childen: start.bind().as(s => s.map(w => widgets[w]()))
+    }),
+    centerWidget: Widget.Box({
+      hpack: "center",
+      // map all center widgets to be childen
+      childen: center.bind().as(c => c.map(w => widgets[w]()))
+    }),
+    endWidget: Widget.Box({
+      hexpand: true
+      // map all end widgets to be childen
+      childen: end.bind().as(e => e.map(w => widgets[w]()))
+    }),
+  })
+})

homes/modules/ags/widgets/fullscreen.js

@@ -0,0 +1,23 @@
+const WINDOW_NAME = "fullscreen";
+
+const Fullscreen = (children) => Widget.Box({
+  vertical: true,
+  css: "background-image: url('https://images2.alphacoders.com/135/1351579.png');"
+     + "background-size: cover;"
+     + "background-position: center;"
+     + "background-repeat: no-repeat;",
+  children: children,
+})
+
+export const fullscreen = Widget.Window({
+  name: WINDOW_NAME,
+  setup: self => self.keybind("Escape", () => {
+    App.closeWindow(WINDOW_NAME)
+  }),
+  anchor: ["top", "bottom", "left", "right"],
+  visible: false,
+  keymode: "exclusive",
+  child: Fullscreen(
+    Widget.Label({"Hello World"});
+  )
+})

homes/modules/ags/widgets/notifications.js

@@ -0,0 +1,122 @@
+const notifications = await Service.import("notifications");
+
+function NotificationIcon({ app_entry, app_icon, image}) {
+  if (image) {
+    return Widget.Box({
+      css: `background-image: url("${image}");`
+        + "background-size: contain;"
+        + "background-repeat: no-repeat;"
+        + "background-position: center;"
+    })
+  }
+
+  let icon = "dialog-information-symbolic"
+  if (Utils.lookUpIcon(app_icon))
+    icon = app_icon
+
+  if (app_entry && Utils.lookUpIcon(app_entry))
+    icon = app_entry
+
+  return Widget.Box({
+    child: Widget.Icon(icon),
+  })
+}
+
+
+function Notification(n) {
+  const icon = Widget.Box({
+    vpack: "start",
+    class_name: "icon",
+    child: NotificationIcon(n),
+  })
+
+  const title = Widget.Label({
+    class_name: "title",
+    xalign: 0,
+    justification: "left",
+    hexpand: true,
+    max_width_chars: 24,
+    truncate: "end",
+    wrap: true,
+    label: n.summary,
+    use_markup: true,
+  })
+
+  const body = Widget.Label({
+    class_name: "body",
+    hexpand: true,
+    use_markup: true,
+    xalign: 0,
+    justification: "left",
+    label: n.body,
+    wrap: true,
+  })
+
+  const actions = Widget.Box({
+    class_name: "actions",
+    children: n.actions.map(({ id, label}) => Widget.Button({
+      class_name: "action-button",
+      on_clicked: () => {
+        n.invoke(id),
+        n.dismiss()
+      },
+      hexpand: true,
+      child: Widget.Label(label),
+    })),
+  })
+
+  return Widget.EventBox(
+    {
+      attribute: {id: n.id},
+      on_primary_click: n.dismiss,
+    },
+    Widget.Box(
+      {
+        class_name: `notification ${n.urgency}`,
+        vertical: true,
+      },
+      Widget.Box([
+        icon,
+        Widget.Box(
+          { vertical: true },
+          title,
+          body,
+        ),
+      ]),
+      actions,
+    ),
+  )
+}
+
+export function Notifications(monitor = 0)  {
+  const list = Widget.Box({
+    vertical: true,
+    children: notifications.popups.map(Notification),
+  })
+
+  function onNotified(_, id) {
+    const n = notifications.getNotification(id)
+    if (n) 
+      list.children = [Notification(n), ...list.children]
+  }
+
+  function onDismissed(_, id) {
+    list.children.find(n => n.attribute.id === id)?.destroy()
+  }
+
+  list.hook(notifications, onNotified, "notified")
+      .hook(notifications, onDismissed, "dismissed")
+
+  return Widget.Window({
+    monitor,
+    class_name: "notifications-widget",
+    name: `notifications-${monitor}`,
+    anchor: ["top", "left"],
+    child: Widget.Box({
+      css: "min-width: 2px; min-height: 2px;",
+      class_name: "notifications",
+      vertical: true,
+      child: list,
+    }),
+  })
+}