Skip to content

Commit 1ee31d4

Browse files
jgouxjgoux
committed
ux improvements
1 parent 6804fa7 commit 1ee31d4

File tree

3 files changed

+215
-60
lines changed

3 files changed

+215
-60
lines changed

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

Lines changed: 91 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import ChatMessage from './chat-message'
2626
import SignInButton from './sign-in-button'
2727
import { useWorkspace } from './workspace'
2828
import { CopyableField } from './copyable-field'
29+
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
2930

3031
export function getInitialMessages(tables: TablesData): Message[] {
3132
return [
@@ -244,49 +245,7 @@ export default function Chat() {
244245
)}
245246
ref={scrollRef}
246247
>
247-
{liveShare.isLiveSharing && (
248-
<div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10 absolute backdrop-blur-sm bg-card/90 z-10">
249-
<div className="flex items-center justify-center h-full flex-col gap-y-5">
250-
<div className="w-full text-left">
251-
<p className="text-lg">Access your in-browser database</p>
252-
<p className="text-xs text-muted-foreground">
253-
Closing the window will stop the Live Share session
254-
</p>
255-
</div>
256-
<CopyableField
257-
value={`postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
258-
/>
259-
260-
{liveShare.clientIp ? (
261-
<p className="text-sm text-muted-foreground flex items-center gap-2">
262-
<span className="relative flex h-3 w-3">
263-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
264-
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
265-
</span>
266-
<span>
267-
Connected from{' '}
268-
<span className="text-card-foreground">{liveShare.clientIp}</span>
269-
</span>
270-
</p>
271-
) : (
272-
<p className="text-sm text-muted-foreground flex items-center gap-2">
273-
<span className="relative inline-flex rounded-full h-3 w-3 bg-muted-foreground"></span>
274-
<span>Not connected</span>
275-
</p>
276-
)}
277-
<Button
278-
className="w-full gap-2"
279-
variant="outline"
280-
onClick={() => {
281-
liveShare.stop()
282-
}}
283-
>
284-
<PlugIcon size={16} />
285-
<span>Stop sharing database</span>
286-
</Button>
287-
</div>
288-
</div>
289-
)}
248+
<LiveShareOverlay />
290249
<m.div
291250
key={databaseId}
292251
className="flex flex-col gap-4 w-full max-w-4xl p-10"
@@ -374,18 +333,21 @@ export default function Chat() {
374333
) : (
375334
<div className="h-full w-full max-w-4xl flex flex-col gap-10 justify-center items-center">
376335
{user ? (
377-
<m.h3
378-
layout
379-
className="text-2xl font-light text-center"
380-
variants={{
381-
hidden: { opacity: 0, y: 10 },
382-
show: { opacity: 1, y: 0 },
383-
}}
384-
initial="hidden"
385-
animate="show"
386-
>
387-
What would you like to create?
388-
</m.h3>
336+
<>
337+
<LiveShareOverlay />
338+
<m.h3
339+
layout
340+
className="text-2xl font-light text-center"
341+
variants={{
342+
hidden: { opacity: 0, y: 10 },
343+
show: { opacity: 1, y: 0 },
344+
}}
345+
initial="hidden"
346+
animate="show"
347+
>
348+
What would you like to create?
349+
</m.h3>
350+
</>
389351
) : (
390352
<m.div
391353
className="flex flex-col items-center gap-4 max-w-lg"
@@ -570,3 +532,77 @@ export default function Chat() {
570532
</div>
571533
)
572534
}
535+
536+
function LiveShareOverlay() {
537+
const { liveShare } = useApp()
538+
539+
if (!liveShare.isLiveSharing) {
540+
return null
541+
}
542+
543+
return (
544+
<div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10 absolute backdrop-blur-sm bg-card/90 z-10">
545+
<div className="flex items-center justify-center h-full flex-col gap-y-7">
546+
<div className="w-full text-left">
547+
<p className="text-lg">Access your in-browser database</p>
548+
<p className="text-xs text-muted-foreground">
549+
Closing the window will stop the Live Share session
550+
</p>
551+
</div>
552+
<Tabs defaultValue="uri" className="w-full justify-between bg-muted/50 rounded-md border">
553+
<TabsList className="w-full flex justify-start bg-transparent px-3">
554+
<TabsTrigger
555+
value="uri"
556+
className="hover:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:bg-none! data-[state=active]:text-foreground data-[state=active]:shadow-none rounded-none relative cursor-pointer text-foreground-lighter flex items-center space-x-2 text-center transition focus:outline-none focus-visible:ring focus-visible:ring-foreground-muted focus-visible:border-foreground-muted text-xs px-2.5 py-1"
557+
>
558+
URI
559+
</TabsTrigger>
560+
<TabsTrigger
561+
value="psql"
562+
className="hover:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:bg-none! data-[state=active]:text-foreground data-[state=active]:shadow-none rounded-none relative cursor-pointer text-foreground-lighter flex items-center space-x-2 text-center transition focus:outline-none focus-visible:ring focus-visible:ring-foreground-muted focus-visible:border-foreground-muted text-xs px-2.5 py-1"
563+
>
564+
PSQL
565+
</TabsTrigger>
566+
</TabsList>
567+
<TabsContent value="uri" className="px-2 pb-2">
568+
<CopyableField
569+
value={`postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
570+
/>
571+
</TabsContent>
572+
<TabsContent value="psql" className="px-2 pb-2">
573+
<CopyableField
574+
value={`psql "postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require"`}
575+
/>
576+
</TabsContent>
577+
</Tabs>
578+
579+
{liveShare.clientIp ? (
580+
<p className="text-sm text-muted-foreground flex items-center gap-2">
581+
<span className="relative flex h-3 w-3">
582+
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
583+
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
584+
</span>
585+
<span>
586+
Connected from <span className="text-card-foreground">{liveShare.clientIp}</span>
587+
</span>
588+
</p>
589+
) : (
590+
<p className="text-sm text-muted-foreground flex items-center gap-2">
591+
<span className="relative inline-flex rounded-full h-3 w-3 bg-muted-foreground"></span>
592+
<span>No client connected</span>
593+
</p>
594+
)}
595+
<Button
596+
className="w-full gap-2"
597+
variant="outline"
598+
onClick={() => {
599+
liveShare.stop()
600+
}}
601+
>
602+
<PlugIcon size={16} />
603+
<span>Stop sharing database</span>
604+
</Button>
605+
</div>
606+
</div>
607+
)
608+
}

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export default function Sidebar() {
5353
setIsSignInDialogOpen,
5454
setIsRenameDialogOpen,
5555
isLegacyDomain,
56+
liveShare,
5657
} = useApp()
5758
let { id: currentDatabaseId } = useParams<{ id: string }>()
5859
const router = useRouter()
@@ -130,6 +131,9 @@ export default function Sidebar() {
130131
if (!user) {
131132
setIsSignInDialogOpen(true)
132133
} else {
134+
if (liveShare.isLiveSharing) {
135+
liveShare.stop()
136+
}
133137
router.push('/')
134138
focusRef.current?.focus()
135139
}
@@ -541,11 +545,6 @@ type ConnectMenuItemProps = {
541545
function LiveShareMenuItem(props: ConnectMenuItemProps) {
542546
const { liveShare, user } = useApp()
543547

544-
// Only show the connect menu item on fully loaded dashboard
545-
if (!props.isActive) {
546-
return null
547-
}
548-
549548
if (!liveShare.isLiveSharing) {
550549
return (
551550
<DropdownMenuItem

‎package-lock.json‎

Lines changed: 120 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)