Merge branch 'main' into totp

apps/client/package.json

@@ -58,7 +58,7 @@
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.39",
+    "katex": "0.16.38",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",

apps/client/src/services/content_renderer.ts

@@ -8,7 +8,6 @@ import FAttachment from "../entities/fattachment.js";
 import FNote from "../entities/fnote.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
 import { t } from "../services/i18n.js";
-import { renderReactWidget, renderReactWidgetAtElement } from "../widgets/react/react_utils";
 import renderText from "./content_renderer_text.js";
 import renderDoc from "./doc_renderer.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
@@ -213,16 +212,15 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
 
         $content.append($audioPreview);
     } else if (type === "video") {
-        const url = openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`);
-        const mime = entity.mime;
+        const $videoPreview = $("<video controls></video>")
+            .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
+            .attr("type", entity.mime)
+            .css("width", "100%");
 
-        const VideoPreviewContent = (await import("../widgets/type_widgets/file/Video")).VideoPreviewContent;
-        const $viewer = renderReactWidget(null, h(VideoPreviewContent, { url, mime }));
-
-        $content.append($viewer);
+        $content.append($videoPreview);
     }
 
-    if (entityType === "notes" && "noteId" in entity && type !== "video") {
+    if (entityType === "notes" && "noteId" in entity) {
         // TODO: we should make this available also for attachments, but there's a problem with "Open externally" support
         //       in attachment list
         const $downloadButton = $(`

apps/client/src/setup.ts

@@ -17,6 +17,9 @@ class SetupController {
     private syncServerHostInput: HTMLInputElement;
     private syncProxyInput: HTMLInputElement;
     private passwordInput: HTMLInputElement;
+    private totpTokenInput: HTMLInputElement;
+    private totpSection: HTMLElement;
+    private totpEnabled = false;
     private sections: Record<SetupStep, HTMLElement>;
 
     constructor(rootNode: HTMLElement, syncInProgress: boolean) {
@@ -29,6 +32,8 @@ class SetupController {
         this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
         this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
         this.passwordInput = mustGetElement("password", HTMLInputElement);
+        this.totpTokenInput = mustGetElement("totp-token", HTMLInputElement);
+        this.totpSection = mustGetElement("totp-section", HTMLElement);
         this.sections = {
             "setup-type": mustGetElement("setup-type-section", HTMLElement),
             "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
@@ -56,6 +61,10 @@ class SetupController {
             });
         }
 
+        this.syncServerHostInput.addEventListener("blur", () => {
+            void this.checkTotpStatus();
+        });
+
         for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
             backButton.addEventListener("click", () => {
                 this.back();
@@ -87,9 +96,40 @@ class SetupController {
         }
     }
 
+    private async checkTotpStatus() {
+        const syncServerHost = this.syncServerHostInput.value.trim();
+
+        if (!syncServerHost) {
+            this.setTotpEnabled(false);
+            return;
+        }
+
+        try {
+            const resp = await $.post("api/setup/check-server-totp", {
+                syncServerHost
+            });
+
+            this.setTotpEnabled(!!resp.totpEnabled);
+        } catch {
+            // If we can't reach the server, don't show the TOTP field yet.
+            this.setTotpEnabled(false);
+        }
+    }
+
+    private setTotpEnabled(enabled: boolean) {
+        this.totpEnabled = enabled;
+
+        if (!enabled) {
+            this.totpTokenInput.value = "";
+        }
+
+        this.render();
+    }
+
     private back() {
         this.setStep("setup-type");
         this.setupType = "";
+        this.setTotpEnabled(false);
 
         for (const input of this.setupTypeInputs) {
             input.checked = false;
@@ -113,11 +153,21 @@ class SetupController {
             return;
         }
 
+        await this.checkTotpStatus();
+
+        const totpToken = this.totpTokenInput.value.trim();
+
+        if (this.totpEnabled && !totpToken) {
+            showAlert("TOTP token can't be empty when two-factor authentication is enabled");
+            return;
+        }
+
         // not using server.js because it loads too many dependencies
         const resp = await $.post("api/setup/sync-from-server", {
             syncServerHost,
             syncProxy,
-            password
+            password,
+            totpToken
         });
 
         if (resp.result === "success") {
@@ -139,13 +189,10 @@ class SetupController {
             section.style.display = step === this.step ? "" : "none";
         }
 
+        this.totpSection.style.display = this.totpEnabled ? "" : "none";
         this.setupTypeNextButton.disabled = !this.setupType;
     }
 
-    private getSelectedSetupType(): SetupType {
-        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
-    }
-
     private startSyncPolling() {
         if (this.syncPollIntervalId !== null) {
             return;
@@ -196,7 +243,7 @@ function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): Inst
     return element as InstanceType<T>;
 }
 
-addEventListener("DOMContentLoaded", (event) => {
+addEventListener("DOMContentLoaded", () => {
     const rootNode = document.getElementById("setup-dialog");
     if (!rootNode || !(rootNode instanceof HTMLElement)) return;
 

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

@@ -1042,7 +1042,6 @@
     "pause": "Pause (Space)",
     "back-10s": "Back 10s (Left arrow key)",
     "forward-30s": "Forward 30s",
-    "volume": "Volume",
     "mute": "Mute (M)",
     "unmute": "Unmute (M)",
     "playback-speed": "Playback speed",
@@ -1055,8 +1054,7 @@
     "exit-fullscreen": "Exit fullscreen",
     "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
     "zoom-to-fit": "Zoom to fill",
-    "zoom-reset": "Reset zoom to fill",
-    "more-options": "More options"
+    "zoom-reset": "Reset zoom to fill"
   },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",

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

@@ -1,18 +1,18 @@
-import appContext from "../../components/app_context.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
-import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
-import froca from "../../services/froca.js";
 import { t } from "../../services/i18n.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
+import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from "../../services/promoted_attribute_definition_parser.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import shortcutService from "../../services/shortcuts.js";
+import appContext from "../../components/app_context.js";
+import type { Attribute } from "../../services/attribute_parser.js";
+import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
 
 const TPL = /*html*/`
 <div class="attr-detail tn-tool-dialog">
@@ -29,7 +29,6 @@ const TPL = /*html*/`
             max-height: 600px;
             overflow: auto;
             box-shadow: 10px 10px 93px -25px black;
-            contain: none;
         }
 
         .attr-help td {
@@ -344,7 +343,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
     private $relatedNotesList!: JQuery<HTMLElement>;
     private $relatedNotesMoreNotes!: JQuery<HTMLElement>;
     private $attrHelp!: JQuery<HTMLElement>;
-    private $statusBar?: JQuery<HTMLElement>;
 
     private relatedNotesSpacedUpdate!: SpacedUpdate;
     private attribute!: Attribute;
@@ -579,24 +577,17 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (isNewLayout) {
-            if (!this.$statusBar) {
-                this.$statusBar = $(document.body).find(".component.status-bar");
-            }
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
 
-            const statusBarHeight = this.$statusBar.outerHeight() ?? 0;
-            const maxHeight = document.body.clientHeight - statusBarHeight;
+        if (isNewLayout) {
             this.$widget
-                .css("left", offset.left + (typeof detPosition.left === "number" ? detPosition.left : 0))
                 .css("top", "unset")
-                .css("bottom", statusBarHeight ?? 0)
-                .css("max-height", maxHeight);
-        } else {
-            this.$widget
-                .css("left", detPosition.left)
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+                .css("bottom", 70)
+                .css("max-height", "80vh");
         }
 
         if (focus === "name") {
@@ -704,14 +695,14 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
                 return "label-definition";
             } else if (attribute.name.startsWith("relation:")) {
                 return "relation-definition";
+            } else {
+                return "label";
             }
-            return "label";
-
         } else if (attribute.type === "relation") {
             return "relation";
+        } else {
+            this.$title.text("");
         }
-        this.$title.text("");
-
     }
 
     updateAttributeInEditor() {

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -12,11 +12,6 @@
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
-
-        body.mobile & {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-        }
     }
 
     .note-list-bottom-pager {
@@ -274,9 +269,8 @@
     overflow: hidden;
     user-select: none;
 
-    body.mobile &.mobile-full-width {
-        grid-column-start: 1;
-        grid-column-end: 3;
+    body.mobile & {
+        flex-basis: 150px;
     }
 
     &:hover {
@@ -370,19 +364,23 @@
         mask-repeat: no-repeat;
         mask-size: 100% 100%;
     }
-
+    
     .ck-content p {
         margin-bottom: 0.5em;
         line-height: 1.3;
     }
 
+    .ck-content figure.image {
+        width: 25%;
+    }
+
     .ck-content .table {
         display: flex;
         flex-direction: column-reverse;
         overflow-x: scroll;
         --scrollbar-thickness: 0;
         scrollbar-width: none;
-
+        
         table {
             width: max-content;
             table-layout: auto;
@@ -437,4 +435,4 @@
     }
 }
 
-/* #endregion */
+/* #endregion */

apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

@@ -1,25 +1,25 @@
 import "./ListOrGridView.css";
+import { Card, CardFrame, CardSection } from "../../react/Card";
 
-import { clsx } from "clsx";
-import { ComponentChildren, TargetedMouseEvent } from "preact";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { JSX } from "preact/jsx-runtime";
 
 import FNote from "../../../entities/fnote";
-import linkContextMenuService from "../../../menus/link_context_menu";
 import attribute_renderer from "../../../services/attribute_renderer";
 import content_renderer from "../../../services/content_renderer";
 import { t } from "../../../services/i18n";
 import link from "../../../services/link";
 import CollectionProperties from "../../note_bars/CollectionProperties";
-import ActionButton from "../../react/ActionButton";
-import { Card, CardFrame, CardSection } from "../../react/Card";
 import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../../react/hooks";
 import Icon from "../../react/Icon";
 import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
-import { Pager, PaginationContext,usePagination } from "../Pagination";
+import { Pager, usePagination, PaginationContext } from "../Pagination";
 import { filterChildNotes, useFilteredNoteIds } from "./utils";
+import { JSX } from "preact/jsx-runtime";
+import { clsx } from "clsx";
+import ActionButton from "../../react/ActionButton";
+import linkContextMenuService from "../../../menus/link_context_menu";
+import { ComponentChildren, TargetedMouseEvent } from "preact";
 
 const contentSizeObserver = new ResizeObserver(onContentResized);
 
@@ -53,13 +53,13 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
         <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
             {pageNotes?.map(childNote => (
                 <GridNoteCard key={childNote.noteId}
-                    note={childNote}
-                    parentNote={note}
-                    highlightedTokens={highlightedTokens}
-                    includeArchived={includeArchived} />
+                                note={childNote}
+                                parentNote={note}
+                                highlightedTokens={highlightedTokens}
+                                includeArchived={includeArchived} />
             ))}
         </div>
-    </NoteList>;
+    </NoteList>
 }
 
 interface NoteListProps {
@@ -82,13 +82,13 @@ function NoteList(props: NoteListProps) {
 
         {props.noteIds.length > 0 && <div className="note-list-wrapper">
             {!hasCollectionProperties && <Pager {...props.pagination} />}
-
+            
             {props.children}
 
             <Pager className="note-list-bottom-pager" {...props.pagination} />
         </div>}
 
-    </div>;
+    </div>
 }
 
 function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {
@@ -106,25 +106,25 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     // Reset expand state if switching to another note, or if user manually toggled expansion state.
     useEffect(() => setExpanded(currentLevel <= expandDepth), [ note, currentLevel, expandDepth ]);
 
-    let subSections: JSX.Element | undefined;
+    let subSections: JSX.Element | undefined = undefined;
     if (isExpanded) {
         subSections = <>
             <CardSection className="note-content-preview">
                 <NoteContent note={note}
-                    highlightedTokens={highlightedTokens}
-                    noChildrenList
-                    includeArchivedNotes={includeArchived} />
+                             highlightedTokens={highlightedTokens}
+                             noChildrenList
+                             includeArchivedNotes={includeArchived} />
             </CardSection>
 
             <NoteChildren note={note}
-                parentNote={parentNote}
-                highlightedTokens={highlightedTokens}
-                currentLevel={currentLevel}
-                expandDepth={expandDepth}
-                includeArchived={includeArchived} />
-        </>;
+                          parentNote={parentNote}
+                          highlightedTokens={highlightedTokens}
+                          currentLevel={currentLevel}
+                          expandDepth={expandDepth}
+                          includeArchived={includeArchived} />
+        </>
     }
-
+    
     return (
         <CardSection
             className={clsx("nested-note-list-item", "no-tooltip-preview", note.getColorClass(), {
@@ -137,14 +137,14 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
             data-note-id={note.noteId}
         >
             <h5>
-                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
-                    onClick={() => setExpanded(!isExpanded)}/>
+                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} 
+                      onClick={() => setExpanded(!isExpanded)}/>
                 <Icon className="note-icon" icon={note.getIcon()} />
                 <NoteLink className="note-book-title"
-                    notePath={notePath}
-                    noPreview
-                    showNotePath={parentNote.type === "search"}
-                    highlightedTokens={highlightedTokens} />
+                          notePath={notePath}
+                          noPreview
+                          showNotePath={parentNote.type === "search"}
+                          highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
                 <NoteMenuButton notePath={notePath} />
             </h5>
@@ -164,28 +164,27 @@ function GridNoteCard(props: GridNoteCardProps) {
 
     return (
         <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
-            "archived": props.note.isArchived,
-            "mobile-full-width": props.note.type === "file"
-        })}
-        data-href={`#${notePath}`}
-        data-note-id={props.note.noteId}
-        onClick={(e) => link.goToLink(e)}
+                "archived": props.note.isArchived
+             })}
+             data-href={`#${notePath}`}
+             data-note-id={props.note.noteId}
+             onClick={(e) => link.goToLink(e)}
         >
             <h5 className={clsx("note-book-header")}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
-                    notePath={notePath}
-                    noPreview
-                    showNotePath={props.parentNote.type === "search"}
-                    highlightedTokens={props.highlightedTokens}
+                          notePath={notePath}
+                          noPreview
+                          showNotePath={props.parentNote.type === "search"}
+                          highlightedTokens={props.highlightedTokens}
                 />
                 {!props.note.isOptions() && <NoteMenuButton notePath={notePath} />}
-
+                
             </h5>
             <NoteContent note={props.note}
-                trim
-                highlightedTokens={props.highlightedTokens}
-                includeArchivedNotes={props.includeArchived}
+                         trim
+                         highlightedTokens={props.highlightedTokens}
+                         includeArchivedNotes={props.includeArchived}
             />
         </CardFrame>
     );
@@ -223,7 +222,7 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
 
         return () => {
             contentSizeObserver.unobserve(contentElement);
-        };
+        }
     }, []);
 
     useEffect(() => {
@@ -282,13 +281,13 @@ function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expan
 function NoteMenuButton(props: {notePath: string}) {
     const openMenu = useCallback((e: TargetedMouseEvent<HTMLElement>) => {
         linkContextMenuService.openContextMenu(props.notePath, e);
-        e.stopPropagation();
+        e.stopPropagation()
     }, [props.notePath]);
 
     return  <ActionButton className="note-book-item-menu"
-        icon="bx bx-dots-vertical-rounded" text=""
-        onClick={openMenu}
-    />;
+                          icon="bx bx-dots-vertical-rounded" text=""
+                          onClick={openMenu} 
+            />
 }
 
 function getNotePath(parentNote: FNote, childNote: FNote) {
@@ -316,7 +315,7 @@ function useExpansionDepth(note: FNote) {
 
 function onContentResized(entries: ResizeObserverEntry[], observer: ResizeObserver): void {
     for (const contentElement of entries) {
-        const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight));
+        const isOverflowing = ((contentElement.target.scrollHeight > contentElement.target.clientHeight))
         contentElement.target.classList.toggle("note-book-content-overflowing", isOverflowing);
     }
-}
+}

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

@@ -1,4 +1,3 @@
-import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
 import FAttribute from "../../entities/fattribute";
@@ -75,7 +74,7 @@ export default function InheritedAttributesTab({ note, componentId, emptyListStr
                 )}
             </div>
 
-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
         </div>
     );
 }

apps/client/src/widgets/ribbon/components/AttributeEditor.tsx

@@ -1,6 +1,5 @@
 import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
 import { AttributeType } from "@triliumnext/commons";
-import { createPortal } from "preact/compat";
 import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";
 
 import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
@@ -337,8 +336,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                                 let matchedAttr: Attribute | null = null;
 
                                 for (const attr of parsedAttrs) {
-                                    if (attr.startIndex !== undefined && clickIndex > attr.startIndex &&
-                                        attr.endIndex !== undefined && clickIndex <= attr.endIndex) {
+                                    if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
                                         matchedAttr = attr;
                                         break;
                                     }
@@ -409,7 +407,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                 )}
             </div>}
 
-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
         </>
     );
 }

apps/client/src/widgets/type_widgets/file/MediaPlayer.css

@@ -50,21 +50,13 @@
         }
     }
 
