ags: sync

.config/ags/lib/advancedwidgets.js

@@ -18,7 +18,8 @@ export const MarginRevealer = ({
             ['transition', transition],
             ['show', () => {
                 if (widget._revealChild) return;
-                widget.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.NEVER);
+                widget.hscroll = 'never';
+                widget.vscroll = 'never';
                 child.toggleClassName(hideClass, false);
                 child.toggleClassName(showClass, true);
                 widget._revealChild = true;
@@ -46,8 +47,8 @@ export const MarginRevealer = ({
             ...extraProperties,
         ],
         child: child,
-        hscroll: (revealChild ? 'never' : 'always'),
+        hscroll: `${revealChild ? 'never' : 'always'}`,
-        vscroll: (revealChild ? 'never' : 'always'),
+        vscroll: `${revealChild ? 'never' : 'always'}`,
     });
     child.toggleClassName(`${revealChild ? showClass : hideClass}`, true);
     return widget;

.config/ags/scss/_common.scss

@@ -67,12 +67,6 @@ menu>menuitem:focus {
     background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
 }
 
-.separator-line {
-    background-color: $outline;
-    min-width: 0.068rem;
-    min-height: 0.068rem;
-}
-
 tooltip {
     @include normal-rounding;
     background-color: $surfaceVariant;

.config/ags/scss/_lib_classes.scss

@@ -177,12 +177,18 @@
     @include icon-nerd;
 }
 
+.separator-line {
+    background-color: $outline;
+    min-width: 0.068rem;
+    min-height: 0.068rem;
+}
+
 .separator-circle {
     @include full-rounding;
-    background-color: $onSurface;
+    background-color: $outline;
     margin: 0rem 0.682rem;
-    min-width: 0.545rem;
+    min-width: 0.273rem;
-    min-height: 0.545rem;
+    min-height: 0.273rem;
 }
 
 .spacing-h-3 > * {

.config/ags/scss/_lib_mixins.scss

@@ -152,10 +152,10 @@ $elevation_margin: 0.476rem;
     transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
 }
 @mixin element_easeInOut {
-    transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
+    transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
 }
 @mixin page_move {
-    transition: 2000ms cubic-bezier(0, 0.55, 0.45, 1);
+    transition: 500ms cubic-bezier(0.85, 0, 0.15, 1);
 }
 
 @function tint($color, $percentage) {

.config/ags/scss/_sidebars.scss

@@ -582,6 +582,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-indicator {
+    @include menu_decel;
     @include full-rounding;
     min-width: 0.136rem;
     background-color: $onBackground;

.config/ags/services/waifus.js

@@ -81,9 +81,8 @@ class WaifuService extends Service {
     get queries() { return this._queries }
     get responses() { return this._responses }
 
-    fetch(msg) {
+    async fetch(msg) {
         // Init
-        const newMessageId = this._responses.length;
         const userArgs = msg.split(' ');
         let taglist = [];
         this._nsfw = false;
@@ -99,6 +98,7 @@ class WaifuService extends Service {
                 if(['ecchi', 'hentai', 'ero', 'ass', 'paizuri', 'oral', 'milf'].includes(thisArg)) this._nsfw = true;
             }
         }
+        const newMessageId = this._queries.length;
         this._queries.push(taglist);
         this.emit('newResponse', newMessageId);
         const params = {
@@ -125,6 +125,7 @@ class WaifuService extends Service {
                     status: status,
                     signature: -1,
                     url: '',
+                    extension: '',
                     source: '',
                     dominant_color: '#383A40',
                     is_nsfw: false,
@@ -138,6 +139,7 @@ class WaifuService extends Service {
                         status: status,
                         signature: imageData?.signature || -1,
                         url: imageData?.url || undefined,
+                        extension: imageData.extension,
                         source: imageData?.source,
                         dominant_color: imageData?.dominant_color || '#9392A6',
                         is_nsfw: imageData?.is_nsfw || false,

.config/ags/style.css

@@ -130,13 +130,18 @@
 .icon-nerd {
   font-family: "SpaceMono NF", "SpaceMono Nerd Font", "JetBrains Mono NF", "JetBrains Mono Nerd Font", monospace; }
 
+.separator-line {
+  background-color: #9a8d95;
+  min-width: 0.068rem;
+  min-height: 0.068rem; }
+
 .separator-circle {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  background-color: #eae0e4;
+  background-color: #9a8d95;
   margin: 0rem 0.682rem;
-  min-width: 0.545rem;
+  min-width: 0.273rem;
-  min-height: 0.545rem; }
+  min-height: 0.273rem; }
 
 .spacing-h-3 > * {
   margin-right: 0.205rem; }
@@ -370,13 +375,13 @@
   transition: 300ms cubic-bezier(0.1, 1, 0, 1); }
 
 .element-show {
-  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1); }
+  transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); }
 
 .element-hide {
-  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1); }
+  transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); }
 
 .element-move {
-  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1); }
+  transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); }
 
 .element-decel {
   transition: 300ms cubic-bezier(0, 0.55, 0.45, 1); }
