From 7e30c63686309cc5e113bca67a87152e374a15a2 Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Fri, 22 Aug 2025 22:10:19 -0600
Subject: [PATCH 1/7] Feature: Differentiate between explicitly assigned,
 inherited, partially assigned, and unassigned tags in the tag selector's
 suggestions.

The checkbox indicator follows these rules:

- Checked: the tag is assigned (explicitly or inherited), and all selected files have the same assignation of that tag.

- Highlighted: the tag is explicitly assigned in at least one of the selected files.
---
 resources/style/controls/combobox.scss     | 10 +++++--
 resources/style/tag-editor.scss            |  9 ------
 src/frontend/components/FileTagsEditor.tsx |  5 ++--
 src/frontend/components/TagSelector.tsx    | 35 ++++++++++++++++------
 widgets/combobox/Grid.tsx                  |  3 ++
 5 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/resources/style/controls/combobox.scss b/resources/style/controls/combobox.scss
index a7d247c9..42d68eb1 100644
--- a/resources/style/controls/combobox.scss
+++ b/resources/style/controls/combobox.scss
@@ -89,17 +89,23 @@
     }
 
     &[aria-selected='false']::before {
-      background-color: var(--text-color-muted);
       mask-image: url(~resources/icons/select-all.svg);
       -webkit-mask-image: url(~resources/icons/select-all.svg);
     }
 
     &[aria-selected='true']::before {
-      background-color: var(--text-color);
       mask-image: url(~resources/icons/select-all-checked.svg);
       -webkit-mask-image: url(~resources/icons/select-all-checked.svg);
     }
 
+    &[data-highlight-check="false"]::before {
+      background-color: var(--text-color-muted);
+    }
+
+    &[data-highlight-check="true"]::before {
+      background-color: var(--text-color);
+    }
+
     &:not([aria-selected])::before {
       display: none;
     }
diff --git a/resources/style/tag-editor.scss b/resources/style/tag-editor.scss
index f507566c..3e0ca52c 100644
--- a/resources/style/tag-editor.scss
+++ b/resources/style/tag-editor.scss
@@ -70,12 +70,3 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-
-[role='row'].tag-option {
-  &:not([aria-selected])::before {
-    display: initial;
-    background-color: var(--text-color-muted);
-    mask-image: url(~resources/icons/select-all-checked.svg);
-    -webkit-mask-image: url(~resources/icons/select-all-checked.svg);
-  }
-}
diff --git a/src/frontend/components/FileTagsEditor.tsx b/src/frontend/components/FileTagsEditor.tsx
index 3b60084e..ac39cee3 100644
--- a/src/frontend/components/FileTagsEditor.tsx
+++ b/src/frontend/components/FileTagsEditor.tsx
@@ -17,6 +17,7 @@ import {
   createGetTabMatchTagCallback,
   createTagRowRenderer,
   GetTabMatchTag,
+  isTagSelected,
   useTabTagAutocomplete,
 } from './TagSelector';
 import { useStore } from '../contexts/StoreContext';
@@ -347,14 +348,14 @@ const MatchingTagsList = observer(
       [resetTextBox],
     );
 
-    const isSelected = useCallback(
+    const isSelected: isTagSelected = useCallback(
       // If all selected files have the tag mark it as selected,
       // else if partially in selected files return undefined, else mark it as not selected.
       (tag: ClientTag) => {
         const tagRecord = counter.get().get(tag);
         const isExplicit = tagRecord?.[1] ?? false;
         const isPartial = tagRecord?.[0] !== uiStore.fileSelection.size;
-        return isExplicit ? (isPartial ? undefined : true) : false;
+        return [tagRecord !== undefined && !isPartial, isExplicit];
       },
       [counter, uiStore],
     );
diff --git a/src/frontend/components/TagSelector.tsx b/src/frontend/components/TagSelector.tsx
index 893e0f9a..46539f47 100644
--- a/src/frontend/components/TagSelector.tsx
+++ b/src/frontend/components/TagSelector.tsx
@@ -431,8 +431,11 @@ const SuggestedTagsList = observer(
       }
     }, [getTabMatchTagRef, suggestions]);
 
-    const isSelected = useCallback(
-      (tag: ClientTag) => selectionMap.get(tag) ?? false,
+    const isSelected: isTagSelected = useCallback(
+      (tag: ClientTag) => {
+        const value = selectionMap.get(tag);
+        return [value !== undefined, value ?? false];
+      },
       [selectionMap],
     );
     const TagRow = useMemo(
@@ -474,9 +477,11 @@ const SuggestedTagsList = observer(
   }),
 );
 
