feat(app): add flowbox

.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.idea
+
 # dependencies
 /node_modules
 /.pnp

components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

drizzle.config.ts

@@ -1,11 +1,11 @@
-import { type Config } from "drizzle-kit";
+import { type Config } from 'drizzle-kit'
 
-import { env } from "@/env.mjs";
+import { env } from '@/env.mjs'
 
 export default {
-  schema: "./src/server/db/schema.ts",
-  driver: "pg",
+  schema: './src/server/db/schema.ts',
+  driver: 'pg',
   dbCredentials: {
-    connectionString: env.DATABASE_URL,
+    connectionString: env.DATABASE_URL
   }
-} satisfies Config;
+} satisfies Config

package.json

@@ -8,7 +8,9 @@
     "db:studio": "dotenv drizzle-kit studio",
     "dev": "next dev",
     "lint": "next lint",
-    "start": "next start"
+    "lint:fix": "next lint --fix",
+    "start": "next start",
+    "format": "prettier --write \"**/*.{ts,tsx,md,json}\" && bun run lint:fix"
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^0.3.2",
@@ -58,6 +60,7 @@
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
     "@tiptap/suggestion": "^2.1.12",
+    "@tldraw/tldraw": "2.0.0-alpha.17",
     "@trpc/client": "^10.43.0",
     "@trpc/next": "^10.43.0",
     "@trpc/react-query": "^10.43.0",
@@ -86,6 +89,7 @@
     "tailwindcss-animate": "^1.0.7",
     "throttle-debounce": "^5.0.0",
     "ts-pattern": "^5.0.5",
+    "unique-names-generator": "^4.7.1",
     "ws": "^8.14.2",
     "zod": "^3.22.4",
     "zustand": "^4.4.3"
@@ -104,7 +108,7 @@
     "eslint-config-next": "^13.5.6",
     "mysql2": "^3.6.1",
     "postcss": "^8.4.27",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6"

src/app/api/auth/[...nextauth]/route.ts

@@ -1,7 +1,7 @@
-import NextAuth from "next-auth";
+import NextAuth from 'next-auth'
 
-import { authOptions } from "@/server/auth";
+import { authOptions } from '@/server/auth'
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const handler = NextAuth(authOptions);
-export { handler as GET, handler as POST };
+const handler = NextAuth(authOptions)
+export { handler as GET, handler as POST }

src/app/api/completion/route.ts

@@ -0,0 +1,27 @@
+import OpenAI from 'openai'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+import { env } from '@/env.mjs'
+
+const openai = new OpenAI({
+  apiKey: env.OPENAI_API_KEY,
+  baseURL: env.OPENAI_BASE_URL
+})
+
+export const runtime = 'edge'
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json()
+
+  const content = 'Write one paragraph for given prompt: ' + prompt
+
+  const response = await openai.chat.completions.create({
+    model: env.OPENAI_MODEL,
+    stream: true,
+    messages: [{ role: 'user', content }],
+    max_tokens: 2048
+  })
+
+  const stream = OpenAIStream(response as never)
+
+  return new StreamingTextResponse(stream)
+}

src/app/api/trpc/[trpc]/route.ts

@@ -1,24 +1,24 @@
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import { type NextRequest } from "next/server";
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { type NextRequest } from 'next/server'
 
