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

refactor: simplify access token toast and remove unnecessary fragment wrapper

Browse Source 
- Removed redundant React fragment in Attachments.tsx for cleaner structure
- Removed fallback logic for access token description in toast; use created.description directly since description is always required by client-side validation.
- Removed unused i18n key access-token-created-default since description is always present
pull/5111/head
Nic Luckie 3 weeks ago
parent c7b53930cc
commit d3e6302526
3 changed files with 89 additions and 97 deletions
Show Stats Download Patch File Download Diff File

9
web/src/components/Settings/AccessTokenSection.tsx
Unescape Escape View File

@ -29,15 +29,10 @@ const AccessTokenSection = () => {
}); });
}, []); }, []);
const handleCreateAccessTokenDialogConfirm = async (created?: UserAccessToken) => { const handleCreateAccessTokenDialogConfirm = async (created: UserAccessToken) => {
// Refresh list to reflect server state and include stable fields like issuedAt/expiresAt
const accessTokens = await listAccessTokens(currentUser.name); const accessTokens = await listAccessTokens(currentUser.name);
setUserAccessTokens(accessTokens); setUserAccessTokens(accessTokens);
toast.success( toast.success(t("setting.access-token-section.create-dialog.access-token-created", { description: created.description }));
t("setting.access-token-section.create-dialog.access-token-created", {
description: created?.description ?? t("setting.access-token-section.create-dialog.access-token-created-default"),
}),
);
}; };
const handleCreateToken = () => { const handleCreateToken = () => {

1
web/src/locales/en.json
Unescape Escape View File

@ -245,7 +245,6 @@
"access-token-deleted": "Access token `{{description}}` deleted", "access-token-deleted": "Access token `{{description}}` deleted",
"create-dialog": { "create-dialog": {
"access-token-created": "Access token `{{description}}` created", "access-token-created": "Access token `{{description}}` created",
"access-token-created-default": "Access token created",
"create-access-token": "Create Access Token", "create-access-token": "Create Access Token",
"created-at": "Created At", "created-at": "Created At",
"description": "Description", "description": "Description",

176
web/src/pages/Attachments.tsx
Unescape Escape View File

@ -55,104 +55,102 @@ const Attachments = observer(() => {
}, []); }, []);
return ( return (
<> <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
<section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8"> {!md && <MobileHeader />}
{!md && <MobileHeader />} <div className="w-full px-4 sm:px-6">
<div className="w-full px-4 sm:px-6"> <div className="w-full border border-border flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-background text-foreground">
<div className="w-full border border-border flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-background text-foreground"> <div className="relative w-full flex flex-row justify-between items-center">
<div className="relative w-full flex flex-row justify-between items-center"> <p className="py-1 flex flex-row justify-start items-center select-none opacity-80">
<p className="py-1 flex flex-row justify-start items-center select-none opacity-80"> <PaperclipIcon className="w-6 h-auto mr-1 opacity-80" />
<PaperclipIcon className="w-6 h-auto mr-1 opacity-80" /> <span className="text-lg">{t("common.attachments")}</span>
<span className="text-lg">{t("common.attachments")}</span> </p>
</p> <div>
<div> <div className="relative max-w-32">
<div className="relative max-w-32"> <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" /> <Input
<Input className="pl-9"
className="pl-9" placeholder={t("common.search")}
placeholder={t("common.search")} value={state.searchQuery}
value={state.searchQuery} onChange={(e) => setState({ ...state, searchQuery: e.target.value })}
onChange={(e) => setState({ ...state, searchQuery: e.target.value })} />
/>
</div>
</div> </div>
</div> </div>
<div className="w-full flex flex-col justify-start items-start mt-4 mb-6"> </div>
{loadingState.isLoading ? ( <div className="w-full flex flex-col justify-start items-start mt-4 mb-6">
<div className="w-full h-32 flex flex-col justify-center items-center"> {loadingState.isLoading ? (
<p className="w-full text-center text-base my-6 mt-8">{t("resource.fetching-data")}</p> <div className="w-full h-32 flex flex-col justify-center items-center">
</div> <p className="w-full text-center text-base my-6 mt-8">{t("resource.fetching-data")}</p>
) : ( </div>
<> ) : (
{filteredAttachments.length === 0 ? ( <>
<div className="w-full mt-8 mb-8 flex flex-col justify-center items-center italic"> {filteredAttachments.length === 0 ? (
<Empty /> <div className="w-full mt-8 mb-8 flex flex-col justify-center items-center italic">
<p className="mt-4 text-muted-foreground">{t("message.no-data")}</p> <Empty />
</div> <p className="mt-4 text-muted-foreground">{t("message.no-data")}</p>
) : ( </div>
<div className={"w-full h-auto px-2 flex flex-col justify-start items-start gap-y-8"}> ) : (
{Array.from(groupedAttachments.entries()).map(([monthStr, attachments]) => { <div className={"w-full h-auto px-2 flex flex-col justify-start items-start gap-y-8"}>
return ( {Array.from(groupedAttachments.entries()).map(([monthStr, attachments]) => {
<div key={monthStr} className="w-full flex flex-row justify-start items-start"> return (
<div className="w-16 sm:w-24 pt-4 sm:pl-4 flex flex-col justify-start items-start"> <div key={monthStr} className="w-full flex flex-row justify-start items-start">
<span className="text-sm opacity-60">{dayjs(monthStr).year()}</span> <div className="w-16 sm:w-24 pt-4 sm:pl-4 flex flex-col justify-start items-start">
<span className="font-medium text-xl"> <span className="text-sm opacity-60">{dayjs(monthStr).year()}</span>
{dayjs(monthStr).toDate().toLocaleString(i18n.language, { month: "short" })} <span className="font-medium text-xl">
</span> {dayjs(monthStr).toDate().toLocaleString(i18n.language, { month: "short" })}
</div> </span>
<div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap"> </div>
{attachments.map((attachment) => { <div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
return ( {attachments.map((attachment) => {
<div key={attachment.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start"> return (
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-border overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80"> <div key={attachment.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<AttachmentIcon attachment={attachment} strokeWidth={0.5} /> <div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-border overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
</div> <AttachmentIcon attachment={attachment} strokeWidth={0.5} />
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
<p className="text-xs shrink text-muted-foreground truncate">{attachment.filename}</p>
</div>
</div> </div>
); <div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
})} <p className="text-xs shrink text-muted-foreground truncate">{attachment.filename}</p>
</div> </div>
</div>
);
})}
</div> </div>
); </div>
})} );
})}
{unusedAttachments.length > 0 && ( {unusedAttachments.length > 0 && (
<> <>
<Separator /> <Separator />
<div className="w-full flex flex-row justify-start items-start"> <div className="w-full flex flex-row justify-start items-start">
<div className="w-16 sm:w-24 sm:pl-4 flex flex-col justify-start items-start"></div> <div className="w-16 sm:w-24 sm:pl-4 flex flex-col justify-start items-start"></div>
<div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap"> <div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
<div className="w-full flex flex-row justify-start items-center gap-2"> <div className="w-full flex flex-row justify-start items-center gap-2">
<span className="text-muted-foreground">{t("resource.unused-resources")}</span> <span className="text-muted-foreground">{t("resource.unused-resources")}</span>
<span className="text-muted-foreground opacity-80">({unusedAttachments.length})</span> <span className="text-muted-foreground opacity-80">({unusedAttachments.length})</span>
</div>
{unusedAttachments.map((attachment) => {
return (
<div key={attachment.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-border overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<AttachmentIcon attachment={attachment} strokeWidth={0.5} />
</div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
<p className="text-xs shrink text-muted-foreground truncate">{attachment.filename}</p>
</div>
</div>
);
})}
</div> </div>
{unusedAttachments.map((attachment) => {
return (
<div key={attachment.name} className="w-24 sm:w-32 h-auto flex flex-col justify-start items-start">
<div className="w-24 h-24 flex justify-center items-center sm:w-32 sm:h-32 border border-border overflow-clip rounded-xl cursor-pointer hover:shadow hover:opacity-80">
<AttachmentIcon attachment={attachment} strokeWidth={0.5} />
</div>
<div className="w-full max-w-full flex flex-row justify-between items-center mt-1 px-1">
<p className="text-xs shrink text-muted-foreground truncate">{attachment.filename}</p>
</div>
</div>
);
})}
</div> </div>
</> </div>
)} </>
</div> )}
)} </div>
</> )}
)} </>
</div> )}
</div> </div>
</div> </div>
</section> </div>
</> </section>
); );
}); });

Write Preview
Loading…
Cancel
Save