+export type isTagSelected = (tag: ClientTag) => [assigned: boolean, explicit: boolean];
+
 interface VirtualizableTagOption {
   id?: string;
-  isSelected: (tag: ClientTag) => boolean | undefined;
+  isSelected: isTagSelected;
   toggleSelection: (isSelected: boolean, tag: ClientTag) => void;
   onContextMenu?: (e: React.MouseEvent<HTMLElement>, tag: ClientTag) => void;
 }
@@ -489,7 +494,7 @@ export function createTagRowRenderer({
 }: VirtualizableTagOption) {
   const RowRenderer = ({ index, style, data, id: sub_id }: VirtualizedGridRowProps<ClientTag>) => {
     const tag = data[index];
-    const selected = isSelected(tag);
+    const [assigned, explicit] = isSelected(tag);
     return (
       <TagOption
         id={`${id}-${tag.id}-${sub_id}`}
@@ -497,7 +502,8 @@ export function createTagRowRenderer({
         style={style}
         key={tag.id}
         tag={tag}
-        selected={selected}
+        assigned={assigned}
+        explicit={explicit}
         toggleSelection={toggleSelection}
         onContextMenu={onContextMenu}
       />
@@ -510,14 +516,24 @@ interface TagOptionProps {
   id?: string;
   index?: number;
   tag: ClientTag;
-  selected?: boolean;
+  assigned?: boolean;
+  explicit?: boolean;
   style?: React.CSSProperties;
   toggleSelection: (isSelected: boolean, tag: ClientTag) => void;
   onContextMenu?: (e: React.MouseEvent<HTMLElement>, tag: ClientTag) => void;
 }
 
 export const TagOption = observer(
-  ({ id, index, tag, selected, toggleSelection, onContextMenu, style }: TagOptionProps) => {
+  ({
+    id,
+    index,
+    tag,
+    assigned,
+    explicit,
+    toggleSelection,
+    onContextMenu,
+    style,
+  }: TagOptionProps) => {
     const [path, hint] = useComputed(() => {
       const path = tag.path
         .map((v) => (v.startsWith('#') ? '&nbsp;<b>' + v.slice(1) + '</b>&nbsp;' : v))
@@ -534,9 +550,10 @@ export const TagOption = observer(
         id={id}
         index={index}
         value={tag.isHeader ? <b>{tag.matchName}</b> : tag.matchName}
-        selected={selected}
+        selected={assigned}
+        highlightCheck={explicit}
         icon={<span style={{ color: tag.viewColor }}>{IconSet.TAG}</span>}
-        onClick={() => toggleSelection(selected ?? false, tag)}
+        onClick={() => toggleSelection((assigned && explicit) ?? false, tag)}
         tooltip={path}
         onContextMenu={onContextMenu !== undefined ? (e) => onContextMenu(e, tag) : undefined}
         style={style}
diff --git a/widgets/combobox/Grid.tsx b/widgets/combobox/Grid.tsx
index 1c298b90..301ed4fd 100644
--- a/widgets/combobox/Grid.tsx
+++ b/widgets/combobox/Grid.tsx
@@ -407,6 +407,7 @@ export interface RowProps {
   index?: number;
   value: string | JSX.Element;
   selected?: boolean;
+  highlightCheck?: boolean;
   /** The icon on the right side of the label because on the left is the checkmark already. */
   icon?: JSX.Element;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -423,6 +424,7 @@ export const Row = ({
   index,
   value,
   selected,
+  highlightCheck = selected,
   onClick,
   icon,
   tooltip,
@@ -436,6 +438,7 @@ export const Row = ({
     id={id}
     role="row"
     aria-selected={selected}
+    data-highlight-check={highlightCheck}
     onClick={onClick}
     tabIndex={-1} // Important for focus handling!
     data-tooltip={tooltip}

From c93405c6baf3da0973c7e65533b8179b4d1afbb1 Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Sat, 23 Aug 2025 01:01:22 -0600
Subject: [PATCH 2/7] Feature: Allow to select the file name text in gallery
 thumbnails

---
 resources/style/content.scss                        | 4 ++++
 src/frontend/containers/ContentView/GalleryItem.tsx | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/resources/style/content.scss b/resources/style/content.scss
index 50d9326c..ad3b80d1 100644
--- a/resources/style/content.scss
+++ b/resources/style/content.scss
@@ -535,12 +535,16 @@
     &:hover {
       .thumbnail-overlay {
         background-color: rgba(0, 0, 0, .75);
+        // Allow text selection around the name for better ux
+        user-select: text;
 
         &:hover {
           // Expand filename on hover if it was truncated
           > :first-child {
             overflow: inherit;
             text-overflow: inherit;
+            // Allow text selection
+            user-select: text;
           }
         }
       }
diff --git a/src/frontend/containers/ContentView/GalleryItem.tsx b/src/frontend/containers/ContentView/GalleryItem.tsx
index 30b77ab7..be6ec719 100644
--- a/src/frontend/containers/ContentView/GalleryItem.tsx
+++ b/src/frontend/containers/ContentView/GalleryItem.tsx
@@ -350,7 +350,7 @@ const ThumbnailOverlay = ({
   }, ${humanFileSize(file.size)}`;
 
   return (
-    <div className="thumbnail-overlay" data-tooltip={title}>
+    <div className="thumbnail-overlay" data-tooltip={title} tabIndex={-1} onBlur={deselect}>
       {showFilename && (
         <div className="thumbnail-filename" data-tooltip={title}>
           {file.name}
@@ -365,3 +365,10 @@ const ThumbnailOverlay = ({
     </div>
   );
 };
+
+const deselect = () => {
+  const selection = window.getSelection();
+  if (selection) {
+    selection.removeAllRanges();
+  }
+};

From f051285fdf23f82d7499983762db68c3c26118fb Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Sun, 24 Aug 2025 02:52:20 -0600
Subject: [PATCH 3/7] Feature: Automatically add the merged tag name and
 aliases to the selected tag when merging tags.

- Added a checkbox in the merging dialog to toggle this behavior.
---
 .../Outliner/TagsPanel/TagMerge.tsx           | 21 ++++++++++++++++---
 src/frontend/entities/Tag.ts                  |  4 +++-
 src/frontend/stores/TagStore.ts               | 21 ++++++++++++++++++-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx b/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
index 9df6ae70..ccf3ddeb 100644
--- a/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
+++ b/src/frontend/containers/Outliner/TagsPanel/TagMerge.tsx
@@ -1,23 +1,32 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Button, IconSet, Tag } from 'widgets';
+import { Button, Checkbox, IconSet, Tag } from 'widgets';
 import { Dialog } from 'widgets/popovers';
 import { useStore } from '../../../contexts/StoreContext';
 import { ClientTag } from '../../../entities/Tag';
 import { Placement } from '@floating-ui/core';
 import { TagSelector } from 'src/frontend/components/TagSelector';
+import { Menu, MenuCheckboxItem } from 'widgets/menus';
 
 interface TagMergeProps {
   tag: ClientTag;
   onClose: () => void;
 }
 
+const ADD_AS_ALIAS_ID = 'merge-add-as-alias';
 const FALLBACK_PLACEMENTS: Placement[] = ['bottom'];
 
 /** this component is only shown when all tags in the context do not have child-tags */
 export const TagMerge = observer(({ tag, onClose }: TagMergeProps) => {
   const { tagStore, uiStore } = useStore();
+  const [addAsAliasEnabled, setAddAsAlias] = useState(
+    localStorage.getItem(ADD_AS_ALIAS_ID) == 'true',
+  );
+
+  useEffect(() => {
+    localStorage.setItem(ADD_AS_ALIAS_ID, JSON.stringify(addAsAliasEnabled));
+  }, [addAsAliasEnabled]);
 
   const ctxTags = uiStore.getTagContextItems(tag.id);
 
@@ -28,7 +37,7 @@ export const TagMerge = observer(({ tag, onClose }: TagMergeProps) => {
   const merge = () => {
     if (selectedTag !== undefined && !mergingWithSelf) {
       for (const ctxTag of ctxTags) {
-        tagStore.merge(ctxTag, selectedTag);
+        tagStore.merge(ctxTag, selectedTag, addAsAliasEnabled);
       }
       onClose();
     }
@@ -57,6 +66,12 @@ export const TagMerge = observer(({ tag, onClose }: TagMergeProps) => {
             ))}
           </div>
 
+          <br />
+          <MenuCheckboxItem
+            checked={addAsAliasEnabled}
+            onClick={() => setAddAsAlias(!addAsAliasEnabled)}
+            text={'Add merged tag as alias to the selected tag'}
+          />
           <br />
 
           <label className="dialog-label" htmlFor="tag-merge-picker">
diff --git a/src/frontend/entities/Tag.ts b/src/frontend/entities/Tag.ts
index 2ea85967..457d9ff3 100644
--- a/src/frontend/entities/Tag.ts
+++ b/src/frontend/entities/Tag.ts
@@ -359,7 +359,9 @@ export class ClientTag {
   }
 
   @action.bound addAlias(alias: string): void {
-    this.aliases.push(alias);
+    if (!this.aliases.includes(alias)) {
+      this.aliases.push(alias);
+    }
   }
 
   @action.bound setAlias(alias: string, index: number): void {
diff --git a/src/frontend/stores/TagStore.ts b/src/frontend/stores/TagStore.ts
index c06bb974..8b21ffe8 100644
--- a/src/frontend/stores/TagStore.ts
+++ b/src/frontend/stores/TagStore.ts
@@ -211,12 +211,31 @@ class TagStore {
     fileStore.refetch();
   }
 
-  @action.bound async merge(tagToBeRemoved: ClientTag, tagToMergeWith: ClientTag): Promise<void> {
+  @action.bound async merge(
+    tagToBeRemoved: ClientTag,
+    tagToMergeWith: ClientTag,
+    addRemovedAsAliases: boolean = false,
+  ): Promise<void> {
     // not dealing with tags that have subtags
     if (tagToBeRemoved.subTags.length > 0) {
       throw new Error('Merging a tag with sub-tags is currently not supported.');
     }
+    if (addRemovedAsAliases) {
+      tagToMergeWith.addAlias(tagToBeRemoved.name);
+      for (const alias of tagToBeRemoved.aliases) {
+        tagToMergeWith.addAlias(alias);
+      }
+    }
     this.rootStore.uiStore.deselectTag(tagToBeRemoved);
+    // move implied relationships
+    for (const tag of tagToBeRemoved.impliedTags) {
+      tagToMergeWith.addImpliedTag(tag);
+      tagToBeRemoved.removeImpliedTag(tag);
+    }
+    for (const tag of tagToBeRemoved.impliedByTags) {
+      tagToMergeWith.addImpliedByTag(tag);
+      tagToBeRemoved.removeImpliedByTag(tag);
+    }
     this.tagGraph.delete(tagToBeRemoved.id);
     tagToBeRemoved.parent.subTags.remove(tagToBeRemoved);
     await this.backend.mergeTags(tagToBeRemoved.id, tagToMergeWith.id);

From e40c4f9ee3c1779bfa9074e42bbe65e4d987b0b4 Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Sun, 24 Aug 2025 05:02:39 -0600
Subject: [PATCH 4/7] Feature: Add context menu options for files to import
 tags from metadata, export tags to metadata, and clear tags.

---
 src/frontend/components/Toaster.tsx           | 26 ++++++++++++--
 .../containers/ContentView/menu-items.tsx     | 35 +++++++++++++++++--
 src/frontend/stores/FileStore.ts              | 26 ++++++++++----
 3 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/frontend/components/Toaster.tsx b/src/frontend/components/Toaster.tsx
index cb93d9b3..e694bcb8 100644
--- a/src/frontend/components/Toaster.tsx
+++ b/src/frontend/components/Toaster.tsx
@@ -1,6 +1,6 @@
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Button } from 'widgets/button';
 import { Toast } from 'widgets/notifications';
@@ -87,8 +87,30 @@ export const Toaster = observer(() => (
 ));
 
 const SavingIndicator = observer(() => {
+  const [isInLayout, setIsInLayout] = useState(false);
   const {
     fileStore: { isSaving },
   } = useStore();
-  return <>{isSaving && <div className="saving-indicator"></div>}</>;
+
+  // Remove from layout with a delay to avoid annoying layout jumps in toasts
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => {
+        setIsInLayout(isSaving);
+      },
+      isSaving ? 0 : 800,
+    );
+    return () => clearTimeout(timeout);
+  }, [isSaving]);
+
+  return (
+    <>
+      {isInLayout && (
+        <div
+          className="saving-indicator"
+          style={isSaving ? undefined : { visibility: 'hidden' }}
+        ></div>
+      )}
+    </>
+  );
 });
diff --git a/src/frontend/containers/ContentView/menu-items.tsx b/src/frontend/containers/ContentView/menu-items.tsx
index f2ed2ae7..5801aad1 100644
--- a/src/frontend/containers/ContentView/menu-items.tsx
+++ b/src/frontend/containers/ContentView/menu-items.tsx
@@ -19,6 +19,7 @@ import { LocationTreeItemRevealer } from '../Outliner/LocationsPanel';
 import { TagsTreeItemRevealer } from '../Outliner/TagsPanel/TagsTree';
 import { ClientExtraProperty } from 'src/frontend/entities/ExtraProperty';
 import { isFileExtensionVideo } from 'common/fs';
+import { runInAction } from 'mobx';
 
 export const MissingFileMenuItems = observer(() => {
   const { uiStore, fileStore } = useStore();
@@ -37,7 +38,16 @@ export const MissingFileMenuItems = observer(() => {
 });
 
 export const FileViewerMenuItems = ({ file }: { file: ClientFile }) => {
-  const { uiStore, locationStore } = useStore();
+  const { uiStore, locationStore, fileStore } = useStore();
+
+  const handleClearSelectedFileTags = () => {
+    // Currently copy tags to clipboard as backup in case of error by the user
+    // ToDo: add a confirm dialog?
+    uiStore.copyTagsToClipboard();
+    runInAction(() => {
+      uiStore.fileSelection.forEach((f) => f.clearTags());
+    });
+  };
 
   const handleViewFullSize = () => {
     uiStore.selectFile(file, true);
@@ -81,7 +91,28 @@ export const FileViewerMenuItems = ({ file }: { file: ClientFile }) => {
         text="Open In Preview Window"
         icon={IconSet.PREVIEW}
       />
-      <MenuItem onClick={uiStore.openFileTagsEditor} text="Open Tag Selector" icon={IconSet.TAG} />
+      <MenuSubItem text="Tagging..." icon={IconSet.TAG_ADD}>
+        <MenuItem
+          onClick={uiStore.openFileTagsEditor}
+          text="Open Tag Selector"
+          icon={IconSet.TAG}
+        />
+        <MenuItem
+          onClick={fileStore.readTagsFromSelectedFiles}
+          text="Import Tags From Selected Files Metadata"
+          icon={IconSet.TAG_ADD}
+        />
+        <MenuItem
+          onClick={fileStore.writeTagsToSelectedFiles}
+          text="Overwrite Tags in Selected Files Metadata"
+          icon={IconSet.WARNING}
+        />
+        <MenuItem
+          onClick={handleClearSelectedFileTags}
+          text="Clear Selected Files Tags (and copy tags)"
+          icon={IconSet.TAG_BLANCO}
+        />
+      </MenuSubItem>
       <MenuItem onClick={uiStore.copyTagsToClipboard} text="Copy Tags" icon={IconSet.TAG_GROUP} />
       <MenuItem
         onClick={uiStore.pasteTags}
diff --git a/src/frontend/stores/FileStore.ts b/src/frontend/stores/FileStore.ts
index b2595e84..d4de18e4 100644
--- a/src/frontend/stores/FileStore.ts
+++ b/src/frontend/stores/FileStore.ts
@@ -107,10 +107,17 @@ class FileStore {
     // reaction to keep updated properties "related" to fileList
   }
 
-  @action.bound async readTagsFromFiles(): Promise<void> {
+  @action.bound async readTagsFromSelectedFiles(): Promise<void> {
+    return this.readTagsFromFiles(undefined, true);
+  }
+
+  @action.bound async readTagsFromFiles(_?: React.MouseEvent, onlySelected = false): Promise<void> {
     const toastKey = 'read-tags-from-file';
     try {
-      const numFiles = this.fileList.length;
+      const files = onlySelected
+        ? Array.from(this.rootStore.uiStore.fileSelection)
+        : this.fileList.slice();
+      const numFiles = files.length;
       for (let i = 0; i < numFiles; i++) {
         AppToaster.show(
           {
@@ -119,7 +126,7 @@ class FileStore {
           },
           toastKey,
         );
-        const file = runInAction(() => this.fileList[i]);
+        const file = files[i];
         if (!file) {
           continue;
         }
@@ -200,12 +207,19 @@ class FileStore {
     }
   }
 
-  @action.bound async writeTagsToFiles(): Promise<void> {
+  @action.bound async writeTagsToSelectedFiles(): Promise<void> {
+    return this.writeTagsToFiles(undefined, true);
+  }
+
+  @action.bound async writeTagsToFiles(_?: React.MouseEvent, onlySelected = false): Promise<void> {
     const toastKey = 'write-tags-to-file';
     try {
-      const numFiles = this.fileList.length;
+      const files = onlySelected
+        ? Array.from(this.rootStore.uiStore.fileSelection)
+        : this.definedFiles.slice();
+      const numFiles = files.length;
       const fileTagsProps = runInAction(() =>
-        this.definedFiles.map((f) => {
+        files.map((f) => {
           const extraProps: Record<string, ExtraPropertyValue> = {};
           for (const [ep, value] of f.extraProperties) {
             extraProps[ep.name] = value;

From aa2aac0d8d962c3af14ae41bf402118c585f7c3c Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Sat, 6 Sep 2025 15:33:54 -0600
Subject: [PATCH 5/7] Fix bug where the masonry worker did not update correctly
 after a fetch from an empty view.

Changed: Clearing the search criteria using the clear button no longer triggers a refetch.
---
 .../containers/ContentView/Masonry/MasonryWorkerAdapter.tsx   | 4 ++--
 src/frontend/stores/UiStore.ts                                | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/containers/ContentView/Masonry/MasonryWorkerAdapter.tsx b/src/frontend/containers/ContentView/Masonry/MasonryWorkerAdapter.tsx
index b510c4d9..603d6a5f 100644
--- a/src/frontend/containers/ContentView/Masonry/MasonryWorkerAdapter.tsx
+++ b/src/frontend/containers/ContentView/Masonry/MasonryWorkerAdapter.tsx
@@ -24,12 +24,12 @@ export class MasonryWorkerAdapter implements Layouter {
   private prevNumImgs: number = 0;
 
   async initialize(numItems: number) {
-    this.prevNumImgs = numItems;
-
     if (this.memory !== undefined && this.worker !== undefined) {
       return;
     }
 
+    this.prevNumImgs = numItems;
+
     console.debug('initializing masonry worker...');
     const wasm = await init();
     this.memory = wasm.memory;
diff --git a/src/frontend/stores/UiStore.ts b/src/frontend/stores/UiStore.ts
index 89ced40a..0c0576f0 100644
--- a/src/frontend/stores/UiStore.ts
+++ b/src/frontend/stores/UiStore.ts
@@ -1075,7 +1075,7 @@ class UiStore {
     if (this.searchCriteriaList.length > 0) {
       this.searchCriteriaList.forEach((c) => c.dispose());
       this.searchCriteriaList.clear();
-      this.viewAllContent();
+      //this.viewAllContent();
     }
   }
 

From 33c2740ba02388234d294473ca42115d2ef774f1 Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Sun, 7 Sep 2025 02:34:23 -0600
Subject: [PATCH 6/7] Optimized large selections and tag summaries rendering in
 thumbnails and the file tags editor using incremental rendering.

---
 src/frontend/components/FileTagsEditor.tsx    | 111 +++++++++++++++---
 .../containers/ContentView/GalleryItem.tsx    |  15 ++-
 widgets/tag.tsx                               |   4 +-
 3 files changed, 103 insertions(+), 27 deletions(-)

diff --git a/src/frontend/components/FileTagsEditor.tsx b/src/frontend/components/FileTagsEditor.tsx
index ac39cee3..3966fa8e 100644
--- a/src/frontend/components/FileTagsEditor.tsx
+++ b/src/frontend/components/FileTagsEditor.tsx
@@ -1,6 +1,14 @@
 import { action, computed, IComputedValue, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { ForwardedRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { debounce } from 'common/timeout';
 import { Tag } from 'widgets';
@@ -51,14 +59,15 @@ export const FileTagsEditor = observer(() => {
   }, [debounceSetDebQuery, inputText]);
 
   const counter = useComputed(() => {
-    const fileSelection = uiStore.fileSelection;
+    const fileSelection = Array.from(uiStore.fileSelection);
+    const isTooMany = fileSelection.length > 1000;
     // Count how often tags are used // Aded last bool value indicating if is an explicit tag -> should show delete button;
     const counter = new Map<ClientTag, [number, boolean]>();
     for (const file of fileSelection) {
       const explicitTags = file.tags;
-      const inheritedTags = file.inheritedTags;
-      for (let j = 0; j < inheritedTags.length; j++) {
-        const tag = inheritedTags[j];
+      // Compute inherited tags only when the selection is not too large to avoid UI blocking
+      const inheritedTags = isTooMany ? [] : file.inheritedTags;
+      for (const tag of isTooMany ? explicitTags : inheritedTags) {
         const counterEntry = counter.get(tag);
         if (counterEntry) {
           counterEntry[0]++;
@@ -470,7 +479,6 @@ interface TagSummaryProps {
 
 const TagSummary = observer(({ counter, removeTag, onContextMenu }: TagSummaryProps) => {
   const { uiStore } = useStore();
-
   const sortedTags: ClientTag[] = Array.from(counter.get().entries())
     // Sort based on count
     .sort((a, b) => b[1][0] - a[1][0])
@@ -478,22 +486,89 @@ const TagSummary = observer(({ counter, removeTag, onContextMenu }: TagSummaryPr
 
   return (
     <div className="config-scrollbar" onMouseDown={(e) => e.preventDefault()}>
-      {sortedTags.map((t) => (
+      <IncrementalTagItems
+        tags={sortedTags}
+        counter={counter}
+        removeTag={removeTag}
+        onContextMenu={onContextMenu}
+        chunkSize={uiStore.fileSelection.size > 1 ? 5 : 100}
+      />
+      {sortedTags.length === 0 && <i><b>No tags added yet</b></i> // eslint-disable-line prettier/prettier
+      }
+    </div>
+  );
+});
+
+interface IncrementalTagItemsProps {
+  tags: ClientTag[];
+  counter?: IComputedValue<Map<ClientTag, [number, boolean]>>;
+  removeTag?: (tag: ClientTag) => void;
+  onContextMenu?: (e: React.MouseEvent<HTMLElement>, tag: ClientTag) => void;
+  chunkSize?: number;
+}
+
+export const IncrementalTagItems = observer((props: IncrementalTagItemsProps) => {
+  const { uiStore } = useStore();
+  const isMultiSelection = uiStore.fileSelection.size > 1;
+  const { tags, counter, removeTag, onContextMenu, chunkSize = 5 } = props;
+
+  const [visibleTags, setVisibleTags] = useState<ClientTag[]>([]);
+
+  useLayoutEffect(() => {
+    let index = 0;
+    let cancel = false;
+    setVisibleTags([]);
+
+    const step = () => {
+      if (cancel) {
+        return;
+      }
+      const start = index;
+      const end = Math.min(start + chunkSize, tags.length);
+      if (end > start) {
+        setVisibleTags((prev) => [...prev, ...tags.slice(start, end)]);
+        index = end;
+      }
+      if (index < tags.length) {
+        requestAnimationFrame(step);
+      }
+    };
+
+    step();
+
+    return () => {
+      cancel = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tags]);
+
+  const RenderTag = useMemo(
+    () =>
+      observer(({ tag }: { tag: ClientTag }) => (
         <Tag
-          key={t.id}
-          text={`${t.name}${
-            uiStore.fileSelection.size > 1 ? ` (${counter.get().get(t)?.[0]})` : ''
+          text={`${tag.name}${
+            counter && isMultiSelection ? ` (${counter.get().get(tag)?.[0]})` : ''
           }`}
-          color={t.viewColor}
-          isHeader={t.isHeader}
-          //Only show remove button in those tags that are actually assigned to the file(s) and not only inherited
-          onRemove={counter.get().get(t)?.[1] ? () => removeTag(t) : undefined}
-          onContextMenu={onContextMenu !== undefined ? (e) => onContextMenu(e, t) : undefined}
+          color={tag.viewColor}
+          isHeader={tag.isHeader}
+          tooltip={tag.path
+            .map((v) => (v.startsWith('#') ? '&nbsp;<b>' + v.slice(1) + '</b>&nbsp;' : v))
+            .join(' › ')}
+          onRemove={
+            counter && removeTag && counter.get().get(tag)?.[1] ? () => removeTag(tag) : undefined
+          }
+          onContextMenu={onContextMenu ? (e) => onContextMenu(e, tag) : undefined}
         />
+      )),
+    [counter, isMultiSelection, onContextMenu, removeTag],
+  );
+
+  return (
+    <>
+      {visibleTags.map((t) => (
+        <RenderTag key={t.id} tag={t} />
       ))}
-      {sortedTags.length === 0 && <i><b>No tags added yet</b></i> // eslint-disable-line prettier/prettier
-      }
-    </div>
+    </>
   );
 });
 
diff --git a/src/frontend/containers/ContentView/GalleryItem.tsx b/src/frontend/containers/ContentView/GalleryItem.tsx
index be6ec719..0dfec052 100644
--- a/src/frontend/containers/ContentView/GalleryItem.tsx
+++ b/src/frontend/containers/ContentView/GalleryItem.tsx
@@ -5,15 +5,15 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { ellipsize, humanFileSize } from 'common/fmt';
 import { encodeFilePath, isFileExtensionVideo } from 'common/fs';
-import { IconButton, IconSet, Tag } from 'widgets';
+import { IconButton, IconSet } from 'widgets';
 import { useStore } from '../../contexts/StoreContext';
 import { ClientFile } from '../../entities/File';
-import { ClientTag } from '../../entities/Tag';
 import { usePromise } from '../../hooks/usePromise';
-import { CommandDispatcher, MousePointerEvent } from './Commands';
+import { CommandDispatcher } from './Commands';
 import { ITransform } from './Masonry/layout-helpers';
 import { GalleryVideoPlaybackMode } from 'src/frontend/stores/UiStore';
 import { thumbnailMaxSize } from 'common/config';
+import { IncrementalTagItems } from 'src/frontend/components/FileTagsEditor';
 
 interface ItemProps {
   file: ClientFile;
@@ -306,14 +306,16 @@ export const ThumbnailTags = observer(
         onDrop={eventManager.drop}
         onDragEnd={eventManager.dragEnd}
       >
-        {file.sortedInheritedTags.map((tag) => (
-          <TagWithHint key={tag.id} tag={tag} onContextMenu={eventManager.showTagContextMenu} />
-        ))}
+        <IncrementalTagItems
+          tags={file.sortedInheritedTags}
+          onContextMenu={eventManager.showTagContextMenu}
+        />
       </span>
     );
   },
 );
 
+/*
 const TagWithHint = observer(
   ({
     tag,
@@ -335,6 +337,7 @@ const TagWithHint = observer(
     );
   },
 );
+*/
 
 const ThumbnailOverlay = ({
   file,
diff --git a/widgets/tag.tsx b/widgets/tag.tsx
index b861cf72..53ef5344 100644
--- a/widgets/tag.tsx
+++ b/widgets/tag.tsx
@@ -33,9 +33,7 @@ const Tag = (props: TagProps) => {
       style={style}
       onContextMenu={props.onContextMenu}
     >
-      <span className="label" title={text}>
-        {text}
-      </span>
+      <span className="label">{text}</span>
       {onRemove ? (
         <IconButton
           icon={IconSet.CLOSE}

From c39b0ca775ffb0939e9bb5bd4265eb1357cafa24 Mon Sep 17 00:00:00 2001
From: RafaUC <rafa_ruc6@hotmail.com>
Date: Fri, 12 Sep 2025 20:32:31 -0600
Subject: [PATCH 7/7] Thumbnail tags overlay now grows only when hovering tags,
 not the whole thumbnail.

---
 resources/style/content.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/style/content.scss b/resources/style/content.scss
index ad3b80d1..0bd4ee8d 100644
--- a/resources/style/content.scss
+++ b/resources/style/content.scss
@@ -468,7 +468,7 @@
     }
 
     // Note: this feature has an ugly exception, when filename is also shown. See the #gallery-item[data-show-overlay] rule below
-    &:hover .thumbnail-tags {
+    .thumbnail-tags:hover {
       max-height: 100%;
       overflow-y: overlay; // overlay scrollbar so it doesn't push tags away
 
@@ -490,7 +490,7 @@
       bottom: 0;
       overflow: hidden;
       transition: 0.25s $pt-transition-cubic2;
-      max-height: 2.8em;
+      max-height: 2.5em;
       max-width: 100%;
 
       // Allow dragging of images to elsewhere here too, just like the .thumbnail itself (drag-export)
@@ -562,7 +562,7 @@
 // move the tags up by the height of the filename element (23.59px)
 #gallery-content[data-show-overlay='true'] .masonry {
   [data-masonrycell] {
-    &:hover .thumbnail-tags {
+    .thumbnail-tags:hover  {
       max-height: calc(100% - 1.5em - 0.25rem);
     }
   }