diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index 37addf5d8..5c3288c68 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -397,6 +397,27 @@ export function NotesIcon(props: IconProps) { ); } +export function IDIcon(props: IconProps) { + return ( + + + + + ); +} + export function FolderIcon(props: IconProps) { return ( ): JSX.Element => ( - )}> + )} + > void; return ( - - Help Modal + + Help Modal
Adding Notes - To add a note right click on a message then hover over the "Note Message" item and click -
- the button with the notebook name you would like to note the message to. -
- - Protip: - {" "} + To add a note right click on a message then hover over the "Note Message" item and click the button with the notebook name you would like to note the message to. + +
+ Protip: +
+ Clicking the "Note Message" button by itself will note to Main by default!
@@ -56,25 +55,22 @@ export default ({ onClose, ...modalProps }: ModalProps & { onClose: () => void;
-
+
diff --git a/src/equicordplugins/holyNotes/components/modals/NoteBookTab.tsx b/src/equicordplugins/holyNotes/components/modals/NoteBookTab.tsx index c4c4eb840..0c89c3c87 100644 --- a/src/equicordplugins/holyNotes/components/modals/NoteBookTab.tsx +++ b/src/equicordplugins/holyNotes/components/modals/NoteBookTab.tsx @@ -170,8 +170,6 @@ export function CreateTabBar({ tabs, firstSelectedTab, onChangeTab }) { firstSelectedTab || (tabKeys.length > 0 ? tabKeys[0] : null) ); - - const renderSelectedTab = React.useCallback(() => { const selectedTabId = tabKeys.find(tab => tab === selectedTab); return selectedTabId; diff --git a/src/equicordplugins/holyNotes/components/modals/Notebook.tsx b/src/equicordplugins/holyNotes/components/modals/Notebook.tsx index a2c1b6f06..584f99347 100644 --- a/src/equicordplugins/holyNotes/components/modals/Notebook.tsx +++ b/src/equicordplugins/holyNotes/components/modals/Notebook.tsx @@ -31,9 +31,28 @@ const renderNotebook = ({ searchInput: string; closeModal: () => void; }) => { - const messageArray = Object.values(notes).map(note => ( + let notesArray = Object.values(notes); + + if (searchInput) { + const searchLower = searchInput.toLowerCase(); + notesArray = notesArray.filter(note => + note.content?.toLowerCase().includes(searchLower) + ); + } + + if (!notesArray.length) return ; + + if (sortType) { + notesArray.sort((a, b) => + new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime() + ); + } + + if (sortDirection) notesArray.reverse(); + + return notesArray.map(note => ( )); - - if (sortType) - messageArray.sort( - (a, b) => - new Date(b.props.note?.timestamp)?.getTime() - new Date(a.props.note?.timestamp)?.getTime(), - ); - - if (sortDirection) messageArray.reverse(); - - const filteredMessages = messageArray.filter(message => - message.props.note?.content?.toLowerCase().includes(searchInput.toLowerCase()), - ); - - return filteredMessages.length > 0 ? filteredMessages : ; }; @@ -65,7 +70,7 @@ export const NoteModal = (props: ModalProps & { onClose: () => void; }) => { const [sortDirection, setSortDirection] = React.useState(true); const [currentNotebook, setCurrentNotebook] = React.useState("Main"); - const { quickSelect, quickSelectLabel, quickSelectQuick, quickSelectValue, quickSelectArrow } = findByProps("quickSelect"); + const { quickSelect, quickSelectLabel, quickSelectQuick, quickSelectValue, quickSelectArrow } = findByProps("quickSelect") || {}; const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void; diff --git a/src/equicordplugins/holyNotes/components/modals/RenderMessage.tsx b/src/equicordplugins/holyNotes/components/modals/RenderMessage.tsx index b1a9c11f7..aee9477da 100644 --- a/src/equicordplugins/holyNotes/components/modals/RenderMessage.tsx +++ b/src/equicordplugins/holyNotes/components/modals/RenderMessage.tsx @@ -4,17 +4,22 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ +import { CopyIcon, DeleteIcon, IDIcon, LinkIcon, OpenExternalIcon } from "@components/Icons"; import { makeDummyUser } from "@components/settings/tabs/plugins/PluginModal"; import { MessageType } from "@equicordplugins/holyNotes"; import { copyToClipboard } from "@utils/clipboard"; import { classes } from "@utils/misc"; import { ModalProps } from "@utils/modal"; -import { findByCodeLazy, findByProps, findComponentByCodeLazy } from "@webpack"; +import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy } from "@webpack"; import { ContextMenuApi, FluxDispatcher, Menu, NavigationRouter, React } from "@webpack/common"; import { noteHandler } from "../../NoteHandler"; import { HolyNotes } from "../../types"; +const messageClasses = findByPropsLazy("message", "groupStart", "cozyMessage"); +const Channel = findByCodeLazy("computeLurkerPermissionsAllowList(){"); +const ChannelMessage = findComponentByCodeLazy("Message must not be a thread"); + export const RenderMessage = ({ note, notebook, @@ -28,15 +33,18 @@ export const RenderMessage = ({ fromDeleteModal: boolean; closeModal?: () => void; }) => { - const { message, groupStart, cozyMessage } = findByProps("cozyMessage"); - const Channel = findByCodeLazy("computeLurkerPermissionsAllowList(){"); - const ChannelMessage = findComponentByCodeLazy("Message must not be a thread"); - - const [isHoldingDelete, setHoldingDelete] = React.useState(false); + const isHoldingDeleteRef = React.useRef(false); + const [, forceUpdate] = React.useReducer(x => x + 1, 0); React.useEffect(() => { - const deleteHandler = (e: { key: string; type: string; }) => - e.key.toLowerCase() === "delete" && setHoldingDelete(e.type.toLowerCase() === "keydown"); + const deleteHandler = (e: KeyboardEvent) => { + if (e.key.toLowerCase() !== "delete") return; + const newState = e.type === "keydown"; + if (isHoldingDeleteRef.current !== newState) { + isHoldingDeleteRef.current = newState; + forceUpdate(); + } + }; document.addEventListener("keydown", deleteHandler); document.addEventListener("keyup", deleteHandler); @@ -57,7 +65,7 @@ export const RenderMessage = ({ paddingBottom: "4px", }} onClick={() => { - if (isHoldingDelete && !fromDeleteModal) { + if (isHoldingDeleteRef.current && !fromDeleteModal) { noteHandler.deleteNote(note.id, notebook); updateParent?.(); } @@ -78,7 +86,7 @@ export const RenderMessage = ({ }} > copyToClipboard(note.content)} + icon={CopyIcon} /> {note?.attachments.length ? ( copyToClipboard(note.attachments[0].url)} + icon={LinkIcon} />) : null} { - noteHandler.deleteNote(note.id, notebook); - updateParent?.(); - }} + label="Copy ID" + id="copy-id" + action={() => copyToClipboard(note.id)} + icon={IDIcon} /> {Object.keys(noteHandler.getAllNotes()).length !== 1 ? ( ) : null} copyToClipboard(note.id)} + color="danger" + label="Delete Note" + id="delete" + action={() => { + noteHandler.deleteNote(note.id, notebook); + updateParent?.(); + }} + icon={DeleteIcon} /> ); diff --git a/src/equicordplugins/holyNotes/style.css b/src/equicordplugins/holyNotes/style.css index 5462a55b4..84d4bb9fa 100644 --- a/src/equicordplugins/holyNotes/style.css +++ b/src/equicordplugins/holyNotes/style.css @@ -134,3 +134,22 @@ $modifier: var(--input-border); margin-bottom: calc(-8px + .15*(var(--custom-user-profile-modal-header-avatar-size) + var(--custom-user-profile-modal-header-total-avatar-border-size))); z-index: 1; } + +.vc-help-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; +} + +.vc-help-modal-footer { + display: flex; + flex-wrap: wrap; + gap: 10px; + width: 100%; +} + +.vc-help-markdown span[class*="statusTag"] { + display: inline-block; + width: auto; +} \ No newline at end of file