feat(options/appearance): improve new layout

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;
+                }
             }
         }
     }

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>

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) {