7 Commits

Author SHA1 Message Date
anian edd2867a47 新增详情菜单项 2026-07-04 18:04:51 +08:00
anian 70ab5ef059 优化归档页、图标 2026-07-04 16:56:31 +08:00
anian adb151dc53 修改commit基础链接 2026-07-04 02:06:33 +08:00
anian 756b9f5d1c 修复共享链接无法被连带删除 2026-07-04 01:44:03 +08:00
anian 772a68a87b 优化目录效果 2026-07-03 20:25:19 +08:00
anian b75e4bcdd9 修改归档页面菜单、私有图标显示范围 2026-07-03 16:38:33 +08:00
anian b7ecfa5e35 修改置顶样式 2026-07-03 11:27:48 +08:00
22 changed files with 307 additions and 110 deletions
+12
View File
@@ -2,6 +2,18 @@
> 基于原作者v0.29.1代码修改 > 基于原作者v0.29.1代码修改
#### v0.29.1-3
1. 修改设置页面commit基础链接
2. 优化图标样式、备忘录菜单跳转
3. 归档页面允许设置表情
#### v0.29.1-2
1. 置顶内容新增自动折叠;置顶效果及图标改为全局显示
2. 归档页面新增(取消)置顶、编辑、复制按钮
3. 权限图标改为全局显示
4. 修复中文目录锚点无效;优化目录显示效果
5. 备忘录被删除时显式删除其分享链接
#### v0.29.1-1 #### v0.29.1-1
1. 修改默认配置 1. 修改默认配置
+3
View File
@@ -116,6 +116,9 @@ func (d *DB) DeleteMemoShare(ctx context.Context, delete *store.DeleteMemoShare)
if delete.UID != nil { if delete.UID != nil {
where, args = append(where, "`uid` = ?"), append(args, *delete.UID) where, args = append(where, "`uid` = ?"), append(args, *delete.UID)
} }
if delete.MemoID != nil {
where, args = append(where, "`memo_id` = ?"), append(args, *delete.MemoID)
}
_, err := d.db.ExecContext(ctx, "DELETE FROM `memo_share` WHERE "+strings.Join(where, " AND "), args...) _, err := d.db.ExecContext(ctx, "DELETE FROM `memo_share` WHERE "+strings.Join(where, " AND "), args...)
return err return err
} }
+3
View File
@@ -137,6 +137,9 @@ func (d *DB) DeleteMemoShare(ctx context.Context, delete *store.DeleteMemoShare)
if delete.UID != nil { if delete.UID != nil {
where, args = append(where, "uid = "+placeholder(len(args)+1)), append(args, *delete.UID) where, args = append(where, "uid = "+placeholder(len(args)+1)), append(args, *delete.UID)
} }
if delete.MemoID != nil {
where, args = append(where, "memo_id = "+placeholder(len(args)+1)), append(args, *delete.MemoID)
}
_, err := d.db.ExecContext(ctx, "DELETE FROM memo_share WHERE "+strings.Join(where, " AND "), args...) _, err := d.db.ExecContext(ctx, "DELETE FROM memo_share WHERE "+strings.Join(where, " AND "), args...)
return err return err
} }
+3
View File
@@ -139,6 +139,9 @@ func (d *DB) DeleteMemoShare(ctx context.Context, delete *store.DeleteMemoShare)
if delete.UID != nil { if delete.UID != nil {
where, args = append(where, "`uid` = ?"), append(args, *delete.UID) where, args = append(where, "`uid` = ?"), append(args, *delete.UID)
} }
if delete.MemoID != nil {
where, args = append(where, "`memo_id` = ?"), append(args, *delete.MemoID)
}
_, err := d.db.ExecContext(ctx, "DELETE FROM `memo_share` WHERE "+strings.Join(where, " AND "), args...) _, err := d.db.ExecContext(ctx, "DELETE FROM `memo_share` WHERE "+strings.Join(where, " AND "), args...)
return err return err
} }
+5
View File
@@ -145,6 +145,11 @@ func (s *Store) DeleteMemo(ctx context.Context, delete *DeleteMemo) error {
if err := s.driver.DeleteMemoRelation(ctx, &DeleteMemoRelation{RelatedMemoID: &delete.ID}); err != nil { if err := s.driver.DeleteMemoRelation(ctx, &DeleteMemoRelation{RelatedMemoID: &delete.ID}); err != nil {
return err return err
} }
// Clean up share links for this memo. SQLite runs with foreign keys disabled,
// so it cannot rely on ON DELETE CASCADE for memo_share rows.
if err := s.driver.DeleteMemoShare(ctx, &DeleteMemoShare{MemoID: &delete.ID}); err != nil {
return err
}
// Clean up attachments linked to this memo. // Clean up attachments linked to this memo.
attachments, err := s.ListAttachments(ctx, &FindAttachment{MemoID: &delete.ID}) attachments, err := s.ListAttachments(ctx, &FindAttachment{MemoID: &delete.ID})
if err != nil { if err != nil {
+3 -2
View File
@@ -22,8 +22,9 @@ type FindMemoShare struct {
// DeleteMemoShare identifies a share grant to remove. // DeleteMemoShare identifies a share grant to remove.
type DeleteMemoShare struct { type DeleteMemoShare struct {
ID *int32 ID *int32
UID *string UID *string
MemoID *int32
} }
// CreateMemoShare creates a new share grant. // CreateMemoShare creates a new share grant.
+25
View File
@@ -112,10 +112,35 @@ func TestDeleteMemoStore(t *testing.T) {
memo, err := ts.CreateMemo(ctx, memoCreate) memo, err := ts.CreateMemo(ctx, memoCreate)
require.NoError(t, err) require.NoError(t, err)
require.Equal(t, memoCreate.Content, memo.Content) require.Equal(t, memoCreate.Content, memo.Content)
otherMemo, err := ts.CreateMemo(ctx, &store.Memo{
UID: "test-other-memo",
CreatorID: user.ID,
Content: "other test content",
Visibility: store.Public,
})
require.NoError(t, err)
share, err := ts.CreateMemoShare(ctx, &store.MemoShare{
UID: "test-delete-memo-share",
MemoID: memo.ID,
CreatorID: user.ID,
})
require.NoError(t, err)
keptShare, err := ts.CreateMemoShare(ctx, &store.MemoShare{
UID: "test-keep-memo-share",
MemoID: otherMemo.ID,
CreatorID: user.ID,
})
require.NoError(t, err)
err = ts.DeleteMemo(ctx, &store.DeleteMemo{ err = ts.DeleteMemo(ctx, &store.DeleteMemo{
ID: memo.ID, ID: memo.ID,
}) })
require.NoError(t, err) require.NoError(t, err)
deletedShare, err := ts.GetMemoShare(ctx, &store.FindMemoShare{ID: &share.ID})
require.NoError(t, err)
require.Nil(t, deletedShare)
keptShareAfterDelete, err := ts.GetMemoShare(ctx, &store.FindMemoShare{ID: &keptShare.ID})
require.NoError(t, err)
require.NotNil(t, keptShareAfterDelete)
ts.Close() ts.Close()
} }
@@ -1,4 +1,5 @@
import { import {
ArrowLeftIcon,
ArchiveIcon, ArchiveIcon,
ArchiveRestoreIcon, ArchiveRestoreIcon,
BookmarkMinusIcon, BookmarkMinusIcon,
@@ -6,6 +7,7 @@ import {
CheckCheckIcon, CheckCheckIcon,
CopyIcon, CopyIcon,
Edit3Icon, Edit3Icon,
EyeIcon,
FileTextIcon, FileTextIcon,
LinkIcon, LinkIcon,
ListChecksIcon, ListChecksIcon,
@@ -32,7 +34,7 @@ import { useMemoActionHandlers } from "./hooks";
import type { MemoActionMenuProps } from "./types"; import type { MemoActionMenuProps } from "./types";
const MemoActionMenu = (props: MemoActionMenuProps) => { const MemoActionMenu = (props: MemoActionMenuProps) => {
const { memo, readonly } = props; const { memo, readonly, isInMemoDetailPage, onBack, onViewDetail } = props;
const t = useTranslate(); const t = useTranslate();
// Dialog state // Dialog state
@@ -45,6 +47,8 @@ const MemoActionMenu = (props: MemoActionMenuProps) => {
const canMutateTasks = !readonly && !isArchived && taskStats.total > 0; const canMutateTasks = !readonly && !isArchived && taskStats.total > 0;
const hasOpenTasks = taskStats.completed < taskStats.total; const hasOpenTasks = taskStats.completed < taskStats.total;
const hasCompletedTasks = taskStats.completed > 0; const hasCompletedTasks = taskStats.completed > 0;
const DetailActionIcon = isInMemoDetailPage ? ArrowLeftIcon : EyeIcon;
const detailActionLabel = isInMemoDetailPage ? t("common.collapse") : t("memo.view-detail");
// Action handlers // Action handlers
const { const {
@@ -71,8 +75,13 @@ const MemoActionMenu = (props: MemoActionMenuProps) => {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={2}> <DropdownMenuContent align="end" sideOffset={2}>
{/* Edit actions (non-readonly, non-archived) */} <DropdownMenuItem onClick={isInMemoDetailPage ? onBack : onViewDetail}>
{!readonly && !isArchived && ( <DetailActionIcon className="w-4 h-auto" />
{detailActionLabel}
</DropdownMenuItem>
{/* Edit actions (non-readonly) */}
{!readonly && (
<> <>
{!isComment && ( {!isComment && (
<DropdownMenuItem onClick={handleTogglePinMemoBtnClick}> <DropdownMenuItem onClick={handleTogglePinMemoBtnClick}>
@@ -87,25 +96,23 @@ const MemoActionMenu = (props: MemoActionMenuProps) => {
</> </>
)} )}
{/* Copy submenu (non-archived) */} {/* Copy submenu */}
{!isArchived && ( <DropdownMenuSub>
<DropdownMenuSub> <DropdownMenuSubTrigger>
<DropdownMenuSubTrigger> <CopyIcon className="w-4 h-auto" />
<CopyIcon className="w-4 h-auto" /> {t("common.copy")}
{t("common.copy")} </DropdownMenuSubTrigger>
</DropdownMenuSubTrigger> <DropdownMenuSubContent>
<DropdownMenuSubContent> <DropdownMenuItem onClick={handleCopyLink}>
<DropdownMenuItem onClick={handleCopyLink}> <LinkIcon className="w-4 h-auto" />
<LinkIcon className="w-4 h-auto" /> {t("memo.copy-link")}
{t("memo.copy-link")} </DropdownMenuItem>
</DropdownMenuItem> <DropdownMenuItem onClick={handleCopyContent}>
<DropdownMenuItem onClick={handleCopyContent}> <FileTextIcon className="w-4 h-auto" />
<FileTextIcon className="w-4 h-auto" /> {t("memo.copy-content")}
{t("memo.copy-content")} </DropdownMenuItem>
</DropdownMenuItem> </DropdownMenuSubContent>
</DropdownMenuSubContent> </DropdownMenuSub>
</DropdownMenuSub>
)}
{/* Task submenu (writable task memos) */} {/* Task submenu (writable task memos) */}
{canMutateTasks && ( {canMutateTasks && (
@@ -4,5 +4,8 @@ export interface MemoActionMenuProps {
memo: Memo; memo: Memo;
readonly?: boolean; readonly?: boolean;
className?: string; className?: string;
isInMemoDetailPage: boolean;
onBack: () => void;
onViewDetail: () => void;
onEdit?: () => void; onEdit?: () => void;
} }
+1 -1
View File
@@ -68,7 +68,7 @@ const MemoCommentSection = ({ memo, comments, parentPage }: Props) => {
)} )}
{comments.map((comment) => ( {comments.map((comment) => (
<div className="w-full" key={`${comment.name}-${comment.updateTime}`} id={extractMemoIdFromName(comment.name)}> <div className="w-full" key={`${comment.name}-${comment.updateTime}`} id={extractMemoIdFromName(comment.name)}>
<MemoView memo={comment} parentPage={parentPage} showCreator compact /> <MemoView memo={comment} parentPage={parentPage} showCreator showVisibility compact />
</div> </div>
))} ))}
</div> </div>
@@ -1,3 +1,4 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { HeadingItem } from "@/utils/markdown-manipulation"; import type { HeadingItem } from "@/utils/markdown-manipulation";
@@ -12,8 +13,95 @@ const levelIndent: Record<number, string> = {
4: "ml-8", 4: "ml-8",
}; };
/** Outline navigation for memo headings (h1h4). */ const areStringArraysEqual = (a: string[], b: string[]) => {
if (a.length !== b.length) return false;
return a.every((item, index) => item === b[index]);
};
/** Outline navigation for memo headings (h1-h4). */
const MemoOutline = ({ headings }: MemoOutlineProps) => { const MemoOutline = ({ headings }: MemoOutlineProps) => {
const outlineRef = useRef<HTMLElement>(null);
const itemRefs = useRef(new Map<string, HTMLAnchorElement>());
const [activeSlugs, setActiveSlugs] = useState<string[]>([]);
const orderedSlugs = useMemo(() => headings.map((heading) => heading.slug).filter(Boolean), [headings]);
const activeSlugSet = useMemo(() => new Set(activeSlugs), [activeSlugs]);
useEffect(() => {
setActiveSlugs([]);
const elements = orderedSlugs
.map((slug) => document.getElementById(slug))
.filter((element): element is HTMLElement => Boolean(element));
if (elements.length === 0) {
return;
}
let animationFrame = 0;
const updateActiveSlugs = () => {
animationFrame = 0;
const viewportTop = window.scrollY;
const viewportBottom = viewportTop + (window.innerHeight || document.documentElement.clientHeight);
const documentBottom = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
const headingSections = elements.map((element, index) => {
const sectionTop = element.getBoundingClientRect().top + window.scrollY;
const nextElement = elements[index + 1];
const sectionBottom = nextElement ? nextElement.getBoundingClientRect().top + window.scrollY : documentBottom;
return { slug: element.id, top: sectionTop, bottom: sectionBottom };
});
const nextActiveSlugs = headingSections
.filter((section) => section.bottom > viewportTop && section.top < viewportBottom)
.map((section) => section.slug);
setActiveSlugs((previousSlugs) => (areStringArraysEqual(previousSlugs, nextActiveSlugs) ? previousSlugs : nextActiveSlugs));
};
const scheduleUpdateActiveSlugs = () => {
if (animationFrame) {
return;
}
animationFrame = window.requestAnimationFrame(updateActiveSlugs);
};
updateActiveSlugs();
window.addEventListener("scroll", scheduleUpdateActiveSlugs, { passive: true });
window.addEventListener("resize", scheduleUpdateActiveSlugs);
return () => {
if (animationFrame) {
window.cancelAnimationFrame(animationFrame);
}
window.removeEventListener("scroll", scheduleUpdateActiveSlugs);
window.removeEventListener("resize", scheduleUpdateActiveSlugs);
};
}, [orderedSlugs]);
useEffect(() => {
const firstActiveSlug = activeSlugs[0];
const outline = outlineRef.current;
const activeItem = firstActiveSlug ? itemRefs.current.get(firstActiveSlug) : undefined;
if (!outline || !activeItem || outline.scrollHeight <= outline.clientHeight) {
return;
}
const itemTop = activeItem.offsetTop;
const itemBottom = itemTop + activeItem.offsetHeight;
const comfortableTop = outline.scrollTop + 24;
const comfortableBottom = outline.scrollTop + outline.clientHeight - 24;
if (itemTop >= comfortableTop && itemBottom <= comfortableBottom) {
return;
}
outline.scrollTo({
top: Math.max(0, itemTop - outline.clientHeight / 2 + activeItem.offsetHeight / 2),
behavior: "smooth",
});
}, [activeSlugs]);
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, slug: string) => { const handleClick = (e: React.MouseEvent<HTMLAnchorElement>, slug: string) => {
e.preventDefault(); e.preventDefault();
const el = document.getElementById(slug); const el = document.getElementById(slug);
@@ -24,27 +112,50 @@ const MemoOutline = ({ headings }: MemoOutlineProps) => {
}; };
return ( return (
<nav className="relative flex flex-col"> <nav ref={outlineRef} className="relative flex max-h-[45vh] flex-col overflow-y-auto overscroll-contain pr-1">
{headings.map((heading, index) => ( {headings.map((heading, index) => {
<a const isActive = activeSlugSet.has(heading.slug);
key={`${heading.slug}-${index}`}
href={`#${heading.slug}`} return (
onClick={(e) => handleClick(e, heading.slug)} <a
className={cn( key={`${heading.slug}-${index}`}
"group relative block py-[5px] pr-1 text-[13px] leading-snug truncate", ref={(element) => {
"text-muted-foreground/60 hover:text-foreground/90", if (element) {
"transition-colors duration-200 ease-out", itemRefs.current.set(heading.slug, element);
levelIndent[heading.level], } else {
heading.level === 1 && "font-medium text-muted-foreground/80", itemRefs.current.delete(heading.slug);
)} }
title={heading.text} }}
> href={`#${heading.slug}`}
<span className="relative"> aria-current={activeSlugs[0] === heading.slug ? "location" : undefined}
{heading.text} onClick={(e) => handleClick(e, heading.slug)}
<span className="absolute -bottom-px left-0 h-px w-0 bg-foreground/30 transition-all duration-200 group-hover:w-full" /> className={cn(
</span> "group relative block shrink-0 rounded-l-sm py-[5px] pr-1 pl-2 text-[13px] leading-snug truncate",
</a> "transition-colors duration-200 ease-out",
))} isActive ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground/60 hover:text-foreground/90",
levelIndent[heading.level],
heading.level === 1 && !isActive && "font-medium text-muted-foreground/80",
)}
title={heading.text}
>
<span
className={cn(
"absolute top-1.5 bottom-1.5 left-0 w-0.5 rounded-full bg-primary transition-opacity duration-200",
isActive ? "opacity-100" : "opacity-0",
)}
/>
<span className="relative">
{heading.text}
<span
className={cn(
"absolute -bottom-px left-0 h-px bg-foreground/30 transition-all duration-200",
isActive ? "w-full bg-primary/50" : "w-0 group-hover:w-full",
)}
/>
</span>
</a>
);
})}
</nav> </nav>
); );
}; };
@@ -1,6 +1,5 @@
import { memo } from "react"; import { memo } from "react";
import useCurrentUser from "@/hooks/useCurrentUser"; import useCurrentUser from "@/hooks/useCurrentUser";
import { State } from "@/types/proto/api/v1/common_pb";
import type { Memo, Reaction } from "@/types/proto/api/v1/memo_service_pb"; import type { Memo, Reaction } from "@/types/proto/api/v1/memo_service_pb";
import { useReactionGroups } from "./hooks"; import { useReactionGroups } from "./hooks";
import ReactionSelector from "./ReactionSelector"; import ReactionSelector from "./ReactionSelector";
@@ -15,7 +14,6 @@ const MemoReactionListView = (props: Props) => {
const { memo: memoData, reactions } = props; const { memo: memoData, reactions } = props;
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const reactionGroup = useReactionGroups(reactions); const reactionGroup = useReactionGroups(reactions);
const readonly = memoData.state === State.ARCHIVED;
if (reactions.length === 0) { if (reactions.length === 0) {
return null; return null;
@@ -26,7 +24,7 @@ const MemoReactionListView = (props: Props) => {
{Array.from(reactionGroup).map(([reactionType, users]) => ( {Array.from(reactionGroup).map(([reactionType, users]) => (
<ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memoData} reactionType={reactionType} users={users} /> <ReactionView key={`${reactionType.toString()} ${users.length}`} memo={memoData} reactionType={reactionType} users={users} />
))} ))}
{!readonly && currentUser && <ReactionSelector memo={memoData} />} {currentUser && <ReactionSelector memo={memoData} />}
</div> </div>
); );
}; };
@@ -1,7 +1,6 @@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import useCurrentUser from "@/hooks/useCurrentUser"; import useCurrentUser from "@/hooks/useCurrentUser";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { State } from "@/types/proto/api/v1/common_pb";
import type { Memo } from "@/types/proto/api/v1/memo_service_pb"; import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
import type { User } from "@/types/proto/api/v1/user_service_pb"; import type { User } from "@/types/proto/api/v1/user_service_pb";
import { formatReactionTooltip, useReactionActions } from "./hooks"; import { formatReactionTooltip, useReactionActions } from "./hooks";
@@ -16,16 +15,15 @@ const ReactionView = (props: Props) => {
const { memo, reactionType, users } = props; const { memo, reactionType, users } = props;
const currentUser = useCurrentUser(); const currentUser = useCurrentUser();
const hasReaction = users.some((user) => currentUser && user.username === currentUser.username); const hasReaction = users.some((user) => currentUser && user.username === currentUser.username);
const readonly = memo.state === State.ARCHIVED;
const { handleReactionClick } = useReactionActions({ memo }); const { handleReactionClick } = useReactionActions({ memo });
const handleClick = () => { const handleClick = () => {
if (!currentUser || readonly) return; if (!currentUser) return;
handleReactionClick(reactionType); handleReactionClick(reactionType);
}; };
const isClickable = currentUser && !readonly; const isClickable = Boolean(currentUser);
return ( return (
<TooltipProvider> <TooltipProvider>
+4 -3
View File
@@ -27,7 +27,10 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
const creator = useUser(memoData.creator).data; const creator = useUser(memoData.creator).data;
const isArchived = memoData.state === State.ARCHIVED; const isArchived = memoData.state === State.ARCHIVED;
const readonly = memoData.creator !== currentUser?.name && !isSuperUser(currentUser); const readonly = memoData.creator !== currentUser?.name && !isSuperUser(currentUser);
const parentPage = parentPageProp || "/"; const location = useLocation();
const isInMemoDetailPage = location.pathname.startsWith(`/${memoData.name}`) || location.pathname.startsWith("/memos/shares/");
const currentPage = `${location.pathname}${location.search}${location.hash}`;
const parentPage = parentPageProp || (isInMemoDetailPage ? "/" : currentPage);
// Blur content when any tag has blur_content enabled in the instance tag settings. // Blur content when any tag has blur_content enabled in the instance tag settings.
const [showBlurredContent, setShowBlurredContent] = useState(false); const [showBlurredContent, setShowBlurredContent] = useState(false);
@@ -39,8 +42,6 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
const openEditor = useCallback(() => setShowEditor(true), []); const openEditor = useCallback(() => setShowEditor(true), []);
const closeEditor = useCallback(() => setShowEditor(false), []); const closeEditor = useCallback(() => setShowEditor(false), []);
const location = useLocation();
const isInMemoDetailPage = location.pathname.startsWith(`/${memoData.name}`) || location.pathname.startsWith("/memos/shares/");
const showCommentPreview = !isInMemoDetailPage && computeCommentAmount(memoData) > 0; const showCommentPreview = !isInMemoDetailPage && computeCommentAmount(memoData) > 0;
useEffect(() => { useEffect(() => {
@@ -53,7 +53,7 @@ const MemoBody: React.FC<MemoBodyProps> = ({ compact }) => {
content={memo.content} content={memo.content}
onClick={handleMemoContentClick} onClick={handleMemoContentClick}
onDoubleClick={handleMemoContentDoubleClick} onDoubleClick={handleMemoContentDoubleClick}
compact={memo.pinned ? false : compact} // Always show full content when pinned compact={compact}
/> />
<AttachmentListView attachments={memo.attachments} onImagePreview={openPreview} /> <AttachmentListView attachments={memo.attachments} onImagePreview={openPreview} />
<RelationListView relations={referencedMemos} currentMemoName={memo.name} parentPage={parentPage} /> <RelationListView relations={referencedMemos} currentMemoName={memo.name} parentPage={parentPage} />
@@ -1,11 +1,10 @@
import { BookmarkIcon } from "lucide-react"; import { ArchiveIcon, BookmarkIcon } from "lucide-react";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
import { Link } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import useNavigateTo from "@/hooks/useNavigateTo"; import useNavigateTo from "@/hooks/useNavigateTo";
import i18n from "@/i18n"; import i18n from "@/i18n";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Visibility } from "@/types/proto/api/v1/memo_service_pb";
import type { User } from "@/types/proto/api/v1/user_service_pb"; import type { User } from "@/types/proto/api/v1/user_service_pb";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import { convertVisibilityToString } from "@/utils/memo"; import { convertVisibilityToString } from "@/utils/memo";
@@ -13,7 +12,6 @@ import MemoActionMenu from "../../MemoActionMenu";
import { ReactionSelector } from "../../MemoReactionListView"; import { ReactionSelector } from "../../MemoReactionListView";
import UserAvatar from "../../UserAvatar"; import UserAvatar from "../../UserAvatar";
import VisibilityIcon from "../../VisibilityIcon"; import VisibilityIcon from "../../VisibilityIcon";
import { useMemoActions } from "../hooks";
import { useMemoViewContext, useMemoViewDerived } from "../MemoViewContext"; import { useMemoViewContext, useMemoViewDerived } from "../MemoViewContext";
import type { MemoHeaderProps } from "../types"; import type { MemoHeaderProps } from "../types";
@@ -22,14 +20,37 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
const [reactionSelectorOpen, setReactionSelectorOpen] = useState(false); const [reactionSelectorOpen, setReactionSelectorOpen] = useState(false);
const { memo, creator, currentUser, parentPage, isArchived, readonly, openEditor } = useMemoViewContext(); const { memo, creator, currentUser, parentPage, isArchived, readonly, openEditor } = useMemoViewContext();
const { createTime, updateTime, displayTime: memoDisplayTime, isDisplayingUpdatedTime, relativeTimeFormat } = useMemoViewDerived(); const {
createTime,
updateTime,
displayTime: memoDisplayTime,
isDisplayingUpdatedTime,
isInMemoDetailPage,
relativeTimeFormat,
} = useMemoViewDerived();
const navigateTo = useNavigateTo(); const navigateTo = useNavigateTo();
const navigate = useNavigate();
const handleGotoMemoDetailPage = useCallback(() => { const handleGotoMemoDetailPage = useCallback(() => {
navigateTo(`/${memo.name}`, { state: { from: parentPage } }); navigateTo(`/${memo.name}`, { state: { from: parentPage } });
}, [memo.name, parentPage, navigateTo]); }, [memo.name, parentPage, navigateTo]);
const handleBackToParentPage = useCallback(() => {
const historyState = window.history.state as { idx?: number } | null;
if (typeof historyState?.idx === "number" && historyState.idx > 0) {
navigate(-1);
return;
}
const { unpinMemo } = useMemoActions(memo); navigateTo(parentPage, { preventScrollReset: true });
}, [parentPage, navigate, navigateTo]);
const handleMemoTimeClick = useCallback(() => {
if (isInMemoDetailPage) {
handleBackToParentPage();
return;
}
handleGotoMemoDetailPage();
}, [isInMemoDetailPage, handleBackToParentPage, handleGotoMemoDetailPage]);
const timeValue = isArchived ? ( const timeValue = isArchived ? (
memoDisplayTime?.toLocaleString(i18n.language) memoDisplayTime?.toLocaleString(i18n.language)
@@ -52,14 +73,14 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
<div className="w-full flex flex-row justify-between items-center gap-2"> <div className="w-full flex flex-row justify-between items-center gap-2">
<div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center"> <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
{showCreator && creator ? ( {showCreator && creator ? (
<CreatorDisplay creator={creator} displayTime={displayTime} timeTooltip={timeTooltip} onGotoDetail={handleGotoMemoDetailPage} /> <CreatorDisplay creator={creator} displayTime={displayTime} timeTooltip={timeTooltip} onTimeClick={handleMemoTimeClick} />
) : ( ) : (
<TimeDisplay displayTime={displayTime} timeTooltip={timeTooltip} onGotoDetail={handleGotoMemoDetailPage} /> <TimeDisplay displayTime={displayTime} timeTooltip={timeTooltip} onTimeClick={handleMemoTimeClick} />
)} )}
</div> </div>
<div className="flex flex-row justify-end items-center select-none shrink-0 gap-2"> <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
{currentUser && !isArchived && ( {currentUser && (
<ReactionSelector <ReactionSelector
className={cn("border-none w-auto h-auto", reactionSelectorOpen && "block!", "block sm:hidden sm:group-hover:block")} className={cn("border-none w-auto h-auto", reactionSelectorOpen && "block!", "block sm:hidden sm:group-hover:block")}
memo={memo} memo={memo}
@@ -67,7 +88,33 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
/> />
)} )}
{showVisibility && memo.visibility !== Visibility.PRIVATE && ( {showPinned && memo.pinned && (
<Tooltip>
<TooltipTrigger asChild>
<span className="flex justify-center items-center rounded-md">
<BookmarkIcon className="w-4 h-auto text-muted-foreground" />
</span>
</TooltipTrigger>
<TooltipContent>
<p>{t("common.pinned")}</p>
</TooltipContent>
</Tooltip>
)}
{isArchived && (
<Tooltip>
<TooltipTrigger asChild>
<span className="flex justify-center items-center rounded-md">
<ArchiveIcon className="w-4 h-auto text-muted-foreground" />
</span>
</TooltipTrigger>
<TooltipContent>
<p>{t("common.archived")}</p>
</TooltipContent>
</Tooltip>
)}
{showVisibility && (
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger>
<span className="flex justify-center items-center rounded-md hover:opacity-80"> <span className="flex justify-center items-center rounded-md hover:opacity-80">
@@ -80,22 +127,14 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({ showCreator, showVisibility, sh
</Tooltip> </Tooltip>
)} )}
{showPinned && memo.pinned && ( <MemoActionMenu
<TooltipProvider> memo={memo}
<Tooltip> readonly={readonly}
<TooltipTrigger asChild> isInMemoDetailPage={isInMemoDetailPage}
<span className="cursor-pointer"> onBack={handleBackToParentPage}
<BookmarkIcon className="w-4 h-auto text-primary" onClick={unpinMemo} /> onViewDetail={handleGotoMemoDetailPage}
</span> onEdit={openEditor}
</TooltipTrigger> />
<TooltipContent>
<p>{t("common.unpin")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
<MemoActionMenu memo={memo} readonly={readonly} onEdit={openEditor} />
</div> </div>
</div> </div>
); );
@@ -105,10 +144,10 @@ interface CreatorDisplayProps {
creator: User; creator: User;
displayTime: React.ReactNode; displayTime: React.ReactNode;
timeTooltip: TimeTooltipContent; timeTooltip: TimeTooltipContent;
onGotoDetail: () => void; onTimeClick: () => void;
} }
const CreatorDisplay: React.FC<CreatorDisplayProps> = ({ creator, displayTime, timeTooltip, onGotoDetail }) => ( const CreatorDisplay: React.FC<CreatorDisplayProps> = ({ creator, displayTime, timeTooltip, onTimeClick }) => (
<div className="w-full flex flex-row justify-start items-center"> <div className="w-full flex flex-row justify-start items-center">
<Link className="w-auto hover:opacity-80 rounded-md transition-colors" to={`/u/${encodeURIComponent(creator.username)}`} viewTransition> <Link className="w-auto hover:opacity-80 rounded-md transition-colors" to={`/u/${encodeURIComponent(creator.username)}`} viewTransition>
<UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} /> <UserAvatar className="mr-2 shrink-0" avatarUrl={creator.avatarUrl} />
@@ -125,7 +164,7 @@ const CreatorDisplay: React.FC<CreatorDisplayProps> = ({ creator, displayTime, t
<button <button
type="button" type="button"
className="w-auto -mt-0.5 text-xs leading-tight text-muted-foreground select-none cursor-pointer hover:opacity-80 transition-colors text-left" className="w-auto -mt-0.5 text-xs leading-tight text-muted-foreground select-none cursor-pointer hover:opacity-80 transition-colors text-left"
onClick={onGotoDetail} onClick={onTimeClick}
> >
{displayTime} {displayTime}
</button> </button>
@@ -152,15 +191,15 @@ const TimeTooltip = ({ children, content }: { children: React.ReactElement; cont
interface TimeDisplayProps { interface TimeDisplayProps {
displayTime: React.ReactNode; displayTime: React.ReactNode;
timeTooltip: TimeTooltipContent; timeTooltip: TimeTooltipContent;
onGotoDetail: () => void; onTimeClick: () => void;
} }
const TimeDisplay: React.FC<TimeDisplayProps> = ({ displayTime, timeTooltip, onGotoDetail }) => ( const TimeDisplay: React.FC<TimeDisplayProps> = ({ displayTime, timeTooltip, onTimeClick }) => (
<TimeTooltip content={timeTooltip}> <TimeTooltip content={timeTooltip}>
<button <button
type="button" type="button"
className="w-auto text-sm leading-tight text-muted-foreground select-none cursor-pointer hover:text-foreground transition-colors text-left" className="w-auto text-sm leading-tight text-muted-foreground select-none cursor-pointer hover:text-foreground transition-colors text-left"
onClick={onGotoDetail} onClick={onTimeClick}
> >
{displayTime} {displayTime}
</button> </button>
@@ -1,3 +1,2 @@
export { useImagePreview } from "./useImagePreview"; export { useImagePreview } from "./useImagePreview";
export { useMemoActions } from "./useMemoActions";
export { useMemoHandlers } from "./useMemoHandlers"; export { useMemoHandlers } from "./useMemoHandlers";
@@ -1,13 +0,0 @@
import { useUpdateMemo } from "@/hooks/useMemoQueries";
import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
export const useMemoActions = (memo: Memo) => {
const { mutateAsync: updateMemo } = useUpdateMemo();
const unpinMemo = async () => {
if (!memo.pinned) return;
await updateMemo({ update: { name: memo.name, pinned: false }, updateMask: ["pinned"] });
};
return { unpinMemo };
};
+1 -1
View File
@@ -23,7 +23,7 @@ const Archived = () => {
return ( return (
<PagedMemoList <PagedMemoList
renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility compact />} renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact />}
listSort={listSort} listSort={listSort}
state={State.ARCHIVED} state={State.ARCHIVED}
orderBy={orderBy} orderBy={orderBy}
+2 -2
View File
@@ -23,13 +23,13 @@ const Explore = () => {
// Get sorting logic using unified hook (no pinned sorting) // Get sorting logic using unified hook (no pinned sorting)
const { listSort, orderBy } = useMemoSorting({ const { listSort, orderBy } = useMemoSorting({
pinnedFirst: false, pinnedFirst: true,
state: State.NORMAL, state: State.NORMAL,
}); });
return ( return (
<PagedMemoList <PagedMemoList
renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility compact />} renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact />}
listSort={listSort} listSort={listSort}
orderBy={orderBy} orderBy={orderBy}
filter={memoFilter} filter={memoFilter}
+1 -1
View File
@@ -16,7 +16,7 @@ import useMediaQuery from "@/hooks/useMediaQuery";
import { User_Role } from "@/types/proto/api/v1/user_service_pb"; import { User_Role } from "@/types/proto/api/v1/user_service_pb";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
const GITHUB_COMMIT_URL_PREFIX = "https://github.com/usememos/memos/commit/"; const GITHUB_COMMIT_URL_PREFIX = "https://git.anian.cc/anian/memos/commit/";
const isCommitSha = (commit: string) => /^[0-9a-f]{7,40}$/i.test(commit); const isCommitSha = (commit: string) => /^[0-9a-f]{7,40}$/i.test(commit);
+3 -1
View File
@@ -118,7 +118,7 @@ export function slugify(text: string): string {
return text return text
.toLowerCase() .toLowerCase()
.trim() .trim()
.replace(/[^\w\s-]/g, "") .replace(/[^\p{L}\p{N}\s_-]/gu, "")
.replace(/[\s_]+/g, "-") .replace(/[\s_]+/g, "-")
.replace(/-+/g, "-") .replace(/-+/g, "-")
.replace(/^-|-$/g, ""); .replace(/^-|-$/g, "");
@@ -143,6 +143,8 @@ export function extractHeadings(markdown: string): HeadingItem[] {
if (!text) return; if (!text) return;
let slug = slugify(text); let slug = slugify(text);
if (!slug) return;
const count = slugCounts.get(slug) || 0; const count = slugCounts.get(slug) || 0;
slugCounts.set(slug, count + 1); slugCounts.set(slug, count + 1);
if (count > 0) slug = `${slug}-${count}`; if (count > 0) slug = `${slug}-${count}`;