v0.15.2

- fix: Searchbar select filter tag from selection list should make user easy to continue edit the tag.
- new: User now can use key '-' and '=' to resize posts grid.
- add: Searchbar hotkey '/' hint appear in the searchbar button.

Author: defaultkavy

client/index.scss

@@ -29,6 +29,7 @@
     --nav-height: 50px;
 }
 html {
+    overflow-y: scroll;
     overflow-x: hidden;
     font-size: 14px;
     scroll-behavior: smooth;

client/src/component/$NavigationBar.ts

@@ -3,7 +3,6 @@ import { $Container } from "elexis";
 import { Booru } from "../structure/Booru";
 import { $Searchbar } from "./Searchbar/$Searchbar";
 import { $Drawer } from "./Drawer/$Drawer";
-import { LocalSettings } from "../structure/LocalSettings";
 import { $DetailPanel } from "./DetailPanel/$DetailPanel";
 
 export class $NavigationBar extends $Container {
@@ -26,7 +25,10 @@ export class $NavigationBar extends $Container {
           ])
         ]),
         // Searchbar
-        $('div').class('searchbar').content(['Search in ', Booru.name$])
+        $('div').css({ position: 'relative' }).class('searchbar').content([
+          `Search in ${Booru.name$}`,
+          $('span').css({ position: 'absolute', right: '0.4rem', top: '0.3rem', border: '1px solid var(--secondary-color-4)', padding: '0rem 0.4rem 0.1rem', borderRadius: '0.4rem', color: 'var(--secondary-color-4)' }).content('/')
+        ])
           .self($self => $Router.events.on('stateChange', ({beforeURL, afterURL}) => {if (beforeURL.hash === '#search') $self.hide(false); if (afterURL.hash === '#search') $self.hide(true)}))
           .on('click', () => $Searchbar.$ele.open()),
         // Buttons

client/src/component/PostGrid/$PostGrid.ts

@@ -4,6 +4,8 @@ import { Post } from "../../structure/Post";
 import { $PostTile } from "../PostTile/$PostTile";
 import { $Input } from "elexis/lib/node/$Input";
 import { PostManager } from "../../structure/PostManager";
+import { LocalSettings } from "../../structure/LocalSettings";
+import { $Notify } from "../$Notify";
 
 interface $PostGridOptions {
     tags?: string
@@ -65,6 +67,8 @@ export class $PostGrid extends $Layout {
                 if (focused instanceof $PostTile) $.open(focused.url);
             })
             .keydown(['Escape'], e => { e.preventDefault(); this.$focus.blur(); })
+            .keydown(['='], e => { e.preventDefault(); LocalSettings.columnSize$.set(state$ => state$.value + 1); this.resize(); $Notify.push(`The delta of post grid column number set to ${LocalSettings.columnSize$.value}`) })
+            .keydown(['-'], e => { e.preventDefault(); LocalSettings.columnSize$.set(state$ => state$.value - 1); this.resize(); $Notify.push(`The delta of post grid column number set to ${LocalSettings.columnSize$.value}`) })
     }
 
     protected async loader() {
@@ -81,7 +85,8 @@ export class $PostGrid extends $Layout {
     }
 
     protected resize() {
-        const col = Math.round(this.dom.clientWidth / 300);
+        
+        const col = Math.round(this.dom.clientWidth / 300) + LocalSettings.columnSize$.value;
         this.column(col >= 2 ? col : 2);
     }
 

client/src/component/Searchbar/$TagInput.ts

@@ -36,6 +36,7 @@ export class $TagInput extends $Container {
         this.value('');
         if (this.$input.inDOM()) this.$inputor.replace($tag);
         else this.insert($tag);
+        if (tagName.endsWith(':')) this.editTag($tag);
         return this;
     }
 

client/src/structure/LocalSettings.ts

@@ -10,9 +10,12 @@ export class LocalSettings {
 
     static get localdata() { const data = localStorage.getItem('local_settings_data'); return data ? JSON.parse(data) as LocalSettingsStoreData : null }
     static set localdata(data: LocalSettingsStoreData | null) { localStorage.setItem('local_settings_data', JSON.stringify(data)) }
+
+    static columnSize$ = $.state(this.localdata?.columnSizeDelta ?? 0).on('update', state$ => this.localdata = {...this.localdata, columnSizeDelta: state$.value})
 }
 
 export interface LocalSettingsStoreData {
     detailPanelEnabled?: boolean;
     previewPanelEnabled?: boolean;
+    columnSizeDelta?: number;
 }

package.json

@@ -2,7 +2,7 @@
   "name": "danbooru-viewer",
   "module": "index.ts",
   "type": "module",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "license": "MIT",
   "author": {
     "email": "[email protected]",