happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: update visibility and reaction icons for improved UI consistency

This commit is contained in:
Ahmed-Elgendy25 2026-04-01 11:10:10 +02:00
parent 446642b2dd
commit b5a3d3bd63
5 changed files with 5 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/MemoReactionListView/ReactionSelector.tsx
View File

@ -36,11 +36,7 @@ const ReactionSelector = (props: Props) => {
className,
)}
>
<<<<<<< HEAD
<SmilePlusIcon className="w-4 h-4 mx-auto" />
=======
<SmilePlusIcon className="w-4 h-4 mx-auto text-muted-foreground" />
>>>>>>> 89d43a2e (Developed Color Picker Feature for memos)
</span>
</PopoverTrigger>
<PopoverContent align="center" className="max-w-[90vw] sm:max-w-md">

120
web/src/components/MemoView/MemoView.tsx
View File

@ -1,122 +1,5 @@
import { memo, useCallback, useMemo, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import useCurrentUser from "@/hooks/useCurrentUser";
import { useUser } from "@/hooks/useUserQueries";
import { cn } from "@/lib/utils";
import { State } from "@/types/proto/api/v1/common_pb";
import { isSuperUser } from "@/utils/user";
import MemoEditor from "../MemoEditor";
import PreviewImageDialog from "../PreviewImageDialog";
import { MemoBody, MemoCommentListView, MemoHeader } from "./components";
import { MEMO_CARD_BASE_CLASSES } from "./constants";
import { useImagePreview } from "./hooks";
import { computeCommentAmount, MemoViewContext } from "./MemoViewContext";
import type { MemoViewProps } from "./types";
import MemoFooter from "./components/MemoFooter";
const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
const { memo: memoData, className, parentPage: parentPageProp, compact, showCreator, showVisibility, showPinned } = props;
const cardRef = useRef<HTMLDivElement>(null);
const [showEditor, setShowEditor] = useState(false);
const currentUser = useCurrentUser();
const creator = useUser(memoData.creator).data;
const isArchived = memoData.state === State.ARCHIVED;
const readonly = memoData.creator !== currentUser?.name && !isSuperUser(currentUser);
const parentPage = parentPageProp || "/";
// NSFW content management: always blur content tagged with NSFW (case-insensitive)
const [showNSFWContent, setShowNSFWContent] = useState(false);
const nsfw = memoData.tags?.some((tag) => tag.toUpperCase() === "NSFW") ?? false;
const toggleNsfwVisibility = useCallback(() => setShowNSFWContent((prev) => !prev), []);
const { previewState, openPreview, setPreviewOpen } = useImagePreview();
const openEditor = useCallback(() => setShowEditor(true), []);
const closeEditor = useCallback(() => setShowEditor(false), []);
const location = useLocation();
const isInMemoDetailPage = location.pathname.startsWith(`/${memoData.name}`);
const showCommentPreview = !isInMemoDetailPage && computeCommentAmount(memoData) > 0;
const contextValue = useMemo(
() => ({
memo: memoData,
creator,
currentUser,
parentPage,
isArchived,
readonly,
showNSFWContent,
nsfw,
openEditor,
toggleNsfwVisibility,
openPreview,
}),
[
memoData,
creator,
currentUser,
parentPage,
isArchived,
readonly,
showNSFWContent,
nsfw,
openEditor,
toggleNsfwVisibility,
openPreview,
],
);
if (showEditor) {
return (
<MemoEditor
autoFocus
className="mb-2"
cacheKey={`inline-memo-editor-${memoData.name}`}
memo={memoData}
onConfirm={closeEditor}
onCancel={closeEditor}
/>
);
}
const article = (
<article
className={cn(MEMO_CARD_BASE_CLASSES, showCommentPreview ? "mb-0 rounded-b-none" : "mb-2", className)}
ref={cardRef}
tabIndex={readonly ? -1 : 0}
>
<MemoHeader showCreator={showCreator} showVisibility={showVisibility} showPinned={showPinned} />
<MemoBody compact={compact} />
<MemoFooter/>
<PreviewImageDialog
open={previewState.open}
onOpenChange={setPreviewOpen}
imgUrls={previewState.urls}
initialIndex={previewState.index}
/>
</article>
);
return (
<MemoViewContext.Provider value={contextValue}>
{showCommentPreview ? (
<div className="w-full mb-2">
{article}
<MemoCommentListView />
</div>
) : (
article
)}
</MemoViewContext.Provider>
);
};
export default memo(MemoView);
import { memo, useCallback, useMemo, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import { useInstance } from "@/contexts/InstanceContext";
import useCurrentUser from "@/hooks/useCurrentUser";
import { useUser } from "@/hooks/useUserQueries";
@ -194,7 +77,6 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
className="mb-2"
cacheKey={`inline-memo-editor-${memoData.name}`}
memo={memoData}
parentMemoName={memoData.parent || undefined}
onConfirm={closeEditor}
onCancel={closeEditor}
/>
@ -234,4 +116,4 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
);
};
export default memo(MemoView);
export default memo(MemoView);

6
web/src/components/MemoView/MemoViewContext.tsx
View File

@ -13,10 +13,10 @@ export interface MemoViewContextValue {
parentPage: string;
isArchived: boolean;
readonly: boolean;
showNSFWContent: boolean;
nsfw: boolean;
showBlurredContent: boolean;
blurred: boolean;
openEditor: () => void;
toggleNsfwVisibility: () => void;
toggleBlurVisibility: () => void;
openPreview: (urls: string | string[], index?: number) => void;
}

2
web/src/components/MemoView/types.ts
View File

@ -18,4 +18,4 @@ export interface MemoHeaderProps {
export interface MemoBodyProps {
compact?: boolean;
}
}

4
web/src/components/VisibilityIcon.tsx
View File

@ -22,11 +22,7 @@ const VisibilityIcon = (props: Props) => {
return null;
}
<<<<<<< HEAD
return <VIcon className={cn("w-4 h-auto", className)} />;
=======
return <VIcon className={cn("w-4 h-auto text-muted-foreground", className)} />;
>>>>>>> 89d43a2e (Developed Color Picker Feature for memos)
};
export default VisibilityIcon;