-    .media-volume-dropdown-content {
+    .media-volume-row {
         display: flex;
         align-items: center;
         gap: 0.25em;
-        padding: 0.5em;
-
-        .volume-mute-btn {
-            padding: 0.25em;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
 
         .media-volume-slider {
-            width: 100px;
+            width: 80px;
             cursor: pointer;
         }
     }

apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx

@@ -102,47 +102,30 @@ export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoEleme
         }
     };
 
-    const toggleMute = (e: MouseEvent) => {
-        e.stopPropagation();
+    const toggleMute = () => {
         const media = mediaRef.current;
         if (!media) return;
         media.muted = !media.muted;
         setMuted(media.muted);
     };
 
-    const volumeIcon = muted || volume === 0
-        ? "bx bx-volume-mute"
-        : volume < 0.5
-            ? "bx bx-volume-low"
-            : "bx bx-volume-full";
-
     return (
-        <Dropdown
-            iconAction
-            hideToggleArrow
-            buttonClassName="volume-dropdown"
-            text={<Icon icon={volumeIcon} />}
-            title={t("media.volume")}
-        >
-            <li class="media-volume-dropdown-content">
-                <button
-                    class="dropdown-item volume-mute-btn"
-                    onClick={toggleMute}
-                    title={muted ? t("media.unmute") : t("media.mute")}
-                >
-                    <Icon icon={volumeIcon} />
-                </button>
-                <input
-                    type="range"
-                    class="media-volume-slider"
-                    min={0}
-                    max={1}
-                    step={0.05}
-                    value={muted ? 0 : volume}
-                    onInput={onVolumeChange}
-                />
-            </li>
-        </Dropdown>
+        <div class="media-volume-row">
+            <ActionButton
+                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
+                text={muted ? t("media.unmute") : t("media.mute")}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="media-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
+            />
+        </div>
     );
 }
 

