tweak: move document history buttons to top left corner

Author: ycnmhd

src/view/components/container/modals/snapshots-list/file-histoy.svelte

@@ -8,7 +8,7 @@
     const history = historyStore(view)
 </script>
 
-<div class="lineage-modal" style="padding-left: 0; padding-right:0" tabindex="0">
+<div class="lineage-modal snapshots-modal" style="padding-left: 0; padding-right:0" tabindex="0">
     <div
         class="snapshots-list"
         use:updateRelativeTime
@@ -37,6 +37,10 @@
         padding-left: var(--size-4-2);
         padding-right: var(--size-4-2);
     }
+    .snapshots-modal{
+        left: var(--size-4-2);
+        top: 50px;
+    }
     @media (max-width: 720px) {
         .snapshots-list {
             width: initial;

src/view/components/container/toolbar-vertical/vertical-toolbar-actions.ts

@@ -1,28 +1,8 @@
 import { LineageView } from 'src/view/view';
-import { Notice } from 'obsidian';
-import { lang } from 'src/lang/lang';
 
 export class VerticalToolbarActions {
     constructor(private view: LineageView) {}
 
-    handleNextClick = () => {
-        if (this.view.viewStore.getValue().document.editing.activeNodeId)
-            new Notice(lang.error_apply_snapshot_while_editing);
-        else
-            this.view.documentStore.dispatch({
-                type: 'HISTORY/APPLY_NEXT_SNAPSHOT',
-            });
-    };
-
-    handlePreviousClick = () => {
-        if (this.view.viewStore.getValue().document.editing.activeNodeId)
-            new Notice(lang.error_apply_snapshot_while_editing);
-        else
-            this.view.documentStore.dispatch({
-                type: 'HISTORY/APPLY_PREVIOUS_SNAPSHOT',
-            });
-    };
-
     toggleHelp = () => {
         this.view.viewStore.dispatch({ type: 'UI/TOGGLE_HELP_SIDEBAR' });
     };
@@ -63,11 +43,6 @@ export class VerticalToolbarActions {
         });
     };
 
-    toggleSnapshotsModal = () =>
-        this.view.viewStore.dispatch({
-            type: 'UI/TOGGLE_HISTORY_SIDEBAR',
-        });
-
     zoomIn = () => {
         this.view.plugin.settings.dispatch({
             type: 'UI/CHANGE_ZOOM_LEVEL',

src/view/components/container/toolbar-vertical/vertical-toolbar-buttons-list.ts

@@ -4,13 +4,10 @@ import { derived } from 'svelte/store';
 import { ToolbarButton } from 'src/view/modals/vertical-toolbar-buttons/vertical-toolbar-buttons';
 import { lang } from 'src/lang/lang';
 import {
-    HistoryIcon,
     Keyboard,
     Palette,
     PanelRightInactive as PanelRight,
-    Redo2 as RedoIcon,
     Settings,
-    Undo2 as UndoIcon,
 } from 'lucide-svelte';
 import { CustomIcon, customIcons } from 'src/helpers/load-custom-icons';
 import { VerticalToolbarActions } from 'src/view/components/container/toolbar-vertical/vertical-toolbar-actions';
@@ -100,29 +97,6 @@ export const VerticalToolbarButtonsList = (view: LineageView) => {
                     },
                 ],
             },
-            {
-                id: 'history',
-                buttons: [
-                    {
-                        label: lang.controls_history,
-                        onClick: h.toggleSnapshotsModal,
-                        icon: HistoryIcon,
-                        id: 'snapshots-list',
-                    },
-                    {
-                        label: lang.controls_history_undo,
-                        onClick: h.handlePreviousClick,
-                        icon: UndoIcon,
-                        id: 'undo',
-                    },
-                    {
-                        label: lang.controls_history_redo,
-                        onClick: h.handleNextClick,
-                        icon: RedoIcon,
-                        id: 'redo',
-                    },
-                ],
-            },
         ];
 
         return buttons

src/view/components/container/toolbar-vertical/vertical-toolbar.svelte

@@ -2,7 +2,6 @@
     import { lang } from '../../../../lang/lang';
     import { MoreVertical } from 'lucide-svelte';
     import { getView } from '../context';
-    import { historyStore } from '../../../../stores/document/derived/history-store';
     import { derived, writable } from 'svelte/store';
     import { uiControlsStore } from '../../../../stores/view/derived/ui-controls-store';
     import Button from '../shared/button.svelte';
@@ -16,7 +15,7 @@
 
     const view = getView();
 
-    const history = historyStore(view);
+
 
     const showControls = writable(false);
     const toggleShowControls = () => {
@@ -58,13 +57,7 @@
         },
     );
 
-    const disabledStates = derived([history], ([history]) => {
-        return {
-            'snapshots-list': history.items.length === 0,
-            undo: !history.state.canGoBack,
-            redo: !history.state.canGoForward,
-        } as Partial<Record<ToolbarButton, boolean>>;
-    });
+
 </script>
 
 <div class="controls-container">
