booru: advise to enter a number if no tag in mind, alignment adjustments

.config/ags/i18n/locales/Default.json

@@ -43,6 +43,8 @@
     "Message the model...": "Message the model...",
     "Enter API Key...": "Enter API Key...",
     "Enter tags": "Enter tags",
+    "Enter tags and/or page number": "Enter tags and/or page number",
+    "No tag in mind? Type a page number": "No tag in mind? Type a page number",
     "Quick scripts": "Quick scripts",
     "Change screen resolution": "Change screen resolution",
     "Update packages": "Update packages",

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

@@ -136,7 +136,7 @@ const booruWelcome = Box({
 
 const BooruPage = (taglist, serviceName = 'Booru') => {
     const PageState = (icon, name) => Box({
-        className: 'spacing-h-5 txt',
+        className: 'spacing-h-5 txt margin-right-5',
         children: [
             Label({
                 className: 'sidebar-waifu-txt txt-smallie',
@@ -304,6 +304,7 @@ const BooruPage = (taglist, serviceName = 'Booru') => {
                 ]
             }),
             Box({
+                className: 'margin-5',
                 children: [
                     Scrollable({
                         hexpand: true,
@@ -327,11 +328,38 @@ const BooruPage = (taglist, serviceName = 'Booru') => {
         homogeneous: true,
         className: 'sidebar-booru-imagegrid',
     })
-    const pageImageRevealer = Revealer({
+    const pageTip = Revealer({
+        transition: 'slide_down',
+        transitionDuration: 0,
+        revealChild: false,
+        child: Box({
+            className: 'txt-subtext margin-5',
+            children: [
+                Box({
+                    homogeneous: true,
+                    className: 'sidebar-booru-tip-icon',
+                    children: [MaterialIcon('lightbulb', 'larger')]
+                }),
+                Label({
+                    label: getString("No tag in mind? Type a page number"),
+                    className: 'txt-smallie',
+                    wrap: true,
+                    xalign: 0,
+                })
+            ]
+        })
+    })
+    const pageContentRevealer = Revealer({
         transition: 'slide_down',
         transitionDuration: userOptions.animations.durationLarge,
         revealChild: false,
-        child: pageImages,
+        child: Box({
+            vertical: true,
+            children: [
+                pageImages,
+                pageTip,
+            ]
+        }),
     });
     const thisPage = Box({
         homogeneous: true,
@@ -339,13 +367,20 @@ const BooruPage = (taglist, serviceName = 'Booru') => {
         attribute: {
             'imagePath': '',
             'isNsfw': false,
-            'update': (data, force = false) => { // TODO: Use columns. Sort min to max h/w ratio then greedily put em in...
+            'showContent': () => {
+                Utils.timeout(IMAGE_REVEAL_DELAY,
+                    () => pageContentRevealer.revealChild = true
+                );
+            },
+            'update': (data, force = false) => {
                 // Sort by .aspect_ratio
                 data = data.sort(
                     (a, b) => a.aspect_ratio - b.aspect_ratio
                 );
                 if (data.length == 0) {
+                    pageTip.revealChild = true;
                     downloadState.shown = 'error';
+                    thisPage.attribute.showContent();
                     return;
                 }
                 const imageColumns = userOptions.sidebar.image.columns;
@@ -378,9 +413,7 @@ const BooruPage = (taglist, serviceName = 'Booru') => {
                 pageImages.show_all();
 
                 // Reveal stuff
-                Utils.timeout(IMAGE_REVEAL_DELAY,
+                thisPage.attribute.showContent();
-                    () => pageImageRevealer.revealChild = true
-                );
                 downloadIndicator.attribute.hide();
             },
         },
@@ -390,7 +423,7 @@ const BooruPage = (taglist, serviceName = 'Booru') => {
                 pageHeading,
                 Box({
                     vertical: true,
-                    children: [pageImageRevealer],
+                    children: [pageContentRevealer],
                 })
             ]
         })],
@@ -463,8 +496,9 @@ const booruTags = Revealer({
                 child: Box({
                     className: 'spacing-h-5',
                     children: [
-                        TagButton('( * )'),
                         TagButton('hololive'),
+                        TagButton('yuri'),
+                        TagButton('thighhighs'),
                     ]
                 })
             }),

.config/ags/modules/sideleft/apiwidgets.js

@@ -50,7 +50,7 @@ const APILIST = {
         contentWidget: booruView,
         commandBar: booruCommands,
         tabIcon: booruTabIcon,
-        placeholderText: getString('Enter tags'),
+        placeholderText: getString('Enter tags and/or page number'),
     },
 }
 const APIS = userOptions.sidebar.pages.apis.order.map((apiName) => APILIST[apiName]);

.config/ags/scss/_sidebars.scss

@@ -848,6 +848,7 @@ $waifu_image_overlay_transparency: 0.7;
     @include small-rounding;
     padding: 0.341rem 0.818rem;
     margin: 0.341rem;
+    margin-bottom: 0rem;
     font-weight: bold;
     background-color: $primary;
     color: $onPrimary;
@@ -861,22 +862,24 @@ $waifu_image_overlay_transparency: 0.7;
     @include small-rounding;
     margin: 0.273rem;
     min-width: 11.932rem;
-    // background-color: rgba(100, 200, 0, 0.3);
 }
 
 .sidebar-booru-image-drawingarea {
-    // background-color: rgba(200, 100, 0, 0.3);
     @include small-rounding;
     min-width: 12.273rem;
     min-height: 12.273rem;
 }
 
 .sidebar-booru-image-actions {
-    // background-color: rgba(100, 100, 0, 0.3);
     @include element_decel;
     margin: 0.545rem;
 }
 
+.sidebar-booru-tip-icon {
+    min-width: 2.392rem;
+    min-height: 2.392rem;
+}
+
 .sidebar-volmixer-stream {
     border-bottom: 0.068rem solid $outlineVariant;
     padding: 0.682rem;