apps/client/src/widgets/type_widgets/file/Video.css

@@ -1,8 +1,8 @@
-.video-preview-wrapper {
+.note-detail-file > .video-preview-wrapper {
     width: 100%;
     height: 100%;
     position: relative;
-    background-color: black;
+    background-color: black;    
 
     .video-preview {
         background-color: black;

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -7,29 +7,19 @@ import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import { getUrlForDownload } from "../../../services/open";
 import ActionButton from "../../react/ActionButton";
-import Dropdown from "../../react/Dropdown";
-import { FormListHeader, FormListItem } from "../../react/FormList";
-import Icon from "../../react/Icon";
 import NoItems from "../../react/NoItems";
-import { PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
+import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
 
 const AUTO_HIDE_DELAY = 3000;
 
 export default function VideoPreview({ note }: { note: FNote }) {
-    return <VideoPreviewContent
-        url={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-        mime={note.mime}
-    />;
-}
-
-export function VideoPreviewContent({ url, mime }: { url: string, mime: string }) {
     const wrapperRef = useRef<HTMLDivElement>(null);
     const videoRef = useRef<HTMLVideoElement>(null);
     const [playing, setPlaying] = useState(false);
     const [error, setError] = useState(false);
     const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
 
-    useEffect(() => setError(false), [ url ]);
+    useEffect(() => setError(false), [note.noteId]);
     const onError = useCallback(() => setError(true), []);
 
     const togglePlayback = useCallback(() => {
@@ -43,7 +33,6 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
     }, []);
 
     const onVideoClick = useCallback((e: MouseEvent) => {
-        e.stopPropagation();
         if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
         togglePlayback();
     }, [togglePlayback]);
@@ -51,7 +40,7 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
     const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
 
     if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: mime.replace("/", "-") })} />;
+        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
     }
 
     return (
@@ -59,8 +48,8 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
             <video
                 ref={videoRef}
                 class="video-preview"
-                src={url}
-                datatype={mime}
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
                 onPlay={() => setPlaying(true)}
                 onPause={() => setPlaying(false)}
                 onError={onError}
@@ -70,17 +59,19 @@ export function VideoPreviewContent({ url, mime }: { url: string, mime: string }
                 <SeekBar mediaRef={videoRef} />
                 <div class="media-buttons-row">
                     <div className="left">
-                        <OverflowMenu videoRef={videoRef} />
+                        <PlaybackSpeed mediaRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
                     </div>
                     <div className="center">
                         <div className="spacer" />
                         <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
                         <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
                         <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
-                        <div className="spacer" />
+                        <LoopButton mediaRef={videoRef} />
                     </div>
                     <div className="right">
                         <VolumeControl mediaRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
                         <PictureInPictureButton videoRef={videoRef} />
                         <FullscreenButton targetRef={wrapperRef} />
                     </div>
@@ -180,49 +171,8 @@ function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boo
     return { visible, onMouseMove, flash: onMouseMove };
 }
 
-const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
-
-function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
-    const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     const [rotation, setRotation] = useState(0);
-    const [fitted, setFitted] = useState(false);
-
-    // Sync playback rate
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        setSpeed(video.playbackRate);
-        const onRateChange = () => setSpeed(video.playbackRate);
-        video.addEventListener("ratechange", onRateChange);
-        return () => video.removeEventListener("ratechange", onRateChange);
-    }, [videoRef]);
-
-    // Sync loop state
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-        setLoop(video.loop);
-
-        const observer = new MutationObserver(() => setLoop(video.loop));
-        observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
-        return () => observer.disconnect();
-    }, [videoRef]);
-
-    const selectSpeed = (rate: number) => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.playbackRate = rate;
-        setSpeed(rate);
-    };
-
-    const toggleLoop = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.loop = !video.loop;
-        setLoop(video.loop);
-    };
 
     const rotate = () => {
         const video = videoRef.current;
@@ -232,6 +182,7 @@ function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
 
         const isSideways = next === 90 || next === 270;
         if (isSideways) {
+            // Scale down so the rotated video fits within its container.
             const container = video.parentElement;
             if (container) {
                 const ratio = container.clientWidth / container.clientHeight;
@@ -244,7 +195,19 @@ function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
         }
     };
 
-    const toggleFit = () => {
+    return (
+        <ActionButton
+            icon="bx bx-rotate-right"
+            text={t("media.rotate")}
+            onClick={rotate}
+        />
+    );
+}
+
+function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [fitted, setFitted] = useState(false);
+
+    const toggle = () => {
         const video = videoRef.current;
         if (!video) return;
         const next = !fitted;
@@ -253,50 +216,12 @@ function OverflowMenu({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
     };
 
     return (
-        <Dropdown
-            iconAction
-            hideToggleArrow
-            noSelectButtonStyle
-            noDropdownListStyle
-            mobileBackdrop
-            buttonClassName="overflow-menu-dropdown"
-            dropdownContainerClassName="mobile-bottom-menu"
-            text={<Icon icon="bx bx-dots-horizontal-rounded" />}
-            title={t("media.more-options")}
-        >
-            <FormListHeader text={t("media.playback-speed")} />
-            {PLAYBACK_SPEEDS.map((rate) => (
-                <FormListItem
-                    key={rate}
-                    icon={rate === speed ? "bx bx-check" : "bx bx-empty"}
-                    active={rate === speed}
-                    onClick={() => selectSpeed(rate)}
-                >
-                    {rate}x
-                </FormListItem>
-            ))}
-            <li class="dropdown-divider" />
-            <FormListItem
-                icon="bx bx-rotate-right"
-                onClick={rotate}
-            >
-                {t("media.rotate")}
-            </FormListItem>
-            <FormListItem
-                icon={loop ? "bx bx-check" : "bx bx-repeat"}
-                active={loop}
-                onClick={toggleLoop}
-            >
-                {loop ? t("media.disable-loop") : t("media.loop")}
-            </FormListItem>
-            <FormListItem
-                icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
-                active={fitted}
-                onClick={toggleFit}
-            >
-                {fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
-            </FormListItem>
-        </Dropdown>
+        <ActionButton
+            className={fitted ? "active" : ""}
+            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+            text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
+            onClick={toggle}
+        />
     );
 }
 

apps/server/package.json

@@ -126,7 +126,7 @@
     "tmp": "0.2.5",
     "turnish": "1.8.0",
     "unescape": "1.0.1",
-    "vite": "8.0.1",
+    "vite": "8.0.0",
     "ws": "8.19.0",
     "xml2js": "0.6.2",
     "yauzl": "3.2.1"

apps/server/src/assets/translations/cn/server.json

@@ -155,6 +155,8 @@
     "proxy-instruction": "如果您将代理设置留空，将使用系统代理（仅适用于桌面应用）",
     "password": "密码",
     "password-placeholder": "密码",
+    "totp-token": "TOTP 验证码",
+    "totp-token-placeholder": "请输入 TOTP 验证码",
     "back": "返回",
     "finish-setup": "完成设置"
   },

apps/server/src/assets/translations/en/server.json

@@ -252,6 +252,8 @@
     "proxy-instruction": "If you leave proxy setting blank, system proxy will be used (applies to the desktop application only)",
     "password": "Password",
     "password-placeholder": "Password",
+    "totp-token": "TOTP Token",
+    "totp-token-placeholder": "Enter your TOTP code",
     "back": "Back",
     "finish-setup": "Finish setup"
   },

apps/server/src/assets/translations/tw/server.json

@@ -155,6 +155,8 @@
     "proxy-instruction": "如果您將代理設定留空，將使用系統代理（僅適用於桌面版）",
     "password": "密碼",
     "password-placeholder": "密碼",
+    "totp-token": "TOTP 驗證碼",
+    "totp-token-placeholder": "請輸入 TOTP 驗證碼",
     "back": "返回",
     "finish-setup": "完成設定"
   },

