TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

Experimental layout (#8005)

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 23:35:15 +02:00 committed by GitHub
commit f8b292dfa3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 492 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,6 +46,12 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
import Breadcrumb from "../widgets/Breadcrumb.jsx";
import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
import NoteActions from "../widgets/ribbon/NoteActions.jsx";
import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.jsx";
import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
import BreadcrumbBadges from "../widgets/BreadcrumbBadges.jsx";
import NoteTitleDetails from "../widgets/NoteTitleDetails.jsx";
export default class DesktopLayout {
@ -71,6 +77,12 @@ export default class DesktopLayout {
*/
const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
const titleRow = new FlexContainer("row")
.class("title-row")
.child(<NoteIconWidget />)
.child(<NoteTitleWidget />);
const rootContainer = new RootContainer(true)
.setParent(appContext)
@ -126,30 +138,27 @@ export default class DesktopLayout {
.child(
new FlexContainer("row")
.class("breadcrumb-row")
.css("height", "30px")
.css("min-height", "30px")
.css("align-items", "center")
.css("padding", "10px")
.cssBlock(".breadcrumb-row > * { margin: 5px; }")
.child(<Breadcrumb />)
.child(<BreadcrumbBadges />)
.child(<SpacerWidget baseSize={0} growthFactor={1} />)
.child(<MovePaneButton direction="left" />)
.child(<MovePaneButton direction="right" />)
.child(<ClosePaneButton />)
.child(<CreatePaneButton />)
.optChild(isNewLayout, <NoteActions />)
)
.child(new FlexContainer("row")
.class("title-row")
.child(<NoteIconWidget />)
.child(<NoteTitleWidget />)
)
.child(<Ribbon />)
.optChild(!isNewLayout, titleRow)
.optChild(!isNewLayout, <Ribbon><NoteActions /></Ribbon>)
.optChild(isNewLayout, <StandaloneRibbonAdapter component={FormattingToolbar} />)
.child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child(
new ScrollingContainer()
.filling()
.child(new ContentHeader()
.optChild(isNewLayout, titleRow)
.optChild(isNewLayout, <NoteTitleDetails />)
.optChild(!isNewLayout, new ContentHeader()
.child(<ReadOnlyNoteInfoBar />)
.child(<SharedInfo />)
)
@ -167,6 +176,7 @@ export default class DesktopLayout {
...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
...this.customWidgets.get("note-detail-pane")
)
.optChild(isNewLayout, <Ribbon />)
)
)
.child(...this.customWidgets.get("center-pane"))

41
apps/client/src/services/experimental_features.ts Normal file
View File

@ -0,0 +1,41 @@
import { t } from "./i18n";
import options from "./options";
interface ExperimentalFeature {
id: string;
name: string;
description: string;
}
export const experimentalFeatures = [
{
id: "new-layout",
name: t("experimental_features.new_layout_name"),
description: t("experimental_features.new_layout_description"),
}
] as const satisfies ExperimentalFeature[];
type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
return getEnabledFeatures().has(featureId);
}
export function getEnabledExperimentalFeatureIds() {
return getEnabledFeatures().values();
}
function getEnabledFeatures() {
if (!enabledFeatures) {
let features: ExperimentalFeatureId[] = [];
try {
features = JSON.parse(options.get("experimentalFeatures")) as ExperimentalFeatureId[];
} catch (e) {
console.warn("Failed to parse experimental features from options:", e);
}
enabledFeatures = new Set(features);
}
return enabledFeatures;
}

16
apps/client/src/translations/en/translation.json
View File

@ -1096,6 +1096,12 @@
"vacuuming_database": "Vacuuming database...",
"database_vacuumed": "Database has been vacuumed"
},
"experimental_features": {
"title": "Experimental Options",
"disclaimer": "These options are experimental and may cause instability. Use with caution.",
"new_layout_name": "New Layout",
"new_layout_description": "Try out the new layout for a more modern look and improved usability. Subject to heavy change in the upcoming releases."
},
"fonts": {
"theme_defined": "Theme defined",
"fonts": "Fonts",
@ -1743,7 +1749,9 @@
"printing_pdf": "Exporting to PDF in progress..."
},
"note_title": {
"placeholder": "type note's title here..."
"placeholder": "type note's title here...",
"created_on": "Created on {{date}}",
"last_modified": "Last modified on {{date}}"
},
"search_result": {
"no_notes_found": "No notes have been found for given search parameters.",
@ -2121,5 +2129,11 @@
"tab_history_navigation_buttons": {
"go-back": "Go back to previous note",
"go-forward": "Go forward to next note"
},
"breadcrumb_badges": {
"read_only_explicit": "Read-only",
"read_only_auto": "Auto read-only",
"shared_publicly": "Shared publicly",
"shared_locally": "Shared locally"
}
}

8
apps/client/src/widgets/Breadcrumb.css
View File

@ -1,5 +1,13 @@
.breadcrumb-row {
position: relative;
height: 30px;
min-height: 30px;
align-items: center;
padding: 10px;
}
body.experimental-feature-new-layout .breadcrumb-row {
padding-inline-end: 0;
}
.component.breadcrumb {

23
apps/client/src/widgets/BreadcrumbBadges.css Normal file
View File

@ -0,0 +1,23 @@
.component.breadcrumb-badges {
display: flex;
gap: 5px;
contain: none;
.breadcrumb-badge {
display: flex;
align-items: center;
padding: 2px 6px;
border-radius: 12px;
font-size: 0.75em;
background-color: var(--badge-background-color);
color: var(--badge-text-color);
&.clickable {
cursor: pointer;
&:hover {
background-color: var(--badge-background-hover-color);
}
}
}
}

56
apps/client/src/widgets/BreadcrumbBadges.tsx Normal file
View File

@ -0,0 +1,56 @@
import "./BreadcrumbBadges.css";
import { ComponentChildren } from "preact";
import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
import Icon from "./react/Icon";
import { useShareInfo } from "./shared_info";
import clsx from "clsx";
import { t } from "../services/i18n";
export default function BreadcrumbBadges() {
return (
<div className="breadcrumb-badges">
<ReadOnlyBadge />
<ShareBadge />
</div>
);
}
function ReadOnlyBadge() {
const { note, noteContext } = useNoteContext();
const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);
const isExplicitReadOnly = note?.isLabelTruthy("readOnly");
return (isReadOnly &&
<Badge
icon="bx bx-lock"
onClick={() => enableEditing()}>
{isExplicitReadOnly ? t("breadcrumb_badges.read_only_explicit") : t("breadcrumb_badges.read_only_auto")}
</Badge>
);
}
function ShareBadge() {
const { note } = useNoteContext();
const { isSharedExternally, link } = useShareInfo(note);
return (link &&
<Badge
icon={isSharedExternally ? "bx bx-world" : "bx bx-link"}
>
{isSharedExternally ? t("breadcrumb_badges.shared_publicly") : t("breadcrumb_badges.shared_locally")}
</Badge>
);
}
function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) {
return (
<div
className={clsx("breadcrumb-badge", { "clickable": !!onClick })}
onClick={onClick}
>
<Icon icon={icon} />&nbsp;
{children}
</div>
);
}

23
apps/client/src/widgets/NoteTitleDetails.tsx Normal file
View File

@ -0,0 +1,23 @@
import { t } from "../services/i18n";
import { formatDateTime } from "../utils/formatters";
import { useNoteContext } from "./react/hooks";
import { joinElements } from "./react/react_utils";
import { useNoteMetadata } from "./ribbon/NoteInfoTab";
export default function NoteTitleDetails() {
const { note } = useNoteContext();
const { metadata } = useNoteMetadata(note);
return (
<div className="title-details">
{joinElements([
metadata?.dateCreated && <li>
{t("note_title.created_on", { date: formatDateTime(metadata.dateCreated, "medium", "none")} )}
</li>,
metadata?.dateModified && <li>
{t("note_title.last_modified", { date: formatDateTime(metadata.dateModified, "medium", "none")} )}
</li>
], " • ")}
</div>
);
}

8
apps/client/src/widgets/containers/root_container.ts
View File

@ -5,6 +5,7 @@ import FlexContainer from "./flex_container.js";
import options from "../../services/options.js";
import type BasicWidget from "../basic_widget.js";
import utils from "../../services/utils.js";
import { getEnabledExperimentalFeatureIds } from "../../services/experimental_features.js";
/**
* The root container is the top-most widget/container, from which the entire layout derives.
@ -37,6 +38,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
this.#setBackdropEffects();
this.#setThemeCapabilities();
this.#setLocaleAndDirection(options.get("locale"));
this.#setExperimentalFeatures();
return super.render();
}
@ -99,6 +101,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
document.body.classList.toggle("theme-supports-background-effects", useBgfx);
}
#setExperimentalFeatures() {
for (const featureId of getEnabledExperimentalFeatureIds()) {
document.body.classList.add(`experimental-feature-${featureId}`);
}
}
#setLocaleAndDirection(locale: string) {
const correspondingLocale = LOCALES.find(l => l.id === locale);
document.body.lang = locale;

28
apps/client/src/widgets/note_title.css
View File

@ -28,3 +28,31 @@ body.mobile .note-title-widget input.note-title {
body.desktop .note-title-widget input.note-title {
font-size: 180%;
}
body.experimental-feature-new-layout .title-row,
body.experimental-feature-new-layout .title-details {
max-width: var(--max-content-width);
}
body.experimental-feature-new-layout .title-row {
margin-top: 2em;
margin-left: 12px;
}
body.experimental-feature-new-layout .title-details {
margin-top: 0;
contain: none;
padding: 0;
padding-inline-start: 24px;
opacity: 0.85;
display: flex;
gap: 0.25em;
margin: 0;
list-style-type: none;
margin-bottom: 2em;
}
body.experimental-feature-new-layout.prefers-centered-content .title-row,
body.experimental-feature-new-layout.prefers-centered-content .title-details {
margin-inline: auto;
}

240
apps/client/src/widgets/ribbon/NoteActions.tsx
View File

@ -1,115 +1,115 @@
import { ConvertToAttachmentResponse } from "@triliumnext/commons";
import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList";
import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/utils";
import { ParentComponent } from "../react/react_utils";
import { t } from "../../services/i18n"
import { useContext } from "preact/hooks";
import { useIsNoteReadOnly, useNoteLabel, useNoteProperty } from "../react/hooks";
import { useTriliumOption } from "../react/hooks";
import ActionButton from "../react/ActionButton"
import appContext, { CommandNames } from "../../components/app_context";
import NoteContext from "../../components/note_context";
import FNote from "../../entities/fnote";
import branches from "../../services/branches";
import dialog from "../../services/dialog";
import Dropdown from "../react/Dropdown";
import FNote from "../../entities/fnote"
import NoteContext from "../../components/note_context";
import { t } from "../../services/i18n";
import server from "../../services/server";
import toast from "../../services/toast";
import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/utils";
import ws from "../../services/ws";
import ActionButton from "../react/ActionButton";
import Dropdown from "../react/Dropdown";
import { FormDropdownDivider, FormListHeader, FormListItem } from "../react/FormList";
import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteProperty, useTriliumOption } from "../react/hooks";
import { ParentComponent } from "../react/react_utils";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
interface NoteActionsProps {
note?: FNote;
noteContext?: NoteContext;
}
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function NoteActions({ note, noteContext }: NoteActionsProps) {
return (
<>
{note && <RevisionsButton note={note} />}
{note && note.type !== "launcher" && <NoteContextMenu note={note as FNote} noteContext={noteContext}/>}
</>
);
export default function NoteActions() {
const { note, noteContext } = useNoteContext();
return (
<div className="ribbon-button-container" style={{ contain: "none" }}>
{note && !isNewLayout && <RevisionsButton note={note} />}
{note && note.type !== "launcher" && <NoteContextMenu note={note as FNote} noteContext={noteContext} />}
</div>
);
}
function RevisionsButton({ note }: { note: FNote }) {
const isEnabled = !["launcher", "doc"].includes(note?.type ?? "");
const isEnabled = !["launcher", "doc"].includes(note?.type ?? "");
return (isEnabled &&
<ActionButton
icon="bx bx-history"
text={t("revisions_button.note_revisions")}
triggerCommand="showRevisions"
titlePosition="bottom"
/>
);
return (isEnabled &&
<ActionButton
icon="bx bx-history"
text={t("revisions_button.note_revisions")}
triggerCommand="showRevisions"
titlePosition="bottom"
/>
);
}
function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: NoteContext }) {
const parentComponent = useContext(ParentComponent);
const noteType = useNoteProperty(note, "type") ?? "";
const [ viewType ] = useNoteLabel(note, "viewType");
const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(noteType);
const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help");
const isPrintable = ["text", "code"].includes(noteType) || (noteType === "book" && ["presentation", "list", "table"].includes(viewType ?? ""));
const isElectron = getIsElectron();
const isMac = getIsMac();
const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "aiChat"].includes(noteType);
const isSearchOrBook = ["search", "book"].includes(noteType);
const [ syncServerHost ] = useTriliumOption("syncServerHost");
const {isReadOnly, enableEditing} = useIsNoteReadOnly(note, noteContext);
const parentComponent = useContext(ParentComponent);
const noteType = useNoteProperty(note, "type") ?? "";
const [viewType] = useNoteLabel(note, "viewType");
const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(noteType);
const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help");
const isPrintable = ["text", "code"].includes(noteType) || (noteType === "book" && ["presentation", "list", "table"].includes(viewType ?? ""));
const isElectron = getIsElectron();
const isMac = getIsMac();
const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "aiChat"].includes(noteType);
const isSearchOrBook = ["search", "book"].includes(noteType);
const [syncServerHost] = useTriliumOption("syncServerHost");
const { isReadOnly, enableEditing } = useIsNoteReadOnly(note, noteContext);
return (
<Dropdown
buttonClassName="bx bx-dots-vertical-rounded"
className="note-actions"
hideToggleArrow
noSelectButtonStyle
iconAction>
return (
<Dropdown
buttonClassName={ isNewLayout ? "bx bx-dots-horizontal-rounded" : "bx bx-dots-vertical-rounded" }
className="note-actions"
hideToggleArrow
noSelectButtonStyle
iconAction>
{isReadOnly && <>
<CommandItem icon="bx bx-pencil" text={t("read-only-info.edit-note")}
command={() => enableEditing()} />
<FormDropdownDivider />
</>}
{isReadOnly && <>
<CommandItem icon="bx bx-pencil" text={t("read-only-info.edit-note")}
command={() => enableEditing()} />
<FormDropdownDivider />
</>}
{canBeConvertedToAttachment && <ConvertToAttachment note={note} /> }
{note.type === "render" && <CommandItem command="renderActiveNote" icon="bx bx-extension" text={t("note_actions.re_render_note")} />}
<CommandItem command="findInText" icon="bx bx-search" disabled={!isSearchable} text={t("note_actions.search_in_note")} />
<CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
{isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" disabled={!isPrintable} text={t("note_actions.print_pdf")} />}
<FormDropdownDivider />
{canBeConvertedToAttachment && <ConvertToAttachment note={note} />}
{note.type === "render" && <CommandItem command="renderActiveNote" icon="bx bx-extension" text={t("note_actions.re_render_note")} />}
<CommandItem command="findInText" icon="bx bx-search" disabled={!isSearchable} text={t("note_actions.search_in_note")} />
<CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
{isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" disabled={!isPrintable} text={t("note_actions.print_pdf")} />}
<FormDropdownDivider />
<CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
disabled={isInOptionsOrHelp || note.type === "search"}
command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
<CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
disabled={isInOptionsOrHelp || note.noteId === "_backendLog"}
command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
notePath: noteContext.notePath,
defaultType: "single"
})} />
<FormDropdownDivider />
<CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
disabled={isInOptionsOrHelp || note.type === "search"}
command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
<CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
disabled={isInOptionsOrHelp || note.noteId === "_backendLog"}
command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
notePath: noteContext.notePath,
defaultType: "single"
})} />
<FormDropdownDivider />
<CommandItem command="openNoteExternally" icon="bx bx-file-find" disabled={isSearchOrBook || !isElectron} text={t("note_actions.open_note_externally")} title={t("note_actions.open_note_externally_title")} />
<CommandItem command="openNoteCustom" icon="bx bx-customize" disabled={isSearchOrBook || isMac || !isElectron} text={t("note_actions.open_note_custom")} />
<CommandItem command="showNoteSource" icon="bx bx-code" disabled={!hasSource} text={t("note_actions.note_source")} />
{(syncServerHost && isElectron) &&
<CommandItem command="openNoteOnServer" icon="bx bx-world" disabled={!syncServerHost} text={t("note_actions.open_note_on_server")} />
}
<FormDropdownDivider />
<CommandItem command="openNoteExternally" icon="bx bx-file-find" disabled={isSearchOrBook || !isElectron} text={t("note_actions.open_note_externally")} title={t("note_actions.open_note_externally_title")} />
<CommandItem command="openNoteCustom" icon="bx bx-customize" disabled={isSearchOrBook || isMac || !isElectron} text={t("note_actions.open_note_custom")} />
<CommandItem command="showNoteSource" icon="bx bx-code" disabled={!hasSource} text={t("note_actions.note_source")} />
{(syncServerHost && isElectron) &&
<CommandItem command="openNoteOnServer" icon="bx bx-world" disabled={!syncServerHost} text={t("note_actions.open_note_on_server")} />
}
<FormDropdownDivider />
<CommandItem command="forceSaveRevision" icon="bx bx-save" disabled={isInOptionsOrHelp} text={t("note_actions.save_revision")} />
<CommandItem icon="bx bx-trash destructive-action-icon" text={t("note_actions.delete_note")} destructive
disabled={isInOptionsOrHelp}
command={() => branches.deleteNotes([note.getParentBranches()[0].branchId])}
/>
<FormDropdownDivider />
<CommandItem command="showRevisions" icon="bx bx-history" text={t("revisions_button.note_revisions")} />
<CommandItem command="forceSaveRevision" icon="bx bx-save" disabled={isInOptionsOrHelp} text={t("note_actions.save_revision")} />
<CommandItem icon="bx bx-trash destructive-action-icon" text={t("note_actions.delete_note")} destructive
disabled={isInOptionsOrHelp}
command={() => branches.deleteNotes([note.getParentBranches()[0].branchId])}
/>
<FormDropdownDivider />
<CommandItem command="showAttachments" icon="bx bx-paperclip" disabled={isInOptionsOrHelp} text={t("note_actions.note_attachments")} />
{glob.isDev && <DevelopmentActions note={note} noteContext={noteContext} />}
</Dropdown>
);
<CommandItem command="showAttachments" icon="bx bx-paperclip" disabled={isInOptionsOrHelp} text={t("note_actions.note_attachments")} />
{glob.isDev && <DevelopmentActions note={note} noteContext={noteContext} />}
</Dropdown>
);
}
function DevelopmentActions({ note, noteContext }: { note: FNote, noteContext?: NoteContext }) {
@ -129,46 +129,46 @@ function DevelopmentActions({ note, noteContext }: { note: FNote, noteContext?:
throw new Error("Editor crashed.");
});
});
}}>Crash editor</FormListItem>)}
}}>Crash editor</FormListItem>)}
</>
)
);
}
function CommandItem({ icon, text, title, command, disabled }: { icon: string, text: string, title?: string, command: CommandNames | (() => void), disabled?: boolean, destructive?: boolean }) {
return <FormListItem
icon={icon}
title={title}
triggerCommand={typeof command === "string" ? command : undefined}
onClick={typeof command === "function" ? command : undefined}
disabled={disabled}
>{text}</FormListItem>
return <FormListItem
icon={icon}
title={title}
triggerCommand={typeof command === "string" ? command : undefined}
onClick={typeof command === "function" ? command : undefined}
disabled={disabled}
>{text}</FormListItem>;
}
function ConvertToAttachment({ note }: { note: FNote }) {
return (
<FormListItem
icon="bx bx-paperclip"
onClick={async () => {
if (!note || !(await dialog.confirm(t("note_actions.convert_into_attachment_prompt", { title: note.title })))) {
return;
}
return (
<FormListItem
icon="bx bx-paperclip"
onClick={async () => {
if (!note || !(await dialog.confirm(t("note_actions.convert_into_attachment_prompt", { title: note.title })))) {
return;
}
const { attachment: newAttachment } = await server.post<ConvertToAttachmentResponse>(`notes/${note.noteId}/convert-to-attachment`);
const { attachment: newAttachment } = await server.post<ConvertToAttachmentResponse>(`notes/${note.noteId}/convert-to-attachment`);
if (!newAttachment) {
toast.showMessage(t("note_actions.convert_into_attachment_failed", { title: note.title }));
return;
}
if (!newAttachment) {
toast.showMessage(t("note_actions.convert_into_attachment_failed", { title: note.title }));
return;
}
toast.showMessage(t("note_actions.convert_into_attachment_successful", { title: newAttachment.title }));
await ws.waitForMaxKnownEntityChangeId();
await appContext.tabManager.getActiveContext()?.setNote(newAttachment.ownerId, {
viewScope: {
viewMode: "attachments",
attachmentId: newAttachment.attachmentId
}
});
}}
>{t("note_actions.convert_into_attachment")}</FormListItem>
)
toast.showMessage(t("note_actions.convert_into_attachment_successful", { title: newAttachment.title }));
await ws.waitForMaxKnownEntityChangeId();
await appContext.tabManager.getActiveContext()?.setNote(newAttachment.ownerId, {
viewScope: {
viewMode: "attachments",
attachmentId: newAttachment.attachmentId
}
});
}}
>{t("note_actions.convert_into_attachment")}</FormListItem>
);
}

88
apps/client/src/widgets/ribbon/NoteInfoTab.tsx
View File

@ -8,30 +8,13 @@ import { formatDateTime } from "../../utils/formatters";
import { formatSize } from "../../services/utils";
import LoadingSpinner from "../react/LoadingSpinner";
import { useTriliumEvent } from "../react/hooks";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
import FNote from "../../entities/fnote";
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
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>();
function refresh() {
if (note) {
server.get<MetadataResponse>(`notes/${note?.noteId}/metadata`).then(setMetadata);
}
setNoteSizeResponse(undefined);
setSubtreeSizeResponse(undefined);
setIsLoading(false);
}
useEffect(refresh, [ note?.noteId ]);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
const noteId = note?.noteId;
if (noteId && (loadResults.isNoteReloaded(noteId) || loadResults.isNoteContentReloaded(noteId))) {
refresh();
}
});
const { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo } = useNoteMetadata(note);
return (
<div className="note-info-widget">
@ -41,14 +24,14 @@ export default function NoteInfoTab({ note }: TabContext) {
<span>{t("note_info_widget.note_id")}:</span>
<span className="note-info-id selectable-text">{note.noteId}</span>
</div>
<div className="note-info-item">
{!isNewLayout && <div className="note-info-item">
<span>{t("note_info_widget.created")}:</span>
<span className="selectable-text">{formatDateTime(metadata?.dateCreated)}</span>
</div>
<div className="note-info-item">
</div>}
{!isNewLayout && <div className="note-info-item">
<span>{t("note_info_widget.modified")}:</span>
<span className="selectable-text">{formatDateTime(metadata?.dateModified)}</span>
</div>
</div>}
<div className="note-info-item">
<span>{t("note_info_widget.type")}:</span>
<span>
@ -64,16 +47,7 @@ export default function NoteInfoTab({ note }: TabContext) {
className="calculate-button"
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);
}}
onClick={requestSizeInfo}
/>
)}
@ -90,5 +64,45 @@ export default function NoteInfoTab({ note }: TabContext) {
</>
)}
</div>
)
);
}
export function useNoteMetadata(note: FNote | null | undefined) {
const [ isLoading, setIsLoading ] = useState(false);
const [ noteSizeResponse, setNoteSizeResponse ] = useState<NoteSizeResponse>();
const [ subtreeSizeResponse, setSubtreeSizeResponse ] = useState<SubtreeSizeResponse>();
const [ metadata, setMetadata ] = useState<MetadataResponse>();
function refresh() {
if (note) {
server.get<MetadataResponse>(`notes/${note?.noteId}/metadata`).then(setMetadata);
}
setNoteSizeResponse(undefined);
setSubtreeSizeResponse(undefined);
setIsLoading(false);
}
function requestSizeInfo() {
if (!note) return;
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);
}
useEffect(refresh, [ note ]);
useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
const noteId = note?.noteId;
if (noteId && (loadResults.isNoteReloaded(noteId) || loadResults.isNoteContentReloaded(noteId))) {
refresh();
}
});
return { isLoading, metadata, noteSizeResponse, subtreeSizeResponse, requestSizeInfo };
}

13
apps/client/src/widgets/ribbon/Ribbon.tsx
View File

@ -4,11 +4,11 @@ import "./style.css";
import { Indexed, numberObjectsInPlace } from "../../services/utils";
import { EventNames } from "../../components/app_context";
import NoteActions from "./NoteActions";
import { KeyboardActionNames } from "@triliumnext/commons";
import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
import { TabConfiguration, TitleContext } from "./ribbon-interface";
import clsx from "clsx";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
@ -16,7 +16,9 @@ interface ComputedTab extends Indexed<TabConfiguration> {
shouldShow: boolean;
}
export default function Ribbon() {
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
export default function Ribbon({ children }: { children?: preact.ComponentChildren }) {
const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext();
const noteType = useNoteProperty(note, "type");
const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
@ -29,7 +31,8 @@ export default function Ribbon() {
async function refresh() {
const computedTabs: ComputedTab[] = [];
for (const tab of TAB_CONFIGURATION) {
const shouldShow = await shouldShowTab(tab.show, titleContext);
const shouldAvoid = (isNewLayout && tab.avoidInNewLayout);
const shouldShow = !shouldAvoid && await shouldShowTab(tab.show, titleContext);
computedTabs.push({
...tab,
shouldShow: !!shouldShow
@ -99,9 +102,7 @@ export default function Ribbon() {
/>
))}
</div>
<div className="ribbon-button-container">
{ note && <NoteActions note={note} noteContext={noteContext} /> }
</div>
{children}
</div>
<div className="ribbon-body-container">

4
apps/client/src/widgets/ribbon/RibbonDefinition.ts
View File

@ -16,6 +16,7 @@ import FormattingToolbar from "./FormattingToolbar";
import options from "../../services/options";
import { t } from "../../services/i18n";
import { TabConfiguration } from "./ribbon-interface";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
{
@ -27,7 +28,8 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
toggleCommand: "toggleRibbonTabClassicEditor",
content: FormattingToolbar,
activate: ({ note }) => !options.is("editedNotesOpenInRibbon") || !note?.hasOwnedLabel("dateNote"),
stayInDom: true
stayInDom: !isExperimentalFeatureEnabled("new-layout"),
avoidInNewLayout: true
},
{
title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),

1
apps/client/src/widgets/ribbon/ribbon-interface.ts
View File

@ -30,4 +30,5 @@ export interface TabConfiguration {
* By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed.
*/
stayInDom?: boolean;
avoidInNewLayout?: boolean;
}

