Skip to content

Commit 97368f7

Browse files
gregnrgregnr
committed
feat: mobile tab improvements
1 parent 5b12946 commit 97368f7

File tree

3 files changed

+57
-15
lines changed

3 files changed

+57
-15
lines changed

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

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ export type IDEProps = PropsWithChildren<{
2424
}>
2525

2626
export default function IDE({ children, className }: IDEProps) {
27-
const { databaseId } = useWorkspace()
28-
const [tab, setTab] = useState<TabValue>('diagram')
27+
const { databaseId, tab, setTab } = useWorkspace()
2928

3029
const isSmallBreakpoint = useBreakpoint('lg')
3130
const { data: messages } = useMessagesQuery(databaseId)
@@ -36,7 +35,7 @@ export default function IDE({ children, className }: IDEProps) {
3635
} else {
3736
setTab('diagram')
3837
}
39-
}, [isSmallBreakpoint])
38+
}, [isSmallBreakpoint, setTab])
4039

4140
const { value: migrationStatements } = useAsyncMemo(async () => {
4241
const sqlExecutions =
@@ -106,35 +105,32 @@ export default function IDE({ children, className }: IDEProps) {
106105
value="chat"
107106
className={cn(
108107
buttonVariants({ variant: tab === 'chat' ? 'default' : 'ghost' }),
109-
tab === 'chat' && '!shadow-sm',
110108
'gap-2'
111109
)}
112110
>
113-
<MessageSquareMore size={18} />
114-
<span className="hidden sm:inline">Chat</span>
111+
<MessageSquareMore className="hidden sm:block" size={18} />
112+
<span>Chat</span>
115113
</TabsTrigger>
116114
)}
117115
<TabsTrigger
118116
value="diagram"
119117
className={cn(
120118
buttonVariants({ variant: tab === 'diagram' ? 'default' : 'ghost' }),
121-
tab === 'diagram' && '!shadow-sm',
122119
'gap-2'
123120
)}
124121
>
125-
<Workflow size={18} />
126-
<span className="hidden sm:inline">Diagram</span>
122+
<Workflow className="hidden sm:block" size={18} />
123+
<span>Diagram</span>
127124
</TabsTrigger>
128125
<TabsTrigger
129126
value="migrations"
130127
className={cn(
131128
buttonVariants({ variant: tab === 'migrations' ? 'default' : 'ghost' }),
132-
tab === 'migrations' && '!shadow-sm',
133129
'gap-2'
134130
)}
135131
>
136-
<FileCode size={18} />
137-
<span className="hidden sm:inline">Migrations</span>
132+
<FileCode className="hidden sm:block" size={18} />
133+
<span>Migrations</span>
138134
</TabsTrigger>
139135
{/* Temporarily hide seeds until we get pg_dump working */}
140136
{/* {false && (

‎apps/postgres-new/components/tools/executed-sql.tsx

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { Workflow } from 'lucide-react'
12
import { useMemo } from 'react'
2-
import { formatSql } from '~/lib/sql-util'
3+
import { useAsyncMemo } from '~/lib/hooks'
4+
import { assertDefined, formatSql, isMigrationStatement } from '~/lib/sql-util'
35
import { ToolInvocation } from '~/lib/tools'
46
import CodeAccordion from '../code-accordion'
7+
import { useWorkspace } from '../workspace'
58

69
export type ExecutedSqlProps = {
710
toolInvocation: ToolInvocation<'executeSql'>
@@ -10,8 +13,19 @@ export type ExecutedSqlProps = {
1013
export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
1114
const { sql } = toolInvocation.args
1215

16+
const { setTab } = useWorkspace()
1317
const formattedSql = useMemo(() => formatSql(sql), [sql])
1418

19+
const { value: containsMigration } = useAsyncMemo(async () => {
20+
// Dynamically import (browser-only) to prevent SSR errors
21+
const { parseQuery } = await import('libpg-query/wasm')
22+
23+
const parseResult = await parseQuery(sql)
24+
assertDefined(parseResult.stmts, 'Expected stmts to exist in parse result')
25+
26+
return parseResult.stmts.some(isMigrationStatement)
27+
}, [sql])
28+
1529
if (!('result' in toolInvocation)) {
1630
return null
1731
}
@@ -29,5 +43,22 @@ export default function ExecutedSql({ toolInvocation }: ExecutedSqlProps) {
2943
)
3044
}
3145

32-
return <CodeAccordion title="Executed SQL" language="sql" code={formattedSql ?? sql} />
46+
return (
47+
<div className="flex flex-col gap-2">
48+
<CodeAccordion title="Executed SQL" language="sql" code={formattedSql ?? sql} />
49+
{containsMigration && (
50+
<div className="lg:hidden text-xs text-primary/50 flex gap-2 self-end">
51+
<div
52+
className="flex flex-row items-center gap-[0.125rem] underline cursor-pointer"
53+
onClick={() => {
54+
setTab('diagram')
55+
}}
56+
>
57+
<Workflow size={12} />
58+
See diagram
59+
</div>
60+
</div>
61+
)}
62+
</div>
63+
)
3364
}

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
'use client'
22

33
import { CreateMessage, Message, useChat, UseChatHelpers } from 'ai/react'
4-
import { createContext, useCallback, useContext, useMemo } from 'react'
4+
import {
5+
createContext,
6+
Dispatch,
7+
SetStateAction,
8+
useCallback,
9+
useContext,
10+
useMemo,
11+
useState,
12+
} from 'react'
513
import { useMessageCreateMutation } from '~/data/messages/message-create-mutation'
614
import { useMessagesQuery } from '~/data/messages/messages-query'
715
import { useTablesQuery } from '~/data/tables/tables-query'
816
import { useOnToolCall } from '~/lib/hooks'
17+
import { TabValue } from '~/lib/schema'
918
import { useBreakpoint } from '~/lib/use-breakpoint'
1019
import { ensureMessageId, ensureToolResult } from '~/lib/util'
1120
import { useApp } from './app-provider'
@@ -107,6 +116,8 @@ export default function Workspace({
107116
onCancelReply?.(append)
108117
}, [onCancelReply, stop, append])
109118

119+
const [tab, setTab] = useState<TabValue>('diagram')
120+
110121
const isConversationStarted =
111122
initialMessages !== undefined && messages.length > initialMessages.length
112123

@@ -121,6 +132,8 @@ export default function Workspace({
121132
appendMessage,
122133
stopReply,
123134
visibility,
135+
tab,
136+
setTab,
124137
}}
125138
>
126139
<div className="w-full h-full flex flex-col lg:flex-row gap-8">
@@ -144,6 +157,8 @@ export type WorkspaceContextValues = {
144157
isConversationStarted: boolean
145158
messages: Message[]
146159
visibility: Visibility
160+
tab: TabValue
161+
setTab: Dispatch<SetStateAction<TabValue>>
147162
appendMessage(message: Message | CreateMessage): Promise<void>
148163
stopReply(): Promise<void>
149164
}

0 commit comments

Comments
 (0)