feat(web): add dashboard composer preview

apps/web/src/pages/dashboard-page.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { formatForDisplay } from "@tanstack/react-hotkeys"
 import {
   LexicalActions,
@@ -10,6 +11,37 @@ import {
   LexicalRoot,
 } from "@workspace/lexical"
 import { Button } from "@workspace/ui/components/button"
+import { MessageScrollerProvider } from "@workspace/ui/components/message-scroller"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@workspace/ui/components/card"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+} from "@workspace/ui/components/input-group"
+import { Icon } from "@icones/react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu"
+import {
+  GlobeIcon,
+  ImageIcon,
+  PaperclipIcon,
+  PlusIcon,
+  TelescopeIcon,
+} from "@workspace/ui/components/icon"
+import { Checkbox } from "@workspace/ui/components/checkbox"
 
 const initialEditorHtml = [
   "<h2>Welcome to the Lexical editor</h2>",
@@ -19,9 +51,87 @@ const initialEditorHtml = [
 
 export function DashboardPage() {
   const [html, setHtml] = React.useState(initialEditorHtml)
+  const [portalTarget, setPortalTarget] = React.useState<HTMLElement>()
+
+  React.useEffect(() => {
+    setPortalTarget(document.body)
+  }, [])
 
   return (
     <div className="flex min-w-0 flex-col gap-6 bg-background">
+      {portalTarget &&
+        createPortal(
+          <MessageScrollerProvider>
+            <Card className="fixed inset-y-20 left-1/2 z-1000 flex hidden w-4xl -translate-x-1/2 flex-col rounded-2xl border bg-background shadow-lg">
+              <CardHeader className="shrink-0">
+                <CardTitle>CardTitle</CardTitle>
+                <CardDescription>CardDescription</CardDescription>
+                <CardAction>CardAction</CardAction>
+              </CardHeader>
+              <CardContent className="flex-1"></CardContent>
+              <CardFooter className="shrink-0">
+                <form className="w-full">
+                  <InputGroup>
+                    <div className="h-14 w-full px-3 py-2.5" />
+                    <InputGroupAddon align="block-end" className="gap-8">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger
+                          render={
+                            <InputGroupButton
+                              aria-label="Add files"
+                              type="button"
+                              size="icon-sm"
+                              variant="outline"
+                            >
+                              <PlusIcon />
+                            </InputGroupButton>
+                          }
+                        />
+                        <DropdownMenuContent
+                          align="start"
+                          side="top"
+                          className="w-44"
+                        >
+                          <DropdownMenuItem>
+                            <PaperclipIcon />
+                            Add Photos & Files
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem>
+                            <ImageIcon />
+                            Create Image
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <TelescopeIcon />
+                            Deep Research
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            <GlobeIcon />
+                            Web Search
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                      <label className="ml-auto inline-flex items-center gap-2">
+                        <Checkbox />
+                        按 Enter 发送
+                      </label>
+                      <InputGroupButton
+                        variant="default"
+                        size="icon-sm"
+                        className="rounded-full"
+                      >
+                        <Icon name="huge:arrow-up-01" />
+                        <span className="sr-only">Send</span>
+                      </InputGroupButton>
+                    </InputGroupAddon>
+                  </InputGroup>
+                </form>
+              </CardFooter>
+            </Card>
+          </MessageScrollerProvider>,
+          portalTarget
+        )}
+
       <div>
         <h1 className="text-xl font-medium">Lexical editor</h1>
         <p className="mt-1 text-sm text-muted-foreground">