chore(studio): queue operations UI improvements (supabase#42272)

## What kind of change does this PR introduce?

UI improvements

## What is the current behavior?

@awaseem added a schmick new “Queue table operations” feature in
supabase#42120

## What is the new behavior?

This adds some UI polish to that feature.

## Additional context


https://github.com/user-attachments/assets/0b823bc9-44bd-42d1-8042-162084d058c7

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **UI/UX Improvements**
* Repositioned and animated floating save/review bar for smoother
entrance and centered alignment
* Card-based redesign of operation items with clearer old/new value
badges and improved action controls
* Updated side panel text, button labels ("Review", "Save/Revert" with
"all" when applicable), and focus behavior
* Refined empty-state layout and amber background highlighting for
modified cells
* Improved spacing, padding, and visual polish across the operation
queue UI

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>

Author: dnywh

apps/studio/components/grid/components/footer/operations/SaveQueueActionBar.tsx

@@ -2,18 +2,18 @@ import { useOperationQueueActions } from 'components/grid/hooks/useOperationQueu
 import { useOperationQueueShortcuts } from 'components/grid/hooks/useOperationQueueShortcuts'
 import { useIsQueueOperationsEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Eye } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { Button } from 'ui'
-
+import { useEffect, useRef, useState } from 'react'
 import { getModKeyLabel } from '@/lib/helpers'
 
 export const SaveQueueActionBar = () => {
   const modKey = getModKeyLabel()
   const snap = useTableEditorStateSnapshot()
   const isQueueOperationsEnabled = useIsQueueOperationsEnabled()
   const { handleSave } = useOperationQueueActions()
+  const [leftPosition, setLeftPosition] = useState<string>('50%')
 
   useOperationQueueShortcuts()
 
@@ -24,42 +24,80 @@ export const SaveQueueActionBar = () => {
   const isVisible =
     isQueueOperationsEnabled && snap.hasPendingOperations && !isOperationQueuePanelOpen
 
+  // Center position relative to grid container (viewport alignment)
+  useEffect(() => {
+    if (!isVisible) return
+
+    const gridContainer = document.querySelector('.sb-grid')
+    const updatePosition = () => {
+      if (!gridContainer) {
+        setLeftPosition('50%')
+        return
+      }
+
+      const gridRect = gridContainer.getBoundingClientRect()
+      const gridCenter = gridRect.left + gridRect.width / 2
+      setLeftPosition(`${gridCenter}px`)
+    }
+
+    updatePosition()
+
+    if (!gridContainer) return
+
+    const resizeObserver = new ResizeObserver(updatePosition)
+    resizeObserver.observe(gridContainer)
+
+    window.addEventListener('resize', updatePosition)
+    window.addEventListener('scroll', updatePosition, true)
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    }
+  }, [isVisible])
+
   const content = (
     <AnimatePresence>
       {isVisible && (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 20 }}
-          transition={{ duration: 0.2 }}
-          className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50"
+        <div
+          className="fixed bottom-12 z-50 transform-gpu will-change-transform"
+          style={{ left: leftPosition, transform: 'translateX(-50%)' }}
         >
-          <div className="flex items-center gap-8 px-4 py-3 bg-surface-100 border rounded-lg shadow-lg">
-            <span className="text-sm text-foreground">
-              {operationCount} pending change{operationCount !== 1 ? 's' : ''}
-            </span>
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => snap.toggleViewOperationQueue()}
-                className="text-foreground-light hover:text-foreground transition-colors flex items-center"
-                aria-label="View Details"
-              >
-                <Eye size={14} />
-                <span className="text-foreground-lighter text-[10px] ml-1">{`${modKey}.`}</span>
-              </button>
-              <Button
-                size="tiny"
-                type="primary"
-                onClick={handleSave}
-                disabled={isSaving}
-                loading={isSaving}
-              >
-                Save
-                <span className="text-foreground-lighter text-[10px] ml-1">{`${modKey}S`}</span>
-              </Button>
+          <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 16 }}
+            transition={{
+              type: 'spring',
+              stiffness: 420,
+              damping: 30,
+              mass: 0.4,
+            }}
+          >
+            <div className="flex items-center gap-8 pl-4 pr-2 py-2 bg-surface-100 border rounded-lg shadow-lg">
+              <span className="text-xs text-foreground-light max-w-40 truncate">
+                {operationCount} pending change{operationCount !== 1 ? 's' : ''}
+              </span>
+              <div className="flex items-center gap-2">
+                <Button type="default" size="tiny" onClick={() => snap.toggleViewOperationQueue()}>
+                  Review{' '}
+                  <span className="text-[10px] text-foreground/40 ml-1.5">{`${modKey}.`}</span>
+                </Button>
+                <Button
+                  size="tiny"
+                  type="primary"
+                  onClick={handleSave}
+                  disabled={isSaving}
+                  loading={isSaving}
+                >
+                  Save{operationCount > 1 && ' all'}
+                  <span className="text-[10px] text-foreground/40 ml-1.5">{`${modKey}S`}</span>
+                </Button>
+              </div>
             </div>
