style/bottom panel: improve appearance

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

apps/client/src/stylesheets/style.css

@@ -2195,8 +2195,9 @@ body.zen.experimental-feature-new-layout {
         border-radius: 8px;
         border: 1px solid var(--main-border-color);
         padding: 4px;
-        background: var(--menu-background-color);
+        background: var(--menu-background-color) !important;
         transform: translateX(-50%);
+        backdrop-filter: blur(6px);
     }
 
     #root-widget:has(.note-split.type-text:focus-within) .classic-toolbar-widget,

apps/client/src/stylesheets/theme-next-dark.css

@@ -77,6 +77,7 @@
     --link-color: #95c3d9;
     --link-hover-background: #75c2e324;
     --link-hover-color: var(--link-color);
+    --link-selection-outline-color: #75c2e385;
 
     --hover-item-text-color: #efefef;
     --hover-item-background-color: #ffffff16;
@@ -236,7 +237,9 @@
 
     --bottom-panel-background-color: #11111180;
     --bottom-panel-title-bar-background-color: #3F3F3F80;
-
+    
+    --status-bar-border-color: var(--main-border-color);
+    
     --scrollbar-thumb-color: #fdfdfd5c;
     --scrollbar-thumb-hover-color: #ffffff7d;
     --scrollbar-background-color: transparent;

apps/client/src/stylesheets/theme-next-light.css

@@ -77,6 +77,7 @@
     --link-color: #0076af;
     --link-hover-background: #3c7fa017;
     --link-hover-color: var(--link-color);
+    --link-selection-outline-color: #95c3d9db;
 
     --hover-item-text-color: black;
     --hover-item-background-color: #0000001a;
@@ -232,8 +233,10 @@
     --right-pane-item-hover-background: #00000013;
     --right-pane-item-hover-color: inherit;
 
-    --bottom-panel-background-color: #0000000a;
-    --bottom-panel-title-bar-background-color: #00000017;
+    --bottom-panel-background-color: #ffffff8c;
+    --bottom-panel-title-bar-background-color: #94949414;
+
+    --status-bar-border-color: #0000003a;
 
     --scrollbar-thumb-color: #0000005c;
     --scrollbar-thumb-hover-color: #00000066;

apps/client/src/stylesheets/theme-next/forms.css

@@ -353,6 +353,11 @@ label.input-group.tn-number-unit-pair input {
     padding-inline-end: 0;
 }
 
+:root .input-group > pre[aria-hidden="true"] {
+    margin: 0;
+    padding: 0;
+}
+
 /* Combo box-like dropdown buttons */
 
 .select-button.dropdown-toggle::after {

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -678,8 +678,8 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .ck-content a.ck-widget.ck-widget_selected,
 .ck-content a.ck-link_selected {
-    outline: 2px solid var(--input-focus-outline-color);
-    outline-offset: 2px;
+    outline: none;
+    box-shadow: 0 0 0 2px var(--link-selection-outline-color);
     background: var(--link-hover-background);
 } 
 
@@ -692,7 +692,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
      text-decoration: none;
 }
 
-.ck-content a.reference-link.use-note-color  > span {
+.ck-content a.reference-link > span.use-note-color {
     color: var(--custom-color, inherit);
 }
 

apps/client/src/stylesheets/theme-next/pages.css

@@ -172,6 +172,10 @@
     height: 0;
 }
 
+body.experimental-feature-new-layout .note-detail-content-widget-content.options {
+    padding-inline: 25px;
+}
+
 .options-section:not(.tn-no-card) {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
     box-shadow: var(--card-box-shadow);

apps/client/src/stylesheets/theme-next/shell.css

@@ -1085,7 +1085,7 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay
     margin-top: calc((var(--tab-bar-height) - var(--tab-height)) * -1);
 }
 