@@ -91,7 +84,7 @@
                     label={button.label}
                     on:click={button.onClick}
                     tooltipPosition="left"
-                    disabled={$disabledStates[button.id]}
+
                 >
                     {#if 'svg' in button.icon}
                         {@html button.icon.svg}

src/view/components/container/toolbar/components/document-history-buttons.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    import { lang } from '../../../../../lang/lang';
+    import { HistoryIcon, Redo2 as RedoIcon, Undo2 as UndoIcon } from 'lucide-svelte';
+    import Button from '../../shared/button.svelte';
+    import { historyStore } from '../../../../../stores/document/derived/history-store';
+    import { getView } from '../../context';
+    import { Notice } from 'obsidian';
+    import { LineageView } from 'src/view/view';
+
+    const view = getView();
+    const history = historyStore(view);
+
+    const isEditing = (view: LineageView) =>
+        view.viewStore.getValue().document.editing.activeNodeId;
+
+    const toggleSnapshotsModal = () =>
+        view.viewStore.dispatch({
+            type: 'UI/TOGGLE_HISTORY_SIDEBAR',
+        });
+
+    const selectNextSnapshot = () => {
+        if (isEditing(view))
+            new Notice(lang.error_apply_snapshot_while_editing);
+        else
+            view.documentStore.dispatch({
+                type: 'HISTORY/APPLY_NEXT_SNAPSHOT',
+            });
+    };
+
+    const selectPreviousSnapshot = () => {
+        if (isEditing(view))
+            new Notice(lang.error_apply_snapshot_while_editing);
+        else
+            view.documentStore.dispatch({
+                type: 'HISTORY/APPLY_PREVIOUS_SNAPSHOT',
+            });
+    };
+</script>
+
+<div class="navigation-history buttons-group">
+    <Button
+        disabled={$history.items.length === 0}
+        label={lang.controls_history}
+        on:click={toggleSnapshotsModal}
+        tooltipPosition="bottom"
+    >
+        <HistoryIcon class="svg-icon" size="12" />
+    </Button>
+    <Button
+        disabled={!$history.state.canGoBack}
+        label={lang.controls_history_undo}
+        on:click={selectPreviousSnapshot}
+        tooltipPosition="bottom"
+    >
+        <UndoIcon class="svg-icon" size="12" />
+    </Button>
+    <Button
+        disabled={!$history.state.canGoForward}
+        label={lang.controls_history_redo}
+        on:click={selectNextSnapshot}
+        tooltipPosition="bottom"
+    >
+        <RedoIcon class="svg-icon" size="12" />
+    </Button>
+</div>
+
+<style>
+    .navigation-history {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

src/view/components/container/toolbar/toolbar.svelte

@@ -6,6 +6,7 @@
     import SearchInput from './components/search-input.svelte';
     import LeftSidebarToggle from './components/left-sidebar-toggle.svelte';
     import SearchNavigationButtons from './components/search/search-navigation-buttons.svelte';
+    import DocumentHistoryButtons from './components/document-history-buttons.svelte';
 
     const view = getView();
 
@@ -15,14 +16,16 @@
 <div class="navigation-history-container">
     <LeftSidebarToggle />
     <NavigationHistory />
+    <DocumentHistoryButtons />
     <SearchToggle />
     {#if $search.showInput}
         <SearchInput />
         {#if $search.query.length > 0}
-            <SearchNavigationButtons results={Array.from($search.results)}/>
+            <SearchNavigationButtons results={Array.from($search.results)} />
         {/if}
     {/if}
 </div>
+
 <style>
     .navigation-history-container {
         z-index: var(--z-index-breadcrumbs);
@@ -32,6 +35,6 @@
         position: absolute;
         gap: var(--size-4-2);
         flex-wrap: wrap;
-        max-width: 90%
+        max-width: 90%;
     }
 </style>

src/view/modals/vertical-toolbar-buttons/vertical-toolbar-buttons.ts

@@ -1,15 +1,12 @@
 import { lang } from 'src/lang/lang';
 import {
-    HistoryIcon,
     Keyboard,
     Minus as ZoomOut,
     Palette,
     PanelRightInactive as PanelRight,
     Plus as ZoomIn,
-    Redo2 as RedoIcon,
     RotateCcw,
     ScanSearch,
-    Undo2 as UndoIcon,
 } from 'lucide-svelte';
 import { CustomIcon, customIcons } from 'src/helpers/load-custom-icons';
 
@@ -87,26 +84,7 @@ export const verticalToolbarButtons: VerticalToolbarGroup[] = [
             },
         ],
     },
-    {
-        id: 'history',
-        buttons: [
-            {
-                id: 'snapshots-list',
-                label: lang.controls_history,
-                icon: HistoryIcon,
-            },
-            {
-                id: 'undo',
-                label: lang.controls_history_undo,
-                icon: UndoIcon,
-            },
-            {
-                id: 'redo',
-                label: lang.controls_history_redo,
-                icon: RedoIcon,
-            },
-        ],
-    },
+
     {
         id: 'zoom',
         buttons: [