booru: improve styling; add action buttons

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

@@ -102,7 +102,6 @@ const BooruPage = (taglist) => {
     const PageState = (icon, name) => Box({
         className: 'spacing-h-5 txt',
         children: [
-            Box({ hexpand: true }),
             Label({
                 className: 'sidebar-waifu-txt txt-smallie',
                 xalign: 0,
@@ -119,15 +118,35 @@ const BooruPage = (taglist) => {
         setup: setupCursorHover,
     })
     const PreviewImage = (data) => {
-        return Box({
+        return Overlay({
-            className: 'sidebar-booru-image',
+            child: Box({
-            // css: 'border: 2px solid white;',
+                className: 'sidebar-booru-image',
-            css: `background-image: url('${data.preview_url}');`,
+                css: `background-image: url('${data.preview_url}');`,
-            // setup: (self) => {
+                // setup: (self) => {
                 // Utils.timeout(1000, () => {
                 //     self.css = `background-image: url('${data.preview_url}');`;
                 // })
-            // }
+                // }
+            }),
+            overlays: [
+                Box({
+                    vpack: 'start',
+                    className: 'sidebar-booru-image-actions spacing-h-3',
+                    children: [
+                        Box({ hexpand: true }),
+                        ImageAction({
+                            name: 'Go to file url',
+                            icon: 'file_open',
+                            action: () => execAsync(['xdg-open', `${data.file_url}`]).catch(print),
+                        }),
+                        ImageAction({
+                            name: 'Go to source',
+                            icon: 'open_in_new',
+                            action: () => execAsync(['xdg-open', `${data.source}`]).catch(print),
+                        }),
+                    ]
+                })
+            ]
         })
     }
     const colorIndicator = Box({
@@ -151,11 +170,21 @@ const BooruPage = (taglist) => {
         child: downloadState,
     });
     const pageHeading = Box({
-        hpack: 'fill',
+        homogeneous: false,
-        className: 'sidebar-waifu-content spacing-h-5',
         children: [
-            ...taglist.map((tag) => CommandButton(tag)),
+            Scrollable({
-            Box({ hexpand: true }),
+                hexpand: true,
+                vscroll: 'never',
+                hscroll: 'automatic',
+                child: Box({
+                    hpack: 'fill',
+                    className: 'sidebar-waifu-content spacing-h-5',
+                    children: [
+                        ...taglist.map((tag) => CommandButton(tag)),
+                        Box({ hexpand: true }),
+                    ]
+                })
+            }),
             downloadIndicator,
         ]
     });
@@ -219,7 +248,7 @@ const BooruPage = (taglist) => {
                 // Add stuff
                 for (let i = 0; i < imageRows; i++) {
                     for (let j = 0; j < imageColumns; j++) {
-                        if (i * imageColumns + j >= 8) break;
+                        if (i * imageColumns + j >= userOptions.sidebar.imageBooruCount) break;
                         // if (i * imageColumns + j >= data.length) break;
                         pageImageGrid.attach(PreviewImage(data[i * imageColumns + j]), j, i, 1, 1);
                     }

.config/ags/scss/_sidebars.scss

@@ -638,9 +638,11 @@ $colorpicker_rounding: 0.341rem;
     @include small-rounding;
     margin: 0rem 0.682rem;
     padding: 0.682rem;
+
     @if $darkmode ==true {
         background-color: white;
     }
+
     color: $onBackground;
     // background-color: $termbg;
 }
@@ -849,9 +851,16 @@ $waifu_image_overlay_transparency: 0.7;
 }
 
 .sidebar-booru-image {
+    @include small-rounding;
+    margin: 0.273rem;
     min-width: 12.818rem;
     min-height: 12.818rem;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+}
+
+.sidebar-booru-image-actions {
+    @include element_decel;
+    margin: 0.545rem;
 }

.config/ags/services/booru.js

@@ -82,7 +82,6 @@ class BooruService extends Service {
             'tags': taglist.join('+'),
         };
         const paramString = paramStringFromObj(params);
-        console.log('==========PARAMS LIST\n', params, '\n============\nSTR\n', paramString)
         // Fetch
         // Note: body isn't included since passing directly to url is more reliable
         const options = {
@@ -97,8 +96,11 @@ class BooruService extends Service {
             })
             .then((dataString) => { // Store interesting stuff and emit
                 const parsedData = JSON.parse(dataString);
+                // console.log(parsedData)
                 this._responses.push(parsedData.map(obj => {
                     return {
+                        id: obj.id,
+                        tags: obj.tags,
                         md5: obj.md5,
                         preview_url: obj.preview_url,
                         preview_width: obj.preview_width,
@@ -106,6 +108,10 @@ class BooruService extends Service {
                         sample_url: obj.sample_url,
                         sample_width: obj.sample_width,
                         sample_height: obj.sample_height,
+                        file_url: obj.file_url,
+                        file_ext: obj.file_ext,
+                        file_width: obj.file_width,
+                        file_height: obj.file_height,
                         source: getWorkingImageSauce(obj.source),
                     }
                 }));