-body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper {
+body.layout-horizontal div.tab-row-widget div.note-tab div.note-tab-wrapper {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -1374,6 +1374,10 @@ body.mobile .note-title {
     border-bottom: 2px solid #0000001c !important;
 }
 
+body.experimental-feature-new-layout #center-pane .note-split > div.alert {
+    margin-top: 0;
+}
+
 /*
  * Promoted attributes
  */

apps/client/src/translations/cn/translation.json

@@ -21,8 +21,17 @@
     },
     "bundle-error": {
       "title": "加载自定义脚本失败",
-      "message": "来自 ID 为 \"{{id}}\"、标题为 \"{{title}}\" 的笔记的脚本因以下原因无法执行：\n\n{{message}}"
-    }
+      "message": "脚本因以下原因无法执行：\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "无法从服务器取得小部件清单"
+    },
+    "widget-render-error": {
+      "title": "渲染自定义 React 小部件失败"
+    },
+    "widget-missing-parent": "自定义小部件未定义强制性的 \"{{property}}\" 属性。",
+    "open-script-note": "打开脚本笔记",
+    "scripting-error": "自定义脚本错误：{{title}}"
   },
   "add_link": {
     "add_link": "添加链接",
@@ -1598,7 +1607,8 @@
     "note_type_switcher_others": "其他笔记类型",
     "note_type_switcher_templates": "模板",
     "note_type_switcher_collection": "集合",
-    "edited_notes": "编辑过的笔记"
+    "edited_notes": "今天编辑过的笔记",
+    "promoted_attributes": "升级属性"
   },
   "search_result": {
     "no_notes_found": "没有找到符合搜索条件的笔记。",

apps/client/src/translations/ja/translation.json

@@ -21,8 +21,17 @@
     },
     "bundle-error": {
       "title": "カスタムスクリプトの読み込みに失敗しました",
-      "message": "ノートID”{{id}}”, ノートタイトル “{{title}}” のスクリプトを実行できませんでした。理由は以下の通りです:\n\n{{message}}"
-    }
+      "message": "次の理由によりスクリプトを実行できませんでした:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "サーバーからウィジェットのリストを取得できませんでした"
+    },
+    "widget-render-error": {
+      "title": "カスタム React ウィジェットのレンダリングに失敗しました"
+    },
+    "widget-missing-parent": "カスタムウィジェットに必須の '{{property}}' プロパティが定義されていません。",
+    "open-script-note": "スクリプトノートを開く",
+    "scripting-error": "カスタムスクリプトエラー: {{title}}"
   },
   "add_link": {
     "add_link": "リンクを追加",
@@ -1254,7 +1263,8 @@
     "note_type_switcher_others": "その他のノートタイプ",
     "note_type_switcher_templates": "テンプレート",
     "note_type_switcher_collection": "コレクション",
-    "edited_notes": "編集済みノート"
+    "edited_notes": "この日に編集されたノート",
+    "promoted_attributes": "プロモート属性"
   },
   "search_result": {
     "no_notes_found": "指定された検索パラメータに該当するノートは見つかりませんでした。",

apps/client/src/translations/pl/translation.json

@@ -22,7 +22,15 @@
     "bundle-error": {
       "title": "Nie udało się załadować niestandardowego skryptu",
       "message": "Skrypt z notatki o ID \"{{id}}\", zatytułowany \"{{title}}\", nie mógł zostać wykonany z powodu:\n\n{{message}}"
-    }
+    },
+    "widget-list-error": {
+      "title": "Nie udało się pobrać listy widżetów z serwera"
+    },
+    "widget-render-error": {
+      "title": "Nie udało się wyrenderować niestandardowego widżetu React"
+    },
+    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.",
+    "open-script-note": "Otwórz notatkę ze skryptem"
   },
   "add_link": {
     "add_link": "Dodaj link",
@@ -434,7 +442,8 @@
   },
   "inherited_attribute_list": {
     "title": "Dziedziczone atrybuty",
-    "no_inherited_attributes": "Brak dziedziczonych atrybutów."
+    "no_inherited_attributes": "Brak dziedziczonych atrybutów.",
+    "none": "brak"
   },
   "note_info_widget": {
     "note_id": "ID notatki",
@@ -1937,7 +1946,10 @@
     "options": "Opcje",
     "modal_title": "Konfiguracja listy wyróżnień",
     "menu_configure": "Konfiguracja listy wyróżnień...",
-    "no_highlights": "Nie znaleziono wyróżnień."
+    "no_highlights": "Nie znaleziono wyróżnień.",
+    "title_with_count_one": "{{count}} podświetlenie",
+    "title_with_count_few": "{{count}} podświetlenia",
+    "title_with_count_many": "{{count}} podświetleń"
   },
   "quick-search": {
     "placeholder": "Szybkie wyszukiwanie",
@@ -2008,7 +2020,8 @@
   },
   "toc": {
     "table_of_contents": "Spis treści",
-    "options": "Opcje"
+    "options": "Opcje",
+    "no_headings": "Brak nagłówków."
   },
   "watched_file_update_status": {
     "file_last_modified": "Plik <code class=\"file-path\"></code> został ostatnio zmodyfikowany <span class=\"file-last-modified\"></span>.",
@@ -2206,5 +2219,14 @@
     "scroll_to_top_title": "Przejdź na początek notatki",
     "create_new_note": "Utwórz nową notatkę podrzędną",
     "empty_hide_archived_notes": "Ukryj zarchiwizowane notatki"
+  },
+  "attributes_panel": {
+    "title": "Atrybuty notatki"
+  },
+  "right_pane": {
+    "empty_message": "Brak elementów do wyświetlenia dla tej notatki",
+    "empty_button": "Ukryj panel",
+    "toggle": "Pokaż/ukryj prawy panel",
+    "custom_widget_go_to_source": "Przejdź do kodu źródłowego"
   }
 }