apps/server/src/assets/views/setup.ejs

@@ -141,6 +141,10 @@
                 <label for="password"><%= t("setup_sync-from-server.password") %></label>
                 <input type="password" id="password" class="form-control" placeholder="<%= t("setup_sync-from-server.password-placeholder") %>">
             </div>
+            <div id="totp-section" class="form-group" style="margin-bottom: 8px; display: none;">
+                <label for="totp-token"><%= t("setup_sync-from-server.totp-token") %></label>
+                <input type="text" id="totp-token" class="form-control" placeholder="<%= t("setup_sync-from-server.totp-token-placeholder") %>" autocomplete="one-time-code">
+            </div>
 
             <button type="button" data-action="back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>
 

apps/server/src/express.d.ts

@@ -8,6 +8,7 @@ export declare module "express-serve-static-core" {
 
             authorization?: string;
             "trilium-cred"?: string;
+            "trilium-totp"?: string;
             "x-csrf-token"?: string;
 
             "trilium-component-id"?: string;

apps/server/src/routes/api/setup.ts

@@ -1,16 +1,19 @@
-"use strict";
 
-import sqlInit from "../../services/sql_init.js";
-import setupService from "../../services/setup.js";
-import log from "../../services/log.js";
-import appInfo from "../../services/app_info.js";
+
 import type { Request } from "express";
 
+import appInfo from "../../services/app_info.js";
+import log from "../../services/log.js";
+import setupService from "../../services/setup.js";
+import sqlInit from "../../services/sql_init.js";
+import totp from "../../services/totp.js";
+
 function getStatus() {
     return {
         isInitialized: sqlInit.isDbInitialized(),
         schemaExists: sqlInit.schemaExists(),
-        syncVersion: appInfo.syncVersion
+        syncVersion: appInfo.syncVersion,
+        totpEnabled: totp.isTotpEnabled()
     };
 }
 
@@ -19,9 +22,9 @@ async function setupNewDocument() {
 }
 
 function setupSyncFromServer(req: Request) {
-    const { syncServerHost, syncProxy, password } = req.body;
+    const { syncServerHost, syncProxy, password, totpToken } = req.body;
 
-    return setupService.setupSyncFromSyncServer(syncServerHost, syncProxy, password);
+    return setupService.setupSyncFromSyncServer(syncServerHost, syncProxy, password, totpToken);
 }
 
 function saveSyncSeed(req: Request) {
@@ -82,10 +85,26 @@ function getSyncSeed() {
     };
 }
 
+async function checkServerTotpStatus(req: Request) {
+    const { syncServerHost } = req.body;
+
+    if (!syncServerHost) {
+        return { totpEnabled: false };
+    }
+
+    try {
+        const resp = await setupService.checkRemoteTotpStatus(syncServerHost);
+        return { totpEnabled: !!resp.totpEnabled };
+    } catch {
+        return { totpEnabled: false };
+    }
+}
+
 export default {
     getStatus,
     setupNewDocument,
     setupSyncFromServer,
     getSyncSeed,
-    saveSyncSeed
+    saveSyncSeed,
+    checkServerTotpStatus
 };

apps/server/src/routes/routes.ts

@@ -244,6 +244,7 @@ function register(app: express.Application) {
     asyncRoute(PST, "/api/setup/sync-from-server", [auth.checkAppNotInitialized], setupApiRoute.setupSyncFromServer, apiResultHandler);
     route(GET, "/api/setup/sync-seed", [loginRateLimiter, auth.checkCredentials], setupApiRoute.getSyncSeed, apiResultHandler);
     asyncRoute(PST, "/api/setup/sync-seed", [auth.checkAppNotInitialized], setupApiRoute.saveSyncSeed, apiResultHandler);
+    asyncRoute(PST, "/api/setup/check-server-totp", [auth.checkAppNotInitialized], setupApiRoute.checkServerTotpStatus, apiResultHandler);
 
     apiRoute(GET, "/api/autocomplete", autocompleteApiRoute.getAutocomplete);
     apiRoute(GET, "/api/autocomplete/notesCount", autocompleteApiRoute.getNotesCount);

apps/server/src/services/api-interface.ts

@@ -6,6 +6,7 @@ import type { OptionRow } from "@triliumnext/commons";
 export interface SetupStatusResponse {
     syncVersion: number;
     schemaExists: boolean;
+    totpEnabled: boolean;
 }
 
 /**

apps/server/src/services/auth.spec.ts

@@ -9,6 +9,10 @@ import options from "./options";
 
 let app: Application;
 
+function encodeCred(password: string): string {
+    return Buffer.from(`dummy:${password}`).toString("base64");
+}
+
 describe("Auth", () => {
     beforeAll(async () => {
         const buildApp = (await (import("../../src/app.js"))).default;
@@ -72,4 +76,49 @@ describe("Auth", () => {
                 .expect(200);
         });
     });
+
+    describe("Setup status endpoint", () => {
+        it("returns totpEnabled: true when TOTP is enabled", async () => {
+            cls.init(() => {
+                options.setOption("mfaEnabled", "true");
+                options.setOption("mfaMethod", "totp");
+                options.setOption("totpVerificationHash", "hi");
+            });
+            const response = await supertest(app)
+                .get("/api/setup/status")
+                .expect(200);
+            expect(response.body.totpEnabled).toBe(true);
+        });
+
+        it("returns totpEnabled: false when TOTP is disabled", async () => {
+            cls.init(() => {
+                options.setOption("mfaEnabled", "false");
+            });
+            const response = await supertest(app)
+                .get("/api/setup/status")
+                .expect(200);
+            expect(response.body.totpEnabled).toBe(false);
+        });
+    });
+
+    describe("checkCredentials TOTP enforcement", () => {
+        beforeAll(() => {
+            config.General.noAuthentication = false;
+            refreshAuth();
+        });
+
+        it("does not require TOTP token when TOTP is disabled", async () => {
+            cls.init(() => {
+                options.setOption("mfaEnabled", "false");
+            });
+            // Will still fail with 401 due to wrong password, but NOT because of missing TOTP
+            const response = await supertest(app)
+                .get("/api/setup/sync-seed")
+                .set("trilium-cred", encodeCred("wrongpassword"))
+                .expect(401);
+            // The error should be about password, not TOTP
+            expect(response.text).toContain("Incorrect password");
+        });
+    });
 }, 60_000);
+

apps/server/src/services/auth.ts

@@ -1,15 +1,17 @@
-import etapiTokenService from "./etapi_tokens.js";
-import log from "./log.js";
-import sqlInit from "./sql_init.js";
-import { isElectron } from "./utils.js";
-import passwordEncryptionService from "./encryption/password_encryption.js";
+import type { NextFunction, Request, Response } from "express";
+
+import attributes from "./attributes.js";
 import config from "./config.js";
 import passwordService from "./encryption/password.js";
-import totp from "./totp.js";
+import passwordEncryptionService from "./encryption/password_encryption.js";
+import recoveryCodeService from "./encryption/recovery_codes.js";
+import etapiTokenService from "./etapi_tokens.js";
+import log from "./log.js";
 import openID from "./open_id.js";
 import options from "./options.js";
-import attributes from "./attributes.js";
-import type { NextFunction, Request, Response } from "express";
+import sqlInit from "./sql_init.js";
+import totp from "./totp.js";
+import { isElectron } from "./utils.js";
 
 let noAuthentication = false;
 refreshAuth();
@@ -161,9 +163,28 @@ function checkCredentials(req: Request, res: Response, next: NextFunction) {
     if (!passwordEncryptionService.verifyPassword(password)) {
         res.setHeader("Content-Type", "text/plain").status(401).send("Incorrect password");
         log.info(`WARNING: Wrong password from ${req.ip}, rejecting.`);
-    } else {
-        next();
+        return;
     }
+
+    // Verify TOTP if enabled
+    if (totp.isTotpEnabled()) {
+        const totpHeader = req.headers["trilium-totp"];
+        const totpToken = Array.isArray(totpHeader) ? totpHeader[0] : totpHeader;
+        if (typeof totpToken !== "string" || !totpToken) {
+            res.setHeader("Content-Type", "text/plain").status(401).send("TOTP token is required");
+            log.info(`WARNING: Missing or invalid TOTP token from ${req.ip}, rejecting.`);
+            return;
+        }
+
+        // Accept TOTP code or recovery code
+        if (!totp.validateTOTP(totpToken) && !recoveryCodeService.verifyRecoveryCode(totpToken)) {
+            res.setHeader("Content-Type", "text/plain").status(401).send("Incorrect TOTP token");
+            log.info(`WARNING: Wrong TOTP token from ${req.ip}, rejecting.`);
+            return;
+        }
+    }
+
+    next();
 }
 
 export default {

apps/server/src/services/encryption/totp_encryption.ts

@@ -1,9 +1,10 @@
-import optionService from "../options.js";
-import myScryptService from "./my_scrypt.js";
-import { randomSecureToken, toBase64, constantTimeCompare } from "../utils.js";
-import dataEncryptionService from "./data_encryption.js";
 import type { OptionNames } from "@triliumnext/commons";
 
+import optionService from "../options.js";
+import { constantTimeCompare,randomSecureToken, toBase64 } from "../utils.js";
+import dataEncryptionService from "./data_encryption.js";
+import myScryptService from "./my_scrypt.js";
+
 const TOTP_OPTIONS: Record<string, OptionNames> = {
     SALT: "totpEncryptionSalt",
     ENCRYPTED_SECRET: "totpEncryptedSecret",

apps/server/src/services/request.ts

@@ -62,6 +62,9 @@ async function exec<T>(opts: ExecOpts): Promise<T> {
 
             if (opts.auth) {
                 headers["trilium-cred"] = Buffer.from(`dummy:${opts.auth.password}`).toString("base64");
+                if (opts.auth.totpToken) {
+                    headers["trilium-totp"] = opts.auth.totpToken;
+                }
             }
 
             const request = (await client).request({

apps/server/src/services/request_interface.ts

@@ -14,6 +14,7 @@ export interface ExecOpts {
     cookieJar?: CookieJar;
     auth?: {
         password?: string;
+        totpToken?: string;
     };
     timeout: number;
     body?: string | {};

apps/server/src/services/setup.ts

@@ -1,13 +1,13 @@
-import syncService from "./sync.js";
-import log from "./log.js";
-import sqlInit from "./sql_init.js";
-import optionService from "./options.js";
-import syncOptions from "./sync_options.js";
-import request from "./request.js";
-import appInfo from "./app_info.js";
-import { timeLimit } from "./utils.js";
 import becca from "../becca/becca.js";
 import type { SetupStatusResponse, SetupSyncSeedResponse } from "./api-interface.js";
+import appInfo from "./app_info.js";
+import log from "./log.js";
+import optionService from "./options.js";
+import request from "./request.js";
+import sqlInit from "./sql_init.js";
+import syncService from "./sync.js";
+import syncOptions from "./sync_options.js";
+import { timeLimit } from "./utils.js";
 
 async function hasSyncServerSchemaAndSeed() {
     const response = await requestToSyncServer<SetupStatusResponse>("GET", "/api/setup/status");
@@ -55,13 +55,13 @@ async function requestToSyncServer<T>(method: string, path: string, body?: strin
             url: syncOptions.getSyncServerHost() + path,
             body,
             proxy: syncOptions.getSyncProxy(),
-            timeout: timeout
+            timeout
         }),
         timeout
     )) as T;
 }
 
-async function setupSyncFromSyncServer(syncServerHost: string, syncProxy: string, password: string) {
+async function setupSyncFromSyncServer(syncServerHost: string, syncProxy: string, password: string, totpToken?: string) {
     if (sqlInit.isDbInitialized()) {
         return {
             result: "failure",
@@ -76,7 +76,7 @@ async function setupSyncFromSyncServer(syncServerHost: string, syncProxy: string
         const resp = await request.exec<SetupSyncSeedResponse>({
             method: "get",
             url: `${syncServerHost}/api/setup/sync-seed`,
-            auth: { password },
+            auth: { password, totpToken },
             proxy: syncProxy,
             timeout: 30000 // seed request should not take long
         });
@@ -111,10 +111,30 @@ function getSyncSeedOptions() {
     return [becca.getOption("documentId"), becca.getOption("documentSecret")];
 }
 
+async function checkRemoteTotpStatus(syncServerHost: string): Promise<{ totpEnabled: boolean }> {
+    // Validate URL scheme to mitigate SSRF
+    if (!syncServerHost.startsWith("http://") && !syncServerHost.startsWith("https://")) {
+        return { totpEnabled: false };
+    }
+
+    try {
+        const resp = await request.exec<{ totpEnabled?: boolean }>({
+            method: "get",
+            url: `${syncServerHost}/api/setup/status`,
+            proxy: null,
+            timeout: 10000
+        });
+        return { totpEnabled: !!resp?.totpEnabled };
+    } catch {
+        return { totpEnabled: false };
+    }
+}
+
 export default {
     hasSyncServerSchemaAndSeed,
     triggerSync,
     sendSeedToSyncServer,
     setupSyncFromSyncServer,
-    getSyncSeedOptions
+    getSyncSeedOptions,
+    checkRemoteTotpStatus
 };

apps/server/src/services/totp.ts

@@ -1,6 +1,7 @@
-import { Totp, generateSecret } from 'time2fa';
-import options from './options.js';
+import { generateSecret,Totp } from 'time2fa';
+
 import totpEncryptionService from './encryption/totp_encryption.js';
+import options from './options.js';
 
 function isTotpEnabled(): boolean {
     return options.getOptionOrNull('mfaEnabled') === "true" &&
@@ -10,7 +11,7 @@ function isTotpEnabled(): boolean {
 
 function createSecret(): { success: boolean; message?: string } {
     try {
-        const secret = generateSecret();
+        const secret = generateSecret(20);
 
         totpEncryptionService.setTotpSecret(secret);
 
@@ -43,6 +44,8 @@ function validateTOTP(submittedPasscode: string): boolean {
         return Totp.validate({
             passcode: submittedPasscode,
             secret: secret.trim()
+        }, {
+            secretSize: secret.trim().length === 32 ? 20 : 10
         });
     } catch (e) {
         console.error('Failed to validate TOTP:', e);

apps/website/package.json

@@ -22,7 +22,7 @@
 		"eslint-config-preact": "2.0.0",
 		"typescript": "5.9.3",
 		"user-agent-data-types": "0.4.2",
-		"vite": "8.0.1",
+		"vite": "8.0.0",
 		"vitest": "4.1.0"
 	},
 	"eslintConfig": {

package.json

@@ -76,7 +76,7 @@
     "typescript": "5.9.3",
     "typescript-eslint": "8.57.1",
     "upath": "2.0.1",
-    "vite": "8.0.1",
+    "vite": "8.0.0",
     "vite-plugin-dts": "4.5.4",
     "vitest": "4.1.0"
   },

packages/ckeditor5-admonition/package.json

@@ -21,7 +21,7 @@
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.1.0",
     "@typescript-eslint/eslint-plugin": "8.57.1",

packages/ckeditor5-footnotes/package.json

@@ -22,7 +22,7 @@
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.1.0",
     "@typescript-eslint/eslint-plugin": "8.57.1",

packages/ckeditor5-keyboard-marker/package.json

@@ -24,7 +24,7 @@
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.1.0",
     "@typescript-eslint/eslint-plugin": "8.57.1",

packages/ckeditor5-math/package.json

@@ -24,7 +24,7 @@
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.1.0",
     "@typescript-eslint/eslint-plugin": "8.57.1",

packages/ckeditor5-math/theme/mathform.css

@@ -22,9 +22,8 @@
     flex-direction: column;
     padding: var(--ck-spacing-standard);
     box-sizing: border-box;
-	min-width: 400px;
-    max-width: 60vw;
-    max-height: 350px;
+    max-width: 80vw;
+    max-height: 80vh;
     overflow: visible;
     user-select: text;
 }
@@ -64,8 +63,8 @@
     border-radius: var(--ck-border-radius);
     background: var(--ck-color-input-background) !important;
     transition: border-color 120ms ease;
-    overflow: auto;
-    clip-path: none;
+    overflow: visible !important;
+    clip-path: none !important;
 }
 .ck.ck-math-input .ck-mathlive-container:focus-within {
     border-color: var(--ck-color-focus-border);
@@ -160,12 +159,16 @@
 .ck.ck-math-preview {
     width: 100%;
     min-height: 40px;
+    max-height: none !important;
+    height: auto !important;
     padding: var(--ck-spacing-small);
     background: transparent !important;
     border: none !important;
     display: block;
     text-align: left;
-    overflow: auto;
+    overflow-x: auto !important;
+    overflow-y: visible !important;
+    flex-shrink: 0;
 }
 
 /* Center equation when in display mode */
@@ -210,7 +213,8 @@
 .ck.ck-balloon-panel .ck-balloon-panel__content,
 .ck.ck-math-form,
 .ck-math-view,
-.ck.ck-math-input {
+.ck.ck-math-input,
+.ck.ck-math-input .ck-mathlive-container {
     overflow: visible !important;
     clip-path: none !important;
 }

packages/ckeditor5-mermaid/package.json

@@ -24,7 +24,7 @@
     "ckeditor5-metadata.json"
   ],
   "devDependencies": {
-    "@ckeditor/ckeditor5-dev-build-tools": "55.2.0",
+    "@ckeditor/ckeditor5-dev-build-tools": "55.0.0",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.1.0",
     "@typescript-eslint/eslint-plugin": "8.57.1",

packages/ckeditor5/package.json

@@ -16,7 +16,7 @@
     "ckeditor5-premium-features": "47.6.1"
   },
   "devDependencies": {
-    "@smithy/middleware-retry": "4.4.44",
+    "@smithy/middleware-retry": "4.4.43",
     "@types/jquery": "4.0.0"
   }
 }

packages/share-theme/package.json

@@ -25,7 +25,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "fuse.js": "7.1.0",
-    "katex": "0.16.39",
+    "katex": "0.16.38",
     "mermaid": "11.13.0"
   },
   "devDependencies": {