moar

apps/studio-prototype/package.json

@@ -15,6 +15,7 @@
     "next": "14.2.4",
     "next-themes": "^0.3.0",
     "react": "^18",
+    "react-data-grid": "^7.0.0-beta.44",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4.5.0",
     "ui": "*"

apps/studio-prototype/src/app/[org]/branch-menu.tsx

@@ -107,30 +107,6 @@ export function BranchMenu() {
             ))}
           </CommandGroup_Shadcn_>
         </Command_Shadcn_>
-        <Command_Shadcn_>
-          <CommandInput_Shadcn_ placeholder="Search framework..." />
-          <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
-          <CommandGroup_Shadcn_>
-            {frameworks.map((framework) => (
-              <CommandItem_Shadcn_
-                key={framework.value}
-                value={framework.value}
-                onSelect={(currentValue) => {
-                  setValue(currentValue === value ? '' : currentValue)
-                  setOpen(false)
-                }}
-              >
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    value === framework.value ? 'opacity-100' : 'opacity-0'
-                  )}
-                />
-                {framework.label}
-              </CommandItem_Shadcn_>
-            ))}
-          </CommandGroup_Shadcn_>
-        </Command_Shadcn_>
       </PopoverContent_Shadcn_>
     </Popover_Shadcn_>
   )

apps/studio-prototype/src/app/[org]/settings/settings-menu-children.tsx