-import { env } from "@/env.mjs";
-import { appRouter } from "@/server/api/root";
-import { createTRPCContext } from "@/server/api/trpc";
+import { env } from '@/env.mjs'
+import { appRouter } from '@/server/api/root'
+import { createTRPCContext } from '@/server/api/trpc'
 
 const handler = (req: NextRequest) =>
   fetchRequestHandler({
-    endpoint: "/api/trpc",
+    endpoint: '/api/trpc',
     req,
     router: appRouter,
     createContext: () => createTRPCContext({ req }),
     onError:
-      env.NODE_ENV === "development"
+      env.NODE_ENV === 'development'
         ? ({ path, error }) => {
             console.error(
-              `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
-            );
+              `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`
+            )
           }
-        : undefined,
-  });
+        : undefined
+  })
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST }

src/app/channels/[channelId]/page.tsx

@@ -1,32 +1,37 @@
-
-
-import { Navbar } from "@/components/navbar";
-import { Button } from "@/components/ui/button";
-import { api } from "@/trpc/server";
-import { EditorForm } from "@/components/forms/editor-form";
-import { NotesList } from "@/components/notes-list";
-import { ConfirmDeleteNoteDialog } from "@/components/confirm-delete-note-dialog";
+import { Navbar } from '@/components/layout/navbar'
+import { Button } from '@/components/ui/button'
+import { api } from '@/trpc/server'
+import { NotesList } from '@/components/channels/notes-list'
+import { QuickEditorForm } from '@/components/notes-create/quick-editor-form'
 
 const ChannelPage = async ({ params }: { params: { channelId: string } }) => {
-  const { channel } = await api.channels.get.query({ id: params.channelId })
+  const { channel, notes } = await api.channels.get.query({
+    id: params.channelId
+  })
   if (!channel) return null
   return (
-    <div className="flex flex-col flex-1">
-      <ConfirmDeleteNoteDialog />
-      <Navbar title={channel.name} addon={<Button size="sm" variant="secondary">Share</Button>} />
-      <div className="container flex flex-col flex-1 overflow-y-auto">
-        <div className="flex flex-col justify-end flex-1 max-w-[48rem] w-full mx-auto">
-          <NotesList channelId={params.channelId} />
+    <div className="flex flex-1 flex-col">
+      <Navbar
+        title={channel.name}
+        addon={
+          <Button size="sm" variant="secondary">
+            Share
+          </Button>
+        }
+      />
+      <div className="container flex flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto flex w-full max-w-[48rem] flex-1 flex-col justify-end">
+          <NotesList notes={notes} />
         </div>
-        <div className="px-4 sticky bottom-0">
-          <div className="bg-background rounded-t-lg">
-            <EditorForm />
-            <div className="text-right text-xs p-1 text-zinc-500">&nbsp;</div>
+        <div className="sticky bottom-0 px-4">
+          <div className="rounded-t-lg bg-background">
+            <QuickEditorForm />
+            <div className="p-1 text-right text-xs text-zinc-500">&nbsp;</div>
           </div>
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default ChannelPage

src/app/channels/layout.tsx

@@ -1 +1 @@
-export { DashboardLayout as default } from '@/components/dashboard-layout'
+export { DashboardLayout as default } from '@/components/layout/dashboard-layout'

src/app/channels/page.tsx

@@ -1,16 +1,31 @@
-
-
-import { Navbar } from "@/components/navbar";
+import { Navbar } from '@/components/layout/navbar'
+import { api } from '@/trpc/server'
+import { NoteRenderer } from '@/components/channels/note-renderer'
+import { Button } from '@/components/ui/button'
+import { BellIcon } from 'lucide-react'
 
 const HomePage = async () => {
+  const flowBox = await api.notes.index.query()
+  const bookmarkedNotes = await api.bookmarks.index.query()
   return (
-    <div className="flex flex-col flex-1 gap-8">
-      <Navbar title="Dashboard" />
+    <div className="flex flex-1 flex-col gap-8">
+      <Navbar title="Dashboard" addon={<Button size="sm" variant="secondary"><BellIcon size={16} /></Button>} />
       <div className="container flex flex-col gap-4">
+        <h2 className="text-2xl font-semibold">FlowBox</h2>
+        <div className="grid grid-cols-2 gap-4">
+          {flowBox.map((note) => (
+            <NoteRenderer key={note.id} note={note} short />
+          ))}
+        </div>
         <h2 className="text-2xl font-semibold">Bookmarks</h2>
+        <div className="grid grid-cols-2 gap-4">
+          {bookmarkedNotes.map((note) => (
+            <NoteRenderer key={note.id} note={note} short />
+          ))}
+        </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default HomePage

src/app/layout.tsx

@@ -1,39 +1,35 @@
-import "@/app/globals.css";
+import '@/app/globals.css'
 import 'focus-visible'
 
-import { Inter } from "next/font/google";
-import { headers } from "next/headers";
+import { Inter } from 'next/font/google'
+import { headers } from 'next/headers'
 
-import { TRPCReactProvider } from "@/trpc/react";
-import { Providers } from "@/components/providers";
+import { TRPCReactProvider } from '@/trpc/react'
+import { Providers } from '@/components/providers'
 
 const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
+  subsets: ['latin'],
+  variable: '--font-sans'
+})
 
 export const metadata = {
-  title: "Zenote",
-  description: "Tap into a zen feeling with your notes.",
-  icons: [{ rel: "icon", url: "/favicon.ico" }],
-};
+  title: 'Zenote',
+  description: 'Tap into a zen feeling with your notes.',
+  icons: [{ rel: 'icon', url: '/favicon.ico' }]
+}
 
-const RootLayout = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
-      <body className={`font-sans ${inter.variable} flex flex-row min-h-screen max-h-[100vh]`}>
+      <body
+        className={`font-sans ${inter.variable} flex max-h-[100vh] min-h-screen flex-row`}
+      >
         <TRPCReactProvider headers={headers()}>
-          <Providers>
-            {children}
-          </Providers>
+          <Providers>{children}</Providers>
         </TRPCReactProvider>
       </body>
     </html>
-  );
+  )
 }
 
 export default RootLayout

src/app/notes/[noteId]/page.tsx

@@ -1,13 +1,9 @@
-import { DrawingEdit } from "@/components/drawing/edit"
-import { api } from "@/trpc/server"
-import { match } from "ts-pattern"
+import { FullEditorForm } from '@/components/notes-update/full-editor-form'
+import { api } from '@/trpc/server'
 
 const NotePage = async ({ params }: { params: { noteId: string } }) => {
   const note = await api.notes.get.query({ id: params.noteId })
-  console.log('>>>N', note)
-  return (
-    match(note).with({ type: 'drawing' }, (note) => <DrawingEdit note={note} />).otherwise(() => null)
-  )
+  return <FullEditorForm note={note} />
 }
 
 export default NotePage

src/app/notes/layout.tsx

@@ -1 +1 @@
-export { DashboardLayout as default } from '@/components/dashboard-layout'
+export { DashboardLayout as default } from '@/components/layout/dashboard-layout'

src/app/page.tsx

@@ -1,14 +1,14 @@
-import { SignInForm } from "@/components/forms/sign-in-form"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { getServerAuthSession } from "@/server/auth"
-import { redirect } from "next/navigation"
+import { SignInForm } from '@/components/users/sign-in-form'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { getServerAuthSession } from '@/server/auth'
+import { redirect } from 'next/navigation'
 
 const SignInPage = async () => {
   const session = await getServerAuthSession()
   if (session?.user.email) redirect('/channels')
   return (
     <div className="flex flex-1 items-center justify-center">
-      <Card className="max-w-[32rem] w-full">
+      <Card className="w-full max-w-[32rem] bg-zinc-900">
         <CardHeader>
           <CardTitle>Sign In</CardTitle>
         </CardHeader>

src/app/users/layout.tsx

@@ -0,0 +1 @@
+export { DashboardLayout as default } from '@/components/layout/dashboard-layout'