logo update

Author: martialziye

frontend/public/assets/images/forge_ai_logo.jpg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90.48 122.88"><title>text-file</title><path d="M35.27.78a3,3,0,0,1,2-.78,1.54,1.54,0,0,1,.47.05h46.2A6.59,6.59,0,0,1,88.56,2a6.52,6.52,0,0,1,1.92,4.64v109.7a6.57,6.57,0,0,1-6.56,6.56H6.67a6.57,6.57,0,0,1-6.56-6.56v-78A3.07,3.07,0,0,1,0,37.56a3.19,3.19,0,0,1,1-2.24L34.9,1a1.5,1.5,0,0,1,.26-.21ZM84.65,6.62a.5.5,0,0,0-.21-.47A.67.67,0,0,0,84,5.94H40.22V31.62a8.89,8.89,0,0,1-8.91,8.91H6.1v75.79a.58.58,0,0,0,.2.47.69.69,0,0,0,.47.21H84a.58.58,0,0,0,.47-.21.73.73,0,0,0,.21-.47V6.62Zm-62,94.73a2.64,2.64,0,0,1,0-5.28h28a2.64,2.64,0,0,1,0,5.28Zm0-17.75a2.64,2.64,0,0,1,0-5.28H65.46a2.64,2.64,0,0,1,0,5.28Zm0-17.76a2.64,2.64,0,0,1,0-5.28H72a2.64,2.64,0,0,1,0,5.28Zm11.7-34.22V10.11L10.11,34.64h21.2a3.16,3.16,0,0,0,2.13-.88,3.06,3.06,0,0,0,.89-2.14Z"/></svg>

frontend/public/assets/images/forge_ai_logo.png

@@ -1,11 +1,7 @@
 import { Link } from "@tanstack/react-router"
 
-import { useTheme } from "@/components/theme-provider"
 import { cn } from "@/lib/utils"
-import icon from "/assets/images/fastapi-icon.svg"
-import iconLight from "/assets/images/fastapi-icon-light.svg"
-import logo from "/assets/images/fastapi-logo.svg"
-import logoLight from "/assets/images/fastapi-logo-light.svg"
+import logo from "/assets/images/forge_ai_logo.png"
 
 interface LogoProps {
   variant?: "full" | "icon" | "responsive"
@@ -18,38 +14,39 @@ export function Logo({
   className,
   asLink = true,
 }: LogoProps) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-
-  const fullLogo = isDark ? logoLight : logo
-  const iconLogo = isDark ? iconLight : icon
-
   const content =
     variant === "responsive" ? (
       <>
         <img
-          src={fullLogo}
-          alt="FastAPI"
+          src={logo}
+          alt="Forge AI"
           className={cn(
             "h-6 w-auto group-data-[collapsible=icon]:hidden",
             className,
           )}
         />
-        <img
-          src={iconLogo}
-          alt="FastAPI"
+        <span
           className={cn(
-            "size-5 hidden group-data-[collapsible=icon]:block",
-            className,
+            "hidden size-5 overflow-hidden rounded-sm group-data-[collapsible=icon]:inline-flex",
           )}
-        />
+        >
+          <img
+            src={logo}
+            alt="Forge AI"
+            className={cn("h-full w-full object-cover object-left", className)}
+          />
+        </span>
       </>
+    ) : variant === "full" ? (
+      <img src={logo} alt="Forge AI" className={cn("h-6 w-auto", className)} />
     ) : (
-      <img
-        src={variant === "full" ? fullLogo : iconLogo}
-        alt="FastAPI"
-        className={cn(variant === "full" ? "h-6 w-auto" : "size-5", className)}
-      />
+      <span className={cn("inline-flex size-5 overflow-hidden rounded-sm")}>
+        <img
+          src={logo}
+          alt="Forge AI"
+          className={cn("h-full w-full object-cover object-left", className)}
+        />
+      </span>
     )
 
   if (!asLink) {

frontend/public/assets/images/text-file-icon

@@ -1,3 +1,4 @@
+import { Link } from "@tanstack/react-router"
 import {
   Briefcase,
   FileText,
@@ -9,11 +10,14 @@ import {
 
 import { SidebarAppearance } from "@/components/Common/Appearance"
 import { Logo } from "@/components/Common/Logo"
+import { Button } from "@/components/ui/button"
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
+  SidebarTrigger,
+  useSidebar,
 } from "@/components/ui/sidebar"
 import useAuth from "@/hooks/useAuth"
 import { type Item, Main } from "./Main"
@@ -29,15 +33,45 @@ const baseItems: Item[] = [
 
 export function AppSidebar() {
   const { user: currentUser } = useAuth()
+  const { state, toggleSidebar } = useSidebar()
 
   const items = currentUser?.is_superuser
     ? [...baseItems, { icon: Users, title: "Admin", path: "/admin" }]
     : baseItems
 
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="px-4 py-6 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:items-center">
-        <Logo variant="responsive" />
+      <SidebarHeader className="px-3 py-4">
+        <div className="flex items-center justify-between gap-2 group-data-[collapsible=icon]:justify-center">
+          {state === "collapsed" ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="size-9 rounded-xl"
+              onClick={toggleSidebar}
+              aria-label="Open sidebar"
+              title="Open sidebar"
+            >
+              <Logo variant="icon" asLink={false} />
+            </Button>
+          ) : (
+            <>
+              <Link
+                to="/"
+                className="inline-flex items-center rounded-[var(--radius-control)] px-1 py-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Logo variant="full" asLink={false} />
+                <span className="sr-only">Go to dashboard</span>
+              </Link>
+              <SidebarTrigger
+                className="text-muted-foreground hover:text-foreground size-9 rounded-xl"
+                aria-label="Collapse sidebar"
+                title="Collapse sidebar"
+              />
+            </>
+          )}
+        </div>
       </SidebarHeader>
       <SidebarContent>
         <Main items={items} />

frontend/src/components/Common/Logo.tsx

@@ -25,7 +25,7 @@ function Layout() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4 md:hidden">
           <SidebarTrigger className="-ml-1 text-muted-foreground" />
         </header>
         <main className="flex-1 p-6 md:p-8">