Skip to content

Commit 6dd6488

Browse files
gregnrgregnr
committed
feat: move pglite version under ide and fix oversized monaco editor width
1 parent bd8da10 commit 6dd6488

File tree

4 files changed

+110
-106
lines changed

4 files changed

+110
-106
lines changed

‎apps/postgres-new/components/chat.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export default function Chat() {
323323
)}
324324
</AnimatePresence>
325325
</div>
326-
<div className="flex flex-col items-center gap-2 pb-2 relative">
326+
<div className="flex flex-col items-center gap-3 pb-1 relative">
327327
<AnimatePresence>
328328
{!user && !isLoadingUser && isConversationStarted && (
329329
<m.div

‎apps/postgres-new/components/ide.tsx

Lines changed: 101 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { tabsSchema, TabValue } from '~/lib/schema'
1212
import { assertDefined, isMigrationStatement } from '~/lib/sql-util'
1313
import { ToolInvocation } from '~/lib/tools'
1414
import { useBreakpoint } from '~/lib/use-breakpoint'
15+
import { useApp } from './app-provider'
1516
import SchemaGraph from './schema/graph'
1617
import { useWorkspace } from './workspace'
1718

@@ -21,6 +22,7 @@ const initialSeedSql = '-- Seeds will appear here as you chat with AI\n'
2122
export type IDEProps = PropsWithChildren
2223

2324
export default function IDE({ children }: IDEProps) {
25+
const { pgliteVersion, pgVersion } = useApp()
2426
const { databaseId } = useWorkspace()
2527
const [tab, setTab] = useState<TabValue>('diagram')
2628

@@ -92,89 +94,48 @@ export default function IDE({ children }: IDEProps) {
9294
const migrationsSql = (initialMigrationSql + '\n' + migrationStatements?.join('\n\n')).trim()
9395

9496
return (
95-
<Tabs
96-
className="flex-1 h-full flex flex-col items-stretch"
97-
value={tab}
98-
onValueChange={(tab) => setTab(tabsSchema.parse(tab))}
99-
>
100-
<TabsList className="grid w-full grid-cols-3 lg:grid-cols-2">
101-
{isSmallBreakpoint && (
102-
<TabsTrigger value="chat" className="flex items-center gap-1">
103-
<MessageSquareMore size={14} />
104-
<span className="hidden xs:inline">Chat</span>
97+
<div className="flex-1 h-full flex flex-col items-stretch gap-3">
98+
<Tabs
99+
className="flex-1 flex flex-col items-stretch"
100+
value={tab}
101+
onValueChange={(tab) => setTab(tabsSchema.parse(tab))}
102+
>
103+
<TabsList className="grid w-full grid-cols-3 lg:grid-cols-2">
104+
{isSmallBreakpoint && (
105+
<TabsTrigger value="chat" className="flex items-center gap-1">
106+
<MessageSquareMore size={14} />
107+
<span className="hidden xs:inline">Chat</span>
108+
</TabsTrigger>
109+
)}
110+
<TabsTrigger value="diagram" className="flex items-center gap-1">
111+
<Workflow size={14} />
112+
<span className="hidden xs:inline">Diagram</span>
105113
</TabsTrigger>
106-
)}
107-
<TabsTrigger value="diagram" className="flex items-center gap-1">
108-
<Workflow size={14} />
109-
<span className="hidden xs:inline">Diagram</span>
110-
</TabsTrigger>
111-
<TabsTrigger value="migrations" className="flex items-center gap-1">
112-
<FileCode size={14} />
113-
<span className="hidden xs:inline">Migrations</span>
114-
</TabsTrigger>
115-
{/* Temporarily hide seeds until we get pg_dump working */}
116-
{false && (
117-
<TabsTrigger value="seeds" className="flex items-center gap-1">
118-
<Sprout size={14} />
119-
<span className="hidden xs:inline">Seeds</span>
114+
<TabsTrigger value="migrations" className="flex items-center gap-1">
115+
<FileCode size={14} />
116+
<span className="hidden xs:inline">Migrations</span>
120117
</TabsTrigger>
121-
)}
122-
</TabsList>
118+
{/* Temporarily hide seeds until we get pg_dump working */}
119+
{false && (
120+
<TabsTrigger value="seeds" className="flex items-center gap-1">
121+
<Sprout size={14} />
122+
<span className="hidden xs:inline">Seeds</span>
123+
</TabsTrigger>
124+
)}
125+
</TabsList>
123126

124-
{isSmallBreakpoint && (
125-
<TabsContent value="chat" className="flex-1 h-full min-h-0">
126-
{children}
127+
{isSmallBreakpoint && (
128+
<TabsContent value="chat" className="flex-1 h-full min-h-0">
129+
{children}
130+
</TabsContent>
131+
)}
132+
<TabsContent value="diagram" className="h-full">
133+
<SchemaGraph databaseId={databaseId} schemas={['public', 'meta']} />
127134
</TabsContent>
128-
)}
129-
<TabsContent value="diagram" className="h-full">
130-
<SchemaGraph databaseId={databaseId} schemas={['public', 'meta']} />
131-
</TabsContent>
132-
<TabsContent value="migrations" className="h-full py-4 rounded-md bg-[#1e1e1e]">
133-
<Editor
134-
language="pgsql"
135-
value={migrationsSql}
136-
theme="vs-dark"
137-
options={{
138-
tabSize: 2,
139-
minimap: {
140-
enabled: false,
141-
},
142-
fontSize: 13,
143-
readOnly: true,
144-
}}
145-
onMount={async (editor, monaco) => {
146-
// Register pgsql formatter
147-
monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
148-
async provideDocumentFormattingEdits(model) {
149-
const currentCode = editor.getValue()
150-
const formattedCode = format(currentCode, {
151-
language: 'postgresql',
152-
keywordCase: 'lower',
153-
})
154-
return [
155-
{
156-
range: model.getFullModelRange(),
157-
text: formattedCode,
158-
},
159-
]
160-
},
161-
})
162-
163-
// Format on cmd+s
164-
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
165-
await editor.getAction('editor.action.formatDocument').run()
166-
})
167-
168-
// Run format on the initial value
169-
await editor.getAction('editor.action.formatDocument').run()
170-
}}
171-
/>
172-
</TabsContent>
173-
{/* Temporarily hide seeds until we get pg_dump working */}
174-
{false && (
175-
<TabsContent value="seeds" className="h-full py-4 rounded-md bg-[#1e1e1e]">
135+
<TabsContent value="migrations" className="h-full py-4 rounded-md bg-[#1e1e1e]">
176136
<Editor
177137
language="pgsql"
138+
value={migrationsSql}
178139
theme="vs-dark"
179140
options={{
180141
tabSize: 2,
@@ -204,15 +165,74 @@ export default function IDE({ children }: IDEProps) {
204165

205166
// Format on cmd+s
206167
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
207-
await editor.getAction('editor.action.formatDocument').run()
168+
await editor.getAction('editor.action.formatDocument')?.run()
208169
})
209170

210171
// Run format on the initial value
211-
await editor.getAction('editor.action.formatDocument').run()
172+
await editor.getAction('editor.action.formatDocument')?.run()
212173
}}
213174
/>
214175
</TabsContent>
215-
)}
216-
</Tabs>
176+
{/* Temporarily hide seeds until we get pg_dump working */}
177+
{false && (
178+
<TabsContent value="seeds" className="h-full py-4 rounded-md bg-[#1e1e1e]">
179+
<Editor
180+
language="pgsql"
181+
theme="vs-dark"
182+
options={{
183+
tabSize: 2,
184+
minimap: {
185+
enabled: false,
186+
},
187+
fontSize: 13,
188+
readOnly: true,
189+
}}
190+
onMount={async (editor, monaco) => {
191+
// Register pgsql formatter
192+
monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
193+
async provideDocumentFormattingEdits(model) {
194+
const currentCode = editor.getValue()
195+
const formattedCode = format(currentCode, {
196+
language: 'postgresql',
197+
keywordCase: 'lower',
198+
})
199+
return [
200+
{
201+
range: model.getFullModelRange(),
202+
text: formattedCode,
203+
},
204+
]
205+
},
206+
})
207+
208+
// Format on cmd+s
209+
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
210+
await editor.getAction('editor.action.formatDocument')?.run()
211+
})
212+
213+
// Run format on the initial value
214+
await editor.getAction('editor.action.formatDocument')?.run()
215+
}}
216+
/>
217+
</TabsContent>
218+
)}
219+
</Tabs>
220+
221+
<div className="flex flex-col pb-1 text-xs text-neutral-500 text-center justify-center">
222+
{pgliteVersion && (
223+
<span>
224+
<a
225+
className="underline"
226+
href="https://github.com/electric-sql/pglite"
227+
target="_blank"
228+
rel="noopener noreferrer"
229+
>
230+
PGlite
231+
</a>{' '}
232+
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
233+
</span>
234+
)}
235+
</div>
236+
</div>
217237
)
218238
}