@@ -57,7 +57,7 @@ const SettingsMenuChildren: React.FC = () => {
 
   const renderGroup = (group: string) => {
     return (
-      <h2 className="text-sm font-mono text-foreground-muted uppercase tracking-wide px-5">
+      <h2 className="text-sm font-mono text-foreground-lighter/75 uppercase tracking-wide px-5">
         {group}
       </h2>
     )

apps/studio-prototype/src/app/[org]/side-menu-org-menu.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { orgs } from '@/src/config/org'
+import { useConfig } from '@/src/hooks/use-config'
+import { Check } from 'lucide-react'
+import Link from 'next/link'
+import { CommandSeparator_Shadcn_, ScrollArea, ScrollBar, cn } from 'ui'
+
+import {
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  Command_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+export default function SideMenuOrgMenu() {
+  const [config, setConfig] = useConfig()
+  const { organization } = config
+
+  return (
+    <>
+      <Popover_Shadcn_>
+        <PopoverTrigger_Shadcn_>
+          <div
+            className={cn(
+              'w-[26px] h-[26px] border bg-foreground rounded-md',
+              'flex items-center justify-center text-background text-xs font-semibold'
+            )}
+          >
+            {config?.organization?.slice(0, 2).toUpperCase()}
+          </div>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="w-[200px] p-0" side="right" align="start" sideOffset={8}>
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Search framework..." />
+            <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
+            <CommandGroup_Shadcn_>
+              <ScrollArea className="max-h-[128px] overflow-y-auto">
+                {orgs.map((org) => (
+                  <CommandItem_Shadcn_
+                    key={org.key}
+                    value={org.key}
+                    onSelect={(currentValue) => {
+                      setConfig({
+                        ...config,
+                        organization: currentValue,
+                      })
+                    }}
+                    className="flex items-center justify-between"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div
+                        className={cn(
+                          'w-[26px] h-[26px] border bg-foreground rounded-md',
+                          'flex items-center justify-center text-background text-xs font-semibold'
+                        )}
+                      >
+                        {org.name?.slice(0, 2).toUpperCase()}
+                      </div>
+                      <span className="truncate">{org.name}</span>
+                    </div>
+                    <div
+                      className={cn(
+                        'w-4 h-4 bg-foreground rounded-full',
+                        'flex items-center justify-center',
+                        organization === org.key ? 'opacity-100' : 'opacity-0'
+                      )}
+                    >
+                      <Check className={cn('h-2 w-2 text-background')} strokeWidth={5} />
+                    </div>
+                  </CommandItem_Shadcn_>
+                ))}
+                <ScrollBar />
+              </ScrollArea>
+            </CommandGroup_Shadcn_>
+            <CommandSeparator_Shadcn_ />
+            <CommandGroup_Shadcn_>
+              <Link href={`/${organization}/settings/general`}>
+                <CommandItem_Shadcn_ value="Settings">Organization Settings</CommandItem_Shadcn_>
+              </Link>
+              <CommandItem_Shadcn_ value="Members">Members</CommandItem_Shadcn_>
+              <CommandItem_Shadcn_ value="Billing">Billing</CommandItem_Shadcn_>
+            </CommandGroup_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
+  )
+}

apps/studio-prototype/src/app/[org]/side-nav-menu-icon.tsx

@@ -12,6 +12,8 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
   const pathname = usePathname()
   const isActive = pathname.startsWith(`/${org}${product.href}`)
 
+  // console.log('config.tableEditor.activeTabId', config.tableEditor.activeTabId)
+
   /**
    * Override href for settings product
    * Grabs project and organization from config to build friendly URL
@@ -20,6 +22,9 @@ export default function SideNavMenuIcon({ product }: { product: any }) {
   if (product.name === 'settings') {
     overrideHref = `/${organization}/settings/${project}/general`
   }
+  if (product.name === 'table-editor' && config.tableEditor.activeTabId) {
+    overrideHref = `/${organization}/table-editor/${config.tableEditor.activeTabId}`
+  }
 
   return (
     <Link

apps/studio-prototype/src/app/[org]/side-nav.tsx

@@ -2,6 +2,7 @@ import { cn } from 'ui'
 import SideNavMenuIcon from './side-nav-menu-icon'
 import UserMenu from './user-menu'
 import { SideNav as SideNavData } from '@/src/config/nav'
+import SideMenuOrgMenu from './side-menu-org-menu'
 
 export default function SideNav() {
   return (
@@ -13,14 +14,7 @@ export default function SideNav() {
         'transition-all'
       )}
     >
-      <div
-        className={cn(
-          'w-[26px] h-[26px] border bg-foreground rounded-md',
-          'flex items-center justify-center text-background text-xs font-semibold'
-        )}
-      >
-        SM
-      </div>
+      <SideMenuOrgMenu />
       <div className="grow w-full flex flex-col gap-5 my-6">
         {SideNavData.map((product) => (
           <SideNavMenuIcon key={product.name} product={product} />

apps/studio-prototype/src/app/[org]/table-editor/[id]/page.tsx

@@ -1,5 +1,152 @@
 'use client'
 
+import '@/src/styles/react-data-grid.css'
+import 'react-data-grid/lib/styles.css'
+
+import DataGrid, { Column } from 'react-data-grid'
+import { Checkbox_Shadcn_ } from 'ui'
+
+// Define the type for your row data
+interface Row {
+  name: string
+  company: string
+  email: string
+  phone: string
+}
+
 export default function EditorIdRender() {
-  return <div className="flex flex-col grow h-full"></div>
+  const rows: Row[] = [
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+    {
+      name: 'Hines Fowler',
+      company: 'BUZZNESS',
+      email: 'hinesfowler@buzzness.com',
+      phone: '+1 (869) 405-3127',
+    },
+  ]
+
+  // Define the columns with proper types
+  const columns: Column<Row>[] = [
+    {
+      key: 'id',
+      name: '',
+      width: 10,
+      renderCell: ({ row }) => <Checkbox_Shadcn_ className="ml-1" />,
+    },
+    {
+      key: 'name',
+      name: 'Name',
+      width: 200,
+      //   renderCell: ({ row }) => <ColumnRender row={row} />,
+    },
+    {
+      key: 'company',
+      name: 'Company',
+      width: 200,
+      //   renderCell: ({ row }) => <ColumnRender row={row} />,
+    },
+    {
+      key: 'email',
+      name: 'Email',
+      width: 200,
+      //   renderCell: ({ row }) => <ColumnRender row={row} />,
+    },
+    {
+      key: 'phone',
+      name: 'Phone',
+      width: 200,
+      //   renderCell: ({ row }) => <ColumnRender row={row} />,
+    },
+  ]
+
+  return (
+    <DataGrid
+      className="grow"
+      columns={columns}
+      rows={rows}
+      rowHeight={24}
+      headerRowHeight={32}
+      //   onColumnResize={onColumnResize}
+      renderers={{
+        renderCheckbox: () => <input type="checkbox" />,
+      }}
+    />
+  )
 }

apps/studio-prototype/src/app/[org]/table-editor/layout.tsx

@@ -9,7 +9,7 @@ export default function TableEditorLayout({
   return (
     <div className="flex h-full w-full">
       <TableEditorItemsPanel />
-      <div className="grow">
+      <div className="flex flex-col grow h-full w-full">
         <TabHeader />
         {children}
       </div>

apps/studio-prototype/src/app/[org]/table-editor/table-editor-items-panel.tsx

@@ -3,8 +3,17 @@
 import { useConfig } from '@/src/hooks/use-config'
 import useShortcut from '@/src/hooks/use-shortcut'
 import { useParams, usePathname } from 'next/navigation'
-import { cn } from 'ui'
+import {
+  Button,
+  CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+  Collapsible_Shadcn_,
+  Separator,
+  cn,
+} from 'ui'
 import { useHotkeys } from 'react-hotkeys-hook'
+import { ChevronRight, Search } from 'lucide-react'
+import { Input } from 'ui-patterns/DataInputs/Input'
 
 export default function TableEditorItemsPanel() {
   const { org } = useParams()
@@ -38,10 +47,77 @@ export default function TableEditorItemsPanel() {
         `,
         'duration-200',
         'ease-out',
-        'transition-all'
+        'transition-all',
+        'py-3'
       )}
     >
-      hello world
+      <Collapsible_Shadcn_
+        className="group pb-3"
+        open={config.tableEditor.itemsOpen}
+        onOpenChange={() =>
+          setConfig({
+            ...config,
+            tableEditor: {
+              ...config.tableEditor,
+              itemsOpen: !config.tableEditor.itemsOpen,
+            },
+          })
+        }
+      >
+        <CollapsibleTrigger_Shadcn_ className="px-3 text-sm uppercase text-foreground-muted font-mono flex gap-3 items-center">
+          <ChevronRight
+            size={14}
+            className="group-data-[state=open]:rotate-90 transform transition-all"
+          />
+          Items
+        </CollapsibleTrigger_Shadcn_>
+        <CollapsibleContent_Shadcn_>
+          <div className="px-3 py-3 flex flex-col gap-2">
+            <Button type="default" className="justify-start">
+              <span className="text-foreground-lighter">Schema</span> <span>public</span>
+            </Button>
+            <Input
+              icon={<Search size={13} className="text-foreground-muted" />}
+              placeholder="Search tables..."
+              size="tiny"
+            />
+          </div>
+        </CollapsibleContent_Shadcn_>
+      </Collapsible_Shadcn_>
+      <Separator />
+      <Collapsible_Shadcn_
+        className="group py-3"
+        open={config.tableEditor.queriesOpen}
+        onOpenChange={() =>
+          setConfig({
+            ...config,
+            tableEditor: {
+              ...config.tableEditor,
+              queriesOpen: !config.tableEditor.queriesOpen,
+            },
+          })
+        }
+      >
+        <CollapsibleTrigger_Shadcn_ className="px-3 text-sm uppercase text-foreground-muted font-mono flex gap-3 items-center">
+          <ChevronRight
+            size={14}
+            className="group-data-[state=open]:rotate-90 transform transition-all"
+          />
+          Queries
+        </CollapsibleTrigger_Shadcn_>
+        <CollapsibleContent_Shadcn_>
+          <div className="px-3 py-3 flex flex-col gap-2">
+            <Button type="default" className="justify-start">
+              <span className="text-foreground-lighter">Schema</span> <span>public</span>
+            </Button>
+            <Input
+              icon={<Search size={13} className="text-foreground-muted" />}
+              placeholder="Search tables..."
+              size="tiny"
+            />
+          </div>
+        </CollapsibleContent_Shadcn_>
+      </Collapsible_Shadcn_>
     </div>
   )
 }

apps/studio-prototype/src/app/[org]/top-header.tsx

@@ -10,7 +10,7 @@ export default function TopHeader() {
     <div className="border-b h-[48px] w-full px-3 bg-dash-sidebar">
       <div className="flex items-center h-full -space-x-px">
         <BranchMenu />{' '}
-        <Button
+        {/* <Button
           type={buttonType}
           className="rounded-tr-none rounded-br-none"
           iconRight={<ChevronsUpDown />}
@@ -28,7 +28,7 @@ export default function TopHeader() {
           iconRight={<ChevronsUpDown />}
         >
           <span className="text-foreground-lighter">Branch</span> Production
-        </Button>
+        </Button> */}
       </div>
     </div>
   )

apps/studio-prototype/src/config/nav.tsx

@@ -15,7 +15,7 @@ import { cn } from 'ui'
 const STROKE_WIDTH = 1
 const ICON_SIZE = 21
 const iconsClasses = cn(
-  'text-foreground-muted',
+  'text-foreground-lighter',
   'group-aria-[current=page]/nav-item-anchor:text-foreground',
   'group-aria-[current=page]/nav-item-anchor:stroke-[1.5]',
   'group-hover/nav-item-anchor:text-foreground-light',

apps/studio-prototype/src/config/org.ts

@@ -0,0 +1,72 @@
+export const orgs = [
+  {
+    name: 'SummersMuir',
+    key: 'summersmuir',
+    projects: [
+      {
+        name: 'Sonsing',
+        key: 'sonsing',
+      },
+      {
+        name: 'Docmrk',
+        key: 'docmrk',
+      },
+    ],
+  },
+  {
+    name: 'Docmrk',
+    key: 'docmrk',
+    projects: [
+      {
+        name: 'Sonsing',
+        key: 'sonsing',
+      },
+      {
+        name: 'Docmrk',
+        key: 'docmrk',
+      },
+    ],
+  },
+  {
+    name: 'Sonsing 2',
+    key: 'sonsing-2',
+    projects: [
+      {
+        name: 'Sonsing 2',
+        key: 'sonsing',
+      },
+      {
+        name: 'Docmrk',
+        key: 'docmrk',
+      },
+    ],
+  },
+  {
+    name: 'Sonsing 3',
+    key: 'sonsing-3',
+    projects: [
+      {
+        name: 'Sonsing 2',
+        key: 'sonsing',
+      },
+      {
+        name: 'Docmrk',
+        key: 'docmrk',
+      },
+    ],
+  },
+  {
+    name: 'Sonsing 4',
+    key: 'sonsing-4',
+    projects: [
+      {
+        name: 'Sonsing 2',
+        key: 'sonsing',
+      },
+      {
+        name: 'Docmrk',
+        key: 'docmrk',
+      },
+    ],
+  },
+]

apps/studio-prototype/src/hooks/use-config.ts

@@ -7,15 +7,29 @@ type Config = {
   project?: string
   tableEditor: {
     sidePanelOpen: boolean
+    activeTabId: number
+    itemsOpen: boolean
+    queriesOpen: boolean
+  }
+  env: {
+    type: 'prod' | 'preview' | 'long-running'
+    name: string
   }
 }
 
 const configAtom = atomWithStorage<Config>('config', {
   radius: 0.5,
-  organization: 'Summers-Muir',
+  organization: 'summersmuir',
   project: 'Sonsing',
   tableEditor: {
     sidePanelOpen: true,
+    activeTabId: 1,
+    itemsOpen: true,
+    queriesOpen: true,
+  },
+  env: {
+    type: 'prod',
+    name: 'name',
   },
 })
 

apps/studio-prototype/src/styles/react-data-grid.css

@@ -0,0 +1,495 @@
+.sb-grid {
+  @apply flex h-full flex-col;
+}
+.sb-grid-fill-container:after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+}
+.rdg-cell {
+  @apply flex;
+  @apply border-secondary border-r border-b;
+  @apply text-foreground;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: inherit;
+  box-sizing: border-box;
+}
+.rdg-cell.rdg-editor-container > * {
+  background-color: inherit;
+}
+.rdg-cell > div[draggable='true'] {
+  @apply h-full;
+}
+.rdg-cell-frozen-last {
+  @apply border-default border-r-4 shadow-none;
+}
+.rdg-cell[aria-selected='true'] {
+  box-shadow: inset 0 0 0 1px #24b47e;
+}
+.rdg {
+  @apply !bg-dash-canvas;
+  @apply box-border select-none overflow-x-auto overflow-y-scroll bg-transparent;
+  @apply border-default border-r-0 border-l-0;
+  contain: strict;
+  -webkit-user-select: none;
+  font-size: 14px;
+}
+.rdg *,
+.rdg ::after,
+.rdg ::before {
+  box-sizing: inherit;
+}
+@supports not (contain: strict) {
+  .rdg {
+    position: relative;
+    z-index: 0;
+  }
+}
+.rdg-focus-sink {
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  outline: 0;
+}
+/*
+  Row header
+*/
+.rdg-header-row {
+  @apply bg-surface-200 select-none border-none;
+  height: 34px;
+}
+
+.rdg-header-row .rdg-cell {
+  @apply flex items-center font-normal text-xs;
+  @apply border-default;
+}
+.rdg-header-row .rdg-cell p {
+  @apply text-foreground-light;
+}
+.rdg-header-row .rdg-cell .react-contextmenu-wrapper {
+  @apply flex h-full items-center px-2 transition duration-100 ease-in-out;
+}
+.rdg-header-row .rdg-cell .react-contextmenu-wrapper:hover {
+  @apply bg-surface-200;
+}
+.rdg-header-row .rdg-checkbox {
+  @apply bg-surface-200 border-default rounded-sm border;
+}
+.rdg-header-row .rdg-checkbox-input:checked + .rdg-checkbox {
+  @apply border-default border-4 bg-green-900;
+}
+.rdg-header-row .rdg-checkbox-input:focus + .rdg-checkbox {
+  box-shadow: none;
+}
+.rdg-cell .Select {
+  max-height: 30px;
+  font-size: 12px;
+  font-weight: 400;
+}
+/*
+  Row
+*/
+.rdg-row {
+  @apply bg-dash-sidebar transition-colors;
+}
+.rdg-row .rdg-cell {
+  @apply font-mono text-xs flex items-center;
+}
+/* edit button */
+.rdg-row__select-column__edit-action {
+  @apply opacity-0;
+}
+.rdg-row:hover .rdg-row__select-column__edit-action {
+  @apply opacity-100;
+}
+.rdg-row__select-column__edit-action:hover {
+  opacity: 1 !important;
+}
+/* select row */
+.rdg-row[aria-selected='true'] {
+  @apply bg-surface-100;
+  @apply hover:bg-surface-100;
+}
+.tab-cursor {
+  cursor: pointer !important;
+}
+/*
+  Checkbox
+*/
+.sb-grid {
+  /* reset styles */
+}
+.sb-grid [type='checkbox'] {
+  webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #2563eb;
+  background-color: #fff;
+  border-color: #6b7280;
+  border-width: 1px;
+}
+.sb-grid [type='checkbox']:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+.sb-grid [type='checkbox']:checked {
+  @apply bg-foreground;
+  border-color: transparent;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.sb-grid [type='checkbox'] {
+  @apply cursor-pointer rounded border border-solid;
+  @apply text-foreground border-default transition-all;
+  @apply hover:border-foreground focus:ring-0 focus:outline-none;
+  @apply bg-transparent;
+  margin-top: 2px;
+}
+/*
+  React Contexify
+*/
+.react-contexify {
+  position: fixed;
+  opacity: 0;
+  user-select: none;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  padding: 6px 0;
+  min-width: 200px;
+  z-index: 100;
+}
+.react-contexify__submenu--is-open,
+.react-contexify__submenu--is-open > .react-contexify__item__content {
+  color: white;
+  background-color: #4393e6;
+}
+.react-contexify__submenu--is-open > .react-contexify__submenu {
+  pointer-events: initial;
+  opacity: 1;
+}
+.react-contexify .react-contexify__submenu {
+  position: absolute;
+  /* negate padding */
+  top: -6px;
+  pointer-events: none;
+  transition: opacity 0.275s;
+}
+.react-contexify__submenu-arrow {
+  margin-left: auto;
+  font-size: 12px;
+}
+.react-contexify__will-leave--disabled {
+  pointer-events: none;
+}
+.react-contexify__item {
+  cursor: pointer;
+  position: relative;
+}
+.react-contexify__item:focus {
+  outline: 0;
+}
+.react-contexify__item:not(.react-contexify__item--disabled):hover
+  > .react-contexify__item__content,
+.react-contexify__item:not(.react-contexify__item--disabled):focus
+  > .react-contexify__item__content {
+  color: white;
+  background-color: #4393e6;
+}
+.react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__submenu {
+  pointer-events: initial;
+  opacity: 1;
+}
+.react-contexify__item--disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.react-contexify__item__content {
+  font-size: 13px;
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  color: #333;
+  position: relative;
+}
+.rdg__segmented-control {
+  @apply border-default relative mx-2 h-8 rounded-md border;
+}
+.rdg__segmented-control__button {
+  @apply absolute top-0 inline-flex h-full items-center justify-center;
+  @apply text-xs font-medium;
+  @apply text-border-muted;
+  @apply active:bg-alternative hover:text-white focus:z-10 focus:outline-none;
+  @apply transition duration-150 ease-in-out;
+  @apply cursor-pointer;
+  z-index: 1;
+}
+.rdg__segmented-control__button--option {
+  @apply text-background;
+}
+.rdg__segmented-control__button--right {
+  @apply right-0;
+}
+.rdg__segmented-control__button--left {
+  @apply left-0;
+}
+.rdg__segmented-control__label {
+  @apply bg-overlay-hover border-control z-0 inline-block h-full transform rounded border shadow transition duration-200 ease-in-out;
+}
+.rdg__segmented-control__label--left {
+  @apply translate-x-0;
+}
+.rdg__segmented-control__label--right {
+  @apply translate-x-12;
+}
+.rdg__segmented-control__options-label {
+  @apply uppercase;
+  color: inherit;
+}
+/*
+  DropdownControl
+*/
+.dropdown-control {
+  @apply overflow-auto;
+}
+.dropdown-control .sbui-typography {
+  @apply block px-2 py-4;
+}
+/*
+  NullValue
+*/
+.null-value {
+  @apply block;
+}
+/*
+  CheckboxEditor
+*/
+.sb-grid-checkbox-editor {
+  @apply flex h-full w-full;
+}
+.sb-grid-checkbox-editor__input {
+  @apply h-4 w-4;
+  outline: 4px auto -webkit-focus-ring-color;
+}
+/*
+  DateEditor
+*/
+.sb-grid-date-editor {
+  @apply h-full w-full px-2;
+}
+/*
+  DateTimeEditor
+*/
+.sb-grid-datetime-editor {
+  @apply h-full w-full px-2;
+}
+/*
+  JsonEditor
+*/
+.sb-grid-json-editor__trigger {
+  @apply text-sm overflow-hidden overflow-ellipsis px-2;
+}
+/*
+  NumberEditor
+*/
+.sb-grid-number-editor {
+  @apply h-full w-full px-2;
+}
+/*
+  SelectEditor
+*/
+.sb-grid-select-editor button {
+  @apply border-none rounded-none shadow-none;
+  box-shadow: none !important;
+}
+/*
+  TextEditor
+*/
+.sb-grid-text-editor__trigger {
+  @apply text-sm overflow-hidden overflow-ellipsis px-2;
+}
+/*
+  TimeEditor
+*/
+.sb-grid-time-editor {
+  @apply h-full w-full px-2;
+}
+/*
+  Pagination
+*/
+.sb-grid-pagination {
+  @apply flex items-center space-x-2;
+}
+.sb-grid-pagination-input-container {
+  @apply w-12;
+}
+.sb-grid-pagination-input {
+  @apply block w-12;
+}
+.sb-grid-pagination-input .sbui-inputnumber {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+/*
+  Footer
+*/
+.sb-grid-footer {
+  @apply bg-surface-100 flex h-10 items-center justify-between px-2;
+}
+.sb-grid-footer__inner {
+  @apply flex items-center;
+}
+/*
+  ForeignKeyFormatter
+*/
+.sb-grid-foreign-key-formatter {
+  @apply flex w-full items-center justify-between;
+}
+.sb-grid-foreign-key-formatter__text {
+  @apply m-0 flex-grow overflow-hidden overflow-ellipsis;
+}
+/*
+  AddColumn
+*/
+.sb-grid-add-column {
+  @apply flex h-full w-full py-1.5;
+}
+/*
+  ColumnHeader
+*/
+.sb-grid-column-header {
+  @apply flex h-full w-full items-center justify-between;
+}
+.sb-grid-column-header--cursor {
+  @apply cursor-default;
+}
+.sb-grid-column-header__inner {
+  @apply flex items-center gap-2 overflow-hidden overflow-ellipsis;
+}
+.sb-grid-column-header__inner__name {
+  @apply text-foreground overflow-hidden overflow-ellipsis text-xs select-text;
+}
+.sb-grid-column-header__inner__format {
+  @apply text-xs;
+  @apply overflow-hidden overflow-ellipsis font-normal;
+  @apply text-foreground-light;
+}
+.sb-grid-column-header__inner__primary-key {
+  @apply flex rotate-45 transform items-center;
+}
+.sb-grid-column-header__inner svg {
+  @apply border-brand text-brand;
+}
+/*
+  Grid
+*/
+.sb-grid-grid--loading {
+  @apply flex justify-center bg-transparent;
+}
+.sb-grid-grid--loading__inner {
+  @apply flex items-center;
+}
+.sb-grid-grid--loading__inner__text {
+  @apply m-8;
+}
+/*
+  SelectColumn
+*/
+.sb-grid-select-cell__formatter {
+  @apply flex h-full w-full items-center justify-between;
+}
+.sb-grid-select-cell__header {
+  @apply flex h-full w-full items-center justify-between;
+}
+.sb-grid-select-cell__header__input {
+  /* @apply focus:ring-brand-300; */
+  @apply border-background-surface-100;
+}
+/*
+  Header
+*/
+.sb-grid-header {
+  @apply bg-surface-100 flex h-10 justify-between px-2;
+}
+.sb-grid-header__inner {
+  @apply flex items-center space-x-2;
+}
+.sb-grid-header__inner__divider {
+  @apply py-2;
+}
+.row_header__selected-rows {
+  @apply ml-2 mr-2;
+}
+/*
+  StatusLabel
+*/
+.sb-grid-status-label {
+  @apply text-sm text-white;
+}
+.sb-grid-status-label__no-msg {
+  @apply flex h-5 w-5;
+}
+.sb-grid-status-label__no-msg > div {
+  @apply m-auto h-2 w-2 rounded-full bg-green-900;
+}
+/*
+  Empty value
+*/
+.sb-grid-empty-value {
+  @apply block;
+}
+/*
+header/sort/SortDropdown
+*/
+.sb-grid-sort-popover {
+  @apply w-96;
+}
+.sb-grid-dropdown__empty {
+  @apply py-2;
+}
+.sb-grid-dropdown__empty__text {
+  @apply block;
+}
+.sb-grid-dropdown__item-trigger {
+  @apply my-1;
+}
+/*
+header/sort/SortRow
+*/
+.sb-grid-sort-row {
+  @apply flex justify-between space-x-3;
+}
+.sb-grid-sort-row__item {
+  @apply flex items-center space-x-3;
+}
+.sb-grid-sort-row__item__remove {
+  @apply bg-transparent p-0 hover:bg-transparent;
+}
+.sb-grid-sort-row__item__label {
+  @apply flex items-center space-x-2;
+}
+.sb-grid-sort-row__item_toogle {
+  @apply flex w-28 items-center gap-0 space-x-3;
+}
+.sb-grid-sort-row__item__move {
+  @apply flex cursor-move;
+}

package-lock.json

@@ -1369,6 +1369,7 @@
         "next": "14.2.4",
         "next-themes": "^0.3.0",
         "react": "^18",
+        "react-data-grid": "^7.0.0-beta.44",
         "react-dom": "^18",
         "react-hotkeys-hook": "^4.5.0",
         "ui": "*"
@@ -1385,6 +1386,26 @@
         "typescript": "^5"
       }
     },
+    "apps/studio-prototype/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "apps/studio-prototype/node_modules/react-data-grid": {
+      "version": "7.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/react-data-grid/-/react-data-grid-7.0.0-beta.44.tgz",
+      "integrity": "sha512-VTql8VPBJEf7E+zkrqYW+jaQT1/m47dxigWzPq59QESJ8LhU59kHyzIx06BUpjdZKdK/tzbWaw2yyJpKoNnt5g==",
+      "dependencies": {
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0",
+        "react-dom": "^18.0"
+      }
+    },
     "apps/studio/node_modules/@heroicons/react": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",