Merge branch 'main' of https://github.com/TriliumNext/Trilium into feat/restyle-canvas

apps/client/src/stylesheets/style.css

@@ -1979,6 +1979,10 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     -webkit-app-region: drag;
 }
 
+body.electron.platform-darwin:not(.native-titlebar) #tab-row-left-spacer {
+    width: 80px;
+}
+
 .tab-row-widget {
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }

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

@@ -100,7 +100,7 @@ body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
-#launcher-container {
+body[dir=ltr] #launcher-container {
     scrollbar-gutter: stable both-edges;
 }
 

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

@@ -1 +1,8 @@
-{}
+{
+  "about": {
+    "title": "Om Trilium Notes",
+    "homepage": "Hemsida:",
+    "app_version": "App version:",
+    "db_version": "DB version:"
+  }
+}

apps/client/src/widgets/react/Dropdown.tsx

@@ -1,11 +1,10 @@
 import { Dropdown as BootstrapDropdown } from "bootstrap";
 import { ComponentChildren } from "preact";
-import { CSSProperties } from "preact/compat";
+import { CSSProperties, HTMLProps } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { useUniqueName } from "./hooks";
 
-export interface DropdownProps {
-    className?: string;
+export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
     buttonClassName?: string;
     isStatic?: boolean;
     children: ComponentChildren;
@@ -22,7 +21,7 @@ export interface DropdownProps {
     forceShown?: boolean;
 }
 
-export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -74,7 +73,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
                 aria-haspopup="true"
                 aria-expanded="false"
                 title={title}
-                id={ariaId}
+                id={id ?? ariaId}
                 disabled={disabled}
             >
                 {text}

apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx

@@ -5,7 +5,7 @@ import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormL
 import { getAvailableLocales, t } from "../../services/i18n";
 import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
 import mime_types from "../../services/mime_types";
-import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
+import { Locale, LOCALES, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
 import server from "../../services/server";
 import dialog from "../../services/dialog";
 import FormToggle from "../react/FormToggle";
@@ -20,6 +20,7 @@ import { TabContext } from "./ribbon-interface";
 import Modal from "../react/Modal";
 import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
 import { ContentLanguagesList } from "../type_widgets/options/i18n";
+import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector";
 
 export default function BasicPropertiesTab({ note }: TabContext) {
     return (
@@ -290,68 +291,31 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
         id: "",
         name: t("note_language.not_set")
     };
-
     const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
     const [ modalShown, setModalShown ] = useState(false);
-
     const locales = useMemo(() => {
         const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
         const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
-        const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl);
-        const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl);
-
-        let locales: ("---" | Locale)[] = [
-            DEFAULT_LOCALE
-        ];
-
-        if (leftToRightLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...leftToRightLanguages
-            ];
-        }
-
-        if (rightToLeftLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...rightToLeftLanguages
-            ];
-        }
-
-        // This will separate the list of languages from the "Configure languages" button.
-        // If there is at least one language.
-        locales.push("---");
-        return locales;
+        return filteredLanguages;
     }, [ languages ]);
 
