Added Some Features

apps/backend/index.ts

@@ -276,6 +276,89 @@ app.get("/models", authMiddleware, async (req, res) => {
   });
 });
 
+app.post("/toggle-like", authMiddleware, async (req, res) => {
+  try {
+    const { imageId } = req.body;
+
+    if (!imageId) {
+      res.status(400).json({
+        success: false,
+        error: "Image ID is required",
+      });
+      return;
+    }
+
+    const image = await prismaClient.outputImages.findUnique({
+      where: { id: imageId, userId: req.userId },
+    });
+
+    if (!image) {
+      res.status(404).json({
+        success: false,
+        error: "Image not found",
+      });
+      return;
+    }
+
+    const updatedImage = await prismaClient.outputImages.update({
+      where: { id: imageId },
+      data: {
+        likedImage: image.likedImage === "like" ? "unlike" : "like",
+      },
+    });
+
+    res.json({
+      success: true,
+      message: `Image ${updatedImage.likedImage === "like" ? "liked" : "unliked"}`,
+      likedStatus: updatedImage.likedImage,
+    });
+  } catch (error) {
+    console.error("Error toggling like:", error);
+    res.status(500).json({
+      success: false,
+      error: "Failed to toggle like status",
+    });
+  }
+});
+
+app.get("/liked/bulk", authMiddleware, async (req, res) => {
+  try {
+    const likedImages = await prismaClient.outputImages.findMany({
+      where: {
+        userId: req.userId,
+        likedImage: 'like'
+      },
+      select: {
+        id: true,
+        imageUrl: true,
+        modelId: true,
+        prompt: true,
+        likedImage:true,
+        createdAt: true,
+        model: {
+          select: {
+            name: true
+          }
+        }
+      },
+      orderBy: {
+        createdAt: 'desc'
+      }
+    });
+
+    res.json({
+      success: true,
+      images:likedImages
+    });
+  } catch (error) {
+    console.error("Error fetching liked images:", error);
+    res.status(500).json({
+      success: false,
+      error: "Failed to fetch liked images"
+    });
+  }
+});
+
 app.post("/fal-ai/webhook/train", async (req, res) => {
   console.log("====================Received training webhook====================");
   console.log("Received training webhook:", req.body);

apps/web/app/dashboard/page.tsx

@@ -5,6 +5,7 @@ import { Packs } from "@/components/Packs";
 import { Camera } from "@/components/Camera";
 import { redirect } from "next/navigation";
 import { auth } from "@clerk/nextjs/server";
+import Saved from "@/components/Saved";
 export const dynamic = "force-dynamic";
 
 export default async function DashboardPage() {
@@ -43,6 +44,12 @@ export default async function DashboardPage() {
             >
               Train<span className="md:block hidden pl-1">Model</span>
             </TabsTrigger>
+            <TabsTrigger
+              value="saved"
+              className="data-[state=active]:bg-pink-500/70 backdrop-blur-sm data-[state=active]:text-pink-50 cursor-pointer px-3 py-1.5"
+            >
+              Saved
+            </TabsTrigger>
           </TabsList>
 
           <div className="mt-8 bg-card rounded-lg">
@@ -70,6 +77,12 @@ export default async function DashboardPage() {
             >
               <Train />
             </TabsContent>
+            <TabsContent
+              value="saved"
+              className="mt-0 focus-visible:outline-none"
+            >
+              <Saved />
+            </TabsContent>
           </div>
         </Tabs>
       </div>

apps/web/app/layout.tsx

@@ -5,6 +5,7 @@ import { Appbar } from "@/components/Appbar";
 import { Providers } from "@/components/providers/Providers";
 import { Footer } from "@/components/Footer";
 import Script from "next/script";
+import { Toaster } from "@/components/ui/sonner"
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -44,6 +45,7 @@ export default function RootLayout({
             <Appbar />
             <main className="flex-1">{children}</main>
             <Footer />
+            <Toaster position="bottom-right" richColors closeButton />
           </div>
         </Providers>
       </body>