-          </div>
-        </motion.div>
+          </motion.div>
+        </div>
       )}
     </AnimatePresence>
   )

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/AddRowOperationItem.tsx

@@ -1,12 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query'
+import { Plus, Undo2 } from 'lucide-react'
 import { tableRowKeys } from 'data/table-rows/keys'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Plus, X } from 'lucide-react'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
-import { Button } from 'ui'
 
 import { formatOperationItemValue } from './OperationQueueSidePanel.utils'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { AddRowPayload } from '@/state/table-editor-operation-queue.types'
+import { Card, CardContent, CardHeader } from 'ui'
 
 interface AddRowOperationItemProps {
   operationId: string
@@ -47,40 +48,52 @@ export const AddRowOperationItem = ({
   }
 
   return (
-    <div className="border rounded-md overflow-hidden bg-surface-100 border-l-4 border-l-brand-500">
-      <div className="px-3 py-2 border-b border-default bg-surface-200 flex items-start justify-between gap-2">
+    <Card className="overflow-hidden">
+      <CardHeader className="pt-2.5 flex flex-row gap-2">
         <div className="min-w-0 flex-1 flex items-start gap-2">
-          <Plus size={14} className="text-brand-500 mt-0.5 shrink-0" />
-          <div>
-            <div className="text-xs text-foreground font-mono">{fullTableName}</div>
-            <div className="text-sm text-foreground-muted mt-0.5">
-              <span className="font-medium text-foreground">New row</span>
+          <div className="min-w-0 flex-1">
+            <code className="text-code-inline dark:bg-surface-300 dark:border-foreground-muted/50">
+              {fullTableName}
+            </code>
+            <div className="text-xs text-foreground mt-1 ml-0.5">
+              <span>New row</span>
             </div>
           </div>
         </div>
-        <Button
+        <ButtonTooltip
           type="text"
           size="tiny"
-          icon={<X size={14} />}
+          aria-label="Revert change"
+          className="px-1.5"
+          icon={<Undo2 />}
           onClick={handleDelete}
-          className="shrink-0"
-          aria-label="Remove operation"
+          tooltip={{
+            content: {
+              side: 'bottom',
+              align: 'end',
+              text: 'Revert change',
+            },
+          }}
         />
-      </div>
+      </CardHeader>
 
-      <div className="px-3 py-2 text-xs font-mono space-y-1 bg-brand-100/30">
+      <CardContent className="font-mono text-xs space-y-1 text-brand-link">
         {previewColumns.map(([key, value]) => (
-          <div key={key} className="flex items-start gap-2 text-foreground">
-            <span className="text-foreground-light">{key}:</span>
-            <span className="truncate" title={formatOperationItemValue(value)}>
+          <div key={key} className="flex gap-2 py-0.5">
+            <span className="text-brand-link select-none font-medium">+</span>
+            <span className="shrink-0">{key}:</span>
+            <span className="truncate min-w-0" title={formatOperationItemValue(value)}>
               {formatOperationItemValue(value)}
             </span>
           </div>
         ))}
         {remainingCount > 0 && (
-          <div className="text-foreground-light">+{remainingCount} more column(s)</div>
+          <div className="flex gap-2 py-0.5">
+            <span className="text-brand-link select-none font-medium">+</span>
+            <span>+{remainingCount} more column(s)</span>
+          </div>
         )}
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   )
 }

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/DeleteRowOperationItem.tsx

@@ -1,12 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { Trash2, X } from 'lucide-react'
-import { Button } from 'ui'
-
+import { Undo2 } from 'lucide-react'
 import { tableRowKeys } from 'data/table-rows/keys'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
-import { DeleteRowPayload } from '@/state/table-editor-operation-queue.types'
+
 import { formatOperationItemValue } from './OperationQueueSidePanel.utils'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { DeleteRowPayload } from '@/state/table-editor-operation-queue.types'
+import { Card, CardContent, CardHeader } from 'ui'
 
 interface DeleteRowOperationItemProps {
   operationId: string
@@ -45,32 +46,40 @@ export const DeleteRowOperationItem = ({
   }
 
   return (
-    <div className="border rounded-md overflow-hidden bg-surface-100 border-l-4 border-l-destructive-500">
-      <div className="px-3 py-2 border-b border-default bg-surface-200 flex items-start justify-between gap-2">
+    <Card className="overflow-hidden border-destructive-500 bg-destructive-500/5">
+      <CardHeader className="pt-2.5 flex flex-row gap-2 border-b border-destructive-500">
         <div className="min-w-0 flex-1 flex items-start gap-2">
-          <Trash2 size={14} className="text-destructive-500 mt-0.5 shrink-0" />
-          <div>
-            <div className="text-xs text-foreground font-mono">{fullTableName}</div>
-            <div className="text-sm text-foreground-muted mt-0.5">
-              <span className="font-medium text-foreground">Delete row</span>
-              <span className="text-foreground-muted mx-2">·</span>
-              <span className="text-foreground text-xs">where {whereClause}</span>
+          <div className="min-w-0 flex-1">
+            <code className="text-code-inline dark:bg-surface-300 dark:border-foreground-muted/50">
+              {fullTableName}
+            </code>
+            <div className="text-xs text-foreground mt-1 ml-0.5">
+              <span>Delete row</span>
+              <span className="text-foreground-muted mx-1.5">·</span>
+              <span>where {whereClause}</span>
             </div>
           </div>
         </div>
-        <Button
+        <ButtonTooltip
           type="text"
           size="tiny"
-          icon={<X size={14} />}
+          aria-label="Revert change"
+          className="px-1.5"
+          icon={<Undo2 />}
           onClick={handleDelete}
-          className="shrink-0"
-          aria-label="Remove operation"
+          tooltip={{
+            content: {
+              side: 'bottom',
+              align: 'end',
+              text: 'Revert change',
+            },
+          }}
         />
-      </div>
+      </CardHeader>
 
-      <div className="px-3 py-2 text-xs font-mono bg-destructive-100/30">
-        <div className="text-destructive-500 line-through opacity-70">Row will be deleted</div>
-      </div>
-    </div>
+      <CardContent className="font-mono text-xs bg-destructive-100/30">
+        <div className="text-destructive py-0.5">Row will be deleted</div>
+      </CardContent>
+    </Card>
   )
 }

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/OperationQueueSidePanel/OperationItem.tsx

@@ -1,12 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query'
+import { Undo2 } from 'lucide-react'
 import { tableRowKeys } from 'data/table-rows/keys'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { X } from 'lucide-react'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 
 import { formatOperationItemValue } from './OperationQueueSidePanel.utils'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import { EditCellContentPayload } from '@/state/table-editor-operation-queue.types'
+import { Card, CardContent, CardHeader } from 'ui'
 
 interface OperationItemProps {
   operationId: string
@@ -44,42 +45,50 @@ export const OperationItem = ({ operationId, tableId, content }: OperationItemPr
   }
 
   return (
-    <div className="border rounded-md overflow-hidden bg-surface-100">
-      <div className="px-3 py-2 border-b border-default bg-surface-200 flex items-start justify-between gap-2">
+    <Card className="overflow-hidden">
+      <CardHeader className="pt-2.5 flex flex-row gap-2">
         <div className="min-w-0 flex-1">
-          <div className="text-xs text-foreground font-mono">{fullTableName}</div>
-          <div className="text-sm text-foreground-muted mt-0.5">
-            <span className="font-medium text-foreground">{columnName}</span>
-            <span className="text-foreground-muted mx-2">•</span>
-            <span className="text-foreground text-xs">where {whereClause}</span>
+          <code className="text-code-inline dark:bg-surface-300 dark:border-foreground-muted/50">
+            {fullTableName}
+          </code>
+          <div className="text-xs text-foreground mt-1 ml-0.5">
+            <span>{columnName}</span>
+            <span className="text-foreground-muted mx-1.5">·</span>
+            <span>where {whereClause}</span>
           </div>
         </div>
         <ButtonTooltip
           type="text"
           size="tiny"
-          icon={<X size={14} />}
+          aria-label="Revert change"
+          className="px-1.5"
+          icon={<Undo2 />}
           onClick={handleDelete}
-          className="shrink-0 w-7"
-          aria-label="Remove operation"
-          tooltip={{ content: { side: 'bottom', text: 'Remove operation' } }}
+          tooltip={{
+            content: {
+              side: 'bottom',
+              align: 'end',
+              text: 'Revert change',
+            },
+          }}
         />
-      </div>
+      </CardHeader>
 
-      <div className="font-mono text-xs">
-        <div className="flex items-start gap-2 px-3 py-0.5 bg-red-400/20">
-          <span className="text-red-900 select-none font-bold">-</span>
-          <span className="text-red-900 truncate max-w-full" title={formattedOldValue}>
+      <CardContent className="font-mono text-xs">
+        <div className="flex gap-2 py-0.5">
+          <span className="text-destructive select-none font-medium">-</span>
+          <span className="text-destructive truncate max-w-full" title={formattedOldValue}>
             {formattedOldValue}
           </span>
         </div>
 
-        <div className="flex items-start gap-2 px-3 py-0.5 bg-green-400/20">
-          <span className="text-green-900 select-none font-bold">+</span>
-          <span className="text-green-900 truncate max-w-full" title={formattedNewValue}>
+        <div className="flex gap-2 py-0.5">
+          <span className="text-brand-link select-none font-medium">+</span>
+          <span className="text-brand-link truncate max-w-full" title={formattedNewValue}>
             {formattedNewValue}
           </span>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   )
 }