apps/client/src/translations/pt_br/translation.json

@@ -29,7 +29,15 @@
     "bundle-error": {
       "title": "Falha para carregar o script customizado",
       "message": "O script da nota com ID \"{{id}}\", intitulada \"{{title}}\", não pôde ser executado devido a:\n\n{{message}}"
-    }
+    },
+    "widget-list-error": {
+      "title": "Falha ao obter a lista de widgets do servidor"
+    },
+    "widget-render-error": {
+      "title": "Falha ao renderizar um widget React personalizado"
+    },
+    "widget-missing-parent": "O widget personalizado não possui a propriedade obrigatória '{{property}}' definida.",
+    "open-script-note": "Abrir nota de script"
   },
   "add_link": {
     "add_link": "Adicionar link",

apps/client/src/translations/ru/translation.json

@@ -21,8 +21,17 @@
     },
     "bundle-error": {
       "title": "Не удалось загрузить пользовательский скрипт",
-      "message": "Скрипт из заметки с идентификатором \"{{id}}\" и названием \"{{title}}\" не может быть выполнен по следующим причинам:\n\n{{message}}"
-    }
+      "message": "Скрипт не может быть выполнен. Причина:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "Не удалось получить список виджетов с сервера"
+    },
+    "widget-render-error": {
+      "title": "Не удалось отобразить пользовательский React виджет"
+    },
+    "widget-missing-parent": "В пользовательском виджете не определено обязательное свойство '{{property}}'.",
+    "open-script-note": "Открыть заметку со скриптом",
+    "scripting-error": "Ошибка пользовательского скрипта: {{title}}"
   },
   "add_link": {
     "add_link": "Добавить ссылку",
@@ -2026,13 +2035,14 @@
   },
   "note_title": {
     "placeholder": "введите здесь название заметки...",
-    "edited_notes": "Измененные заметки",
+    "edited_notes": "Измененные в этот день заметки",
     "note_type_switcher_collection": "Коллекция",
     "note_type_switcher_templates": "Шаблон",
     "note_type_switcher_others": "Другой тип заметки",
     "note_type_switcher_label": "Переключить с {{type}} на:",
     "last_modified": "Изменена <Value />",
-    "created_on": "Создана в <Value />"
+    "created_on": "Создана в <Value />",
+    "promoted_attributes": "Продвигаемые атрибуты"
   },
   "units": {
     "percentage": "%"

apps/client/src/translations/tw/translation.json

@@ -22,7 +22,15 @@
     "bundle-error": {
       "title": "載入自訂腳本失敗",
       "message": "來自 ID 為 \"{{id}}\"、標題為 \"{{title}}\" 的筆記的腳本因以下原因無法執行：\n\n{{message}}"
-    }
+    },
+    "widget-list-error": {
+      "title": "無法從伺服器取得元件清單"
+    },
+    "widget-render-error": {
+      "title": "無法渲染自訂 React 元件"
+    },
+    "widget-missing-parent": "自訂元件未定義強制性的 \"{{property}}\" 屬性。",
+    "open-script-note": "打開腳本筆記"
   },
   "add_link": {
     "add_link": "新增連結",
@@ -815,7 +823,8 @@
   },
   "inherited_attribute_list": {
     "title": "繼承的屬性",
-    "no_inherited_attributes": "沒有繼承的屬性。"
+    "no_inherited_attributes": "沒有繼承的屬性。",
+    "none": "無"
   },
   "note_info_widget": {
     "note_id": "筆記 ID",
@@ -1513,6 +1522,7 @@
     "title": "高亮列表",
     "options": "選項",
     "title_with_count_one": "{{count}} 處高亮",
+    "title_with_count_other": "{{count}} 處高亮",
     "modal_title": "設定高亮列表",
     "menu_configure": "設定高亮列表…",
     "no_highlights": "未找到高亮內容。"
@@ -2089,7 +2099,8 @@
     "next_theme_button": "試用新主題",
     "dismiss": "關閉",
     "new_layout_title": "新版面配置",
-    "new_layout_button": "更多資訊"
+    "new_layout_button": "更多資訊",
+    "new_layout_message": "我們為 Trilium 推出了現代化版面配置。功能區分頁已移除並無縫整合至主介面，取而代之的是全新狀態列與可擴展區塊（例如提升屬性）承擔其主要功能。\n\n新版面配置預設為啟用狀態，您可透過「選項 → 外觀」暫時停用。"
   },
   "settings": {
     "related_settings": "相關設定"
@@ -2167,7 +2178,12 @@
     "shared_unshare": "取消分享",
     "clipped_note": "網頁擷取",
     "execute_script": "運行腳本",
-    "execute_sql": "運行 SQL"
+    "execute_sql": "運行 SQL",
+    "read_only_auto_description": "基於效能考量，此筆記已自動設定為唯讀模式。此自動限制可於設定中調整。\n\n點擊此處可臨時編輯。",
+    "read_only_temporarily_disabled_description": "此筆記目前可編輯，但通常為唯讀狀態。當您切換至其他筆記時，本筆記將立即恢復為唯讀模式。\n\n點擊此處重新啟用唯讀模式。",
+    "clipped_note_description": "本筆記原始來源為 {{url}}。\n\n點擊此處前往原網頁。",
+    "execute_script_description": "此筆記為腳本筆記。點擊以執行腳本。",
+    "execute_sql_description": "此筆記為 SQL 筆記。點擊以執行 SQL 查詢。"
   },
   "breadcrumb": {
     "hoisted_badge": "聚焦",
@@ -2181,18 +2197,28 @@
     "language_title": "更改內容語言",
     "note_info_title": "查看筆記資訊（如日期、筆記大小）",
     "backlinks_one": "{{count}} 個反連結",
+    "backlinks_other": "",
     "backlinks_title_one": "查看反連結",
+    "backlinks_title_other": "",
     "attachments_one": "{{count}} 個附件",
+    "attachments_other": "",
     "attachments_title_one": "在新分頁中查看附件",
+    "attachments_title_other": "",
     "attributes_one": "{{count}} 個屬性",
+    "attributes_other": "",
     "attributes_title": "自有屬性及繼承屬性",
     "note_paths_one": "{{count}} 條路徑",
+    "note_paths_other": "",
     "note_paths_title": "筆記路徑",
     "code_note_switcher": "更改語言模式"
   },
   "right_pane": {
     "empty_button": "隱藏面板",
     "toggle": "切換右側面板",
-    "custom_widget_go_to_source": "跳轉至原始碼"
+    "custom_widget_go_to_source": "跳轉至原始碼",
+    "empty_message": "此筆記無內容可顯示"
+  },
+  "attributes_panel": {
+    "title": "筆記屬性"
   }
 }

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -82,7 +82,7 @@ const TPL = /*html*/`
     <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
         <h5 class="attr-detail-title">${t("attribute_detail.attr_detail_title")}</h5>
 
-        <span class="bx bx-x close-attr-detail-button tn-tool-button" title="${t("attribute_detail.close_button_title")}"></span>
+        <button class="close-attr-detail-button icon-action bx bx-x" title="${t("attribute_detail.close_button_title")}"></button>
     </div>
 
     <div class="attr-is-owned-by">${t("attribute_detail.attr_is_owned_by")}</div>

apps/client/src/widgets/layout/InlineTitle.css

@@ -9,6 +9,7 @@
 .inline-title {
     max-width: var(--max-content-width);
     container-type: inline-size;
+    padding-top: 20px;
     padding-inline-start: 24px;
 
     & > .inline-title-row {

apps/client/src/widgets/layout/StatusBar.css

@@ -1,6 +1,6 @@
 .component.status-bar {
     contain: none;
-    border-top: 1px solid var(--main-border-color);
+    border-top: 1px solid var(--status-bar-border-color);
 
     > .status-bar-main-row {
         min-height: 28px;
@@ -298,6 +298,11 @@
     margin: 0 !important;
     padding: 0;
 
+    body.layout-horizontal.background-effects & {
+        /* Do not apply Mica over the bottom panel in the horizontal layout */
+        background: var(--right-pane-background-color);
+    }
+
     .bottom-panel-title-bar {
         display: flex;
         padding: 6px 12px;

apps/client/src/widgets/note_title.css

@@ -18,6 +18,10 @@ div.note-title-widget {
     line-height: 1;
     padding-block: 0;
     padding-inline: var(--note-title-padding-inline);
+
+    &::selection {
+        color: var(--main-text-color);
+    }
 }
 
 .note-title-widget input.note-title[readonly] {

apps/client/src/widgets/type_widgets/options/appearance.css

@@ -54,6 +54,7 @@
         }
 
         .content {
+            padding-inline-start: 6px;
             background-color: var(--main-background-color);
             flex-grow: 1;
             border-top-left-radius: 6px;
@@ -68,7 +69,9 @@
                 padding: 5px;
 
                 .title {
+                    margin-inline-start: 4px;
                     flex-grow: 1;
+                    font-size: 12px;
                 }
             }
 
@@ -81,13 +84,63 @@
 
                 .ribbon-header {
                     display: flex;
+                    gap: 3px;
                 }
 
                 .ribbon-body {
-                    height: 20px;
-                    background-color: rgba(0, 0, 0, 0.05);
-                    border-radius: 6px;
-                    margin: 1px 0;
+                    border: 0 solid var(--main-text-color);
+                    border-top-width: 1px;
+                    border-bottom-width: 1px;
+                    margin: 2px 0;
+
+                    .ribbon-body-content {
+                        height: 4px;
+                        margin-block: 4px;
+                        background: repeating-linear-gradient(90deg, currentColor, currentColor 10px, transparent 10px, transparent 22px);
+                        opacity: .5;
+                    }
+                }
+            }
+
+            .note-header {
+                display: flex;
+                flex-direction: column;
+                padding-inline: 2px;
+
+                .note-toolbar {
+                    align-self: flex-end;
+                }
+
+                .note-inline-title {
+                    display: flex;
+                    align-items: center;
+                    padding-bottom: 4px;
+
+                    .note-icon {
+                        display: flex;
+                        width: 22px;
+                        height: 22px;
+                        justify-content: center;
+                        align-items: center;
+                        border-radius: 50%;
+                        background: var(--note-icon-hover-background-color);
+                        font-size: 12px;
+                        color: var(--note-icon-color);
+                    }
+
+                    .note-title-row {
+                        margin-inline-start: 4px;
+                        line-height: 1;
+
+                        .title {
+                            font-size: 11px;
+                        }
+
+                        .subtitle {
+                            font-size: 6px;
+                            opacity: .5;
+                        }
+                    }
                 }
             }
 

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -159,11 +159,29 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
                 <div className="tab-bar" />
 
                 <div className="content">
-                    <div className="title-bar">
-                        <Icon icon="bx bx-note" />
-                        <span className="title">Title</span>
-                        <Icon icon="bx bx-dock-right" />
+
+                    {(isNewLayout) ? (
+                        <div className="note-header">
+                            <div className="note-toolbar">
+                                <Icon icon="bx bx-dock-right" />
+                            </div>
+                            <div className="note-inline-title">
+                                <Icon className="note-icon" icon="bx bx-leaf" />
+                                <div className="note-title-row">
+                                    <div className="title">Title</div>
+                                    <div className="subtitle">Just a sample note</div>
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                    <div>
+                        <div className="title-bar">
+                            <Icon icon="bx bx-leaf" />
+                            <span className="title">Title</span>
+                            <Icon icon="bx bx-dock-right" />
+                        </div>
                     </div>
+                    )}
 
                     {!isNewLayout && <div className="ribbon">
                         <div className="ribbon-header">
@@ -173,7 +191,9 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
                             <Icon icon="bx bx-collection" />
                         </div>
 
-                        <div className="ribbon-body" />
+                        <div className="ribbon-body">
+                            <div className="ribbon-body-content"></div>
+                        </div>
                     </div>}
 
                     {isNewLayout && <div className="note-title-actions">

apps/client/src/widgets/watched_file_update_status.ts

@@ -17,7 +17,7 @@ const TPL = /*html*/`
 
     <p>${t("watched_file_update_status.file_last_modified")}</p>
 
-    <div style="display: flex; flex-direction: row; justify-content: space-evenly;">
+    <div style="display: flex; flex-direction: row; justify-content: flex-start; gap: 8px;">
         <button class="btn btn-sm file-upload-button">${t("watched_file_update_status.upload_modified_file")}</button>
 
         <button class="btn btn-sm ignore-this-change-button">${t("watched_file_update_status.ignore_this_change")}</button>