Develop

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -8,7 +8,6 @@ body:
       attributes:
           value: |
               Thanks for taking the time to suggest an improvement!
-              Datary is a database management tool, so features related to databases, UX, performance, or integrations are especially welcome.
 
     - type: textarea
       attributes:

.github/scripts/telegram-notify.js

@@ -25,7 +25,7 @@ if (GITHUB_EVENT_PATH && fs.existsSync(GITHUB_EVENT_PATH)) {
 
 	if (GITHUB_EVENT_NAME === 'push') {
 		message += `\n*Push*\n\n`
-		message += `Branch: ${GITHUB_REF?.replace('refs/heads/', '')}\n`
+		message += `Branch: ${GITHUB_REF?.replace('refs/heads/', '')}\n\n`
 
 		payload.commits?.slice(0, 3).forEach((c, i) => {
 			message += `${i + 1}. ${c.message.split('\n')[0]}\n`

CONTRIBUTING.md

@@ -28,8 +28,6 @@ We aim to maintain a friendly and inclusive environment. Please respect all part
 - Give constructive feedback.
 - Report problems or abusive behavior to maintainers.
 
-Full code of conduct can be found in [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md).
-
 ---
 
 ## How to Contribute

apps/desktop/renderer/package.json

@@ -13,6 +13,7 @@
 		"@datary/core": "workspace:",
 		"@hookform/resolvers": "^5.2.2",
 		"@tailwindcss/vite": "^4.1.18",
+		"@tanstack/react-virtual": "^3.13.18",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"lucide-react": "^0.563.0",

apps/desktop/renderer/src/app/store/table-data.store.ts

@@ -26,15 +26,48 @@ export const useTableDataStore = create<TableDataState>((set, get) => ({
 
 		set({ loading: true })
 
-		const data = await window.datary.db.loadTableData(schema, table)
+		try {
+			const [columnsRaw, tableDataRaw] = await Promise.all([
+				window.datary.db.loadColumns(schema, table),
+				window.datary.db.loadTableData(schema, table)
+			])
 
-		set(state => ({
-			tables: {
-				...state.tables,
-				[key]: data
-			},
-			loading: false
-		}))
+			// @ts-ignore
+			const columns = columnsRaw.map(col => {
+				let type = col.type
+				if (col.enumValues && col.enumValues.length > 0) {
+					type = `enum(${col.enumValues.join(', ')})`
+				}
+				return {
+					columnName: col.columnName,
+					type,
+					nullable: col.nullable,
+					enumValues: col.enumValues
+				}
+			})
+
+			const tableData: TableData = {
+				// @ts-ignore
+				columns: columns.map(col => ({
+					name: col.columnName,
+					type: col.type,
+					nullable: col.nullable
+				})),
+				rows: tableDataRaw.rows
+			}
+
+			set(state => ({
+				tables: {
+					...state.tables,
+					[key]: tableData
+				},
+				loading: false
+			}))
+		} catch (err: any) {
+			toast.error(`Failed to load table ${table}: ${err.message}`)
+			console.error(err)
+			set({ loading: false })
+		}
 	},
 	reset: () =>
 		set({

apps/desktop/renderer/src/main.tsx

@@ -1,8 +1,4 @@
-import type {
-	ColumnMetadataContract,
-	DatabaseMetadataContract,
-	TableMetadataContract
-} from '@datary/core'
+import type { DatabaseMetadataContract, TableMetadataContract } from '@datary/core'
 import ReactDOM from 'react-dom/client'
 import { HashRouter } from 'react-router-dom'
 
@@ -26,11 +22,7 @@ declare global {
 					schema: string | null
 				): Promise<TableMetadataContract[]>
 				loadViews(database: string, schema: string | null): Promise<TableMetadataContract[]>
-				loadColumns(
-					database: string,
-					schema: string,
-					table: string
-				): Promise<ColumnMetadataContract[]>
+				loadColumns: any
 				loadTableData: any
 				disconnect: Function
 			}

apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabContextMenu.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react'
+
+import { useContextMenu } from '@/shared/hooks/useContextMenu'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/shared/ui/dropdown-menu'
+
+interface Props {
+	children: ReactNode
+	disabledCloseOthers: boolean
+	onClose: () => void
+	onCloseOthers: () => void
+	onCloseAll: () => void
+}
+export function ExplorerTabContextMenu({
+	children,
+	disabledCloseOthers,
+	onClose,
+	onCloseOthers,
+	onCloseAll
+}: Props) {
+	const { open, position, onContextMenu, close } = useContextMenu()
+
+	return (
+		<>
+			<div onContextMenu={onContextMenu}>{children}</div>
+
+			{open && (
+				<DropdownMenu open={open} onOpenChange={val => !val && close()}>
+					<DropdownMenuContent
+						align="start"
+						sideOffset={4}
+						className="absolute"
+						style={{ top: position!.y, left: position!.x }}
+					>
+						<DropdownMenuItem
+							onClick={() => {
+								onClose()
+								close()
+							}}
+						>
+							Close
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							disabled={disabledCloseOthers}
+							onClick={() => {
+								onCloseOthers()
+								close()
+							}}
+						>
+							Close Others
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							disabled={disabledCloseOthers}
+							onClick={() => {
+								onCloseAll()
+								close()
+							}}
+						>
+							Close All
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</>
+	)
+}

apps/desktop/renderer/src/modules/explorer/components/tabs/ExplorerTabs.tsx

@@ -2,26 +2,51 @@ import type { ReactNode } from 'react'
 
 import type { Tab } from '../../types/explorer.types'
 
+import { ExplorerTabContextMenu } from './ExplorerTabContextMenu'
 import { TabContent } from './TabContent'
-import { TableTabs } from '@/shared/components/table-tabs'
+import { TableTabs } from './TableTabs'
 import { cn } from '@/shared/lib/utils'
 
 interface Props {
 	tabs: Tab[]
 	activeTab: string
 	onSelectTab: (id: string) => void
 	onCloseTab: (id: string) => void
+	onCloseOthers: (id: string) => void
+	onCloseAll: () => void
 	children?: ReactNode
 }
 
-export function ExplorerTabs({ tabs, activeTab, onSelectTab, onCloseTab }: Props) {
+export function ExplorerTabs({
+	tabs,
+	activeTab,
+	onSelectTab,
+	onCloseTab,
+	onCloseOthers,
+	onCloseAll
+}: Props) {
 	return (
-		<div className="flex h-full flex-col">
+		<div className="flex h-full min-h-0 flex-col">
 			<TableTabs
 				tabs={tabs}
 				activeTab={activeTab}
 				onSelectTab={onSelectTab}
 				onCloseTab={onCloseTab}
+				renderTab={(tab, tabNode) => (
+					<ExplorerTabContextMenu
+						disabledCloseOthers={tabs.length <= 1}
+						onClose={() => onCloseTab(tab.id)}
+						onCloseOthers={() => {
+							onSelectTab(tab.id)
+							onCloseOthers(tab.id)
+						}}
+						onCloseAll={() => {
+							onCloseAll()
+						}}
+					>
+						<div className="h-full">{tabNode}</div>
+					</ExplorerTabContextMenu>
+				)}
 			>
 				{tabs.map(tab => (
 					<div

apps/desktop/renderer/src/modules/explorer/components/tabs/TabContent.tsx

@@ -1,7 +1,9 @@
+import { useMemo } from 'react'
+
 import type { Tab } from '../../types/explorer.types'
 
 import { useTableDataStore } from '@/app/store/table-data.store'
-import { DataTable } from '@/shared/components/data-table'
+import { DataGrid } from '@/widgets/data-grid/DataGrid'
 import { QueryEditor } from '@/widgets/query-editor/components/QueryEditor'
 
 interface Props {
@@ -26,5 +28,15 @@ export function TabContent({ tab }: Props) {
 		)
 	}
 
-	return <DataTable data={data} />
+	const gridData = useMemo(() => {
+		return {
+			rows: data.rows,
+			columns: data.columns.map(col => ({
+				name: col.name,
+				type: col.type
+			}))
+		}
+	}, [data])
+
+	return <DataGrid data={gridData} rowHeight={32} renderer="dom" editable />
 }

apps/desktop/renderer/src/shared/components/table-tabs.tsx → apps/desktop/renderer/src/modules/explorer/components/tabs/TableTabs.tsx

@@ -1,9 +1,8 @@
 import { ChevronLeft, ChevronRight, Table, X } from 'lucide-react'
-import React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 
-import { cn } from '../lib/utils'
-import { Button } from '../ui/button'
+import { cn } from '../../../../shared/lib/utils'
+import { Button } from '../../../../shared/ui/button'
 
 export interface Tab {
 	id: string
@@ -16,10 +15,18 @@ interface TableTabsProps {
 	activeTab: string
 	onSelectTab: (id: string) => void
 	onCloseTab: (id: string) => void
-	children: React.ReactNode
+	renderTab?: (tab: Tab, defaultTab: ReactNode) => ReactNode
+	children: ReactNode
 }
 
-export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }: TableTabsProps) {
+export function TableTabs({
+	tabs,
+	activeTab,
+	onSelectTab,
+	onCloseTab,
+	renderTab,
+	children
+}: TableTabsProps) {
 	const tabsRef = useRef<HTMLDivElement>(null)
 	const [showScrollButtons, setShowScrollButtons] = useState(false)
 
@@ -61,38 +68,42 @@ export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }
 				)}
 
 				<div ref={tabsRef} className="scrollbar-none flex flex-1 overflow-x-auto">
-					{tabs.map(tab => (
-						<button
-							key={tab.id}
-							type="button"
-							className={cn(
-								'group border-border flex shrink-0 items-center gap-2 border-r px-4 py-2 text-sm transition-colors',
-								activeTab === tab.id
-									? 'bg-background text-foreground'
-									: 'bg-card text-muted-foreground hover:bg-secondary hover:text-foreground'
-							)}
-							onClick={() => onSelectTab(tab.id)}
-						>
-							<Table className="text-primary h-4 w-4" />
-							<span className="max-w-32 truncate">{tab.name}</span>
+					{tabs.map(tab => {
+						const defaultTab = (
 							<button
+								key={tab.id}
 								type="button"
 								className={cn(
-									'ml-1 rounded p-0.5 transition-colors',
-									'text-muted-foreground hover:bg-secondary hover:text-foreground',
-									'opacity-0 group-hover:opacity-100',
-									activeTab === tab.id && 'opacity-100'
+									'group border-border flex shrink-0 items-center gap-2 border-r px-4 py-2 text-sm transition-colors select-none',
+									activeTab === tab.id
+										? 'bg-background text-foreground'
+										: 'bg-card text-muted-foreground hover:bg-secondary hover:text-foreground'
 								)}
-								onClick={e => {
-									e.stopPropagation()
-									onCloseTab(tab.id)
-								}}
+								onClick={() => onSelectTab(tab.id)}
 							>
-								<X className="h-3.5 w-3.5" />
-								<span className="sr-only">Close tab</span>
+								<Table className="text-primary h-4 w-4" />
+								<span className="max-w-32 truncate">{tab.name}</span>
+
+								<button
+									type="button"
+									className={cn(
+										'ml-1 rounded p-0.5 transition-colors',
+										'text-muted-foreground hover:bg-secondary hover:text-foreground',
+										'opacity-0 group-hover:opacity-100',
+										activeTab === tab.id && 'opacity-100'
+									)}
+									onClick={e => {
+										e.stopPropagation()
+										onCloseTab(tab.id)
+									}}
+								>
+									<X className="h-3.5 w-3.5" />
+								</button>
 							</button>
-						</button>
-					))}
+						)
+
+						return renderTab ? renderTab(tab, defaultTab) : defaultTab
+					})}
 				</div>
 
 				{showScrollButtons && (
@@ -103,7 +114,6 @@ export function TableTabs({ tabs, activeTab, onSelectTab, onCloseTab, children }
 						onClick={() => scroll('right')}
 					>
 						<ChevronRight className="h-4 w-4" />
-						<span className="sr-only">Scroll right</span>
 					</Button>
 				)}
 			</div>

apps/desktop/renderer/src/modules/explorer/hooks/useExplorerActions.ts

@@ -40,8 +40,6 @@ export function useExplorerActions(tabs: any, database: any) {
 	}
 
 	const handleDisconnect = async () => {
-		await window.datary.db.disconnect()
-
 		navigate('/')
 	}