SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

holyNotes: fix - Modal Fixes, Don't Update Global UserStore (#693)

Browse source 
* Fix: holyNotes - Make Modal Actually Bearable

* Fix: holyNotes - Fix Double Declaration

* Fix: holyNotes - Don't Change Global UserStore

Co-Authored-By: prism <69634294+imjustprism@users.noreply.github.com>

* QOL: holyNotes - Change Bot Tag to "NOTE"

* Fix: holyNotes - Fuck Your Comments GitHub Copilot, I Thought I Turned You Off

* Feat: holyNotes - UI Overhaul, Fixed Spaghetti CSS

* Fix: holyNotes - Fix CSS Classes

* Fix: holyNotes - Fix Fetching User Profiles for Notes

---------

Co-authored-by: prism <69634294+imjustprism@users.noreply.github.com>
This commit is contained in:
Z ❤'s Life 2026-01-28 09:00:02 -05:00 • committed by GitHub
parent b4a0e9f6fd
commit 7e92fd94a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 299 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/equicordplugins/holyNotes/components/modals/HelpModal.tsx
View file

@ -6,7 +6,6 @@
import { BaseText } from "@components/BaseText";
import { Paragraph } from "@components/Paragraph";
import { statusTagGreen } from "@equicordplugins/holyNotes";
import { noteHandler } from "@equicordplugins/holyNotes/NoteHandler";
import { downloadNotes, uploadNotes } from "@equicordplugins/holyNotes/utils";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
@ -21,30 +20,30 @@ export default ({ onClose, ...modalProps }: ModalProps & { onClose: () => void;
</ModalHeader>
<ModalContent>
<div className="vc-help-markdown">
<BaseText>Adding Notes</BaseText>
<BaseText size="md">Adding Notes</BaseText>
<Paragraph>
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.
</Paragraph>
<div style={{ marginTop: "12px" }}>
<span className={statusTagGreen}>Protip:</span>
<span className="vc-help-protip">Protip:</span>
</div>
<Paragraph style={{ marginTop: "8px" }}>
Clicking the "Note Message" button by itself will note to Main by default!
</Paragraph>
<hr />
<BaseText>Deleting Notes</BaseText>
<BaseText size="md">Deleting Notes</BaseText>
<Paragraph>
Note you can either right click the note and hit "Delete Note" or you can hold the
'DELETE' key on your keyboard and click on a note; it's like magic!
</Paragraph>
<hr />
<BaseText>Moving Notes</BaseText>
<BaseText size="md">Moving Notes</BaseText>
<Paragraph>
To move a note right click on a note and hover over the "Move Note" item and click on
the button corresponding to the notebook you would like to move the note to.
</Paragraph>
<hr />
<BaseText>Jump To Message</BaseText>
<BaseText size="md">Jump To Message</BaseText>
<Paragraph>
To jump to the location that the note was originally located at just right click on the
note and hit "Jump to Message".

230
src/equicordplugins/holyNotes/components/modals/Notebook.tsx
View file

@ -9,6 +9,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { quickSelectClasses } from "@equicordplugins/holyNotes";
import HelpIcon from "@equicordplugins/holyNotes/components/icons/HelpIcon";
import NoteButton from "@equicordplugins/holyNotes/components/icons/NoteButton";
import { noteHandler } from "@equicordplugins/holyNotes/NoteHandler";
import { HolyNotes } from "@equicordplugins/holyNotes/types";
import { classes } from "@utils/misc";
@ -74,38 +75,88 @@ export const NoteModal = (props: ModalProps & { onClose: () => void; }) => {
const notes = noteHandler.getNotes(currentNotebook);
if (!notes) return <></>;
const { TabBar, selectedTab } = CreateTabBar({ tabs: noteHandler.getAllNotes(), firstSelectedTab: currentNotebook, onChangeTab: setCurrentNotebook });
const notesArray = Object.values(notes);
const noteCount = notesArray.length;
// Filter notes for display count
let filteredCount = noteCount;
if (searchInput) {
const searchLower = searchInput.toLowerCase();
filteredCount = notesArray.filter(note =>
note.content?.toLowerCase().includes(searchLower)
).length;
}
const { TabBar, selectedTab } = CreateTabBar({
tabs: noteHandler.getAllNotes(),
firstSelectedTab: currentNotebook,
onChangeTab: setCurrentNotebook
});
return (
<ErrorBoundary>
<ModalRoot {...props} className={classes("vc-notebook")} size={ModalSize.LARGE}>
<Flex className={classes("vc-notebook-flex")} flexDirection="column" style={{ width: "100%" }}>
<Flex className={classes("vc-notebook-flex")} flexDirection="column" style={{ width: "100%", height: "100%" }}>
<div className={classes("vc-notebook-top-section")}>
<ModalHeader className={classes("vc-notebook-header-main")}>
<BaseText
size="lg"
weight="semibold"
style={{ flexGrow: 1 }}
className={classes("vc-notebook-heading")}>
NOTEBOOK
</BaseText>
<div className={classes("vc-notebook-flex", "vc-help-icon")} onClick={() => openModal(HelpModal)}>
<HelpIcon />
</div>
<div style={{ marginBottom: "10px" }} className={classes("vc-notebook-search")}>
<TextInput
autoFocus={false}
placeholder="Search for a message..."
onChange={e => setSearch(e)}
/>
</div>
<ModalCloseButton onClick={props.onClose} />
<Flex alignItems="center" style={{ gap: "8px", flex: 1 }}>
<NoteButton className={classes("vc-notebook-icon")} />
<Flex flexDirection="column" style={{ gap: "4px", flex: 1 }}>
<BaseText
size="lg"
weight="semibold"
className={classes("vc-notebook-heading")}>
Notebook
</BaseText>
<BaseText
size="sm"
className={classes("vc-notebook-count")}>
{searchInput
? `${filteredCount} of ${noteCount} ${noteCount === 1 ? "note" : "notes"}`
: `${noteCount} ${noteCount === 1 ? "note" : "notes"}`
}
</BaseText>
</Flex>
</Flex>
<Flex alignItems="center" style={{ gap: "8px" }}>
<div
className={classes("vc-notebook-help-button")}
onClick={() => openModal(HelpModal)}
role="button"
tabIndex={0}
aria-label="Help"
onKeyDown={e => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
openModal(HelpModal);
}
}}>
<HelpIcon />
</div>
<ModalCloseButton onClick={props.onClose} />
</Flex>
</ModalHeader>
<div className={classes("vc-notebook-search-container")}>
<TextInput
autoFocus={false}
placeholder="Search notes..."
value={searchInput}
onChange={e => setSearch(e)}
className={classes("vc-notebook-search-input")}
/>
</div>
<div className={classes("vc-notebook-tabbar-container")}>
{TabBar}
</div>
</div>
<ModalContent style={{ marginTop: "20px" }}>
<ModalContent
className={classes("vc-notebook-content")}
style={{
flex: 1,
overflowY: "auto",
overflowX: "hidden",
scrollBehavior: "smooth"
}}>
<ErrorBoundary>
{renderNotebook({
notes,
@ -119,59 +170,94 @@ export const NoteModal = (props: ModalProps & { onClose: () => void; }) => {
</ErrorBoundary>
</ModalContent>
</Flex>
<ModalFooter>
<ManageNotebookButton notebook={currentNotebook} setNotebook={setCurrentNotebook} />
<div className={classes("sort-button-container", "vc-notebook-display-left")}>
<Flex
alignItems="center"
className={quickSelectClasses.quickSelect}
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
ContextMenuApi.openContextMenu(event, () => (
<Menu.Menu
navId="sort-menu"
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
aria-label="Sort Menu"
>
<Menu.MenuItem
label="Ascending / Date Added"
id="ada"
action={() => {
setSortDirection(true);
setSortType(true);
}} /><Menu.MenuItem
label="Ascending / Message Date"
id="amd"
action={() => {
setSortDirection(true);
setSortType(false);
}} /><Menu.MenuItem
label="Descending / Date Added"
id="dda"
action={() => {
setSortDirection(false);
setSortType(true);
}} /><Menu.MenuItem
label="Descending / Message Date"
id="dmd"
action={() => {
setSortDirection(false);
setSortType(false);
}} />
</Menu.Menu>
<ModalFooter className={classes("vc-notebook-footer")}>
<Flex style={{ width: "100%", justifyContent: "space-between", alignItems: "center" }}>
<ManageNotebookButton notebook={currentNotebook} setNotebook={setCurrentNotebook} />
<div className={classes("sort-button-container")}>
<Flex
alignItems="center"
className={quickSelectClasses.quickSelect}
role="button"
tabIndex={0}
aria-label="Sort options"
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
ContextMenuApi.openContextMenu(event, () => (
<Menu.Menu
navId="sort-menu"
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
aria-label="Sort options"
>
<Menu.MenuItem
label="Ascending / Date Added"
id="ada"
action={() => {
setSortDirection(true);
setSortType(true);
}}
/>
<Menu.MenuItem
label="Ascending / Message Date"
id="amd"
action={() => {
setSortDirection(true);
setSortType(false);
}}
/>
<Menu.MenuItem
label="Descending / Date Added"
id="dda"
action={() => {
setSortDirection(false);
setSortType(true);
}}
/>
<Menu.MenuItem
label="Descending / Message Date"
id="dmd"
action={() => {
setSortDirection(false);
setSortType(false);
}}
/>
</Menu.Menu>
));
}}
onKeyDown={e => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
const el = e.currentTarget as HTMLElement;
const rect = el.getBoundingClientRect();
const evt = {
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2
} as any;
));
}}
>
<BaseText className={quickSelectClasses.quickSelectLabel}>Change Sorting:</BaseText>
<Flex style={{ flexGrow: 0 }} alignItems="center" className={quickSelectClasses.quickSelectClick}>
<BaseText className={quickSelectClasses.quickSelectValue}>
{sortDirection ? "Ascending" : "Descending"} /{" "}
{sortType ? "Date Added" : "Message Date"}
</BaseText>
<div className={quickSelectClasses.quickSelectArrow} />
ContextMenuApi.openContextMenu(evt, () => (
<Menu.Menu
navId="sort-menu"
onClose={() => FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" })}
aria-label="Sort options"
>
<Menu.MenuItem label="Ascending / Date Added" id="ada" action={() => { setSortDirection(true); setSortType(true); }} />
<Menu.MenuItem label="Ascending / Message Date" id="amd" action={() => { setSortDirection(true); setSortType(false); }} />
<Menu.MenuItem label="Descending / Date Added" id="dda" action={() => { setSortDirection(false); setSortType(true); }} />
<Menu.MenuItem label="Descending / Message Date" id="dmd" action={() => { setSortDirection(false); setSortType(false); }} />
</Menu.Menu>
));
}
}}
>
<BaseText className={quickSelectClasses.quickSelectLabel}>Sort:</BaseText>
<Flex style={{ flexGrow: 0 }} alignItems="center" className={quickSelectClasses.quickSelectClick}>
<BaseText className={quickSelectClasses.quickSelectValue}>
{sortDirection ? "Asc" : "Desc"} /{" "}
{sortType ? "Date Added" : "Msg Date"}
</BaseText>
<div className={quickSelectClasses.quickSelectArrow} aria-hidden="true" />
</Flex>
</Flex>
</Flex>
</div>
</div>
</Flex>
</ModalFooter>
</ModalRoot>
</ErrorBoundary>

18
src/equicordplugins/holyNotes/components/modals/RenderMessage.tsx
View file

@ -5,17 +5,20 @@
*/
import { CopyIcon, DeleteIcon, IDIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { makeDummyUser } from "@components/settings/tabs/plugins/PluginModal";
import { ChannelMessage, messageClasses, MessageType } from "@equicordplugins/holyNotes";
import { noteHandler } from "@equicordplugins/holyNotes/NoteHandler";
import { HolyNotes } from "@equicordplugins/holyNotes/types";
import { copyToClipboard } from "@utils/clipboard";
import { fetchUserProfile } from "@utils/discord";
import { proxyLazy } from "@utils/lazy";
import { classes } from "@utils/misc";
import { ModalProps } from "@utils/modal";
import { ContextMenuApi, FluxDispatcher, Menu, NavigationRouter, React } from "@webpack/common";
import { ContextMenuApi, FluxDispatcher, Menu, NavigationRouter, React, UserStore } from "@webpack/common";
import { Channel } from "../..";
const UserRecord = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
export const RenderMessage = ({
note,
notebook,
@ -32,6 +35,15 @@ export const RenderMessage = ({
const isHoldingDeleteRef = React.useRef(false);
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
const user = UserStore.getUser(note.author.id);
if (!user) {
fetchUserProfile(note.author.id);
}
}, [note.author.id]);
const author = UserStore.getUser(note.author.id) ?? note.author;
React.useEffect(() => {
const deleteHandler = (e: KeyboardEvent) => {
if (e.key.toLowerCase() !== "delete") return;
@ -97,7 +109,7 @@ export const RenderMessage = ({
Object.assign(
{ ...note },
{
author: makeDummyUser(note?.author),
author: new UserRecord({ ...author, bot: true }),
timestamp: new Date(note?.timestamp),
// @ts-ignore
embeds: note?.embeds?.map((embed: { timestamp: string | number | Date; }) =>

1
src/equicordplugins/holyNotes/index.tsx
View file

@ -35,7 +35,6 @@ import { noteHandler, noteHandlerCache } from "./NoteHandler";
import { DataStoreToCache, HolyNoteStore } from "./utils";
export const MessageType = findByCodeLazy("isEdited(){");
export const { statusTagGreen } = findCssClassesLazy("statusTagGreen");
export const iconClasses = findCssClassesLazy("iconWrapper", "clickable");
export const resultsClasses = findCssClassesLazy("emptyResultsWrap", "emptyResultsContent", "errorImage", "emptyResultsText", "noResultsImage", "alt");
export const quickSelectClasses = findCssClassesLazy("quickSelect", "quickSelectLabel", "quickSelectClick", "quickSelectValue", "quickSelectArrow");

161
src/equicordplugins/holyNotes/style.css
View file

@ -1,16 +1,11 @@
/* stylelint-disable shorthand-property-no-redundant-values */
/* stylelint-disable length-zero-no-unit */
/*
$modifier: var(--input-border-default, var(--input-border));
*/
.vc-notebook-search {
flex: auto;
margin-right: 15px;
margin-bottom: 6px;
background-color: var(--background-base-low);
border: solid 2px var(--background-secondary-alt);
margin-bottom: 10px;
background-color: var(--background-surface-higher);
}
.vc-notebook-header {
@ -19,53 +14,102 @@ $modifier: var(--input-border-default, var(--input-border));
}
.vc-notebook-header-main {
padding-top: 15px;
padding-left: 10px;
padding-bottom: 0px;
background-color: var(--background-base-low);
box-shadow: 0 1px 0 0 var(--background-base-low), 0 1px 2px 0 var(--background-base-low) !important;
padding: 16px 16px 12px 16px;
background-color: var(--background-surface-higher);
box-shadow: none !important;
}
.vc-notebook-heading {
max-width: 110px;
margin-right: 0px;
padding-bottom: 6px;
transform: scale(1);
max-width: none;
margin: 0;
padding: 0;
font-size: 20px;
font-weight: 600;
line-height: 24px;
color: var(--text-default);
}
.vc-notebook-count {
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: var(--text-muted);
}
.vc-notebook-flex {
overflow: hidden;
}
.vc-notebook-flex .vc-help-icon {
width: 23px;
opacity: 0.5;
width: 20px;
height: 20px;
opacity: 0.6;
cursor: pointer;
padding-left: 0px;
margin: 0px 14px 6px 0px;
color: var(--interactive-icon-default);
padding: 0;
margin: 0;
color: var(--icon-default);
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
.vc-notebook-icon {
width: 24px;
height: 24px;
cursor: default;
margin: 0;
color: var(--text-default);
flex-shrink: 0;
}
.vc-notebook-help-button {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease-in-out;
}
.vc-notebook-flex .help-icon:hover {
.vc-notebook-help-button:hover {
opacity: 1;
}
.vc-notebook-help-button svg {
width: 20px;
height: 20px;
color: var(--icon-default);
}
.vc-notebook-display-left {
flex: auto;
display: flex;
}
.vc-notebook-search-container {
padding: 0 16px 12px 16px;
background-color: var(--background-surface-higher);
}
.vc-notebook-search-input {
width: 100%;
background-color: var(--input-background-default);
}
.vc-help-markdown {
margin-top: 6px;
}
.vc-help-markdown hr {
border: 0;
height: 2px;
height: 1px;
margin: 12px 0px 16px 0px;
background-color: var(--input-border-default, var(--input-border));
background-color: var(--border-normal);
}
.vc-help-markdown .vc-help-protip {
font-weight: 600;
color: var(--text-feedback-positive);
}
.vc-holy-note [class*="buttonContainer"] {
@ -77,20 +121,14 @@ $modifier: var(--input-border-default, var(--input-border));
}
.vc-notebook-tabbar {
border-bottom: 1px solid var(--background-base-low);
background-color: var(--background-base-low);
border-bottom: 1px solid var(--border-normal);
background-color: var(--background-surface-higher);
white-space: nowrap;
overflow: hidden;
height: 36px;
flex-shrink: 0;
}
/* .vc-notebook-tabbar-bar {
margin: 0;
padding: 10px 20px 0;
} */
.vc-notebook-overflow-chevron {
display: inline-block;
padding: 0 6px 2px;
@ -100,39 +138,61 @@ $modifier: var(--input-border-default, var(--input-border));
}
.vc-notebook-tabbar-container {
border-bottom: 1px solid var(--profile-body-divider-color);
margin: 20px 12px 0;
border-bottom: 1px solid var(--border-normal);
margin: 0 16px;
padding: 0;
background-color: var(--background-surface-higher);
}
.vc-notebook-tabbar-item {
display: inline-block;
padding: 6px 12px;
padding: 8px 12px;
margin-bottom: -1px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 22px;
font-size: 16px;
line-height: 20px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
color: var(--interactive-icon-default);
color: var(--interactive-text-default);
border-bottom-width: 2px;
border-bottom-style: solid;
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
border-bottom-color: transparent;
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
}
.vc-notebook-selected {
border-bottom-width: 3px;
border-bottom-color: var(--control-brand-foreground);
color: var(--text-default);
font-weight: 600;
}
.vc-notebook-tabbar-item:hover {
border-bottom-color: var(--brand-500);
color: var(--interactive-text-hover);
}
.vc-notebook-tabbar-item:hover:not(.vc-notebook-selected) {
border-bottom-color: var(--interactive-text-hover);
}
.vc-notebook-top-section {
margin-bottom: calc(-8px + .15*(var(--custom-user-profile-modal-header-avatar-size) + var(--custom-user-profile-modal-header-total-avatar-border-size)));
margin-bottom: 0;
z-index: 1;
background-color: var(--background-surface-higher);
}
.vc-notebook-content {
padding: 16px;
background-color: var(--background-surface-high);
}
.vc-notebook-footer {
padding: 16px;
background-color: var(--background-surface-higher);
border-top: 1px solid var(--border-normal);
}
.vc-help-modal-header {
@ -152,4 +212,25 @@ $modifier: var(--input-border-default, var(--input-border));
.vc-help-markdown span[class*="statusTag"] {
display: inline-block;
width: auto;
}
.vc-holy-note [class*="botText"] {
font-size: 0 !important;
line-height: 0;
}
.vc-holy-note [class*="botText"]::after {
content: "NOTE";
font-size: 0.675rem;
line-height: 1.3;
font-weight: 800;
font-family: var(--font-display);
color: inherit;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.sort-button-container {
display: flex;
align-items: center;
}