@@ -388,7 +393,7 @@
   transition: 300ms cubic-bezier(0.55, 0, 1, 0.45); }
 
 .page-move {
-  transition: 2000ms cubic-bezier(0, 0.55, 0.45, 1); }
+  transition: 500ms cubic-bezier(0.85, 0, 0.15, 1); }
 
 * {
   caret-color: #ffc4f5; }
@@ -440,11 +445,6 @@ menu > menuitem:hover,
 menu > menuitem:focus {
   background-color: #4a4147; }
 
-.separator-line {
-  background-color: #9a8d95;
-  min-width: 0.068rem;
-  min-height: 0.068rem; }
-
 tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
@@ -1858,6 +1858,7 @@ tooltip {
   margin: 0.682rem; }
 
 .sidebar-chat-indicator {
+  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 0.136rem;

.config/ags/widgets/bar/leftspace.js

@@ -82,7 +82,7 @@ export const ModuleLeftSpace = () => Widget.EventBox({
                                                 xalign: 0,
                                                 className: 'txt txt-smallie',
                                                 setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
-                                                    label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
+                                                    label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : Hyprland.active.client._title;
                                                 }),
                                             })
                                         ]

.config/ags/widgets/bar/rightspace.js

@@ -1,6 +1,7 @@
 import { App, Utils, Widget } from '../../imports.js';
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
+import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
 const { execAsync } = Utils;
 import Indicator from '../../services/indicator.js';
 import { StatusIcons } from "../../lib/statusicons.js";
