Moving buttons notebook toolbar to floating state.

Author: nakul-py

src/plugin.ts

@@ -19,7 +19,6 @@ import {
   UnifiedFileDiffManager
 } from './diff/unified-file';
 import { CodeMirrorEditor } from '@jupyterlab/codemirror';
-import { ToolbarButton } from '@jupyterlab/ui-components';
 
 /**
  * The translation namespace for the plugin.
@@ -314,54 +313,62 @@ const unifiedCellDiffPlugin: JupyterFrontEndPlugin<void> = {
     notebookTracker.widgetAdded.connect((sender, notebookPanel) => {
       const notebookId = notebookPanel.id;
 
-      let acceptAllButton: ToolbarButton | null = null;
-      let rejectAllButton: ToolbarButton | null = null;
+      let floatingPanel: HTMLElement | null = null;
 
-      function updateToolbar() {
-        const managers = getNotebookManagers(notebookId);
+      function createFloatingPanel(): HTMLElement {
+        const panel = document.createElement('div');
+        panel.classList.add('jp-unified-diff-floating-panel');
+
+        const acceptButton = document.createElement('button');
+        acceptButton.classList.add('jp-merge-accept-button');
+        acceptButton.textContent = 'Accept All';
+        acceptButton.title = trans.__('Accept all changes in this notebook');
+        acceptButton.onclick = () => {
+          getNotebookManagers(notebookId).forEach(m => m.acceptAll());
+          updateFloatingPanel();
+        };
+
+        const rejectButton = document.createElement('button');
+        rejectButton.classList.add('jp-merge-reject-button');
+        rejectButton.textContent = 'Reject All';
+        rejectButton.title = trans.__('Reject all changes in this notebook');
+        rejectButton.onclick = () => {
+          getNotebookManagers(notebookId).forEach(m => m.rejectAll());
+          updateFloatingPanel();
+        };
+
+        panel.appendChild(acceptButton);
+        panel.appendChild(rejectButton);
+        return panel;
+      }
 
+      function updateFloatingPanel(): void {
+        const managers = getNotebookManagers(notebookId);
         const anyPending = managers.some(m => m.hasPendingChanges());
+
         if (!anyPending) {
-          if (acceptAllButton) {
-            acceptAllButton.dispose();
-          }
-          if (rejectAllButton) {
-            rejectAllButton.dispose();
+          if (floatingPanel && floatingPanel.parentElement) {
+            floatingPanel.parentElement.removeChild(floatingPanel);
           }
-          acceptAllButton = null;
-          rejectAllButton = null;
+          floatingPanel = null;
           return;
         }
 
-        if (!acceptAllButton) {
-          acceptAllButton = new ToolbarButton({
-            label: trans.__('Accept All'),
-            className: 'accept-all-changes',
-            tooltip: trans.__('Accept all changes in this notebook'),
-            onClick: () => {
-              getNotebookManagers(notebookId).forEach(m => m.acceptAll());
-              updateToolbar();
-            }
-          });
-          notebookPanel.toolbar.addItem('accept-all-changes', acceptAllButton);
+        if (!floatingPanel) {
+          floatingPanel = createFloatingPanel();
+          notebookPanel.node.appendChild(floatingPanel);
         }
+      }
 
-        if (!rejectAllButton) {
-          rejectAllButton = new ToolbarButton({
-            label: trans.__('Reject All'),
-            className: 'reject-all-changes',
-            tooltip: trans.__('Reject all changes in this notebook'),
-            onClick: () => {
-              getNotebookManagers(notebookId).forEach(m => m.rejectAll());
-              updateToolbar();
-            }
-          });
-          notebookPanel.toolbar.addItem('reject-all-changes', rejectAllButton);
+      notebookPanel.disposed.connect(() => {
+        clearNotebookManagers(notebookId);
+        if (floatingPanel && floatingPanel.parentElement) {
+          floatingPanel.parentElement.removeChild(floatingPanel);
         }
-      }
+        floatingPanel = null;
+      });
 
-      notebookPanel.disposed.connect(() => clearNotebookManagers(notebookId));
-      notebookPanel.node.addEventListener('diff-updated', updateToolbar);
+      notebookPanel.node.addEventListener('diff-updated', updateFloatingPanel);
 
       const originalRegister = registerCellManager;
       registerCellManager = (nid: string, manager: UnifiedCellDiffManager) => {

style/base.css

@@ -78,33 +78,47 @@
   border-color: var(--jp-border-color1);
 }
 
-.jp-ToolbarButtonComponent.accept-all-changes {
-  background-color: #28a745;
-  cursor: pointer;
-  padding: 2px 8px;
+/* Floating unified-cell-diff control panel */
+.jp-unified-diff-floating-panel {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  gap: 12px;
+  background: var(--jp-layout-color1);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 8px;
+  padding: 8px 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  z-index: 200;
+  opacity: 0.95;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.jp-unified-diff-floating-panel .jp-merge-accept-button,
+.jp-unified-diff-floating-panel .jp-merge-reject-button {
+  padding: 12px 10px;
+  font-size: 13px;
   border-radius: 4px;
-  font-size: 12px;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
+  cursor: pointer;
+  color: white;
+  font-weight: inherit;
+  border: none;
+  transition: background-color 0.2s ease-in-out;
 }
 
-.jp-ToolbarButtonComponent.accept-all-changes:hover {
-  background-color: #058522;
+.jp-unified-diff-floating-panel .jp-merge-accept-button {
+  background-color: #089e03;
 }
 
-.jp-ToolbarButtonComponent.reject-all-changes {
-  background-color: #dc3545;
-  cursor: pointer;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: bold;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
+.jp-unified-diff-floating-panel .jp-merge-accept-button:hover {
+  background-color: #027e1d;
+}
+
+.jp-unified-diff-floating-panel .jp-merge-reject-button {
+  background-color: #b80606;
 }
 
-.jp-ToolbarButtonComponent.reject-all-changes:hover {
-  background-color: #c82333;
+.jp-unified-diff-floating-panel .jp-merge-reject-button:hover {
+  background-color: #8f0505;
 }