Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-13 16:55:50 +01:00
Code Issues Packages Projects Releases Activity

feat(react/ribbon): port note info tab

Browse Source
This commit is contained in:
Elian Doran
2025-08-22 18:23:54 +03:00
parent 70728c274e
commit 77551b1fed
10 changed files with 148 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
apps/client/src/widgets/ribbon/NoteInfoTab.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { useEffect, useState } from "preact/hooks";
import { t } from "../../services/i18n";
import { TabContext } from "./ribbon-interface";
import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons";
import server from "../../services/server";
import Button from "../react/Button";
import { formatDateTime } from "../../utils/formatters";
import { formatSize } from "../../services/utils";
import LoadingSpinner from "../react/LoadingSpinner";
export default function NoteInfoTab({ note }: TabContext) {
const [ metadata, setMetadata ] = useState<MetadataResponse>();
const [ isLoading, setIsLoading ] = useState(false);
const [ noteSizeResponse, setNoteSizeResponse ] = useState<NoteSizeResponse>();
const [ subtreeSizeResponse, setSubtreeSizeResponse ] = useState<SubtreeSizeResponse>();
useEffect(() => {
if (note) {
server.get<MetadataResponse>(`notes/${note?.noteId}/metadata`).then(setMetadata);
}
setNoteSizeResponse(undefined);
setSubtreeSizeResponse(undefined);
setIsLoading(false);
}, [ note?.noteId ]);
console.log("Got ", noteSizeResponse, subtreeSizeResponse);
return (
<div className="note-info-widget">
{note && (
<table className="note-info-widget-table">
<tr>
<th>{t("note_info_widget.note_id")}:</th>
<td>{note.noteId}</td>
<th>{t("note_info_widget.created")}:</th>
<td>{formatDateTime(metadata?.dateCreated)}</td>
<th>{t("note_info_widget.modified")}:</th>
<td>{formatDateTime(metadata?.dateModified)}</td>
</tr>
<tr>
<th>{t("note_info_widget.type")}:</th>
<td>
<span class="note-info-type">{note.type}</span>{' '}
{ note.mime && <span class="note-info-mime">({note.mime})</span> }
</td>
<th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
<td colSpan={3}>
{!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
<Button
className="calculate-button"
style={{ padding: "0px 10px 0px 10px" }}
icon="bx bx-calculator"
text={t("note_info_widget.calculate")}
onClick={() => {
setIsLoading(true);
setTimeout(async () => {
await Promise.allSettled([
server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
]);
setIsLoading(false);
}, 0);
}}
/>
)}
<span className="note-sizes-wrapper">
<span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
{" "}
{subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
<span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
}
{isLoading && <LoadingSpinner />}
</span>
</td>
</tr>
</table>
)}
</div>
)
}