diff --git a/src/component/FileManager/ContextMenu/TagMenuItems.tsx b/src/component/FileManager/ContextMenu/TagMenuItems.tsx index 712e3aa..bc19ab7 100644 --- a/src/component/FileManager/ContextMenu/TagMenuItems.tsx +++ b/src/component/FileManager/ContextMenu/TagMenuItems.tsx @@ -1,20 +1,22 @@ -import { getUniqueTagsFromFiles, Tag as TagItem } from "../Dialogs/Tags.tsx"; -import { FileResponse, Metadata } from "../../../api/explorer.ts"; +import { Box, IconButton, ListItemIcon, ListItemText } from "@mui/material"; import React, { useCallback, useContext, useState } from "react"; -import { CascadingContext, CascadingMenuItem } from "./CascadingMenu.tsx"; import { useTranslation } from "react-i18next"; -import { useAppDispatch } from "../../../redux/hooks.ts"; +import { FileResponse, Metadata } from "../../../api/explorer.ts"; import { closeContextMenu } from "../../../redux/fileManagerSlice.ts"; import { setTagsDialog } from "../../../redux/globalStateSlice.ts"; -import { ListItemIcon, ListItemText } from "@mui/material"; -import Tags from "../../Icons/Tags.tsx"; -import { DenseDivider, SquareMenuItem, SubMenuItemsProps } from "./ContextMenu.tsx"; +import { useAppDispatch } from "../../../redux/hooks.ts"; +import { patchFileMetadata } from "../../../redux/thunks/file.ts"; import SessionManager, { UserSettings } from "../../../session"; import { UsedTags } from "../../../session/utils.ts"; import Checkmark from "../../Icons/Checkmark.tsx"; +import DeleteOutlined from "../../Icons/DeleteOutlined.tsx"; +import Tags from "../../Icons/Tags.tsx"; +import { getUniqueTagsFromFiles, Tag as TagItem } from "../Dialogs/Tags.tsx"; import FileTag from "../Explorer/FileTag.tsx"; -import { patchFileMetadata } from "../../../redux/thunks/file.ts"; import { FileManagerIndex } from "../FileManager.tsx"; +import { CascadingContext, CascadingMenuItem } from "./CascadingMenu.tsx"; +import { DenseDivider, SquareMenuItem } from "./ContextMenu.tsx"; +import { SubMenuItemsProps } from "./OrganizeMenuItems.tsx"; interface TagOption extends TagItem { selected?: boolean; @@ -88,6 +90,23 @@ const TagMenuItems = ({ displayOpt, targets }: SubMenuItemsProps) => { [targets, setTags], ); + const onTagDelete = useCallback( + (tag: TagOption, event: React.MouseEvent) => { + event.stopPropagation(); + + // Remove tag from session cache + const existing = SessionManager.get(UserSettings.UsedTags) as UsedTags; + if (existing && existing[tag.key] !== undefined) { + delete existing[tag.key]; + SessionManager.set(UserSettings.UsedTags, existing); + } + + // Remove tag from local state + setTags((tags) => tags.filter((t) => t.key !== tag.key)); + }, + [setTags], + ); + return ( <> { )} {!tag.selected && ( - - - + + + + + onTagDelete(tag, event)} + sx={{ + opacity: 0, + transition: "opacity 0.2s", + marginLeft: "auto", + marginRight: 1, + padding: "2px", + "&:hover": { + backgroundColor: "action.hover", + }, + }} + > + + + )} ))}