-    const currentLocale = useMemo(() => {
-        return locales.find(locale => typeof locale === "object" && locale.id === currentNoteLanguage) as Locale | undefined;
-    }, [ currentNoteLanguage ]);
-
     return (
         <div className="note-language-container">
             <span>{t("basic_properties.language")}:</span>
             &nbsp;
-            <Dropdown text={currentLocale?.name ?? DEFAULT_LOCALE.name}>
-                {locales.map(locale => {
-                    if (typeof locale === "object") {
-                        const checked = locale.id === (currentNoteLanguage ?? "");
-                        return <FormListItem
-                            rtl={locale.rtl}
-                            checked={checked}
-                            onClick={() => setCurrentNoteLanguage(locale.id || null)}
-                        >{locale.name}</FormListItem>
-                    } else {
-                        return <FormDropdownDivider />
-                    }
-                })}
+            <LocaleSelector
+                locales={locales}
+                defaultLocale={DEFAULT_LOCALE}
+                currentValue={currentNoteLanguage ?? ""} onChange={setCurrentNoteLanguage}
+                extraChildren={(
+                    <FormListItem
+                        onClick={() => setModalShown(true)}
+                        icon="bx bx-cog"
+                    >{t("note_language.configure-languages")}</FormListItem>
+                )}
+            >
 
-                <FormListItem
-                    onClick={() => setModalShown(true)}
-                >{t("note_language.configure-languages")}</FormListItem>
-            </Dropdown>
+            </LocaleSelector>
 
             <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
 
@@ -364,7 +328,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                 <ContentLanguagesList />
             </Modal>
         </div>
-    )
+    );
 }
 
 function findTypeTitle(type?: NoteType, mime?: string | null) {

apps/client/src/widgets/type_widgets/options/components/LocaleSelector.tsx

@@ -0,0 +1,63 @@
+import { Locale } from "@triliumnext/commons";
+import Dropdown from "../../../react/Dropdown";
+import { FormDropdownDivider, FormListItem } from "../../../react/FormList";
+import { ComponentChildren } from "preact";
+import { useMemo, useState } from "preact/hooks";
+
+export function LocaleSelector({ id, locales, currentValue, onChange, defaultLocale, extraChildren }: {
+    id?: string;
+    locales: Locale[],
+    currentValue: string,
+    onChange: (newLocale: string) => void,
+    defaultLocale?: Locale,
+    extraChildren?: ComponentChildren
+}) {
+    const [ activeLocale, setActiveLocale ] = useState(defaultLocale?.id === currentValue ? defaultLocale : locales.find(l => l.id === currentValue));
+    console.log("defaultLocale ", defaultLocale, currentValue, activeLocale)
+
+    const processedLocales = useMemo(() => {
+        const leftToRightLanguages = locales.filter((l) => !l.rtl);
+        const rightToLeftLanguages = locales.filter((l) => l.rtl);
+
+        let items: ("---" | Locale)[] = [];
+        if (defaultLocale) items.push(defaultLocale);
+
+        if (leftToRightLanguages.length > 0) {
+            if (items.length > 0) items.push("---");
+            items = [ ...items, ...leftToRightLanguages ];
+        }
+
+        if (rightToLeftLanguages.length > 0) {
+            items = [
+                ...items,
+                "---",
+                ...rightToLeftLanguages
+            ];
+        }
+
+        if (extraChildren) {
+            items.push("---");
+        }
+        return items;
+    }, [ locales ]);
+
+    return (
+        <Dropdown id={id} text={activeLocale?.name}>
+            {processedLocales.map(locale => {
+                if (typeof locale === "object") {
+                    return <FormListItem
+                        rtl={locale.rtl}
+                        checked={locale.id === currentValue}
+                        onClick={() => {
+                            setActiveLocale(locale);
+                            onChange(locale.id);
+                        }}
+                    >{locale.name}</FormListItem>
+                } else {
+                    return <FormDropdownDivider />
+                }
+            })}
+            {extraChildren}
+        </Dropdown>
+    )
+}

apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

@@ -10,10 +10,16 @@
     margin-bottom: 0 !important;
 }
 
-.option-row > select {
+.option-row > select,
+.option-row > .dropdown {
     width: 60%;
 }
 
+.option-row > .dropdown button {
+    width: 100%;
+    text-align: start;
+}
+
 .option-row:last-of-type {
     border-bottom: unset;
 }

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

@@ -5,13 +5,14 @@ import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption, useTriliumOptionJson } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
-import { isElectron, restartDesktopApp } from "../../../services/utils";
-import FormRadioGroup, { FormInlineRadioGroup } from "../../react/FormRadioGroup";
+import { restartDesktopApp } from "../../../services/utils";
+import FormRadioGroup from "../../react/FormRadioGroup";
 import FormText from "../../react/FormText";
 import RawHtml from "../../react/RawHtml";
 import Admonition from "../../react/Admonition";
 import Button from "../../react/Button";
 import CheckboxList from "./components/CheckboxList";
+import { LocaleSelector } from "./components/LocaleSelector";
 
 export default function InternationalizationOptions() {
     return (
@@ -32,7 +33,6 @@ function LocalizationOptions() {
                 return true;
             }),
             formattingLocales: [
-                { id: "", name: t("i18n.formatting-locale-auto") },
                 ...allLocales.filter(locale => locale.electronLocale)
             ]
         }
@@ -48,7 +48,7 @@ function LocalizationOptions() {
             </OptionsRow>
 
             {<OptionsRow name="formatting-locale" label={t("i18n.formatting-locale")}>
-                <LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
+                <LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} defaultLocale={{ id: "", name: t("i18n.formatting-locale-auto") }} />
             </OptionsRow>}
 
             <DateSettings />
@@ -56,15 +56,6 @@ function LocalizationOptions() {
     )
 }
 
-function LocaleSelector({ id, locales, currentValue, onChange }: { id?: string; locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
-    return <FormSelect
-        id={id}
-        values={locales}
-        keyProperty="id" titleProperty="name"
-        currentValue={currentValue} onChange={onChange}
-    />;
-}
-
 function DateSettings() {
     const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek");
     const [ firstWeekOfYear, setFirstWeekOfYear ] = useTriliumOption("firstWeekOfYear");