feat(layout): move ribbon to the bottom as experimental layout

This commit is contained in:
Elian Doran 2025-12-09 19:42:37 +02:00
parent ae154212fe
commit 460d20d6b2
No known key found for this signature in database
2 changed files with 20 additions and 2 deletions

View File

@ -46,6 +46,7 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx"; import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
import Breadcrumb from "../widgets/Breadcrumb.jsx"; import Breadcrumb from "../widgets/Breadcrumb.jsx";
import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx"; import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
import { experimentalFeatures, isExperimentalFeatureEnabled } from "../services/experimental_features.js";
export default class DesktopLayout { export default class DesktopLayout {
@ -71,6 +72,7 @@ export default class DesktopLayout {
*/ */
const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac); const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows; const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
const isNewLayout = isExperimentalFeatureEnabled("new-layout");
const rootContainer = new RootContainer(true) const rootContainer = new RootContainer(true)
.setParent(appContext) .setParent(appContext)
@ -143,7 +145,7 @@ export default class DesktopLayout {
.child(<NoteIconWidget />) .child(<NoteIconWidget />)
.child(<NoteTitleWidget />) .child(<NoteTitleWidget />)
) )
.child(<Ribbon />) .optChild(!isNewLayout, <Ribbon />)
.child(new WatchedFileUpdateStatusWidget()) .child(new WatchedFileUpdateStatusWidget())
.child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />) .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
.child( .child(
@ -167,6 +169,7 @@ export default class DesktopLayout {
...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
...this.customWidgets.get("note-detail-pane") ...this.customWidgets.get("note-detail-pane")
) )
.optChild(isNewLayout, <Ribbon />)
) )
) )
.child(...this.customWidgets.get("center-pane")) .child(...this.customWidgets.get("center-pane"))

View File

@ -1,3 +1,5 @@
import options from "./options";
interface ExperimentalFeature { interface ExperimentalFeature {
id: string; id: string;
name: string; name: string;
@ -6,8 +8,21 @@ interface ExperimentalFeature {
export const experimentalFeatures: ExperimentalFeature[] = [ export const experimentalFeatures: ExperimentalFeature[] = [
{ {
id: "newLayout", id: "new-layout",
name: "New Layout", name: "New Layout",
description: "Try out the new layout for a more modern look and improved usability.", description: "Try out the new layout for a more modern look and improved usability.",
} }
]; ];
type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
if (!enabledFeatures) {
const features = JSON.parse(options.get("experimentalFeatures")) as string[];
enabledFeatures = new Set(features);
}
return enabledFeatures.has(featureId);
}