Merge pull request #146 from supabase-community/feat/new-design

New design

Author: gregnr

apps/web/app/deploy/[databaseId]/page.tsx

@@ -4,12 +4,10 @@ import { useMutation } from '@tanstack/react-query'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { useEffect } from 'react'
 import { useApp } from '~/components/app-provider'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
 import { createClient } from '~/utils/supabase/client'
-import { Loader2 } from 'lucide-react'
-import { ParticlesBackground } from '~/components/particles-background'
 import { getOauthUrl } from '~/lib/util'
 import { SupabaseIcon } from '~/components/supabase-icon'
+import LineAnimation from '~/components/lines'
 
 class IntegrationRevokedError extends Error {
   constructor() {
@@ -24,7 +22,7 @@ export default function Page() {
   const { liveShare } = useApp()
   const searchParams = useSearchParams()
 
-  const { mutate: deploy, error } = useMutation({
+  const { mutate: deploy } = useMutation({
     mutationFn: async () => {
       // make the database available to the deployment worker
       const localDatabaseUrl = await liveShare.start(params.databaseId)
@@ -108,31 +106,24 @@ export default function Page() {
   }, [deploy])
 
   return (
-    <ParticlesBackground>
-      <Dialog open>
-        <DialogContent
-          className="max-w-3xl bg-background/70 backdrop-blur-sm"
-          showCloseButton={false}
-          overlay={false}
-        >
-          <DialogHeader>
-            <DialogTitle className="flex gap-2 items-center">
-              <SupabaseIcon />
-              Deploying your database
-            </DialogTitle>
-            <div className="py-2 border-b" />
-          </DialogHeader>
-          <div className="flex flex-col gap-6">
+    <div className="flex items-center justify-center h-full w-full bg-muted">
+      <div className="w-full h-full max-h-[400px] border rounded-lg overflow-hidden relative flex justify-center items-center">
+        <div className="bg-background border rounded-md relative z-10 max-w-full">
+          <h1 className="flex gap-2 items-center border-b px-6 py-4 font-semibold">
+            <SupabaseIcon />
+            Deploying your database
+          </h1>
+          <div className="flex flex-col gap-6 p-6">
             <div className="flex items-center gap-4">
-              <Loader2 className="animate-spin" />
               <div>
                 <p>Your database is being deployed. This process typically takes a few minutes.</p>
                 <p>Please keep this page open to ensure successful deployment.</p>
               </div>
             </div>
           </div>
-        </DialogContent>
-      </Dialog>
-    </ParticlesBackground>
+        </div>
+        <LineAnimation />
+      </div>
+    </div>
   )
 }

apps/web/app/globals.css

@@ -14,13 +14,13 @@
     --primary-foreground: 0 0% 98%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
+    --muted: 0 0% 97.1%;
+    --muted-foreground: 0 0% 30.1%;
+    --accent: 0 0% 91.1%;
     --accent-foreground: 0 0% 9%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
+    --border: 0 0% 91.8%;
     --input: 0 0% 89.8%;
     --ring: 0 0% 3.9%;
     --radius: 0.5rem;
@@ -29,20 +29,28 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 0 0% 7%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
+    --muted: 0 0% 10.9%;
     --muted-foreground: 0 0% 63.9%;
     --accent: 0 0% 14.9%;
     --accent-foreground: 0 0% 98%;
@@ -56,6 +64,14 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
 
@@ -89,6 +105,7 @@
 html,
 body,
 main {
+  font-size: 15px;
   height: 100%;
   width: 100%;
   padding: 0;

apps/web/components/app-provider.tsx

@@ -45,6 +45,15 @@ export default function AppProvider({ children }: AppProps) {
   const [isSignInDialogOpen, setIsSignInDialogOpen] = useState(false)
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false)
   const [isRateLimited, setIsRateLimited] = useState(false)
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  useEffect(() => {
+    dbManager?.getDatabases().then((databases) => {
+      if (databases.length > 0) {
+        setShowSidebar(true)
+      }
+    })
+  }, [])
 
   const focusRef = useRef<FocusHandle>(null)
 
@@ -294,6 +303,8 @@ export default function AppProvider({ children }: AppProps) {
         pgVersion,
         isLegacyDomain,
         isLegacyDomainRedirect,
+        showSidebar,
+        setShowSidebar,
       }}
     >
       {children}
@@ -334,6 +345,8 @@ export type AppContextValues = {
   setModelProviderError: (error: string | undefined) => void
   isLegacyDomain: boolean
   isLegacyDomainRedirect: boolean
+  showSidebar: boolean
+  setShowSidebar: (show: boolean) => void
 }
 
 export const AppContext = createContext<AppContextValues | undefined>(undefined)

apps/web/components/byo-llm-button.tsx

@@ -1,24 +1,50 @@
 import { Brain } from 'lucide-react'
 import { useApp } from '~/components/app-provider'
 import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/components/ui/tooltip'
 
 export type ByoLlmButtonProps = {
   onClick?: () => void
+  className?: string
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  iconOnly?: boolean
 }
 
-export default function ByoLlmButton({ onClick }: ByoLlmButtonProps) {
-  const { setIsModelProviderDialogOpen } = useApp()
+export default function ByoLlmButton({
+  onClick,
+  className,
+  size = 'default',
+  iconOnly = false,
+}: ByoLlmButtonProps) {
+  const { setIsModelProviderDialogOpen, modelProvider } = useApp()
 
-  return (
+  const button = (
     <Button
-      className="gap-2 text-base"
+      className={cn('gap-2 text-sm flex justify-center items-center relative', className)}
+      variant="outline"
+      size={iconOnly ? 'sm' : size}
       onClick={() => {
         onClick?.()
         setIsModelProviderDialogOpen(true)
       }}
     >
-      <Brain size={18} strokeWidth={2} />
-      Bring your own LLM
+      {modelProvider?.state?.enabled && (
+        <div className="absolute top-1 right-1 w-2 h-2 rounded-full bg-green-500" />
+      )}
+      <Brain size={16} strokeWidth={1.5} />
+      {!iconOnly && 'Bring your own LLM'}
     </Button>
   )
+
+  if (iconOnly) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>Bring your own LLM</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return button
 }

apps/web/components/chat-message.tsx

@@ -12,13 +12,20 @@ import { isAutomatedUserMessage } from '~/lib/util'
 import { cn } from '~/lib/utils'
 import { CodeBlock } from './code-block'
 import { ToolUi } from './tools'
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import { useApp } from './app-provider'
+import { UserIcon } from 'lucide-react'
 
 export type ChatMessageProps = {
   message: Message
   isLast: boolean
 }
 
 function ChatMessage({ message, isLast }: ChatMessageProps) {
+  const { user } = useApp()
+  const avatarUrl = user?.user_metadata.avatar_url ?? null
+  const username = user?.user_metadata.user_name ?? null
+
   switch (message.role) {
     case 'user':
       if (isAutomatedUserMessage(message)) {
@@ -28,7 +35,6 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
       return (
         <m.div
           // Only track layout on the last message to improve performance
-          layoutId={isLast ? message.id : undefined}
           variants={{
             hidden: {
               opacity: 0,
@@ -39,7 +45,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
               x: 0,
             },
           }}
-          className="self-end px-5 py-2.5 text-base rounded-3xl bg-border text-foreground whitespace-pre-wrap"
+          className="self-end px-5 py-2 flex rounded-3xl bg-muted text-foreground whitespace-pre-wrap"
         >
           {message.content}
         </m.div>
@@ -50,7 +56,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
           remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
           rehypePlugins={[[rehypeKatex, { output: 'html' }]]}
           components={{ ...markdownComponents, img: () => null }}
-          className="prose prose-xs text-base [&_.katex-display>.katex]:text-left"
+          className="prose prose-xs prose-h3:text-md [&_.katex-display>.katex]:text-left prose-ol:my-4"
         >
           {message.content}
         </ReactMarkdown>
@@ -69,7 +75,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) {
 
       return (
         <m.div
-          className="lg:ml-4 self-stretch flex flex-col items-stretch gap-6"
+          className="self-stretch flex flex-col items-stretch gap-6"
           variants={{
             hidden: {
               opacity: 0,
@@ -111,7 +117,7 @@ const NextImageHandler = (props: any) => {
 }
 
 const markdownComponents = {
-  mono: (props: any) => <code className="text-sm not-prose">{props.children}</code>,
+  mono: (props: any) => <code className="not-prose">{props.children}</code>,
   code: (props: any) => <CodeBlock {...props} />,
   pre: (props: any) => (
     <pre className="not-prose">