feat(gallery): refactor GalleryCard data refresh logic and improve event handling

This commit is contained in:
lzinga 2026-01-11 17:07:06 -08:00
parent a58dae2c1e
commit 675ecb5f1a
2 changed files with 20 additions and 9 deletions

View File

@ -175,15 +175,15 @@
}
.gallery-toolbar .btn-delete.btn.btn-primary {
background-color: var(--dropdown-item-icon-destructive-color) !important;
border-color: var(--dropdown-item-icon-destructive-color) !important;
color: white !important;
.gallery-view .gallery-toolbar .btn-delete.btn.btn-primary {
background-color: var(--dropdown-item-icon-destructive-color);
border-color: var(--dropdown-item-icon-destructive-color);
color: white;
}
.gallery-toolbar .btn-delete.btn.btn-primary:hover:not(.disabled) {
background-color: color-mix(in srgb, var(--dropdown-item-icon-destructive-color) 80%, black) !important;
border-color: color-mix(in srgb, var(--dropdown-item-icon-destructive-color) 70%, black) !important;
.gallery-view .gallery-toolbar .btn-delete.btn.btn-primary:hover:not(.disabled) {
background-color: color-mix(in srgb, var(--dropdown-item-icon-destructive-color) 80%, black);
border-color: color-mix(in srgb, var(--dropdown-item-icon-destructive-color) 70%, black);
}
.gallery-view.gallery-drag-over {

View File

@ -1,7 +1,7 @@
import "./index.css";
import { ToggleInParentResponse } from "@triliumnext/commons";
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
import appContext from "../../../components/app_context";
import type FNote from "../../../entities/fnote";
@ -20,6 +20,7 @@ import tree from "../../../services/tree";
import ActionButton from "../../react/ActionButton";
import Alert from "../../react/Alert";
import { FormFileUploadActionButton } from "../../react/FormFileUpload";
import { useTriliumEvent } from "../../react/hooks";
import type { ViewModeProps } from "../interface";
import { useFilteredNoteIds } from "../legacy/utils";
@ -494,12 +495,22 @@ function GalleryCard({ note, parentNote, isSelected, selectedNoteIds, toggleSele
}).length;
}, [isGallery, note.children]);
useEffect(() => {
const refreshData = useCallback(() => {
tree.getNoteTitle(note.noteId, parentNote.noteId).then(setNoteTitle);
setImageSrc(getImageSrc(note));
setIsShared(note.isShared());
}, [note, parentNote.noteId]);
useEffect(() => {
refreshData();
}, [refreshData]);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
if (loadResults.isNoteReloaded(note.noteId)) {
refreshData();
}
});
const handleRename = async () => {
const newTitle = await new Promise<string | null>((resolve) => {
appContext.triggerCommand("showPromptDialog", {