gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-03 20:34:24 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

feat(mobile/tab_switcher): basic rendering of tab content

Browse Source
This commit is contained in:
Elian Doran 2026-01-31 16:21:27 +02:00
parent 49fc5e1559
commit 3367bb2e5b
No known key found for this signature in database
3 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
View File

@ -155,7 +155,7 @@ function NoteAttributes({ note }: { note: FNote }) {
return <span className="note-list-attributes" ref={ref} />;
}
function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
export function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
note: FNote;
trim?: boolean;
noChildrenList?: boolean;

17
apps/client/src/widgets/mobile_widgets/TabSwitcher.css
View File

@ -8,5 +8,22 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
.tab-card {
background: var(--card-background-color);
border-radius: 1em;
header {
padding: 0.5em 1em;
border-bottom: 1px solid var(--main-border-color);
}
.tab-preview {
height: 180px;
overflow: hidden;
font-size: 0.5em;
padding: 1em;
}
}
}
}

26
apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
View File

@ -4,6 +4,8 @@ import { createPortal } from "preact/compat";
import { useEffect, useState } from "preact/hooks";
import appContext from "../../components/app_context";
import NoteContext from "../../components/note_context";
import { NoteContent } from "../collections/legacy/ListOrGridView";
import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
import { useTriliumEvent } from "../react/hooks";
import Modal from "../react/Modal";
@ -49,13 +51,33 @@ function TabBarModelContent() {
return (
<div className="tabs">
{mainNoteContexts.map((tabContext) => (
<span key={tabContext.ntxId}>{tabContext.note?.title}</span>
{mainNoteContexts.map((noteContext) => (
<Tab key={noteContext.ntxId} noteContext={noteContext} />
))}
</div>
);
}
function Tab({ noteContext }: {
noteContext: NoteContext;
}) {
const { note } = noteContext;
return (
<div class="tab-card">
<header>{noteContext.note?.title}</header>
<div className="tab-preview">
{note && <NoteContent
note={note}
highlightedTokens={undefined}
trim
includeArchivedNotes={false}
/>}
</div>
</div>
);
}
function useMainNoteContexts() {
const [ noteContexts, setNoteContexts ] = useState(appContext.tabManager.getMainNoteContexts());