dots/.config/ags/config.js

/* Imports */
const { query } = await Service.import("applications")
const hyprland = await Service.import('hyprland')

/* Icons */
const search_icon = Widget.Icon({
  size : 30,
  className : 'search-icon',
  icon : '/home/hex/.config/ags/search.svg'
})

/* Polls/Variables */
const date_poller = Variable("", {
  poll : [ 1000, 'date "+%H:%M:%S %b %e."' ],
})

/* Array storing all application results  */
let apps = []

let Application = (app) => {
  return Widget.Button({
    child: Widget.Box({
        children: [
          Widget.Icon({
            icon: app.icon_name || "",
            size: 16,
            className: "app-icon",
          }),
          Widget.Label({
            className: "app-name",
            label: app.name,
            xalign: 0,
            justification: 'left',
            truncate: 'end',
            wrap: true,
          })
        ]
    }),
    className: 'app',
    onClicked: () => {
      App.closeWindow("search-window");
      app.launch()
    },
  })
}

let app_container = Widget.Box({
  classNames: ['app-container'],
  vertical: true,
  visible: false,
})

const search_entry = Widget.Entry({
  placeholder_text : 'Search for an application...',
  visibility : true,
  className : 'search-entry',
  onChange : ({text}) => {
    apps = query(text).map(Application);

    /* Add first 10 results to container */ 
    app_container.children = apps.slice(0, 10);
  },
  onAccept : () => {
    apps[0].launch()
    App.closeWindow('search-window');
  },
})

// labels
const date_label = () => Widget.Label({
  hpack : 'end',
  'justification' : 'right',
  className : 'bar-date',
  label : date_poller.bind()
})

// utils
const dispatch = ws => hyprland.messageAsync(`dispatch workspace ${ws}`);

let workspace_buttons = () => Array.from({ length: 10 }, (_, i) => i + 1).map(i => Widget.Button({
          className: 'wp-btn',
          attribute: i,
          label: `${i}`,
          onClicked: () => dispatch(i),
}))

const Workspaces = () => Widget.EventBox({
    onScrollUp: () => dispatch('+1'),
    onScrollDown: () => dispatch('-1'),
    child: Widget.Box({
        children: workspace_buttons(),

        // remove this setup hook if you want fixed number of buttons
        setup: self => self.hook(hyprland, () => self.children.forEach(btn => {
          btn.visible = hyprland.workspaces.some(ws => ws.id === btn.attribute);
          let active_wp = hyprland.active.workspace.id
          if(btn.attribute == active_wp) {
            btn.toggleClassName('wp-btn-focused', true)
            btn.toggleClassName('wp-btn-normal', false)
          } else {
            btn.toggleClassName('wp-btn-focused', false)
            btn.toggleClassName('wp-btn-normal', true)
          }
        }))    
    }),
})

const right_bar_box = () => Widget.Box({
  className : 'bar-rightbox',
  children : [ date_label() ],
  hpack : "end",
  spacing : 8,
})

const center_bar_box = () => Widget.Box({
  children : [],
  className: 'center-container'
})

const left_bar_box = () => Widget.Box({
  className : 'bar-leftbox',
  hpack : "start",
  children: [Workspaces(), Widget.Box({
    className: 'title-box',
    vertical: true,
    children: [
      Widget.Label({
        xalign: '0',
        className: 't-class'
      }),
      Widget.Label({
        className: 't-title'
      })
    ],
    setup: self => self.hook(hyprland.active.client, self => {
      let client = hyprland.active.client;
      self.children[0].label = `${client.class}`
      self.children[1].label = client.title
    })

  })],
  spacing : 8,
})

const searchBox = Widget.Box({
  className : 'search-box',
  children : [ search_icon, search_entry ],
})
/*
const itemBox = Widget.Box({
  className: 'item-box',
  vertical: true,
})
*/
const mainAppBox = Widget.Box({
  vpack: 'start',
  className : 'main-app-box',
  vertical: true,
  children : [ searchBox, app_container ],
})

// Gtk Windows

const search = Widget.Window({
  vexpand: true,
  vpack: 'end',
  name : 'search-window',
  className : 'search-window',
  child : mainAppBox,
  keymode : "exclusive",
})

search.on("key-press-event", (self, event) => {
  if(event.get_keyval()[1] == 65307){
    App.closeWindow('search-window');
  }
})

let commonMargin = 10

const bar = (monitors = 2) => {
  let bars = [];
  for (let i = 0; i < monitors; i++) {
    bars.push(Widget.Window({
      exclusivity : 'exclusive',
      name : `bar-window-${i}`,
      className : 'bar-window',
      margins: [commonMargin,commonMargin,commonMargin,commonMargin],
      anchor : [ 'top', 'left', 'right' ],
      monitor: i,
      child : Widget.CenterBox({
        className : 'bar-mainbox',
        start_widget : left_bar_box(),
        center_widget : center_bar_box(),
        end_widget : right_bar_box(),
      }),
    }))
  }
  return bars;
}

// main Gtk App
App.config({
  style : '/home/hex/.config/ags/style.css',
  windows : [ search, ...bar(1) ],
})

// close search window by default
App.closeWindow('search-window');