Allow toggling tags in fullscreen on/off, fixing long tags lists

src/content/components/extension/FullscreenViewer.ts

@@ -19,6 +19,7 @@ export class FullscreenViewer extends BaseComponent {
   #tagsPopupElement: HTMLElement = document.createElement('div');
   #imageTagsToggler: TagsListToggler = TagsListToggler.create();
   #profileTagsToggler: TagsListToggler = TagsListToggler.create();
+  #tagsPopupHider: HTMLElement = document.createElement('div');
   #activeProfileListenerUnsubscriber: UnsubscribeFunction | null = null;
   #touchId: number | null = null;
   #startX: number | null = null;
@@ -32,12 +33,23 @@ export class FullscreenViewer extends BaseComponent {
     this.#imageTagsToggler.initialize();
     this.#profileTagsToggler.initialize();
 
-    this.#tagsPopupElement.append(
+    const overflowContainer = document.createElement('div');
+    overflowContainer.classList.add('tags-panel__scroller');
+
+    overflowContainer.append(
       this.#profileTagsToggler.container,
       document.createElement('hr'),
       this.#imageTagsToggler.container,
     );
 
+    this.#tagsPopupElement.append(
+      this.#tagsPopupHider,
+      overflowContainer,
+    );
+
+    this.#tagsPopupHider.classList.add('tags-panel__toggle');
+    this.#tagsPopupHider.textContent = 'Toggle Tags';
+
     this.#tagsPopupElement.classList.add('tags-panel');
 
     this.container.append(
@@ -75,12 +87,17 @@ export class FullscreenViewer extends BaseComponent {
     this.#imageElement.addEventListener('load', this.#onLoaded.bind(this));
     this.#sizeSelectorElement.addEventListener('click', event => event.stopPropagation());
     this.#tagsPopupElement.addEventListener('click', event => event.stopPropagation());
+    this.#tagsPopupHider.addEventListener('click', () => this.#togglePopupVisibility());
 
     FullscreenViewer.#preferences
       .fullscreenViewerSize.get()
       .then(this.#onSizeResolved.bind(this))
       .then(this.#watchForSizeSelectionChanges.bind(this));
 
+    FullscreenViewer.#preferences
+      .fullscreenViewerPopupShown.get()
+      .then(this.#togglePopupVisibility.bind(this));
+
     on(this.#profileTagsToggler, EVENT_TAG_TOGGLED, this.#onTagToggled.bind(this));
     on(this.#imageTagsToggler, EVENT_TAG_TOGGLED, this.#onTagToggled.bind(this));
   }
@@ -394,6 +411,16 @@ export class FullscreenViewer extends BaseComponent {
     this.#onActiveProfileChanged(taggingPopup.activeProfile);
   }
 
+  #togglePopupVisibility(maybeState: boolean | undefined = undefined) {
+    if (typeof maybeState === 'undefined') {
+      const isHidden = this.#tagsPopupElement.classList.toggle(FullscreenViewer.#collapsedPopupState);
+      void FullscreenViewer.#preferences.fullscreenViewerPopupShown.set(!isHidden);
+      return;
+    }
+
+    this.#tagsPopupElement.classList.toggle(FullscreenViewer.#collapsedPopupState, !maybeState);
+  }
+
   static #isVideoUrl(url: string): boolean {
     return url.endsWith('.mp4') || url.endsWith('.webm');
   }
@@ -405,6 +432,7 @@ export class FullscreenViewer extends BaseComponent {
   static #shownState = 'shown';
   static #swipeState = 'swiped';
   static #minRequiredDistance = 50;
+  static #collapsedPopupState = 'is-collapsed';
 
   static #previewSizes: Record<FullscreenViewerSize, string> = {
     full: 'Full',

src/lib/extension/preferences/MiscPreferences.ts

@@ -8,6 +8,7 @@ export type FullscreenViewerSize = keyof App.ImageURIs;
 interface MiscPreferencesFields {
   fullscreenViewer: boolean;
   fullscreenViewerSize: FullscreenViewerSize;
+  fullscreenViewerPopupShown: boolean;
 }
 
 export default class MiscPreferences extends CacheablePreferences<MiscPreferencesFields> implements WithFields<MiscPreferencesFields> {
@@ -24,4 +25,9 @@ export default class MiscPreferences extends CacheablePreferences<MiscPreference
     field: "fullscreenViewerSize",
     defaultValue: "large",
   });
+
+  readonly fullscreenViewerPopupShown = new PreferenceField(this, {
+    field: "fullscreenViewerPopupShown",
+    defaultValue: true,
+  });
 }

src/styles/booru-vars.scss

@@ -5,6 +5,11 @@ $padding-small: var(--padding-small);
 $padding-normal: var(--padding-normal);
 $padding-large: var(--padding-large);
 $block-spacing: var(--block-spacing);
+$block-header-light-color: var(--block-header-light-color);
+$block-header-link-text-color: var(--block-header-link-text-color);
+$border: var(--border);
+$header-spacing: var(--header-spacing);
+$block-header-sub-height: var(--block-header-sub-height);
 
 // These variables are defined dynamically based on the category of the tag
 $resolved-tag-background: var(--tag-background);

src/styles/content/listing.scss

@@ -262,20 +262,46 @@
   .tags-panel {
     @extend %box;
 
+    display: flex;
+    z-index: 1;
     width: 96vw;
     max-width: booru-vars.$limited-layout-width;
+    max-height: 50vh;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     margin-left: auto;
     margin-right: auto;
+    transition: transform .25s ease-in-out;
     border: {
       top: booru-vars.$media-border;
       left: booru-vars.$media-border;
       right: booru-vars.$media-border;
     }
 
+    &__toggle {
+      position: absolute;
+      left: -1px;
+      bottom: calc(100% + 1px);
+      border: booru-vars.$border;
+      background: booru-vars.$block-header-light-color;
+      color: booru-vars.$block-header-link-text-color;
+      font-weight: 700;
+      padding: 0 calc(#{booru-vars.$header-spacing} * .5);
+      line-height: booru-vars.$block-header-sub-height;
+      cursor: pointer;
+    }
+
+    &__scroller {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    &.is-collapsed {
+      transform: translateY(100%);
+    }
+
     .tags-list {
       @extend %tags-list;