From 2759beb5d0484df5da90d49858cc506c78cd9209 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 17 Dec 2025 15:34:44 +0200
Subject: [PATCH] feat(options/appearance): improve new layout

---
 .../type_widgets/options/appearance.css       | 27 +++++++++++++++++--
 .../type_widgets/options/appearance.tsx       | 19 +++++++++++++
 .../components/RadioWithIllustration.tsx      |  2 +-
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index 4cfaa3450..04643120d 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -33,6 +33,7 @@
         padding: 12px 5px;
         overflow: hidden;
         flex-shrink: 0;
+        filter: blur(1px);
 
         ul {
             list-style-type: none;
@@ -45,21 +46,26 @@
         display: flex;
         flex-direction: column;
         flex-grow: 1;
+        font-size: 8px;
 
         .tab-bar {
-            height: 20px;
+            height: 10px;
+            flex-shrink: 0;
         }
 
         .content {
             background-color: var(--main-background-color);
             flex-grow: 1;
             border-top-left-radius: 6px;
-            padding: 5px;
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
 
             .title-bar {
                 display: flex;
                 align-items: center;
                 font-size: 14px;
+                padding: 5px;
 
                 .title {
                     flex-grow: 1;
@@ -67,6 +73,8 @@
             }
 
             .ribbon {
+                padding: 0 5px;
+
                 .bx {
                     font-size: 10px;
                 }
@@ -85,6 +93,21 @@
 
             .content-inner {
                 font-size: 6px;
+                overflow: hidden;
+                padding: 5px;
+                opacity: 0.5;
+                filter: blur(1px);
+            }
+
+            .status-bar {
+                background-color: var(--left-pane-background-color);
+                flex-shrink: 0;
+                padding: 0 2px;
+                display: flex;
+
+                &> .status-bar-breadcrumb {
+                    flex-grow: 1;
+                }
             }
         }
     }
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 5bc1b3854..f88ec4058 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -175,9 +175,28 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
                         <div className="ribbon-body" />
                     </div>}
 
+                    {isNewLayout && <div className="note-title-actions">
+                        <Icon icon="bx bx-chevron-down" />{" "}Promoted attributes
+                    </div>}
+
                     <div className="content-inner">
                         This is a "demo" document packaged with Trilium to showcase some of its features and also give you some ideas on how you might structure your notes. You can play with it, and modify the note content and tree structure as you wish.
                     </div>
+
+                    {isNewLayout && <div className="status-bar">
+                        <div className="status-bar-breadcrumb">
+                            <Icon icon="bx bx-home" />
+                            <Icon icon="bx bx-chevron-right" />
+                            Note
+                            <Icon icon="bx bx-chevron-right" />
+                            Note
+                        </div>
+
+                        <div className="status-bar-actions">
+                            <Icon icon="bx bx-list-check" />
+                            <Icon icon="bx bx-info-circle" />
+                        </div>
+                    </div>}
                 </div>
             </div>
         </div>
diff --git a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx
index f41d3701b..8d768f486 100644
--- a/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/RadioWithIllustration.tsx
@@ -10,7 +10,7 @@ interface RadioWithIllustrationProps {
         illustration: ComponentChild;
     }[];
     currentValue: string;
-    onChange(newValue: string);
+    onChange(newValue: string): void;
 }
 
 export default function RadioWithIllustration({ currentValue, onChange, values }: RadioWithIllustrationProps) {