Skip to content

Commit

Permalink
Merge pull request #146 from supabase-community/feat/new-design
Browse files Browse the repository at this point in the history 
New design
  • Loading branch information
@gregnr
gregnr authored Dec 6, 2024
2 parents f2396d3 + a099165 commit c8441ac
Show file tree
Hide file tree
Showing 49 changed files with 3,231 additions and 1,618 deletions.
37 changes: 14 additions & 23 deletions apps/web/app/deploy/[databaseId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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)
Expand Down Expand Up @@ -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>
)
}
29 changes: 23 additions & 6 deletions apps/web/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Expand All @@ -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%;
}
}

Expand Down Expand Up @@ -89,6 +105,7 @@
html,
body,
main {
font-size: 15px;
height: 100%;
width: 100%;
padding: 0;
Expand Down
13 changes: 13 additions & 0 deletions apps/web/components/app-provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -294,6 +303,8 @@ export default function AppProvider({ children }: AppProps) {
pgVersion,
isLegacyDomain,
isLegacyDomainRedirect,
showSidebar,
setShowSidebar,
}}
>
{children}
Expand Down Expand Up @@ -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)
Expand Down
38 changes: 32 additions & 6 deletions apps/web/components/byo-llm-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
}
16 changes: 11 additions & 5 deletions apps/web/components/chat-message.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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,
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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,
Expand Down Expand Up @@ -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">
Expand Down
Loading

0 comments on commit c8441ac

Please sign in to comment.