From bed410a9040540c56c95cf9259e291e3bef065bd Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Fri, 4 Apr 2025 10:32:59 -0400 Subject: [PATCH] commit --- app.ts | 16 ++++----- bun.lock | 50 +++++++++++++++++++++++++++ package.json | 6 ++-- style.scss | 84 +++++++++++++++++++++++++++++++++++++-------- tsconfig.json | 24 ++++++------- widget/Bar.tsx | 65 ++++++++++++++++++----------------- widget/Calendar.tsx | 23 +++++++++++++ widget/Internet.tsx | 1 + widget/Mpris.tsx | 48 ++++++++++++++++++++++++++ widget/OS.tsx | 17 +++++++++ widget/Pywal.tsx | 14 ++++---- widget/Tray.tsx | 32 +++++++++++++++++ 12 files changed, 305 insertions(+), 75 deletions(-) create mode 100644 widget/Calendar.tsx create mode 100644 widget/Mpris.tsx create mode 100644 widget/OS.tsx create mode 100644 widget/Tray.tsx diff --git a/app.ts b/app.ts index 7e8cc7c..2223003 100644 --- a/app.ts +++ b/app.ts @@ -1,10 +1,10 @@ -import { App } from "astal/gtk4" -import style from "./style.scss" -import Bar from "./widget/Bar" +import { App } from "astal/gtk4"; +import style from "./style.scss"; +import Bar from "./widget/Bar"; App.start({ - css: style, - main() { - App.get_monitors().map(Bar) - }, -}) + css: style, + main() { + App.get_monitors().map(Bar); + }, +}); diff --git a/bun.lock b/bun.lock index a35a0c3..c1c4e72 100644 --- a/bun.lock +++ b/bun.lock @@ -4,8 +4,12 @@ "": { "name": "astal-shell", "dependencies": { + "@catppuccin/palette": "^1.7.1", "astal": "/usr/share/astal/gjs", + }, + "devDependencies": { "onchange": "^7.1.0", + "sass": "^1.86.2", }, }, }, @@ -14,6 +18,36 @@ "@blakeembrey/template": ["@blakeembrey/template@1.2.0", "", {}, "sha512-w/63nURdkRPpg3AXbNr7lPv6HgOuVDyefTumiXsbXxtIwcuk5EXayWR5OpSwDjsQPgaYsfUSedMduaNOjAYY8A=="], + "@catppuccin/palette": ["@catppuccin/palette@1.7.1", "", {}, "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw=="], + + "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="], + + "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="], + + "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="], + + "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="], + + "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="], + + "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="], + + "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="], + + "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="], + + "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="], + + "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="], + + "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="], + + "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="], + + "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="], + + "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="], + "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="], "arg": ["arg@4.1.3", "", {}, "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="], @@ -28,6 +62,8 @@ "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], + "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], + "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="], @@ -36,6 +72,8 @@ "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="], + "immutable": ["immutable@5.1.1", "", {}, "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="], + "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="], "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="], @@ -46,6 +84,10 @@ "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], + "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="], + + "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="], + "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="], "onchange": ["onchange@7.1.0", "", { "dependencies": { "@blakeembrey/deque": "^1.0.5", "@blakeembrey/template": "^1.0.0", "arg": "^4.1.3", "chokidar": "^3.3.1", "cross-spawn": "^7.0.1", "ignore": "^5.1.4", "tree-kill": "^1.2.2" }, "bin": { "onchange": "dist/bin.js" } }, "sha512-ZJcqsPiWUAUpvmnJri5TPBooqJOPmC0ttN65juhN15Q8xA+Nbg3BaxBHXQ45EistKKlKElb0edmbPWnKSBkvMg=="], @@ -56,14 +98,22 @@ "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="], + "sass": ["sass@1.86.2", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-Rpfn0zAIDqvnSb2DihJTDFjbhqLHu91Wqac9rxontWk7R+2txcPjuujMqu1eeoezh5kAblVCS5EdFdyr0Jmu+w=="], + "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="], "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="], + "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="], + "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="], "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="], "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="], + + "sass/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="], + + "sass/chokidar/readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="], } } diff --git a/package.json b/package.json index 573a191..8313c22 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,14 @@ "name": "astal-shell", "scripts": { "dev": "ags run --gtk4 -d .", - "dev:watch": "onchange -k -i '**/*.{scss,ts,tsx}' --exclude-path .gitignore -- ags run --gtk4 -d ." + "dev:watch": "onchange -k -i '**/*.{scss,css,ts,tsx}' --exclude-path .gitignore -- ags run --gtk4 -d ." }, "dependencies": { + "@catppuccin/palette": "^1.7.1", "astal": "/usr/share/astal/gjs" }, "devDependencies": { - "onchange": "^7.1.0" + "onchange": "^7.1.0", + "sass": "^1.86.2" } } diff --git a/style.scss b/style.scss index 1d0d3a9..e699c53 100644 --- a/style.scss +++ b/style.scss @@ -1,20 +1,76 @@ -// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss -$fg-color: #{"@theme_fg_color"}; -$bg-color: #{"@theme_bg_color"}; +$crust: #181926; +$mantle: #1e2030; +$base: #24273a; + +$surface0: #363a4f; +$surface1: #494d64; +$surface2: #5b6078; + +$rosewater: #f4dbd6; + +button { + all: initial; +} window.Bar { - background: transparent; - color: $fg-color; - font-weight: bold; + font-family: JetBrainsMono Nerd Font; + background: transparent; + font-weight: bold; - >centerbox { - background: $bg-color; - border-radius: 10px; - margin: 8px; - } + > centerbox { + background: $base; - button { - border-radius: 8px; - margin: 2px; + > box { + margin: 6px; + & > * { + margin: 0 4px; + } } + } + + .Arch { + -gtk-icon-size: 24px; + padding: 4px 8px 4px 8px; + border-radius: 8px; + background: $surface0; + + &:hover { + background: $rosewater; + color: $base; + } + } + + .Pywal { + font-size: 18px; + text-align: center; + padding: 4px 18px 4px 12px; + border-radius: 8px; + background: $surface0; + + &:hover { + background: $rosewater; + color: $base; + } + } + + .Tray > * { + margin: 0 4px; + } + + .Button { + padding: 4px 12px; + border-radius: 8px; + background: $surface0; + + &:hover { + background: $rosewater; + color: $base; + } + } + + .Label { + padding: 4px 12px; + border-radius: 8px; + background: $surface0; + } } diff --git a/tsconfig.json b/tsconfig.json index a92bc43..27bb373 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,14 @@ { - "$schema": "https://json.schemastore.org/tsconfig", - "compilerOptions": { - "experimentalDecorators": true, - "strict": true, - "target": "ES2022", - "module": "ES2022", - "moduleResolution": "Bundler", - // "checkJs": true, - // "allowJs": true, - "jsx": "react-jsx", - "jsxImportSource": "astal/gtk4", - } + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "experimentalDecorators": true, + "strict": true, + "target": "ES2022", + "module": "ES2022", + "moduleResolution": "Bundler", + // "checkJs": true, + // "allowJs": true, + "jsx": "react-jsx", + "jsxImportSource": "astal/gtk4" + } } diff --git a/widget/Bar.tsx b/widget/Bar.tsx index c2db8c5..903f5b6 100644 --- a/widget/Bar.tsx +++ b/widget/Bar.tsx @@ -1,36 +1,39 @@ -import { App, Astal, Gtk, Gdk } from "astal/gtk4" -import { Variable } from "astal" - -const time = Variable("").poll(1000, "date") +import { App, Astal, Gdk, Gtk } from "astal/gtk4"; +import Calendar from "./Calendar"; +import Hyprland from "./Hyprland"; +import Internet from "./Internet"; +import Mpris from "./Mpris"; +import OS from "./OS"; +import Pywal from "./Pywal"; +import Tray from "./Tray"; export default function Bar(gdkmonitor: Gdk.Monitor) { - const { TOP, LEFT, RIGHT } = Astal.WindowAnchor + const { TOP, LEFT, RIGHT } = Astal.WindowAnchor; - return - - - - - - + return ( + + + + + + + + + + + + + + + + + ); } diff --git a/widget/Calendar.tsx b/widget/Calendar.tsx new file mode 100644 index 0000000..3510f17 --- /dev/null +++ b/widget/Calendar.tsx @@ -0,0 +1,23 @@ +import { Variable } from "astal"; +import { Gdk, Gtk } from "astal/gtk4"; + +const time = Variable("").poll(1000, 'date +"%r"'); +const date = Variable("").poll(1000, 'date +"%a %b%e, %G"'); + +function Calendar() { + return ( + + + ); +} + +export default Calendar; diff --git a/widget/Internet.tsx b/widget/Internet.tsx index 8d022eb..078defa 100644 --- a/widget/Internet.tsx +++ b/widget/Internet.tsx @@ -23,6 +23,7 @@ function Internet() { return (