From 034620feeb80ad852cfc876ef605bb1425649163 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Tue, 6 Aug 2024 17:15:40 +0800 Subject: [PATCH 01/24] Update .gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 35c08cca..67333569 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ next-env.d.ts dbs/ tls/ dist/ + +.env From 7645f9a7a4e53df6b41f8ebdc12f371b260554eb Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 7 Aug 2024 18:10:23 +0800 Subject: [PATCH 02/24] add dropdown-menu --- .../components/ui/dropdown-menu.tsx | 200 ++++++++++++++++++ apps/postgres-new/package.json | 1 + package-lock.json | 68 ++++++ 3 files changed, 269 insertions(+) create mode 100644 apps/postgres-new/components/ui/dropdown-menu.tsx diff --git a/apps/postgres-new/components/ui/dropdown-menu.tsx b/apps/postgres-new/components/ui/dropdown-menu.tsx new file mode 100644 index 00000000..81320940 --- /dev/null +++ b/apps/postgres-new/components/ui/dropdown-menu.tsx @@ -0,0 +1,200 @@ +"use client" + +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { Check, ChevronRight, Circle } from "lucide-react" + +import { cn } from "~/lib/utils" + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json index d9a7f0b4..43d471b5 100644 --- a/apps/postgres-new/package.json +++ b/apps/postgres-new/package.json @@ -15,6 +15,7 @@ "@gregnr/postgres-meta": "^0.82.0-dev.2", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", diff --git a/package-lock.json b/package-lock.json index da3c92b9..e786ec8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "@gregnr/postgres-meta": "^0.82.0-dev.2", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", @@ -1781,6 +1782,34 @@ } } }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.1.tgz", + "integrity": "sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-focus-guards": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz", @@ -1836,6 +1865,45 @@ } } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz", + "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.0", + "@radix-ui/react-focus-guards": "1.1.0", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.1", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.7" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popover": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz", From f356a07369c0dc1b0a5435904a00781e005e3ba4 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Wed, 7 Aug 2024 18:16:58 +0800 Subject: [PATCH 03/24] chore: add header --- apps/postgres-new/components/header.tsx | 32 +++++++++++++++++++++++++ apps/postgres-new/components/layout.tsx | 19 +++++++++------ 2 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 apps/postgres-new/components/header.tsx diff --git a/apps/postgres-new/components/header.tsx b/apps/postgres-new/components/header.tsx new file mode 100644 index 00000000..8d85f8d9 --- /dev/null +++ b/apps/postgres-new/components/header.tsx @@ -0,0 +1,32 @@ +import { Button } from './ui/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from './ui/dropdown-menu' + +export default function Header() { + return ( +
+
+

postgres.new

/

Name of database

