From 6901511ff9d1edf5e447700183db225eeb0df3fd Mon Sep 17 00:00:00 2001
From: ahaapple <work@ahaapple.com>
Date: Tue, 31 Dec 2024 11:22:32 +0800
Subject: [PATCH] Add navigation to AI Image generator page

---
 frontend/components/image/image-generator.tsx |  5 ++++-
 .../components/layout/user-account-nav.tsx    |  8 +++----
 frontend/components/sidebar/sidebar-open.tsx  | 22 +++++++++++++++----
 frontend/config.ts                            |  4 ++++
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/components/image/image-generator.tsx b/frontend/components/image/image-generator.tsx
index 4c2a7af3..ccc928b5 100644
--- a/frontend/components/image/image-generator.tsx
+++ b/frontend/components/image/image-generator.tsx
@@ -149,7 +149,10 @@ export function AIImageGenerator() {
     return (
         <div className="space-y-6 w-full max-w-3xl mx-auto flex-grow overflow-auto">
             <div className="space-y-2">
-                <label className="text-sm font-medium">Image Description</label>
+                <label className="text-sm font-medium">
+                    Image Description
+                    <span className="text-red-500 ml-1">*</span>
+                </label>
                 <TextareaAutosize
                     value={prompt}
                     placeholder="Please give some description or keywords for the image"
diff --git a/frontend/components/layout/user-account-nav.tsx b/frontend/components/layout/user-account-nav.tsx
index f788e780..96df5f6b 100644
--- a/frontend/components/layout/user-account-nav.tsx
+++ b/frontend/components/layout/user-account-nav.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { Gem, LayoutDashboard, LogOut, Settings } from 'lucide-react';
+import { Gem, Images, LogOut, Settings } from 'lucide-react';
 import type { User } from 'next-auth';
 import { signOut } from 'next-auth/react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
@@ -50,9 +50,9 @@ export function UserAccountNav({ user }: UserAccountNavProps) {
                 </div>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem asChild>
-                    <Link prefetch={false} href="/dashboard" className="flex items-center space-x-2.5">
-                        <LayoutDashboard className="size-4" />
-                        <p className="text-sm">Dashboard</p>
+                    <Link prefetch={false} href="/images" className="flex items-center space-x-2.5">
+                        <Images className="size-4" />
+                        <p className="text-sm">Images</p>
                     </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
diff --git a/frontend/components/sidebar/sidebar-open.tsx b/frontend/components/sidebar/sidebar-open.tsx
index 2fb0905a..466065e8 100644
--- a/frontend/components/sidebar/sidebar-open.tsx
+++ b/frontend/components/sidebar/sidebar-open.tsx
@@ -2,13 +2,13 @@
 
 import * as React from 'react';
 import { useSidebar } from '@/hooks/use-sidebar';
-import { ArrowRightToLine, CircleHelp, Gem, Plus, Settings } from 'lucide-react';
+import { ArrowRightToLine, CircleHelp, Gem, Image, Plus, Settings } from 'lucide-react';
 import Link from 'next/link';
 import { User } from 'next-auth';
 import { UserAccountNav } from '@/components/layout/user-account-nav';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import LocaleSelect from '@/components/locale-selection';
-import { useNewGenerateUI, useNewSearch } from '@/hooks/use-new-search';
+import { useNewSearch } from '@/hooks/use-new-search';
 import { PageGenUrl } from '@/config';
 
 interface NavBarProps {
@@ -18,7 +18,6 @@ interface NavBarProps {
 export default function SidebarOpen({ user }: NavBarProps) {
     const { toggleSidebar, isSidebarOpen } = useSidebar();
     const handleNewSearch = useNewSearch();
-    const handleNewGenerateUI = useNewGenerateUI();
 
     return (
         <div className="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 flex-col space-y-2 rounded-lg bg-gray-50 dark:bg-gray-700 py-3">
@@ -54,6 +53,21 @@ export default function SidebarOpen({ user }: NavBarProps) {
                         </TooltipContent>
                     </Tooltip>
 
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Link
+                                href="generate-image"
+                                aria-label="AI Image Generator"
+                                className="inline-flex items-center justify-center hover:text-primary hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2 m-2"
+                            >
+                                <Image size={20} strokeWidth={2} className="text-gray-800 dark:text-white" />
+                            </Link>
+                        </TooltipTrigger>
+                        <TooltipContent className="bg-black text-white">
+                            <p>Generate New Image</p>
+                        </TooltipContent>
+                    </Tooltip>
+
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <Link
@@ -66,7 +80,7 @@ export default function SidebarOpen({ user }: NavBarProps) {
                             </Link>
                         </TooltipTrigger>
                         <TooltipContent className="bg-black text-white">
-                            <p>New Generate UI</p>
+                            <p>Generate New UI</p>
                         </TooltipContent>
                     </Tooltip>
 
diff --git a/frontend/config.ts b/frontend/config.ts
index 1f80afe1..9b43cda9 100644
--- a/frontend/config.ts
+++ b/frontend/config.ts
@@ -40,6 +40,10 @@ export const mainNavConfig: MarketingConfig = {
             title: 'AI Search',
             href: '/',
         },
+        {
+            title: 'AI Image',
+            href: '/generate-image',
+        },
         {
             title: 'Pricing',
             href: '/pricing',