From 319e753e7eb405c35aef795ab70ede63699c3336 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 15 Oct 2025 23:37:08 +0300
Subject: [PATCH] feat(collection/presentation): add a button to toggle slide
 overview

---
 .../src/translations/en/translation.json      |  3 ++-
 .../collections/presentation/index.tsx        | 26 +++++++++++++++++++
 .../client/src/widgets/react/ActionButton.tsx |  9 ++++---
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 04e0eff76..8dee04c63 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2031,7 +2031,8 @@
   },
   "presentation_view": {
     "edit-slide": "Edit this slide",
-    "start-presentation": "Start presentation"
+    "start-presentation": "Start presentation",
+    "slide-overview": "Toggle an overview of the slides"
   },
   "command_palette": {
     "tree-action-name": "Tree: {{name}}",
diff --git a/apps/client/src/widgets/collections/presentation/index.tsx b/apps/client/src/widgets/collections/presentation/index.tsx
index 52339dc36..a370a793a 100644
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -52,6 +52,23 @@ export default function PresentationView({ note, noteIds }: ViewModeProps<{}>) {
 }
 
 function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLDivElement>, apiRef: RefObject<Reveal.Api> }) {
+    const [ isOverviewActive, setIsOverviewActive ] = useState(false);
+    useEffect(() => {
+        const api = apiRef.current;
+        if (!api) return;
+        setIsOverviewActive(api.isOverview());
+        const onEnabled = () => setIsOverviewActive(true);
+        const onDisabled = () => setIsOverviewActive(false);
+        api.on("overviewshown", onEnabled);
+        api.on("overviewhidden", onDisabled);
+        return () => {
+            api.off("overviewshown", onEnabled);
+            api.off("overviewhidden", onDisabled);
+        };
+    }, [ apiRef ]);
+
+    console.log("Active ", isOverviewActive);
+
     return (
         <div className="presentation-button-bar">
             <ActionButton
@@ -67,6 +84,15 @@ function ButtonOverlay({ containerRef, apiRef }: { containerRef: RefObject<HTMLD
                 }}
             />
 
+            <ActionButton
+                icon="bx bx-grid-horizontal"
+                text={t("presentation_view.slide-overview")}
+                active={isOverviewActive}
+                onClick={() => {
+                    apiRef.current?.toggleOverview();
+                }}
+            />
+
             <ActionButton
                 icon="bx bx-fullscreen"
                 text={t("presentation_view.start-presentation")}
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index 2eb69bab8..28489005d 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -5,16 +5,18 @@ import keyboard_actions from "../../services/keyboard_actions";
 
 export interface ActionButtonProps {
     text: string;
-    titlePosition?: "bottom" | "left";
+    titlePosition?: "top" | "right" | "bottom" | "left";
     icon: string;
     className?: string;
     onClick?: (e: MouseEvent) => void;
     triggerCommand?: CommandNames;
     noIconActionClass?: boolean;
     frame?: boolean;
+    active?: boolean;
+    disabled?: boolean;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
 
@@ -32,8 +34,9 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
 
     return <button
         ref={buttonRef}
-        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""}`}
+        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
         onClick={onClick}
         data-trigger-command={triggerCommand}
+        disabled={disabled}
     />;
 }