+
+ +
+ ) +} diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx index b46676b7..577be37e 100644 --- a/apps/postgres-new/components/layout.tsx +++ b/apps/postgres-new/components/layout.tsx @@ -9,6 +9,7 @@ import { TooltipProvider } from '~/components/ui/tooltip' import { useBreakpoint } from '~/lib/use-breakpoint' import { useApp } from './app-provider' import Sidebar from './sidebar' +import Header from './header' const loadFramerFeatures = () => import('./framer-features').then((res) => res.default) @@ -28,13 +29,17 @@ export default function Layout({ children }: LayoutProps) { there. )} -
- {/* TODO: make sidebar available on mobile */} - {!isSmallBreakpoint && } - - {children} - -
+ +
+
+
+ {/* TODO: make sidebar available on mobile */} + {!isSmallBreakpoint && } + + {children} + +
+
From ec333b2ce487d9895b367114341f19ba7cdb5868 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 8 Aug 2024 02:39:51 +0800 Subject: [PATCH 04/24] first round of changes --- apps/postgres-new/app/globals.css | 141 ++++++------ apps/postgres-new/app/layout.tsx | 12 +- apps/postgres-new/components/chat-message.tsx | 11 +- .../components/code-accordion.tsx | 6 +- apps/postgres-new/components/header.tsx | 30 ++- apps/postgres-new/components/providers.tsx | 5 +- .../components/schema/table-node.tsx | 204 ++++++++++-------- apps/postgres-new/components/sidebar.tsx | 20 +- .../components/theme-provider.tsx | 9 + apps/postgres-new/components/ui/accordion.tsx | 24 +-- apps/postgres-new/components/ui/popover.tsx | 49 ++--- apps/postgres-new/package.json | 2 +- apps/postgres-new/tailwind.config.ts | 61 +++++- package-lock.json | 8 +- 14 files changed, 344 insertions(+), 238 deletions(-) create mode 100644 apps/postgres-new/components/theme-provider.tsx diff --git a/apps/postgres-new/app/globals.css b/apps/postgres-new/app/globals.css index 31ed3e4c..8f8069ae 100644 --- a/apps/postgres-new/app/globals.css +++ b/apps/postgres-new/app/globals.css @@ -2,7 +2,64 @@ @tailwind components; @tailwind utilities; -:root { +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --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%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } + + .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-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-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +/* :root { --colors-black: 0deg 0% 0%; --colors-white: 0deg 0% 100%; --colors-gray-dark-100: 0deg 0% 8.6%; @@ -204,7 +261,6 @@ --foreground-light: var(--colors-gray-dark-1100); --foreground-default: var(--colors-gray-dark-1200); } - [data-theme='light'], .light { --helpers-os-appearance: Light; @@ -267,72 +323,7 @@ --background-default: var(--colors-gray-light-100); --background-200: var(--colors-gray-light-200); --foreground-default: var(--colors-gray-light-1200); -} - -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-Book.woff2) format('woff2'), - url(/fonts/custom/CustomFont-Book.woff) format('woff'); - font-weight: 400; - font-style: normal; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'), - url(/fonts/custom/CustomFont-BookItalic.woff) format('woff'); - font-weight: 400; - font-style: italic; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'), - url(/fonts/custom/CustomFont-Medium.woff) format('woff'); - font-weight: 500; - font-style: normal; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'), - url(/fonts/custom/CustomFont-MediumItalic.woff) format('woff'); - font-weight: 500; - font-style: italic; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-Bold.woff2) format('woff2'), - url(/fonts/custom/CustomFont-Bold.woff) format('woff'); - font-weight: 700; - font-style: 600; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'), - url(/fonts/custom/CustomFont-BoldItalic.woff) format('woff'); - font-style: 600; - font-style: italic; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-Black.woff2) format('woff2'), - url(/fonts/custom/CustomFont-Black.woff) format('woff'); - font-weight: 800; - font-style: normal; -} -@font-face { - font-family: 'circular'; - src: - url(/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'), - url(/fonts/custom/CustomFont-BlackItalic.woff) format('woff'); - font-weight: 800; - font-style: italic; -} +} */ @font-face { font-family: 'source code pro'; @@ -347,6 +338,20 @@ font-display: swap; } +@layer base { + * { + @apply border-border; + } + html { + @apply scroll-smooth; + } + body { + @apply bg-background text-foreground; + font-synthesis-weight: none; + text-rendering: optimizeLegibility; + } +} + html, body, main { diff --git a/apps/postgres-new/app/layout.tsx b/apps/postgres-new/app/layout.tsx index 72981d0c..aeeba489 100644 --- a/apps/postgres-new/app/layout.tsx +++ b/apps/postgres-new/app/layout.tsx @@ -1,13 +1,15 @@ -import 'katex/dist/katex.min.css' import './globals.css' - +import 'katex/dist/katex.min.css' import type { Metadata } from 'next' -import { Inter } from 'next/font/google' +import { Inter as FontSans } from 'next/font/google' import Layout from '~/components/layout' import Providers from '~/components/providers' import { cn } from '~/lib/utils' -const inter = Inter({ subsets: ['latin'] }) +const fontSans = FontSans({ + subsets: ['latin'], + variable: '--font-sans', +}) export const metadata: Metadata = { title: 'Postgres Sandbox', @@ -21,7 +23,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/apps/postgres-new/components/chat-message.tsx b/apps/postgres-new/components/chat-message.tsx index 3f25a2fd..716039d4 100644 --- a/apps/postgres-new/components/chat-message.tsx +++ b/apps/postgres-new/components/chat-message.tsx @@ -39,7 +39,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) { x: 0, }, }} - className="self-end px-5 py-2.5 text-base rounded-3xl bg-neutral-100 whitespace-pre-wrap" + className="self-end px-5 py-2.5 text-base rounded-3xl bg-foreground text-background whitespace-pre-wrap" > {message.content} @@ -50,7 +50,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) { remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]} rehypePlugins={[[rehypeKatex, { output: 'html' }]]} components={{ ...markdownComponents, img: () => null }} - className="prose [&_.katex-display>.katex]:text-left" + className="prose prose-xs text-base [&_.katex-display>.katex]:text-left" > {message.content} @@ -111,8 +111,13 @@ const NextImageHandler = (props: any) => { } const markdownComponents = { - mono: (props: any) => {props.children}, + mono: (props: any) => {props.children}, code: (props: any) => , + pre: (props: any) => ( + 
+      
+
+ ), img: (props: any) => NextImageHandler(props), Image: (props: any) => NextImageHandler(props), } diff --git a/apps/postgres-new/components/code-accordion.tsx b/apps/postgres-new/components/code-accordion.tsx index 085a0f17..50cf738b 100644 --- a/apps/postgres-new/components/code-accordion.tsx +++ b/apps/postgres-new/components/code-accordion.tsx @@ -28,14 +28,14 @@ export default function CodeAccordion({
- + {title}
diff --git a/apps/postgres-new/components/header.tsx b/apps/postgres-new/components/header.tsx index 8d85f8d9..87cd84f1 100644 --- a/apps/postgres-new/components/header.tsx +++ b/apps/postgres-new/components/header.tsx @@ -1,3 +1,6 @@ +'use client' + +import { useTheme } from 'next-themes' import { Button } from './ui/button' import { DropdownMenu, @@ -5,12 +8,17 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu' +import { Moon, Sun } from 'lucide-react' export default function Header() { + const { setTheme } = useTheme() + return ( -
-
-

postgres.new

/

Name of database

+
+
+

postgres.new

+ / + Name of database
diff --git a/apps/postgres-new/components/providers.tsx b/apps/postgres-new/components/providers.tsx index 8782b94d..4eb05cdd 100644 --- a/apps/postgres-new/components/providers.tsx +++ b/apps/postgres-new/components/providers.tsx @@ -1,16 +1,17 @@ 'use client' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { ThemeProvider } from 'next-themes' + import { PropsWithChildren } from 'react' import AppProvider from './app-provider' +import { ThemeProvider } from './theme-provider' const queryClient = new QueryClient() export default function Providers({ children }: PropsWithChildren) { return ( // Force theme until we implement dark mode - + {children} diff --git a/apps/postgres-new/components/schema/table-node.tsx b/apps/postgres-new/components/schema/table-node.tsx index c8263c9c..496270b2 100644 --- a/apps/postgres-new/components/schema/table-node.tsx +++ b/apps/postgres-new/components/schema/table-node.tsx @@ -21,11 +21,17 @@ import { useOnViewportChange, useUpdateNodeInternals, } from 'reactflow' -import { Button } from '~/components/ui/button' -import { Popover, PopoverContent, PopoverSeparator, PopoverTrigger } from '~/components/ui/popover' +import { + DropdownMenu, + DropdownMenuItem, + DropdownMenuContent, + DropdownMenuTrigger, + DropdownMenuSeparator, +} from '~/components/ui/dropdown-menu' import { cn } from '~/lib/utils' import { useApp } from '../app-provider' import { useWorkspace } from '../workspace' +import { rename } from 'fs' // ReactFlow is scaling everything by the factor of 2 export const TABLE_NODE_WIDTH = 640 @@ -71,7 +77,7 @@ export function TableNode({ id, data, targetPosition, sourcePosition }: NodeProp if (data.isForeign) { return ( -
+
{data.name} {targetPosition && ( { + e.preventDefault() + }} /> )}
@@ -87,7 +96,7 @@ export function TableNode({ id, data, targetPosition, sourcePosition }: NodeProp return (
@@ -169,7 +175,9 @@ function TableColumn({ const { appendMessage } = useWorkspace() return ( - { setIsPopoverOpen(open) @@ -178,11 +186,11 @@ function TableColumn({ } }} > - + )} - - + + { + if (isRenaming) { + e.preventDefault() + } + }} + > {isRenaming ? (
{ @@ -356,6 +373,13 @@ function TableColumn({ name="name" className="flex-grow border-none focus-visible:ring-0 text-base bg-inherit placeholder:text-neutral-400" placeholder={`Rename ${column.name}`} + // when esc is pressed, setIsRenaming(false) is called + onKeyDown={(e) => { + if (e.key === 'Escape') { + e.preventDefault() + setIsRenaming(false) + } + }} autoComplete="off" autoFocus disabled={!user} @@ -363,91 +387,91 @@ function TableColumn({
) : ( <> - - - - - - - - - - - - - - + Remove column + )} - - + + ) } diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx index 1a1d4fa1..56448862 100644 --- a/apps/postgres-new/components/sidebar.tsx +++ b/apps/postgres-new/components/sidebar.tsx @@ -37,7 +37,7 @@ export default function Sidebar() { {showSidebar && ( @@ -69,12 +70,12 @@ export default function Sidebar() { @@ -142,12 +143,13 @@ export default function Sidebar() { @@ -159,12 +161,12 @@ export default function Sidebar() { diff --git a/apps/postgres-new/components/theme-provider.tsx b/apps/postgres-new/components/theme-provider.tsx new file mode 100644 index 00000000..d4b4bbfd --- /dev/null +++ b/apps/postgres-new/components/theme-provider.tsx @@ -0,0 +1,9 @@ +'use client' + +import * as React from 'react' +import { ThemeProvider as NextThemesProvider } from 'next-themes' +import { type ThemeProviderProps } from 'next-themes/dist/types' + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/apps/postgres-new/components/ui/accordion.tsx b/apps/postgres-new/components/ui/accordion.tsx index af70cf16..79d31eae 100644 --- a/apps/postgres-new/components/ui/accordion.tsx +++ b/apps/postgres-new/components/ui/accordion.tsx @@ -1,10 +1,10 @@ -"use client" +'use client' -import * as React from "react" -import * as AccordionPrimitive from "@radix-ui/react-accordion" -import { ChevronDown } from "lucide-react" +import * as React from 'react' +import * as AccordionPrimitive from '@radix-ui/react-accordion' +import { ChevronDown } from 'lucide-react' -import { cn } from "~/lib/utils" +import { cn } from '~/lib/utils' const Accordion = AccordionPrimitive.Root @@ -12,13 +12,9 @@ const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - + )) -AccordionItem.displayName = "AccordionItem" +AccordionItem.displayName = 'AccordionItem' const AccordionTrigger = React.forwardRef< React.ElementRef, @@ -28,13 +24,13 @@ const AccordionTrigger = React.forwardRef< svg]:rotate-180", + 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', className )} {...props} > {children} - + )) @@ -49,7 +45,7 @@ const AccordionContent = React.forwardRef< className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" {...props} > -
{children}
+
{children}
)) diff --git a/apps/postgres-new/components/ui/popover.tsx b/apps/postgres-new/components/ui/popover.tsx index 4cfa35ce..fd24bf24 100644 --- a/apps/postgres-new/components/ui/popover.tsx +++ b/apps/postgres-new/components/ui/popover.tsx @@ -1,47 +1,38 @@ 'use client' -import * as PopoverPrimitive from '@radix-ui/react-popover' import * as React from 'react' +import * as PopoverPrimitive from '@radix-ui/react-popover' + import { cn } from '~/lib/utils' const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger -const PopoverAnchor = PopoverPrimitive.Anchor - -type PopoverContentProps = { - portal?: boolean - align?: 'center' | 'start' | 'end' - sideOffset?: number -} & React.ComponentPropsWithoutRef const PopoverContent = React.forwardRef< React.ElementRef, - PopoverContentProps ->(({ className, align = 'center', sideOffset = 4, portal = false, ...props }, ref) => { - const Portal = portal ? PopoverPrimitive.Portal : React.Fragment - return ( - - - - ) -}) -PopoverContent.displayName = 'PopoverContent' + React.ComponentPropsWithoutRef +>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => ( + + + +)) +PopoverContent.displayName = PopoverPrimitive.Content.displayName const PopoverSeparator = React.forwardRef>( ({ className, children, ...props }, ref) => ( -
+
) ) PopoverSeparator.displayName = 'PopoverSeparator' -export { Popover, PopoverAnchor, PopoverContent, PopoverSeparator, PopoverTrigger } +export { Popover, PopoverTrigger, PopoverContent, PopoverSeparator } diff --git a/apps/postgres-new/package.json b/apps/postgres-new/package.json index 43d471b5..9611dfc0 100644 --- a/apps/postgres-new/package.json +++ b/apps/postgres-new/package.json @@ -62,7 +62,7 @@ "@mertasan/tailwindcss-variables": "^2.7.0", "@radix-ui/colors": "^3.0.0", "@tailwindcss/forms": "^0.5.7", - "@tailwindcss/typography": "^0.5.13", + "@tailwindcss/typography": "^0.5.14", "@types/common-tags": "^1.8.4", "@types/lodash": "^4.17.7", "@types/node": "^20", diff --git a/apps/postgres-new/tailwind.config.ts b/apps/postgres-new/tailwind.config.ts index d09a2ac1..b6af7b83 100644 --- a/apps/postgres-new/tailwind.config.ts +++ b/apps/postgres-new/tailwind.config.ts @@ -1,7 +1,7 @@ import type { Config } from 'tailwindcss' -import config from './config/tailwind.config' +const { fontFamily } = require('tailwindcss/defaultTheme') -export default config({ +export default { darkMode: ['class'], content: [ './pages/**/*.{ts,tsx}', @@ -34,8 +34,8 @@ export default config({ foreground: 'hsl(var(--secondary-foreground))', }, destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))', + DEFAULT: 'hsl(var(--destructive) / )', + foreground: 'hsl(var(--destructive-foreground) / )', }, muted: { DEFAULT: 'hsl(var(--muted))', @@ -55,10 +55,15 @@ export default config({ }, }, borderRadius: { + xl: 'calc(var(--radius) + 4px)', lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)', }, + fontFamily: { + sans: ['var(--font-sans)', ...fontFamily.sans], + // mono: ["var(--font-mono)", ...fontFamily.mono], + }, keyframes: { 'accordion-down': { from: { height: '0' }, @@ -68,12 +73,56 @@ export default config({ from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' }, }, + 'caret-blink': { + '0%,70%,100%': { opacity: '1' }, + '20%,50%': { opacity: '0' }, + }, }, animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', + 'caret-blink': 'caret-blink 1.25s ease-out infinite', }, + // @ts-expect-error + typography: ({ theme }) => ({ + DEFAULT: { + css: { + '--tw-prose-body': 'var(--foreground)', + '--tw-prose-headings': 'var(--primary)', + '--tw-prose-lead': 'var(--secondary-foreground)', + '--tw-prose-links': 'var(--primary)', + '--tw-prose-bold': 'var(--primary)', + '--tw-prose-counters': 'var(--muted-foreground)', + '--tw-prose-bullets': 'var(--accent-foreground)', + '--tw-prose-hr': 'var(--border)', + '--tw-prose-quotes': 'var(--primary)', + '--tw-prose-quote-borders': 'var(--border)', + '--tw-prose-captions': 'var(--secondary-foreground)', + '--tw-prose-code': 'var(--primary)', + '--tw-prose-pre-code': 'var(--input)', + '--tw-prose-pre-bg': 'var(--primary)', + '--tw-prose-th-borders': 'var(--border)', + '--tw-prose-td-borders': 'var(--input)', + '--tw-prose-invert-body': 'var(--muted)', + '--tw-prose-invert-headings': 'var(--primary-foreground)', + '--tw-prose-invert-lead': 'var(--secondary)', + '--tw-prose-invert-links': 'var(--primary-foreground)', + '--tw-prose-invert-bold': 'var(--primary-foreground)', + '--tw-prose-invert-counters': 'var(--muted)', + '--tw-prose-invert-bullets': 'var(--accent)', + '--tw-prose-invert-hr': 'var(--border)', + '--tw-prose-invert-quotes': 'var(--accent)', + '--tw-prose-invert-quote-borders': 'var(--border)', + '--tw-prose-invert-captions': 'var(--muted)', + '--tw-prose-invert-code': 'var(--primary-foreground)', + '--tw-prose-invert-pre-code': 'var(--secondary)', + '--tw-prose-invert-pre-bg': 'rgba(0, 0, 0, 0.5)', + '--tw-prose-invert-th-borders': 'var(--border)', + '--tw-prose-invert-td-borders': 'var(--border)', + }, + }, + }), }, }, - plugins: [require('tailwindcss-animate')], -} satisfies Config) + plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')], +} satisfies Config diff --git a/package-lock.json b/package-lock.json index e786ec8e..c5d95bd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,7 @@ "@mertasan/tailwindcss-variables": "^2.7.0", "@radix-ui/colors": "^3.0.0", "@tailwindcss/forms": "^0.5.7", - "@tailwindcss/typography": "^0.5.13", + "@tailwindcss/typography": "^0.5.14", "@types/common-tags": "^1.8.4", "@types/lodash": "^4.17.7", "@types/node": "^20", @@ -2526,9 +2526,9 @@ } }, "node_modules/@tailwindcss/typography": { - "version": "0.5.13", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz", - "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==", + "version": "0.5.14", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.14.tgz", + "integrity": "sha512-ZvOCjUbsJBjL9CxQBn+VEnFpouzuKhxh2dH8xMIWHILL+HfOYtlAkWcyoon8LlzE53d2Yo6YO6pahKKNW3q1YQ==", "dev": true, "dependencies": { "lodash.castarray": "^4.4.0", From 6aab30352c9b7a2385b0d0b0f0c5e7eef4210e26 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 8 Aug 2024 03:41:14 +0800 Subject: [PATCH 05/24] moat --- apps/postgres-new/app/layout.tsx | 2 +- apps/postgres-new/components/providers.tsx | 7 ++- .../components/schema/table-graph.tsx | 21 +++---- .../components/schema/table-node.tsx | 15 +++-- .../components/ui/dropdown-menu.tsx | 57 +++++++------------ apps/postgres-new/tailwind.config.ts | 28 +++++++++ 6 files changed, 76 insertions(+), 54 deletions(-) diff --git a/apps/postgres-new/app/layout.tsx b/apps/postgres-new/app/layout.tsx index aeeba489..29351f65 100644 --- a/apps/postgres-new/app/layout.tsx +++ b/apps/postgres-new/app/layout.tsx @@ -23,7 +23,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/apps/postgres-new/components/providers.tsx b/apps/postgres-new/components/providers.tsx index 4eb05cdd..d0765321 100644 --- a/apps/postgres-new/components/providers.tsx +++ b/apps/postgres-new/components/providers.tsx @@ -11,7 +11,12 @@ const queryClient = new QueryClient() export default function Providers({ children }: PropsWithChildren) { return ( // Force theme until we implement dark mode - + {children} diff --git a/apps/postgres-new/components/schema/table-graph.tsx b/apps/postgres-new/components/schema/table-graph.tsx index f8cd783e..a19ba6f4 100644 --- a/apps/postgres-new/components/schema/table-graph.tsx +++ b/apps/postgres-new/components/schema/table-graph.tsx @@ -77,7 +77,7 @@ export default function TablesGraph({ }, [reactFlowInstance, tables, resolvedTheme, fitView, isFirstLoad]) return ( -
+
diff --git a/apps/postgres-new/components/schema/table-node.tsx b/apps/postgres-new/components/schema/table-node.tsx index 496270b2..251c02e0 100644 --- a/apps/postgres-new/components/schema/table-node.tsx +++ b/apps/postgres-new/components/schema/table-node.tsx @@ -77,7 +77,7 @@ export function TableNode({ id, data, targetPosition, sourcePosition }: NodeProp if (data.isForeign) { return ( -
+
{data.name} {targetPosition && (
- + {/* Animate the old title out and new title in */} @@ -190,8 +193,8 @@ function TableColumn({ )) -DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName +DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -47,14 +46,13 @@ const DropdownMenuSubContent = React.forwardRef< )) -DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName +DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -65,7 +63,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className )} {...props} @@ -83,8 +81,8 @@ const DropdownMenuItem = React.forwardRef< )) -DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName +DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -123,7 +120,7 @@ const DropdownMenuRadioItem = React.forwardRef< (({ className, inset, ...props }, ref) => ( )) @@ -162,24 +155,16 @@ const DropdownMenuSeparator = React.forwardRef< >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName -const DropdownMenuShortcut = ({ - className, - ...props -}: React.HTMLAttributes) => { - return ( - - ) +const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { + return } -DropdownMenuShortcut.displayName = "DropdownMenuShortcut" +DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' export { DropdownMenu, diff --git a/apps/postgres-new/tailwind.config.ts b/apps/postgres-new/tailwind.config.ts index b6af7b83..5fa05a81 100644 --- a/apps/postgres-new/tailwind.config.ts +++ b/apps/postgres-new/tailwind.config.ts @@ -119,6 +119,34 @@ export default { '--tw-prose-invert-pre-bg': 'rgba(0, 0, 0, 0.5)', '--tw-prose-invert-th-borders': 'var(--border)', '--tw-prose-invert-td-borders': 'var(--border)', + ol: { + paddingLeft: '1rem', + counterReset: 'item', + listStyleType: 'none', + marginBottom: '3rem', + }, + 'ol>li': { + display: 'block', + position: 'relative', + paddingLeft: '1rem', + }, + 'ol>li::before': { + position: 'absolute', + top: '0.25rem', + left: '-1rem', + height: '1.2rem', + width: '1.2rem', + borderRadius: '0.25rem', + backgroundColor: 'hsl(var(--muted))', + border: '1px solid hsl(var(--border))', + content: 'counter(item) " "', + counterIncrement: 'item', + fontSize: '12px', + color: 'hsl(var(--muted-foreground))', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, }, }, }), From 2a3ffa59191be1485633f8855c78cef87c7e7727 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 8 Aug 2024 14:32:07 +0800 Subject: [PATCH 06/24] moar fixes --- apps/postgres-new/components/chat-message.tsx | 2 +- .../components/code-accordion.tsx | 4 +- apps/postgres-new/components/ide.tsx | 51 +++++++-- .../postgres-new/components/schema/legend.tsx | 2 +- .../components/schema/table-graph.tsx | 17 +-- .../components/schema/table-node.tsx | 28 +++-- apps/postgres-new/components/sidebar.tsx | 104 +++++++++++------- .../components/ui/dropdown-menu.tsx | 2 +- apps/postgres-new/components/ui/tooltip.tsx | 10 +- apps/postgres-new/package.json | 2 +- 10 files changed, 143 insertions(+), 79 deletions(-) diff --git a/apps/postgres-new/components/chat-message.tsx b/apps/postgres-new/components/chat-message.tsx index 716039d4..11d5c353 100644 --- a/apps/postgres-new/components/chat-message.tsx +++ b/apps/postgres-new/components/chat-message.tsx @@ -39,7 +39,7 @@ function ChatMessage({ message, isLast }: ChatMessageProps) { x: 0, }, }} - className="self-end px-5 py-2.5 text-base rounded-3xl bg-foreground text-background whitespace-pre-wrap" + className="self-end px-5 py-2.5 text-base rounded-3xl bg-border text-foreground whitespace-pre-wrap" > {message.content} diff --git a/apps/postgres-new/components/code-accordion.tsx b/apps/postgres-new/components/code-accordion.tsx index 50cf738b..66c4834d 100644 --- a/apps/postgres-new/components/code-accordion.tsx +++ b/apps/postgres-new/components/code-accordion.tsx @@ -28,7 +28,7 @@ export default function CodeAccordion({ {code} - {error &&
{error}
} + {error &&
{error}
} diff --git a/apps/postgres-new/components/ide.tsx b/apps/postgres-new/components/ide.tsx index 6e76d406..9246f68d 100644 --- a/apps/postgres-new/components/ide.tsx +++ b/apps/postgres-new/components/ide.tsx @@ -16,6 +16,7 @@ import { cn } from '~/lib/utils' import { useApp } from './app-provider' import SchemaGraph from './schema/graph' import { useWorkspace } from './workspace' +import { buttonVariants } from './ui/button' const initialMigrationSql = '-- Migrations will appear here as you chat with AI\n' const initialSeedSql = '-- Seeds will appear here as you chat with AI\n' @@ -105,28 +106,56 @@ export default function IDE({ children, className }: IDEProps) { value={tab} onValueChange={(tab) => setTab(tabsSchema.parse(tab))} > - + {isSmallBreakpoint && ( - + - Chat + Chat )} - + - Diagram + Diagram - + - Migrations + Migrations {/* Temporarily hide seeds until we get pg_dump working */} - {false && ( - + {/* {false && ( + - Seeds + Seeds - )} + )} */} {isSmallBreakpoint && ( diff --git a/apps/postgres-new/components/schema/legend.tsx b/apps/postgres-new/components/schema/legend.tsx index 009534dc..9e25273c 100644 --- a/apps/postgres-new/components/schema/legend.tsx +++ b/apps/postgres-new/components/schema/legend.tsx @@ -2,7 +2,7 @@ import { DiamondIcon, Fingerprint, Hash, Key } from 'lucide-react' const SchemaGraphLegend = () => { return ( -
+
  • diff --git a/apps/postgres-new/components/schema/table-graph.tsx b/apps/postgres-new/components/schema/table-graph.tsx index a19ba6f4..23e8d87d 100644 --- a/apps/postgres-new/components/schema/table-graph.tsx +++ b/apps/postgres-new/components/schema/table-graph.tsx @@ -131,7 +131,7 @@ export default function TablesGraph({ )} {isEmpty && ( -

    Ask AI to create a table

    +

    Ask AI to create a table

    )}
@@ -139,16 +139,19 @@ export default function TablesGraph({
-
+
{visibility === 'local' && ( - -
+ + Local-only database - -
+ + - +

This Postgres database lives directly in your browser's IndexedDB storage and not in the cloud, so it is only accessible to you. diff --git a/apps/postgres-new/components/schema/table-node.tsx b/apps/postgres-new/components/schema/table-node.tsx index 251c02e0..d80b4b6e 100644 --- a/apps/postgres-new/components/schema/table-node.tsx +++ b/apps/postgres-new/components/schema/table-node.tsx @@ -119,7 +119,7 @@ export function TableNode({ id, data, targetPosition, sourcePosition }: NodeProp itemHeight )} > - + {/* Animate the old title out and new title in */} @@ -228,7 +228,11 @@ function TableColumn({ animate="show" exit="hidden" > - + )} @@ -243,7 +247,11 @@ function TableColumn({ animate="show" exit="hidden" > - + ) : ( )} @@ -273,7 +281,11 @@ function TableColumn({ animate="show" exit="hidden" > - + )} @@ -288,7 +300,7 @@ function TableColumn({ animate="show" exit="hidden" > - + )} @@ -313,7 +325,7 @@ function TableColumn({ { if (isRenaming) { e.preventDefault() diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx index fa93fcbb..c2f469da 100644 --- a/apps/postgres-new/components/sidebar.tsx +++ b/apps/postgres-new/components/sidebar.tsx @@ -8,6 +8,7 @@ import { Database as DbIcon, Loader, LogOut, + MoreVertical, PackagePlus, Pencil, Trash2, @@ -29,6 +30,13 @@ import { Database } from '~/lib/db' import { cn } from '~/lib/utils' import { useApp } from './app-provider' import { CodeBlock } from './code-block' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from './ui/dropdown-menu' export default function Sidebar() { const { user, signOut } = useApp() @@ -280,20 +288,21 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) { - {database.name ?? 'My database'} -

- {database.name ?? 'My database'} + {/*
*/} + { setIsPopoverOpen(open) if (!open) { @@ -302,24 +311,26 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) { }} open={isPopoverOpen} > - { e.preventDefault() setIsPopoverOpen(true) }} > -
- -
- + /> + - + {isRenaming ? (
) : (
- - - +
)} - - + + ) diff --git a/apps/postgres-new/components/ui/dropdown-menu.tsx b/apps/postgres-new/components/ui/dropdown-menu.tsx index 9da28d51..ff52c617 100644 --- a/apps/postgres-new/components/ui/dropdown-menu.tsx +++ b/apps/postgres-new/components/ui/dropdown-menu.tsx @@ -81,7 +81,7 @@ const DropdownMenuItem = React.forwardRef< Date: Thu, 8 Aug 2024 15:42:32 +0800 Subject: [PATCH 07/24] remove header --- apps/postgres-new/components/layout.tsx | 18 ++++----- apps/postgres-new/components/sidebar.tsx | 39 +++++++++++-------- .../postgres-new/components/user-dropdown.tsx | 32 +++++++++++++++ 3 files changed, 63 insertions(+), 26 deletions(-) create mode 100644 apps/postgres-new/components/user-dropdown.tsx diff --git a/apps/postgres-new/components/layout.tsx b/apps/postgres-new/components/layout.tsx index 577be37e..cfb6cb2e 100644 --- a/apps/postgres-new/components/layout.tsx +++ b/apps/postgres-new/components/layout.tsx @@ -30,16 +30,16 @@ export default function Layout({ children }: LayoutProps) {
)} -
-
-
- {/* TODO: make sidebar available on mobile */} - {!isSmallBreakpoint && } - - {children} - -
+ {/*
*/} + {/*
*/} +
+ {/* TODO: make sidebar available on mobile */} + {!isSmallBreakpoint && } + + {children} +
+ {/*
*/}
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx index c2f469da..d23a2955 100644 --- a/apps/postgres-new/components/sidebar.tsx +++ b/apps/postgres-new/components/sidebar.tsx @@ -37,6 +37,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from './ui/dropdown-menu' +import UserDropdown from './user-dropdown' export default function Sidebar() { const { user, signOut } = useApp() @@ -133,6 +134,7 @@ export default function Sidebar() { )}
)} + {user && (
- - - - - - - -

Sign out

- - +
+ + + + + + + + +

Sign out

+ + +
)} diff --git a/apps/postgres-new/components/user-dropdown.tsx b/apps/postgres-new/components/user-dropdown.tsx new file mode 100644 index 00000000..1fed1e7c --- /dev/null +++ b/apps/postgres-new/components/user-dropdown.tsx @@ -0,0 +1,32 @@ +'use client' + +import { Moon, Sun } from 'lucide-react' +import { Button } from './ui/button' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from './ui/dropdown-menu' +import { useTheme } from 'next-themes' + +export default function UserDropdown() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme('light')}>Light + setTheme('dark')}>Dark + setTheme('system')}>System + + + ) +} From 4437af9d752b56c55f31db41ddf0a99f67a64d42 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Thu, 8 Aug 2024 22:57:01 +0800 Subject: [PATCH 08/24] moar --- apps/postgres-new/components/chat.tsx | 21 +++++++++--- apps/postgres-new/components/layout.tsx | 2 +- .../components/schema/table-node.tsx | 2 +- apps/postgres-new/components/sidebar.tsx | 32 ++++++++----------- .../postgres-new/components/user-dropdown.tsx | 2 +- 5 files changed, 33 insertions(+), 26 deletions(-) diff --git a/apps/postgres-new/components/chat.tsx b/apps/postgres-new/components/chat.tsx index c72ea7a6..a35204f4 100644 --- a/apps/postgres-new/components/chat.tsx +++ b/apps/postgres-new/components/chat.tsx @@ -48,6 +48,7 @@ export function getInitialMessages(tables: TablesData): Message[] { export default function Chat() { const { user, isLoadingUser } = useApp() + const [inputFocusState, setInputFocusState] = useState(false) const { databaseId, @@ -343,7 +344,11 @@ export default function Chat() { )} {/* @@ -366,8 +371,10 @@ export default function Chat() { )}