‎apps/postgres-new/components/layout.tsx

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -119,22 +119,6 @@ export default function Layout({ children }: LayoutProps) {
119119
)}
120120
</div>
121121
)}
122-
123-
<div className="flex flex-col gap-2 text-xs text-lighter text-center justify-center">
124-
{pgliteVersion && (
125-
<span>
126-
<a
127-
className="underline"
128-
href="https://github.com/electric-sql/pglite"
129-
target="_blank"
130-
rel="noopener noreferrer"
131-
>
132-
PGlite
133-
</a>{' '}
134-
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
135-
</span>
136-
)}
137-
</div>
138122
{user && (
139123
<Button
140124
className="flex flex-row gap-2 items-center mx-2 hover:bg-black/10"
@@ -173,7 +157,7 @@ export default function Layout({ children }: LayoutProps) {
173157
</m.div>
174158
</div>
175159
)}
176-
<m.div layout="position" className="w-full h-full">
160+
<m.div layout="position" className="w-full h-full min-w-0">
177161
{children}
178162
</m.div>
179163
</div>

‎apps/postgres-new/components/schema/legend.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@ import { DiamondIcon, Fingerprint, Hash, Key } from 'lucide-react'
22

33
const SchemaGraphLegend = () => {
44
return (
5-
<div className="absolute bottom-0 left-0 border-t flex justify-center p-4 shadow-md bg-surface-100 w-full z-10">
6-
<ul className="flex flex-wrap items-center justify-center gap-4">
7-
<li className="flex items-center text-xs font-mono gap-1">
5+
<div className="absolute bottom-0 left-0 border-t flex justify-center p-5 shadow-md bg-surface-100 w-full z-10 text-xs md:text-[0.625rem]">
6+
<ul className="flex flex-wrap items-center justify-center gap-4">
7+
<li className="flex items-center font-mono gap-1">
88
<Key size={15} strokeWidth={1.5} className="flex-shrink-0 text-light" />
99
Primary key
1010
</li>
11-
<li className="flex items-center text-xs font-mono gap-1">
11+
<li className="flex items-center font-mono gap-1">
1212
<Hash size={15} strokeWidth={1.5} className="flex-shrink-0 text-light" />
1313
Identity
1414
</li>
15-
<li className="flex items-center text-xs font-mono gap-1">
15+
<li className="flex items-center font-mono gap-1">
1616
<Fingerprint size={15} strokeWidth={1.5} className="flex-shrink-0 text-light" />
1717
Unique
1818
</li>
19-
<li className="flex items-center text-xs font-mono gap-1">
19+
<li className="flex items-center font-mono gap-1">
2020
<DiamondIcon size={15} strokeWidth={1.5} className="flex-shrink-0 text-light" />
2121
Nullable
2222
</li>
23-
<li className="flex items-center text-xs font-mono gap-1">
23+
<li className="flex items-center font-mono gap-1">
2424
<DiamondIcon
2525
size={15}
2626
strokeWidth={1.5}

0 commit comments

Comments
 (0)