21
apps/client/src/widgets/ribbon/style.css
View File

@ -415,3 +415,24 @@ body[dir=rtl] .attribute-list-editor {
pointer-events: none; /* makes it unclickable */
}
/* #endregion */
/* #region Experimental layout */
body.experimental-feature-new-layout {
.ribbon-container {
display: flex;
flex-direction: column-reverse;
border-top: 1px solid var(--main-border-color);
.ribbon-tab-spacer,
.ribbon-tab-title,
.ribbon-body {
border-bottom: 0 !important;
}
}
.ribbon-button-container {
border-bottom: 0 !important;
margin: 0;
}
}
/* #endregion */

28
apps/client/src/widgets/shared_info.tsx
View File

@ -10,8 +10,23 @@ import RawHtml from "./react/RawHtml";
export default function SharedInfo() {
const { note } = useNoteContext();
const [ syncServerHost ] = useTriliumOption("syncServerHost");
const { isSharedExternally, link } = useShareInfo(note);
return (
<InfoBar className="shared-info-widget" type="subtle" style={{display: (!link) ? "none" : undefined}}>
{link && (
<RawHtml html={isSharedExternally
? t("shared_info.shared_publicly", { link })
: t("shared_info.shared_locally", { link })} />
)}
<HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
</InfoBar>
);
}
export function useShareInfo(note: FNote | null | undefined) {
const [ link, setLink ] = useState<string>();
const [ syncServerHost ] = useTriliumOption("syncServerHost");
function refresh() {
if (!note) return;
@ -48,16 +63,7 @@ export default function SharedInfo() {
}
});
return (
<InfoBar className="shared-info-widget" type="subtle" style={{display: (!link) ? "none" : undefined}}>
{link && (
<RawHtml html={syncServerHost
? t("shared_info.shared_publicly", { link })
: t("shared_info.shared_locally", { link })} />
)}
<HelpButton helpPage="R9pX4DGra2Vt" style={{ width: "24px", height: "24px" }} />
</InfoBar>
)
return { link, isSharedExternally: !!syncServerHost };
}
function getShareId(note: FNote) {

22
apps/client/src/widgets/type_widgets/options/advanced.tsx
View File

@ -7,6 +7,9 @@ import FormText from "../../react/FormText";
import OptionsSection from "./components/OptionsSection"
import Column from "../../react/Column";
import { useEffect, useState } from "preact/hooks";
import CheckboxList from "./components/CheckboxList";
import { experimentalFeatures } from "../../../services/experimental_features";
import { useTriliumOptionJson } from "../../react/hooks";
export default function AdvancedSettings() {
return <>
@ -14,6 +17,7 @@ export default function AdvancedSettings() {
<DatabaseIntegrityOptions />
<DatabaseAnonymizationOptions />
<VacuumDatabaseOptions />
<ExperimentalOptions />
</>;
}
@ -173,3 +177,21 @@ function VacuumDatabaseOptions() {
</OptionsSection>
)
}
function ExperimentalOptions() {
const [ enabledExperimentalFeatures, setEnabledExperimentalFeatures ] = useTriliumOptionJson<string[]>("experimentalFeatures");
return (
<OptionsSection title={t("experimental_features.title")}>
<FormText>{t("experimental_features.disclaimer")}</FormText>
<CheckboxList
values={experimentalFeatures}
keyProperty="id"
titleProperty="name"
descriptionProperty="description"
currentValue={enabledExperimentalFeatures} onChange={setEnabledExperimentalFeatures}
/>
</OptionsSection>
);
}

28
apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
View File

@ -1,14 +1,17 @@
import FormCheckbox from "../../../react/FormCheckbox";
interface CheckboxListProps<T> {
values: T[];
keyProperty: keyof T;
titleProperty?: keyof T;
disabledProperty?: keyof T;
descriptionProperty?: keyof T;
currentValue: string[];
onChange: (newValues: string[]) => void;
columnWidth?: string;
}
export default function CheckboxList<T>({ values, keyProperty, titleProperty, disabledProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) {
export default function CheckboxList<T>({ values, keyProperty, titleProperty, disabledProperty, descriptionProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) {
function toggleValue(value: string) {
if (currentValue.includes(value)) {
// Already there, needs removing.
@ -22,20 +25,17 @@ export default function CheckboxList<T>({ values, keyProperty, titleProperty, di
return (
<ul style={{ listStyleType: "none", marginBottom: 0, columnWidth: columnWidth ?? "400px" }}>
{values.map(value => (
<li>
<label className="tn-checkbox">
<input
type="checkbox"
className="form-check-input"
value={String(value[keyProperty])}
checked={currentValue.includes(String(value[keyProperty]))}
disabled={!!(disabledProperty && value[disabledProperty])}
onChange={e => toggleValue((e.target as HTMLInputElement).value)}
/>
{String(value[titleProperty ?? keyProperty] ?? value[keyProperty])}
</label>
<li key={String(value[keyProperty])}>
<FormCheckbox
label={String(value[titleProperty ?? keyProperty] ?? value[keyProperty])}
name={String(value[keyProperty])}
currentValue={currentValue.includes(String(value[keyProperty]))}
disabled={!!(disabledProperty && value[disabledProperty])}
hint={value && (descriptionProperty ? String(value[descriptionProperty]) : undefined)}
onChange={() => toggleValue(String(value[keyProperty]))}
/>
</li>
))}
</ul>
)
);
}

1
apps/server/src/routes/api/options.ts
View File

@ -99,6 +99,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
"showLoginInShareTheme",
"splitEditorOrientation",
"seenCallToActions",
"experimentalFeatures",
// AI/LLM integration options
"aiEnabled",

3
apps/server/src/services/options_init.ts
View File

@ -215,7 +215,8 @@ const defaultOptions: DefaultOption[] = [
{ name: "aiSystemPrompt", value: "", isSynced: true },
{ name: "aiSelectedProvider", value: "openai", isSynced: true },
{ name: "seenCallToActions", value: "[]", isSynced: true }
{ name: "seenCallToActions", value: "[]", isSynced: true },
{ name: "experimentalFeatures", value: "[]", isSynced: true }
];
/**

1
packages/commons/src/lib/options_interface.ts
View File

@ -155,6 +155,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
codeOpenAiModel: string;
aiSelectedProvider: string;
seenCallToActions: string;
experimentalFeatures: string;
}
export type OptionNames = keyof OptionDefinitions;