chore(react/dialogs): reintroduce footer in note revisions

apps/client/src/widgets/dialogs/revisions.tsx

@@ -16,6 +16,8 @@ import protected_session_holder from "../../services/protected_session_holder";
 import { renderMathInElement } from "../../services/math";
 import { CSSProperties } from "preact/compat";
 import open from "../../services/open";
+import ActionButton from "../react/ActionButton";
+import options from "../../services/options";
 
 interface RevisionsDialogProps {
     note?: FNote;
@@ -54,7 +56,9 @@ function RevisionsDialogComponent({ note }: RevisionsDialogProps) {
                             toast.showMessage(t("revisions.revisions_deleted"));
                         }
                     }}/>)
-            }                
+            }
+            footer={<RevisionFooter note={note} />} 
+            footerStyle={{ paddingTop: 0, paddingBottom: 0 }}
             >
                 <RevisionsList
                     revisions={revisions}
@@ -231,6 +235,33 @@ function RevisionContent({ revisionItem, fullRevision }: { revisionItem?: Revisi
     }
 }
 
+function RevisionFooter({ note }: { note: FNote }) {
+    if (!note) {
+        return <></>;
+    }
+
+    let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "");
+    if (!Number.isInteger(revisionsNumberLimit)) {
+        revisionsNumberLimit = options.getInt("revisionSnapshotNumberLimit") ?? 0;
+    }
+    if (revisionsNumberLimit === -1) {
+        revisionsNumberLimit = "∞";
+    }
+    
+    return <>
+        <span class="revisions-snapshot-interval flex-grow-1 my-0 py-0">
+            {t("revisions.snapshot_interval", { seconds: options.getInt("revisionSnapshotTimeInterval") })}
+        </span>
+        <span class="maximum-revisions-for-current-note flex-grow-1 my-0 py-0">
+            {t("revisions.maximum_revisions", { number: revisionsNumberLimit })}
+        </span>
+        <ActionButton
+            icon="bx bx-cog" text={t("revisions.settings")}
+            onClick={() => appContext.tabManager.openContextWithNote("_optionsOther", { activate: true })}
+        />
+    </>;
+}
+
 export default class RevisionsDialog extends ReactBasicWidget  {
 
     private props: RevisionsDialogProps = {};

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

@@ -0,0 +1,13 @@
+interface ActionButtonProps {
+    text: string;
+    icon: string;
+    onClick?: () => void;
+}
+
+export default function ActionButton({ text, icon, onClick }: ActionButtonProps) {
+    return <button
+        class={`icon-action ${icon}`}
+        title={text}
+        onClick={onClick}
+    />;
+}

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

@@ -13,6 +13,7 @@ interface ModalProps {
      */
     header?: ComponentChildren;
     footer?: ComponentChildren;
+    footerStyle?: CSSProperties;
     footerAlignment?: "right" | "between";
     minWidth?: string;
     maxWidth?: number;
@@ -46,7 +47,7 @@ interface ModalProps {
     bodyStyle?: CSSProperties;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) {
+export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle }: ModalProps) {
     const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
     const formRef = _formRef ?? useRef<HTMLFormElement>(null);
 
@@ -108,10 +109,10 @@ export default function Modal({ children, className, size, title, header, footer
                             e.preventDefault();
                             onSubmit();
                         }}>
-                            <ModalInner footer={footer} bodyStyle={bodyStyle}>{children}</ModalInner>
+                            <ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>{children}</ModalInner>
                         </form>
                     ) : (
-                        <ModalInner footer={footer} bodyStyle={bodyStyle}>
+                        <ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>
                             {children}
                         </ModalInner>
                     )}
@@ -121,8 +122,8 @@ export default function Modal({ children, className, size, title, header, footer
     );
 }
 
-function ModalInner({ children, footer, footerAlignment, bodyStyle }: Pick<ModalProps, "children" | "footer" | "footerAlignment" | "bodyStyle">) {
+function ModalInner({ children, footer, footerAlignment, bodyStyle, footerStyle: _footerStyle }: Pick<ModalProps, "children" | "footer" | "footerAlignment" | "bodyStyle" | "footerStyle">) {
-    const footerStyle: CSSProperties = {};
+    const footerStyle: CSSProperties = _footerStyle ?? {};
     if (footerAlignment === "between") {
         footerStyle.justifyContent = "space-between";
     }