Merge pull request #83 from fuzziecoder/codex/fix-loading-issue-cmfb7u

Use public logo URL to avoid binary diff and harden auth loading state

Author: fuzziecoder

src/components/ai/FlexibleAI.tsx

@@ -6,6 +6,7 @@ import { useState, useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useFlexibleAI, type Message as AIMessage } from '@/hooks/useFlexibleAI';
 import { toast } from '@/components/common';
+import { logoUrl } from '@/lib/assets';
 import {
     Send,
     X,
@@ -34,7 +35,7 @@ function MessageBubble({ message }: { message: AIMessage }) {
                 {isUser ? (
                     <User className="w-4 h-4 text-white/70" />
                 ) : (
-                    <img src="/logo.jpg" alt="AI" className="w-6 h-6 rounded-full" />
+                    <img src={logoUrl} alt="AI" className="w-6 h-6 rounded-full" />
                 )}
             </div>
 
@@ -142,7 +143,7 @@ function AIModal({
                 <div className="flex items-center justify-between px-5 py-4 border-b border-white/10 bg-[#111]">
                     <div className="flex items-center gap-3">
                         <div className="relative">
-                            <img src="/logo.jpg" alt="AI" className="w-8 h-8 rounded-lg" />
+                            <img src={logoUrl} alt="AI" className="w-8 h-8 rounded-lg" />
                             <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[#111]" />
                         </div>
                         <div>
@@ -291,7 +292,7 @@ export function FlexibleAI({ collapsed }: FlexibleAIProps) {
                     title="Open Flexible AI"
                 >
                     <div className="relative">
-                        <img src="/logo.jpg" alt="AI" className={`rounded ${collapsed ? 'w-5 h-5' : 'w-6 h-6'}`} />
+                        <img src={logoUrl} alt="AI" className={`rounded ${collapsed ? 'w-5 h-5' : 'w-6 h-6'}`} />
                         <div className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-green-500 rounded-full border border-[hsl(var(--card))]" />
                     </div>
                     {!collapsed && (

src/components/layout/Sidebar.tsx

@@ -2,6 +2,7 @@ import { NavLink, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import { useAuth } from '@/hooks/useAuth';
 import { FlexibleAI } from '@/components/ai';
+import { logoUrl } from '@/lib/assets';
 import {
     LayoutDashboard,
     GitBranch,
@@ -85,7 +86,7 @@ export function Sidebar({ collapsed, onToggle }: SidebarProps) {
                     <div className="h-16 flex items-center justify-between px-4 border-b border-white/10">
                         {!collapsed && (
                             <div className="flex items-center gap-2">
-                                <img src="/logo.jpg" alt="Logo" className="w-8 h-8 rounded" />
+                                <img src={logoUrl} alt="Logo" className="w-8 h-8 rounded" />
                                 <span className="text-xl font-bold text-white zen-dots">FlexiRoaster</span>
                             </div>
                         )}

src/lib/assets.ts

@@ -0,0 +1 @@
+export const logoUrl = `${import.meta.env.BASE_URL}logo.jpg`;

src/pages/Login.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Mail, Lock, Github } from 'lucide-react';
+import { logoUrl } from '@/lib/assets';
 
 export function Login() {
     const [email, setEmail] = useState('');
@@ -50,7 +51,7 @@ export function Login() {
                 {/* Logo */}
                 <div className="text-center mb-8">
                     <div className="flex items-center justify-center gap-3 mb-2">
-                        <img src="/logo.jpg" alt="FlexiRoaster" className="w-12 h-12 rounded" />
+                        <img src={logoUrl} alt="FlexiRoaster" className="w-12 h-12 rounded" />
                         <h1 className="text-3xl font-bold text-white zen-dots">FlexiRoaster</h1>
                     </div>
                     <p className="text-gray-400 mt-0">Pipeline Orchestration Platform</p>

src/pages/Signup.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { Mail, Lock, User, Github } from 'lucide-react';
+import { logoUrl } from '@/lib/assets';
 
 export function Signup() {
     const [email, setEmail] = useState('');
@@ -73,7 +74,7 @@ export function Signup() {
                 {/* Logo */}
                 <div className="text-center mb-8">
                     <div className="flex items-center justify-center gap-3 mb-2">
-                        <img src="/logo.jpg" alt="FlexiRoaster" className="w-12 h-12 rounded" />
+                        <img src={logoUrl} alt="FlexiRoaster" className="w-12 h-12 rounded" />
                         <h1 className="text-3xl font-bold text-white zen-dots">FlexiRoaster</h1>
                     </div>
                     <p className="text-gray-400">Create your account</p>