Add panel

apps/studio/components/grid/components/grid/SelectColumn.tsx

@@ -1,5 +1,5 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Maximize2 } from 'lucide-react'
+import { Eye, Maximize2 } from 'lucide-react'
 import { ChangeEvent, InputHTMLAttributes, SyntheticEvent } from 'react'
 import {
   CalculatedColumn,
@@ -9,7 +9,7 @@ import {
   useRowSelection,
 } from 'react-data-grid'
 
-import { Button } from 'ui'
+import { Button, HoverCard_Shadcn_, HoverCardContent_Shadcn_, HoverCardTrigger_Shadcn_ } from 'ui'
 import { SELECT_COLUMN_KEY } from '../../constants'
 import { useTrackedState } from '../../store/Store'
 import type { SupaRow } from '../../types'
@@ -165,6 +165,46 @@ function SelectCellFormatter({
           </Tooltip.Portal>
         </Tooltip.Root>
       )}
+      {onEditRow && row && (
+        <HoverCard_Shadcn_>
+          <HoverCardTrigger_Shadcn_ asChild>
+            <Button type="link">
+              <Eye />
+            </Button>
+          </HoverCardTrigger_Shadcn_>
+          <HoverCardContent_Shadcn_ className="w-96 z-50" side="right">
+            <div className="flex justify-between space-x-4">
+              hover content hover content hover content hover content hover content hover content
+              hover content
+            </div>
+          </HoverCardContent_Shadcn_>
+        </HoverCard_Shadcn_>
+        // <Tooltip.Root delayDuration={0}>
+        //   <Tooltip.Trigger asChild>
+        //     <Button
+        //       type="text"
+        //       size="tiny"
+        //       className="rdg-row__select-column__edit-action"
+        //       icon={<Eye />}
+        //       onClick={onEditClick}
+        //       style={{ padding: '3px' }}
+        //     />
+        //   </Tooltip.Trigger>
+        //   <Tooltip.Portal>
+        //     <Tooltip.Content side="bottom">
+        //       <Tooltip.Arrow className="radix-tooltip-arrow" />
+        //       <div
+        //         className={[
+        //           'rounded bg-alternative py-1 px-2 leading-none shadow',
+        //           'border border-background',
+        //         ].join(' ')}
+        //       >
+        //         <span className="text-xs text-foreground">Peek row</span>
+        //       </div>
+        //     </Tooltip.Content>
+        //   </Tooltip.Portal>
+        // </Tooltip.Root>
+      )}
     </div>
   )
 }