Live share banner

apps/postgres-new/.env.example

@@ -1,6 +1,5 @@
 NEXT_PUBLIC_SUPABASE_ANON_KEY="<supabase-anon-key>"
 NEXT_PUBLIC_SUPABASE_URL="<supabase-api-url>"
-NEXT_PUBLIC_IS_PREVIEW=true
 NEXT_PUBLIC_BROWSER_PROXY_DOMAIN="<browser-proxy-domain>"
 
 OPENAI_API_KEY="<openai-api-key>"

apps/postgres-new/components/app-provider.tsx

@@ -100,7 +100,6 @@ export default function AppProvider({ children }: AppProps) {
     setUser(undefined)
   }, [supabase])
 
-  const isPreview = process.env.NEXT_PUBLIC_IS_PREVIEW === 'true'
   const pgliteVersion = process.env.NEXT_PUBLIC_PGLITE_VERSION
   const { value: pgVersion } = useAsyncMemo(async () => {
     if (!dbManager) {
@@ -237,7 +236,6 @@ export default function AppProvider({ children }: AppProps) {
         isRateLimited,
         setIsRateLimited,
         focusRef,
-        isPreview,
         dbManager,
         pgliteVersion,
         pgVersion,
@@ -266,7 +264,6 @@ export type AppContextValues = {
   isRateLimited: boolean
   setIsRateLimited: (limited: boolean) => void
   focusRef: RefObject<FocusHandle>
-  isPreview: boolean
   dbManager?: DbManager
   pgliteVersion?: string
   pgVersion?: string

apps/postgres-new/components/layout.tsx

@@ -3,10 +3,11 @@
 import 'chart.js/auto'
 import 'chartjs-adapter-date-fns'
 
+import { DialogTrigger } from '@radix-ui/react-dialog'
 import { LazyMotion, m } from 'framer-motion'
-import { Loader } from 'lucide-react'
+import { Loader, MoreVertical } from 'lucide-react'
 import Link from 'next/link'
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useState } from 'react'
 import { TooltipProvider } from '~/components/ui/tooltip'
 import { useDatabasesQuery } from '~/data/databases/databases-query'
 import { useBreakpoint } from '~/lib/use-breakpoint'
@@ -17,6 +18,7 @@ import {
   legacyDomainUrl,
 } from '~/lib/util'
 import { useApp } from './app-provider'
+import { LiveShareIcon } from './live-share-icon'
 import Sidebar from './sidebar'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
@@ -26,15 +28,14 @@ const loadFramerFeatures = () => import('./framer-features').then((res) => res.d
 export type LayoutProps = PropsWithChildren
 
 export default function Layout({ children }: LayoutProps) {
-  const { isPreview, isLegacyDomain, isLegacyDomainRedirect } = useApp()
+  const { isLegacyDomain, isLegacyDomainRedirect } = useApp()
   const isSmallBreakpoint = useBreakpoint('lg')
 
   return (
     <LazyMotion features={loadFramerFeatures}>
       <TooltipProvider delayDuration={0}>
         <div className="w-full h-full flex flex-col overflow-hidden">
-          {isPreview && <PreviewBanner />}
-          {/* TODO: re-enable rename banner when ready */}
+          {!isLegacyDomain && <LiveShareBanner />}
           {(isLegacyDomain || isLegacyDomainRedirect) && <RenameBanner />}
           <main className="flex-1 flex flex-col lg:flex-row min-h-0">
             {/* TODO: make sidebar available on mobile */}
@@ -50,11 +51,82 @@ export default function Layout({ children }: LayoutProps) {
   )
 }
 
-function PreviewBanner() {
+function LiveShareBanner() {
+  const [videoLoaded, setVideoLoaded] = useState(false)
+
   return (
-    <div className="px-3 py-3 flex justify-center text-sm text-center bg-neutral-800 text-white">
-      Heads up! This is a preview version of {currentDomainHostname}, so expect some changes here
-      and there.
+    <div className="px-3 py-3 flex gap-1 justify-center text-sm text-center bg-neutral-800 text-white">
+      <span>New: Connect to your in-browser databases from outside the browser.</span>
+      <Dialog onOpenChange={() => setVideoLoaded(false)}>
+        <DialogTrigger asChild>
+          <span className="underline cursor-pointer">Learn more.</span>
+        </DialogTrigger>
+        <DialogContent className="max-w-2x max-h-full overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Introducing Live Share</DialogTitle>
+            <div className="py-2 border-b" />
+          </DialogHeader>
+
+          <div className="prose">
+            <p>
+              With Live Share, you can connect directly to your in-browser PGlite databases from{' '}
+              <em>outside the browser</em>.
+            </p>
+            <div
+              style={{
+                position: 'relative',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {!videoLoaded && (
+                <div style={{ position: 'absolute', zIndex: 1, color: 'white' }}>
+                  <Loader className="animate-spin" size={36} strokeWidth={0.75} />
+                </div>
+              )}
+              <m.video
+                width="1860"
+                height="1080"
+                variants={{
+                  hidden: { opacity: 0 },
+                  show: { opacity: 1 },
+                }}
+                initial="hidden"
+                animate={videoLoaded ? 'show' : 'hidden'}
+                className="rounded-sm m-0"
+                autoPlay
+                loop
+                onLoadedData={() => setVideoLoaded(true)}
+              >
+                <source
+                  src="https://github.com/user-attachments/assets/78c45f61-4213-49f0-a563-55b426dd6c35"
+                  type="video/mp4"
+                />
+              </m.video>
+            </div>
+
+            <m.div layout className="inline-block">
+              <h4 className="font-bold">How does it work?</h4>
+
+              <ol className="mb-0">
+                <li>
+                  Click on the <MoreVertical size={16} className="text-muted-foreground inline" />{' '}
+                  menu next your database and tap{' '}
+                  <strong>
+                    <LiveShareIcon size={16} className="text-muted-foreground inline" /> Live Share
+                  </strong>
+                </li>
+                <li>A unique connection string will appear for your database</li>
+                <li>
+                  Copy-paste the connection string into any Postgres client (like <code>psql</code>)
+                  and begin querying!
+                </li>
+              </ol>
+            </m.div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }