coderabbit issues solved

Author: Riya922003

package-lock.json

@@ -1,7 +1,7 @@
 "use server"
 
 import { db } from '@/lib/db';
-import { users, document_collaborators } from '@/lib/db/schema';
+import { users, document_collaborators, workspace_members } from '@/lib/db/schema';
 import { eq, and } from 'drizzle-orm';
 import { revalidatePath } from 'next/cache';
 import { broadcastNotesUpdated } from '@/lib/realtime'
@@ -98,6 +98,65 @@ export async function getUserById(userId: string) {
   }
 }
 
+// Search users by prefix (case-insensitive) on email or name. Returns up to 10 results.
+export async function searchUsersByPrefix(prefix: string, documentId?: string) {
+  if (!prefix || prefix.trim().length === 0) return []
+  const q = prefix.trim().toLowerCase()
+  try {
+    const { sql } = await import('drizzle-orm')
+    const pattern = q + '%'
+
+    // If a documentId is provided, try to limit suggestions to users in the same workspace
+    let workspaceId: string | null = null
+    let docAuthorId: string | null = null
+    if (documentId) {
+      try {
+        const docRows = await db.select({ workspace_id: documents.workspace_id, author_id: documents.author_id }).from(documents).where(eq(documents.id, documentId)).limit(1)
+        if (docRows.length > 0) {
+          // @ts-ignore
+          workspaceId = docRows[0].workspace_id || null
+          // @ts-ignore
+          docAuthorId = docRows[0].author_id || null
+        }
+      } catch {}
+    }
+
+    // Build base where clause for prefix matching
+    const whereClause = sql`(LOWER(${users.email}) LIKE ${pattern}) OR (LOWER(${users.name}) LIKE ${pattern})`
+
+    if (workspaceId) {
+      // Fetch workspace member users that match the prefix
+      const rows = await db
+        .select({ id: users.id, name: users.name, email: users.email, image: users.image })
+        .from(users)
+        .leftJoin(workspace_members, eq(workspace_members.user_id, users.id))
+        .where(sql`(${workspace_members.workspace_id} = ${workspaceId}) AND (${whereClause})`)
+        .limit(10)
+
+      // Exclude existing collaborators for the document and the document author
+      if (documentId) {
+        const existing = await db.select({ id: document_collaborators.userId }).from(document_collaborators).where(eq(document_collaborators.documentId, documentId))
+        const excluded = new Set(existing.map((r: any) => r.id))
+        if (docAuthorId) excluded.add(docAuthorId)
+        return (rows as any[]).filter(r => !excluded.has(r.id)).slice(0, 10)
+      }
+
+      return rows
+    }
+
+    // Fallback: global search across users when no workspace context
+    const rows = await db
+      .select({ id: users.id, name: users.name, email: users.email, image: users.image })
+      .from(users)
+      .where(whereClause)
+      .limit(10)
+
+    return rows
+  } catch {
+    return []
+  }
+}
+
 // Return the current user's role for a given document
 export async function getUserRoleForDocument(documentId: string) {
   const session = await getServerSession(topAuthOptions)

src/app/actions/collaborationActions.ts

@@ -4,6 +4,7 @@ import { ClientProviders } from "@/components/ClientProviders";
 import ConditionalHeader from "@/components/ConditionalHeader";
 import ConditionalFooter from "@/components/ConditionalFooter";
 import { Toaster } from "@/components/ui/toaster";
+import BackToTop from '@/components/BackToTop';
 
 export const metadata: Metadata = {
   title: "Keynotes",
@@ -27,6 +28,7 @@ export default function RootLayout({
             <ConditionalFooter />
           </div>
           <Toaster />
+          <BackToTop />
         </ClientProviders>
       </body>
     </html>

src/app/layout.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowUp } from "lucide-react";
+
+export default function BackToTop() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setVisible(window.scrollY > 200);
+    };
+
+    // run on mount
+    onScroll();
+
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const handleClick = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed bottom-6 left-6 z-50">
+      <Button
+        onClick={handleClick}
+        className="rounded-full w-12 h-12 shadow-lg"
+        size="icon"
+        aria-label="Back to top"
+      >
+        <ArrowUp className="h-5 w-5" />
+      </Button>
+    </div>
+  );
+}

src/components/BackToTop.tsx

@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from './ThemeProvider'
 import AuthProvider from './AuthProvider'
+import { SplashProvider } from './SplashProvider'
 
 interface ClientProvidersProps {
   children: React.ReactNode
@@ -12,7 +13,9 @@ export function ClientProviders({ children }: ClientProvidersProps) {
   return (
     <ThemeProvider>
       <AuthProvider>
-        {children}
+        <SplashProvider>
+          {children}
+        </SplashProvider>
       </AuthProvider>
     </ThemeProvider>
   )

src/components/ClientProviders.tsx

@@ -7,7 +7,7 @@ export default function ConditionalFooter() {
   const pathname = usePathname()
 
   // Don't show footer on dashboard or notes pages
-  if (pathname.startsWith('/dashboard') || pathname.startsWith('/notes')) {
+  if (pathname && (pathname.startsWith('/dashboard') || pathname.startsWith('/notes'))) {
     return null
   }
 

src/components/ConditionalFooter.tsx

@@ -7,7 +7,7 @@ export default function ConditionalHeader() {
   const pathname = usePathname()
 
   // Don't show header on notes pages or dashboard
-  if (pathname.startsWith('/notes') || pathname.startsWith('/dashboard')) {
+  if (pathname && (pathname.startsWith('/notes') || pathname.startsWith('/dashboard'))) {
     return null
   }
 

src/components/ConditionalHeader.tsx

@@ -2,8 +2,12 @@
 
 import { ThemeToggleButton } from './ThemeToggleButton'
 import { UserNav } from './UserNav'
+import { Sparkles } from 'lucide-react'
+import { useSplash } from './SplashProvider'
 
 export function Header() {
+  const { enabled, toggle } = useSplash()
+
   return (
     <header className="border-b sticky top-0 z-20 bg-background">
       <div className="flex items-center justify-between px-6 py-4">
@@ -17,6 +21,26 @@ export function Header() {
         </nav>
 
         <div className="flex items-center gap-4">
+          {/* Sparkle toggle placed beside theme toggle */}
+          <div className="relative group">
+            <button
+              onClick={toggle}
+                aria-describedby="splash-tooltip"
+                className={`shrink-0 px-2.5 py-1.5 border-2 rounded-md transition-all duration-200 flex items-center gap-1 ${enabled ? 'border-purple-600 bg-purple-50' : 'border-purple-500 bg-white hover:bg-purple-100'}`}
+                style={{ minWidth: '56px', minHeight: '34px' }}
+              aria-pressed={enabled}
+            >
+              <Sparkles className="w-5 h-5 text-purple-600" />
+            </button>
+            {/* Simple tooltip */}
+            <span
+              id="splash-tooltip"
+              role="status"
+              className="pointer-events-none absolute left-1/2 -translate-x-1/2 -bottom-8 opacity-0 scale-95 transform rounded-md bg-muted/90 text-sm text-muted-foreground px-2 py-1 transition-all duration-150 group-hover:opacity-100"
+            >
+              Toggle splash effect
+            </span>
+          </div>
           <ThemeToggleButton />
           <UserNav />
         </div>

src/components/Header.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+import SplashCursor from './SplashCursor'
+
+type SplashContextType = {
+  enabled: boolean
+  toggle: () => void
+  setEnabled: (v: boolean) => void
+}
+
+const SplashContext = createContext<SplashContextType | undefined>(undefined)
+
+export function SplashProvider({ children }: { children: React.ReactNode }) {
+  const [enabled, setEnabled] = useState(false)
+
+  const toggle = () => setEnabled(e => !e)
+
+  return (
+    <SplashContext.Provider value={{ enabled, toggle, setEnabled }}>
+      {children}
+      {enabled && <SplashCursor />}
+    </SplashContext.Provider>
+  )
+}
+
+export function useSplash() {
+  const ctx = useContext(SplashContext)
+  if (!ctx) throw new Error('useSplash must be used within a SplashProvider')
+  return ctx
+}
+
+export default SplashProvider

src/components/SplashProvider.tsx

@@ -0,0 +1,60 @@
+.star-border-container {
+  display: inline-block;
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.border-gradient-bottom {
+  position: absolute;
+  width: 300%;
+  height: 50%;
+  opacity: 0.7;
+  bottom: -12px;
+  right: -250%;
+  border-radius: 50%;
+  animation: star-movement-bottom linear infinite alternate;
+  z-index: 0;
+}
+
+.border-gradient-top {
+  position: absolute;
+  opacity: 0.7;
+  width: 300%;
+  height: 50%;
+  top: -12px;
+  left: -250%;
+  border-radius: 50%;
+  animation: star-movement-top linear infinite alternate;
+  z-index: 0;
+}
+
+.inner-content {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  /* Let wrapped children control padding, background and border so the host card styles remain intact */
+}
+
+@keyframes star-movement-bottom {
+  0% {
+    transform: translate(0%, 0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-100%, 0%);
+    opacity: 0;
+  }
+}
+
+@keyframes star-movement-top {
+  0% {
+    transform: translate(0%, 0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(100%, 0%);
+    opacity: 0;
+  }
+}