gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 02:24:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/sidebar): basic right panel widget implementation

Browse Source
This commit is contained in:
Elian Doran 2025-11-22 10:51:48 +02:00
parent 6692de33b1
commit 5fc10fe041
No known key found for this signature in database
2 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/layouts/desktop_layout.tsx
View File

@ -44,6 +44,7 @@ import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
import utils from "../services/utils.js"; import utils from "../services/utils.js";
import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js"; import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
import NoteDetail from "../widgets/NoteDetail.jsx"; import NoteDetail from "../widgets/NoteDetail.jsx";
import RightPanelWidget from "../widgets/sidebar/RightPanelWidget.jsx";
export default class DesktopLayout { export default class DesktopLayout {

33
apps/client/src/widgets/sidebar/RightPanelWidget.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useContext, useRef } from "preact/hooks";
import { ParentComponent } from "../react/react_utils";
import { ComponentChildren } from "preact";
interface RightPanelWidgetProps {
title: string;
children: ComponentChildren;
buttons?: ComponentChildren;
}
export default function RightPanelWidget({ title, buttons, children }: RightPanelWidgetProps) {
const containerRef = useRef<HTMLDivElement>(null);
const parentComponent = useContext(ParentComponent);
if (parentComponent) {
parentComponent.initialized = Promise.resolve();
}
return (
<div ref={containerRef} class="card widget" style={{contain: "none"}}>
<div class="card-header">
<div class="card-header-title">{title}</div>
<div class="card-header-buttons">{buttons}</div>
</div>
<div id={parentComponent?.componentId} class="body-wrapper">
<div class="card-body">
{children}
</div>
</div>
</div>
);
}