@@ -43,10 +44,28 @@ export const ModuleRightSpace = () => {
                     children: [
                         Widget.Box({
                             hexpand: true,
-                            className: 'spacing-h-15 txt',
+                            className: 'spacing-h-5 txt',
                             children: [
                                 Widget.Box({ hexpand: true, }),
                                 barTray,
+                                Widget.Revealer({
+                                    transition: 'slide_left',
+                                    revealChild: false,
+                                    properties: [
+                                        ['count', 0],
+                                        ['update', (self, diff) => {
+                                            self._count += diff;
+                                            self.revealChild = (self._count > 0);
+                                        }]],
+                                    child: Widget.Box({
+                                        vpack: 'center',
+                                        className: 'separator-circle',
+                                    }),
+                                    setup: (self) => self
+                                        .hook(SystemTray, (self) => self._update(self, 1), 'added')
+                                        .hook(SystemTray, (self) => self._update(self, -1), 'removed')
+                                    ,
+                                }),
                                 barStatusIcons,
                             ],
                         }),

.config/ags/widgets/bar/tray.js

@@ -25,7 +25,7 @@ const SysTrayItem = item => Button({
 
 export const Tray = (props = {}) => {
     const trayContent = Box({
-        className: 'bar-systray spacing-h-10',
+        className: 'margin-right-5 spacing-h-15',
         properties: [
             ['items', new Map()],
             ['onAdded', (box, id) => {

.config/ags/widgets/sideleft/apis/waifu.js

@@ -13,6 +13,11 @@ const IMAGE_REVEAL_DELAY = 13; // Some wait for inits n other weird stuff
 Utils.exec(`bash -c 'mkdir -p ${GLib.get_user_cache_dir()}/ags/media/waifus'`);
 Utils.exec(`bash -c 'rm ${GLib.get_user_cache_dir()}/ags/media/waifus/*'`);
 
+export function fileExists(filePath) {
+    let file = Gio.File.new_for_path(filePath);
+    return file.query_exists(null);
+}
+
 const CommandButton = (command) => Button({
     className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
     onClicked: () => sendMessage(command),
@@ -30,8 +35,6 @@ export const waifuTabIcon = Box({
 });
 
 const WaifuImage = (taglist) => {
-    var imagePath = '';
-    var blockImageData = {};
     const ImageState = (icon, name) => Box({
         className: 'spacing-h-5',
         children: [
@@ -87,17 +90,17 @@ const WaifuImage = (taglist) => {
             ImageAction({
                 name: 'Go to source',
                 icon: 'link',
-                action: () => execAsync(['xdg-open', `${blockImageData.source}`]).catch(print),
+                action: () => execAsync(['xdg-open', `${thisBlock._imageData.source}`]).catch(print),
             }),
             ImageAction({
                 name: 'Hoard',
                 icon: 'save',
-                action: () => execAsync(['bash', '-c', `mkdir -p ~/Pictures/waifus && cp ${imagePath} ~/Pictures/waifus`]).catch(print),
+                action: () => execAsync(['bash', '-c', `mkdir -p ~/Pictures/waifus && cp ${thisBlock._imagePath} ~/Pictures/waifus`]).catch(print),
             }),
             ImageAction({
                 name: 'Open externally',
                 icon: 'open_in_new',
-                action: () => execAsync(['xdg-open', `${imagePath}`]).catch(print),
+                action: () => execAsync(['xdg-open', `${thisBlock._imagePath}`]).catch(print),
             }),
         ]
     })
@@ -127,14 +130,16 @@ const WaifuImage = (taglist) => {
     const thisBlock = Box({
         className: 'sidebar-chat-message',
         properties: [
+            ['imagePath', ''],
+            ['imageData', ''],
             ['update', (imageData, force = false) => {
-                blockImageData = imageData;
+                thisBlock._imageData = imageData;
-                const { status, signature, url, source, dominant_color, is_nsfw, width, height, tags } = blockImageData;
+                const { status, signature, url, extension, source, dominant_color, is_nsfw, width, height, tags } = thisBlock._imageData;
                 if (status != 200) {
                     downloadState.shown = 'error';
                     return;
                 }
-                imagePath = `${GLib.get_user_cache_dir()}/ags/media/waifus/${signature}`;
+                thisBlock._imagePath = `${GLib.get_user_cache_dir()}/ags/media/waifus/${signature}${extension}`;
                 downloadState.shown = 'download';
                 // Width allocation
                 const widgetWidth = Math.min(Math.floor(waifuContent.get_allocated_width() * 0.75), width);
@@ -142,7 +147,8 @@ const WaifuImage = (taglist) => {
                 // Start download
                 const showImage = () => {
                     downloadState.shown = 'done';
-                    blockImage.css = `background-image:url('${imagePath}');`;
+                    // blockImage.css = `background-color: ${dominant_color};`;
+                    blockImage.css = `background-image:url('${thisBlock._imagePath}');`; // TODO: use proper image widget
                     Utils.timeout(IMAGE_REVEAL_DELAY, () => {
                         blockImageRevealer.revealChild = true;
                     })
@@ -151,8 +157,8 @@ const WaifuImage = (taglist) => {
                     );
                     downloadIndicator._hide();
                 }
-                if (!force && Gio.File.new_for_path(imagePath).query_exists(null)) showImage();
+                if (!force && fileExists(thisBlock._imagePath)) showImage();
-                else Utils.execAsync(['bash', '-c', `wget -O '${imagePath}' '${url}'`])
+                else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock._imagePath}' '${url}'`])
                     .then(showImage)
                     .catch(print);
                 colorIndicator.css = `background-color: ${dominant_color};`;
@@ -274,17 +280,19 @@ export const waifuCommands = Box({
     }
 });
 
+const clearChat = () => {
+    const kids = waifuContent.get_children();
+    for (let i = 0; i < kids.length; i++) {
+        const child = kids[i];
+        if (child) child.destroy();
+    }
+}
+
 export const sendMessage = (text) => {
     // Do something on send
     // Commands
     if (text.startsWith('/')) {
-        if (text.startsWith('/clear')) {
+        if (text.startsWith('/clear')) clearChat();
-            const kids = waifuContent.get_children();
-            for (let i = kids.length - 1; i >= 0; i--) {
-                const child = kids[i];
-                child.destroy();
-            }
-        }
         else if (text.startsWith('/test')) {
             const newImage = WaifuImage(['/test']);
             waifuContent.add(newImage);
@@ -292,6 +300,7 @@ export const sendMessage = (text) => {
                 // This is an image uploaded to my github repo
                 status: 200,
                 url: 'https://picsum.photos/400/600',
+                extension: '',
                 signature: 0,
                 source: 'https://picsum.photos/400/600',
                 dominant_color: '#9392A6',