sidebar: segcyer api stuff

let me cook

.config/ags/modules/.miscutils/system.js

@@ -1,3 +1,4 @@
+const { GLib } = imports.gi;
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 const { execAsync, exec } = Utils;
 
@@ -6,6 +7,9 @@ export const isDebianDistro = (distroID == 'linuxmint' || distroID == 'ubuntu' |
 export const isArchDistro = (distroID == 'arch' || distroID == 'endeavouros' || distroID == 'cachyos');
 export const hasFlatpak = !!exec(`bash -c 'command -v flatpak'`);
 
+const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
+export let darkMode = !(Utils.readFile(LIGHTDARK_FILE_LOCATION).trim() == '-l');
+
 export const getDistroIcon = () => {
     // Arches
     if(distroID == 'arch') return 'arch-symbolic';

.config/ags/modules/indicators/musiccontrols.js

@@ -1,4 +1,4 @@
-const { Gdk, GdkPixbuf, GLib, Gtk } = imports.gi;
+const { GLib } = imports.gi;
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
@@ -9,10 +9,9 @@ const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
 import { fileExists } from '../.miscutils/files.js';
 import { AnimatedCircProg } from "../.commonwidgets/cairo_circularprogress.js";
 import { showMusicControls } from '../../variables.js';
+import { darkMode } from '../.miscutils/system.js';
 
 const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
-const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
-const lightDark = Utils.readFile(LIGHTDARK_FILE_LOCATION).trim();
 const COVER_COLORSCHEME_SUFFIX = '_colorscheme.css';
 var lastCoverPath = '';
 
@@ -181,7 +180,7 @@ const CoverArt = ({ player, ...rest }) => {
                 }
 
                 const coverPath = player.coverPath;
-                const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`;
+                const stylePath = `${player.coverPath}${darkMode ? '' : '-l'}${COVER_COLORSCHEME_SUFFIX}`;
                 if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete
                     Utils.timeout(200, () => {
                         // self.attribute.showImage(self, coverPath);
@@ -200,9 +199,9 @@ const CoverArt = ({ player, ...rest }) => {
 
                 // Generate colors
                 execAsync(['bash', '-c',
-                    `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${lightDark}`])
+                    `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' > ${App.configDir}/scss/_musicmaterial.scss ${darkMode ? '' : '-l'}`])
                     .then(() => {
-                        exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`)
+                        exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${darkMode ? '' : '-l'}`)
                         exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`);
                         exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`);
                         Utils.timeout(200, () => {

.config/ags/modules/sideleft/apis/ai_chatmessage.js

@@ -283,19 +283,15 @@ export const ChatMessage = (message, modelName = 'Model') => {
     const messageContentBox = MessageContent(message.content);
     const thisMessage = Box({
         className: 'sidebar-chat-message',
+        homogeneous: true,
         children: [
-            Box({
-                className: `sidebar-chat-indicator ${message.role == 'user' ? 'sidebar-chat-indicator-user' : 'sidebar-chat-indicator-bot'}`,
-            }),
             Box({
                 vertical: true,
-                hpack: 'fill',
-                hexpand: true,
                 children: [
                     Label({
-                        hpack: 'fill',
+                        hpack: 'start',
                         xalign: 0,
-                        className: 'txt txt-bold sidebar-chat-name',
+                        className: `txt txt-bold sidebar-chat-name sidebar-chat-name-${message.role == 'user' ? 'user' : 'bot'}`,
                         wrap: true,
                         useMarkup: true,
                         label: (message.role == 'user' ? USERNAME : modelName),
@@ -324,17 +320,13 @@ export const SystemMessage = (content, commandName, scrolledWindow) => {
     const thisMessage = Box({
         className: 'sidebar-chat-message',
         children: [
-            Box({
-                className: `sidebar-chat-indicator sidebar-chat-indicator-System`,
-            }),
             Box({
                 vertical: true,
-                hpack: 'fill',
-                hexpand: true,
                 children: [
                     Label({
                         xalign: 0,
-                        className: 'txt txt-bold sidebar-chat-name',
+                        hpack: 'start',
+                        className: 'txt txt-bold sidebar-chat-name sidebar-chat-name-system',
                         wrap: true,
                         label: `System  •  ${commandName}`,
                     }),

.config/ags/modules/sideleft/apis/booru.js

@@ -204,9 +204,6 @@ const BooruPage = (taglist) => {
             overlays: [imageActions]
         })
     }
-    const colorIndicator = Box({
-        className: `sidebar-chat-indicator`,
-    });
     const downloadState = Stack({
         homogeneous: false,
         transition: 'slide_up_down',
@@ -233,7 +230,7 @@ const BooruPage = (taglist) => {
                 hscroll: 'automatic',
                 child: Box({
                     hpack: 'fill',
-                    className: 'sidebar-waifu-content spacing-h-5',
+                    className: 'spacing-h-5',
                     children: [
                         ...taglist.map((tag) => CommandButton(tag)),
                         Box({ hexpand: true }),
@@ -246,8 +243,7 @@ const BooruPage = (taglist) => {
     const pageImageGrid = Grid({
         // columnHomogeneous: true,
         // rowHomogeneous: true,
-        className: 'sidebar-waifu-image',
+        className: 'sidebar-booru-imagegrid',
-        // css: 'min-height: 90px;'
     });
     const pageImageRevealer = Revealer({
         transition: 'slide_down',
@@ -256,6 +252,7 @@ const BooruPage = (taglist) => {
         child: pageImageGrid,
     });
     const thisPage = Box({
+        homogeneous: true,
         className: 'sidebar-chat-message',
         attribute: {
             'imagePath': '',
@@ -289,20 +286,17 @@ const BooruPage = (taglist) => {
                 downloadIndicator.attribute.hide();
             },
         },
-        children: [
+        children: [Box({
-            colorIndicator,
+            vertical: true,
-            Box({
+            className: 'spacing-v-5',
-                vertical: true,
+            children: [
-                className: 'spacing-v-5',
+                pageHeading,
-                children: [
+                Box({
-                    pageHeading,
+                    vertical: true,
-                    Box({
+                    children: [pageImageRevealer],
-                        vertical: true,
+                })
-                        children: [pageImageRevealer],
+            ]
-                    })
+        })],
-                ]
-            })
-        ],
     });
     return thisPage;
 }

.config/ags/modules/sideleft/apis/chatgpt.js

@@ -247,7 +247,7 @@ const GPTWelcome = () => Box({
 });
 
 export const chatContent = Box({
-    className: 'spacing-v-15',
+    className: 'spacing-v-5',
     vertical: true,
     setup: (self) => self
         .hook(GPTService, (box, id) => {

.config/ags/modules/sideleft/apis/gemini.js

@@ -151,7 +151,7 @@ const geminiWelcome = Box({
 });
 
 export const chatContent = Box({
-    className: 'spacing-v-15',
+    className: 'spacing-v-5',
     vertical: true,
     setup: (self) => self
         .hook(GeminiService, (box, id) => {

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

@@ -11,6 +11,7 @@ import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { MarginRevealer } from '../../.widgethacks/advancedrevealers.js';
 import { setupCursorHover, setupCursorHoverInfo } from '../../.widgetutils/cursorhover.js';
 import WaifuService from '../../../services/waifus.js';
+import { darkMode } from '../../.miscutils/system.js';
 
 async function getImageViewerApp(preferredApp) {
     Utils.execAsync(['bash', '-c', `command -v ${preferredApp}`])
@@ -117,9 +118,6 @@ const WaifuImage = (taglist) => {
         onClicked: action,
         setup: setupCursorHover,
     })
-    const colorIndicator = Box({
-        className: `sidebar-chat-indicator`,
-    });
     const downloadState = Stack({
         homogeneous: false,
         transition: 'slide_up_down',
@@ -139,7 +137,7 @@ const WaifuImage = (taglist) => {
     });
     const blockHeading = Box({
         hpack: 'fill',
-        className: 'sidebar-waifu-content spacing-h-5',
+        className: 'spacing-h-5',
         children: [
             ...taglist.map((tag) => CommandButton(tag)),
             Box({ hexpand: true }),
@@ -248,14 +246,10 @@ const WaifuImage = (taglist) => {
                 else Utils.execAsync(['bash', '-c', `wget -O '${thisBlock.attribute.imagePath}' '${url}'`])
                     .then(showImage)
                     .catch(print);
-                blockHeading.get_children().forEach((child) => {
+                thisBlock.css = `background-color: mix(${darkMode ? 'black' : 'white'}, ${dominant_color}, 0.9);`;
-                    child.setCss(`border-color: ${dominant_color};`);
-                })
-                colorIndicator.css = `background-color: ${dominant_color};`;
             },
         },
         children: [
-            colorIndicator,
             Box({
                 vertical: true,
                 className: 'spacing-v-5',

.config/ags/scss/_common.scss

@@ -29,8 +29,8 @@
 menu {
     @include elevation-border-softer;
     padding: 0.681rem;
-    background: $surfaceVariant;
+    background: $layer2;
-    color: $onSurfaceVariant;
+    color: $onLayer2;
     border-radius: 1.159rem;
     -gtk-outline-radius: 1.159rem;
 

.config/ags/scss/_sidebars.scss

@@ -2,8 +2,6 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
 $textboxColor: mix($surface, $surfaceVariant, 80%);
 $system: $secondary;
 $onSystem: $onSecondary;
-$chatgpt: $primary;
-$onChatgpt: $onPrimary;
 
 @mixin group-padding {
     padding: 0.341rem;
@@ -596,32 +594,47 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-message {
     margin: 0.682rem;
+    @include normal-rounding;
+    @include group-padding;
+    background-color: $layer1;
 }
 
 .sidebar-chat-indicator {
     @include element_decel;
     @include full-rounding;
     min-width: 0.136rem;
+}
+
+.sidebar-chat-indicator-waifu {
+    @include element_decel;
+    @include full-rounding;
+    min-width: 0.136rem;
     background-color: $onBackground;
 }
 
-.sidebar-chat-indicator-user {
-    background-color: $onBackground;
-}
-
-.sidebar-chat-indicator-bot {
-    background-color: $chatgpt;
-}
-
-.sidebar-chat-indicator-System {
-    background-color: $system;
-}
-
 .sidebar-chat-name {
     @include titlefont;
-    padding: 0.341rem;
+    @include small-rounding;
-    margin-left: -0.136rem;
+    padding: 0.341rem 0.818rem;
-    padding-left: 0.818rem;
+    margin: 0.341rem;
+    // margin-left: 0rem;
+    background-color: $layer2;
+    color: $onLayer2;
+}
+
+.sidebar-chat-name-user {
+    background-color: $layer2;
+    color: $onLayer2;
+}
+
+.sidebar-chat-name-bot {
+    background-color: $secondary;
+    color: $onSecondary;
+}
+
+.sidebar-chat-name-system {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
 }
 
 .sidebar-chat-txtblock {
@@ -808,17 +821,11 @@ $colorpicker_rounding: 0.341rem;
     padding-left: 0.818rem;
 }
 
-.sidebar-waifu-content {
-    margin-left: 0.682rem;
-}
-
 .sidebar-waifu-txt {
     @include readingfont;
-    margin-left: 0.682rem;
 }
 
 .sidebar-waifu-image {
-    margin-left: 0.682rem;
     @include normal-rounding;
     background-size: cover;
     background-repeat: no-repeat;
@@ -850,6 +857,10 @@ $waifu_image_overlay_transparency: 0.7;
     background-color: rgba(60, 60, 60, $waifu_image_overlay_transparency);
 }
 
+.sidebar-booru-imagegrid {
+    @include normal-rounding;
+}
+
 .sidebar-booru-image {
     @include small-rounding;
     margin: 0.273rem;