Add basic ags theming

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

users/configs/ags/default.nix

@@ -1,6 +1,7 @@
 { user ? throw "user argument is required" }: { config, lib, pkgs, ... }:
 
 let
+  hmConfig = config.home-manager.users."${user.name}";
   agsConfig = (import ./src { inherit pkgs; });
 in
 {
@@ -11,5 +12,21 @@ in
       source = "${agsConfig}/share/config.js";
       target = "ags/config.js";
     };
+
+    programs.matugen.settings.templates.ags = {
+      input_path = ./theme.sass;
+      output_path = "${hmConfig.xdg.configHome}/ags/theme.sass";
+    };
+
+    wayland.windowManager.hyprland.initExtraConfig = "${lib.meta.getExe (pkgs.writeShellApplication {
+      name = "init-ags";
+      runtimeInputs = with pkgs; [
+        ags
+        sassc
+      ];
+      text = ''
+        ags &> /tmp/ags.log
+      '';
+    })} &";
   };
 }

users/configs/ags/src/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

users/configs/ags/src/eslint.config.js

@@ -0,0 +1,106 @@
+/* eslint no-use-before-define: 0 */
+
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import unicorn from 'eslint-plugin-unicorn';
+import prettier from 'eslint-plugin-prettier';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      unicorn,
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: 'script',
+
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+    },
+
+    rules: {
+      curly: ['error', 'multi-line'],
+      'eol-last': ['error', 'always'],
+      semi: ['error', 'always'],
+      quotes: ['error', 'single'],
+      'no-await-in-loop': 'warn',
+      'no-constructor-return': 'error',
+      'no-duplicate-imports': 'error',
+      'no-self-compare': 'error',
+      'no-unreachable-loop': 'error',
+      'no-trailing-spaces': 'error',
+      'no-console': 'warn',
+      'no-shadow': 'off',
+      '@typescript-eslint/no-shadow': ['error'],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error'],
+      'no-use-before-define': 'off',
+      '@typescript-eslint/no-use-before-define': ['error'],
+      '@typescript-eslint/require-await': 'warn',
+
+      '@typescript-eslint/no-misused-promises': ['error', {
+        checksVoidReturn: false,
+      }],
+
+      '@typescript-eslint/naming-convention': ['error', {
+        selector: 'default',
+        format: ['camelCase'],
+      }, {
+          selector: 'variableLike',
+          format: ['camelCase', 'PascalCase'],
+        }, {
+          selector: 'memberLike',
+          format: ['camelCase'],
+        }, {
+          selector: 'typeLike',
+          format: ['PascalCase'],
+        }, {
+          selector: 'property',
+          format: ['snake_case'],
+        }, {
+          selector: 'method',
+          format: ['camelCase'],
+        }, {
+          selector: ['enumMember', 'enum'],
+          format: ['UPPER_CASE'],
+        }],
+
+      'unicorn/empty-brace-spaces': 'off',
+      'unicorn/expiring-todo-comments': 'off',
+      'unicorn/no-array-for-each': 'off',
+
+      'unicorn/filename-case': ['error', {
+        case: 'camelCase',
+      }],
+
+      'unicorn/numeric-separators-style': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+    },
+
+    "ignores": ["*.config.js"]
+  }
+];

users/configs/ags/src/index.ts

@@ -1,12 +1,17 @@
-import Gtk from "gi://Gtk?version=3.0"
+import gtk from 'gi://Gtk?version=3.0';
-import Gdk from "gi://Gdk"
+import gdk from 'gi://Gdk';
-import { range } from "./lib";
+import { range } from 'lib';
+import themeInit from 'theme';
+import bar from 'widgets/bar/bar';
 
-const forMonitors = (widget: (monitor: number) => Gtk.Window) => {
+const forMonitors = (widget: (monitor: number) => gtk.Window) => {
-  const n = Gdk.Display.get_default()?.get_n_monitors() || 1;
+  const n = gdk.Display.get_default()?.get_n_monitors() || 1;
-  return range(n, 0).flatMap(widget)
+  return range(n, 0).flatMap(widget);
-}
+};
 
 App.config({
-  windows: []
+  style: themeInit(),
-})
+  windows: [
+    ...forMonitors(bar),
+  ]
+});

users/configs/ags/src/lib.ts

@@ -1,3 +1,3 @@
 export const range = (length: number, start = 1) => {
-  return Array.from({ length }, (_, i) => i + start)
+  return Array.from({ length }, (n, i) => i + start);
-}
+};

users/configs/ags/src/package.json

@@ -2,8 +2,20 @@
   "name": "ags",
   "module": "index.ts",
   "type": "module",
+  "scripts": {
+    "lint": "eslint ."
+  },
   "devDependencies": {
-    "@types/bun": "latest"
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.6.0",
+    "@types/bun": "^1.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "eslint": "9.x",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "globals": "^15.6.0",
+    "typescript-eslint": "^7.14.1"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

users/configs/ags/src/theme.ts

@@ -0,0 +1,25 @@
+export default () => {
+  const css = `${App.configDir}/theme.css`;
+  const scss = `${App.configDir}/theme.sass`;
+
+  let themeExists = true;
+
+  try {
+    Utils.readFile(scss);
+    Utils.exec(`sassc ${scss} ${css}`);
+  } catch (error) {
+    console.error(error);
+    themeExists = false;
+  }
+
+  Utils.monitorFile(
+    `${App.configDir}/theme.sass`,
+    function () {
+      Utils.exec(`sassc ${scss} ${css}`);
+      App.resetCss();
+      App.applyCss(css);
+    },
+  );
+
+  return themeExists ? css : undefined;
+};

users/configs/ags/src/widgets/bar/bar.ts

@@ -0,0 +1,29 @@
+import date from './date/date';
+
+export default (monitor: number) => Widget.Window({
+  monitor,
+  class_name: 'bar',
+  name: `bar${monitor}`,
+  exclusivity: 'exclusive',
+  anchor: ['top', 'right', 'left'],
+  child: Widget.CenterBox({
+    css: 'min-width: 2px; min-height: 2px; padding-top: 2px; padding-bottom: 2px;',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    startWidget: Widget.Box({
+      hexpand: true,
+      children: [],
+    }),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    centerWidget: Widget.Box({
+      hpack: 'center',
+      children: [
+        date()
+      ],
+    }),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    endWidget: Widget.Box({
+      hexpand: true,
+      children: [],
+    }),
+  }),
+});

users/configs/ags/src/widgets/bar/date/date.ts

@@ -0,0 +1,13 @@
+import glib from 'gi://GLib';
+
+const clock = Variable(glib.DateTime.new_now_local(), {
+  poll: [1000, () => glib.DateTime.new_now_local()]
+});
+
+const time = Utils.derive([clock], (c) => c.format('%H:%M - %A, %e %B %Y') || '');
+
+export default () => Widget.Label({
+  class_name: 'label',
+  justification: 'center',
+  label: time.bind(),
+});

users/configs/ags/theme.sass

@@ -0,0 +1,5 @@
+.bar
+  background-color: {{colors.surface.default.hex}}
+
+.label
+  color: {{colors.on_surface.default.hex}}