live share

jgoux · jgoux · commit 1b4c7ac099a3 · 2024-10-07T23:16:47.000+02:00
diff --git a/apps/postgres-new/app/(main)/db/[id]/page.tsx b/apps/postgres-new/app/(main)/db/[id]/page.tsx
@@ -8,7 +8,7 @@ import Workspace from '~/components/workspace'
 export default function Page({ params }: { params: { id: string } }) {
   const databaseId = params.id
   const router = useRouter()
-  const { dbManager, liveShare } = useApp()
+  const { dbManager } = useApp()
 
   useEffect(() => {
     async function run() {
@@ -25,12 +25,5 @@ export default function Page({ params }: { params: { id: string } }) {
     run()
   }, [dbManager, databaseId, router])
 
-  // Cleanup live shared database when switching databases
-  useEffect(() => {
-    if (liveShare.isLiveSharing && liveShare.databaseId !== databaseId) {
-      liveShare.stop()
-    }
-  }, [liveShare, databaseId])
-
   return <Workspace databaseId={databaseId} visibility="local" />
 }
diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx
@@ -245,7 +245,7 @@ export default function Chat() {
             )}
             ref={scrollRef}
           >
-            <LiveShareOverlay />
+            <LiveShareOverlay databaseId={databaseId} />
             <m.div
               key={databaseId}
               className="flex flex-col gap-4 w-full max-w-4xl p-10"
@@ -334,7 +334,7 @@ export default function Chat() {
           <div className="h-full w-full max-w-4xl flex flex-col gap-10 justify-center items-center">
             {user ? (
               <>
-                <LiveShareOverlay />
+                <LiveShareOverlay databaseId={databaseId} />
                 <m.h3
                   layout
                   className="text-2xl font-light text-center"
@@ -533,76 +533,76 @@ export default function Chat() {
   )
 }
 
-function LiveShareOverlay() {
+function LiveShareOverlay(props: { databaseId: string }) {
   const { liveShare } = useApp()
 
-  if (!liveShare.isLiveSharing) {
-    return null
-  }
-
-  return (
-    <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">
-      <div className="flex items-center justify-center h-full flex-col gap-y-7">
-        <div className="w-full text-left">
-          <p className="text-lg">Access your in-browser database</p>
-          <p className="text-xs text-muted-foreground">
-            Closing the window will stop the Live Share session
-          </p>
+  if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
+    return (
+      <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">
+        <div className="flex items-center justify-center h-full flex-col gap-y-7">
+          <div className="w-full text-left">
+            <p className="text-lg">Access your in-browser database</p>
+            <p className="text-xs text-muted-foreground">
+              Closing the window will stop the Live Share session
+            </p>
+          </div>
+          <Tabs defaultValue="uri" className="w-full justify-between bg-muted/50 rounded-md border">
+            <TabsList className="w-full flex justify-start bg-transparent px-3">
+              <TabsTrigger
+                value="uri"
+                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"
+              >
+                URI
+              </TabsTrigger>
+              <TabsTrigger
+                value="psql"
+                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"
+              >
+                PSQL
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent value="uri" className="px-2 pb-2">
+              <CopyableField
+                value={`postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
+              />
+            </TabsContent>
+            <TabsContent value="psql" className="px-2 pb-2">
+              <CopyableField
+                value={`psql "postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require"`}
+              />
+            </TabsContent>
+          </Tabs>
+
+          {liveShare.clientIp ? (
+            <p className="text-sm text-muted-foreground flex items-center gap-2">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
+              </span>
+              <span>
+                Connected from <span className="text-card-foreground">{liveShare.clientIp}</span>
+              </span>
+            </p>
+          ) : (
+            <p className="text-sm text-muted-foreground flex items-center gap-2">
+              <span className="relative inline-flex rounded-full h-3 w-3 bg-muted-foreground"></span>
+              <span>No client connected</span>
+            </p>
+          )}
+          <Button
+            className="w-full gap-2"
+            variant="outline"
+            onClick={() => {
+              liveShare.stop()
+            }}
+          >
+            <PlugIcon size={16} />
+            <span>Stop sharing database</span>
+          </Button>
         </div>
-        <Tabs defaultValue="uri" className="w-full justify-between bg-muted/50 rounded-md border">
-          <TabsList className="w-full flex justify-start bg-transparent px-3">
-            <TabsTrigger
-              value="uri"
-              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"
-            >
-              URI
-            </TabsTrigger>
-            <TabsTrigger
-              value="psql"
-              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"
-            >
-              PSQL
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="uri" className="px-2 pb-2">
-            <CopyableField
-              value={`postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require`}
-            />
-          </TabsContent>
-          <TabsContent value="psql" className="px-2 pb-2">
-            <CopyableField
-              value={`psql "postgres://postgres@${liveShare.databaseId}.${process.env.NEXT_PUBLIC_BROWSER_PROXY_DOMAIN}/postgres?sslmode=require"`}
-            />
-          </TabsContent>
-        </Tabs>
-
-        {liveShare.clientIp ? (
-          <p className="text-sm text-muted-foreground flex items-center gap-2">
-            <span className="relative flex h-3 w-3">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
-            </span>
-            <span>
-              Connected from <span className="text-card-foreground">{liveShare.clientIp}</span>
-            </span>
-          </p>
-        ) : (
-          <p className="text-sm text-muted-foreground flex items-center gap-2">
-            <span className="relative inline-flex rounded-full h-3 w-3 bg-muted-foreground"></span>
-            <span>No client connected</span>
-          </p>
-        )}
-        <Button
-          className="w-full gap-2"
-          variant="outline"
-          onClick={() => {
-            liveShare.stop()
-          }}
-        >
-          <PlugIcon size={16} />
-          <span>Stop sharing database</span>
-        </Button>
       </div>
-    </div>
-  )
+    )
+
+    return null
+  }
 }
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
@@ -372,7 +372,7 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
         )}
         href={`/db/${database.id}`}
       >
-        {isActive && liveShare.isLiveSharing && (
+        {liveShare.isLiveSharing && liveShare.databaseId === database.id && (
           <Tooltip>
             <TooltipTrigger asChild>
               <RadioIcon size={18} />
@@ -545,34 +545,37 @@ type ConnectMenuItemProps = {
 function LiveShareMenuItem(props: ConnectMenuItemProps) {
   const { liveShare, user } = useApp()
 
-  if (!liveShare.isLiveSharing) {
+  if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
     return (
       <DropdownMenuItem
-        disabled={!user}
         className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
         onClick={async (e) => {
           e.preventDefault()
-          liveShare.start(props.databaseId)
+          liveShare.stop()
           props.setIsPopoverOpen(false)
         }}
       >
-        <LiveShareIcon size={16} className="flex-shrink-0 text-muted-foreground" />
-        <span>Live Share</span>
+        <PlugIcon size={16} strokeWidth={2} className="flex-shrink-0 text-muted-foreground" />
+        <span>Stop sharing</span>
       </DropdownMenuItem>
     )
   }
 
   return (
     <DropdownMenuItem
+      disabled={!user}
       className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
       onClick={async (e) => {
         e.preventDefault()
-        liveShare.stop()
+        if (liveShare.isLiveSharing) {
+          liveShare.stop()
+        }
+        liveShare.start(props.databaseId)
         props.setIsPopoverOpen(false)
       }}
     >
-      <PlugIcon size={16} strokeWidth={2} className="flex-shrink-0 text-muted-foreground" />
-      <span>Stop sharing</span>
+      <LiveShareIcon size={16} className="flex-shrink-0 text-muted-foreground" />
+      <span>Live Share</span>
     </DropdownMenuItem>
   )
 }
