Merge pull request #11 from jasonMPM/logo

Add files via upload

frontend/src/App.jsx

@@ -20,7 +20,6 @@ export default function App() {
       .catch(() => setLoading(false))
   }, [])
 
-  // Global keyboard shortcuts
   useEffect(() => {
     const handler = (e) => {
       if (['INPUT','TEXTAREA','SELECT'].includes(e.target.tagName)) return
@@ -41,10 +40,34 @@ export default function App() {
         <ProjectList onRegisterNewProject={fn => { newProjectFn.current = fn }} />
       </aside>
 
-      {/* Sidebar toggle tab */}
-      <button onClick={toggleSidebar} title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar  [B]`}
-        className={`absolute top-4 z-30 bg-surface-elevated border border-surface-border hover:border-gold/50 text-text-muted hover:text-gold rounded-r-lg px-1 py-3 transition-all duration-300 text-xs ${sidebarOpen ? 'left-72' : 'left-0'}`}>
-        {sidebarOpen ? '◀' : '▶'}
+      {/* Sidebar toggle — arrow when open, mini logo when collapsed */}
+      <button
+        onClick={toggleSidebar}
+        title={`${sidebarOpen ? 'Collapse' : 'Expand'} sidebar  [B]`}
+        className={`absolute top-0 z-30 flex flex-col items-center justify-center
+          border-r border-b border-surface-border bg-surface-raised
+          hover:border-gold/40 transition-all duration-300
+          ${sidebarOpen
+            ? 'w-6 h-10 top-4 rounded-r-lg border-l-0 hover:bg-surface-elevated'
+            : 'w-14 h-14 top-0 rounded-br-xl border-l-0 hover:bg-surface-elevated/80'
+          }`}
+        style={{ left: sidebarOpen ? 'calc(var(--sidebar-w, 18rem))' : 0 }}
+      >
+        {sidebarOpen ? (
+          <span className="text-text-muted hover:text-gold text-xs leading-none">◀</span>
+        ) : (
+          <div className="flex flex-col items-center gap-0.5">
+            <img
+              src="/logo.png"
+              alt="FabDash"
+              className="w-8 h-8 object-contain rounded"
+              onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block' }}
+            />
+            {/* Fallback if logo not yet placed */}
+            <span className="text-gold text-[10px] font-black tracking-widest hidden">FD</span>
+            <span className="text-text-muted/50 text-[8px] mt-0.5">▶</span>
+          </div>
+        )}
       </button>
 
       {/* Main content */}

frontend/src/components/Projects/ProjectList.jsx

@@ -8,10 +8,10 @@ import useUIStore from '../../store/useUIStore'
 import { deleteProject } from '../../api/projects'
 
 export default function ProjectList({ onRegisterNewProject }) {
-  const { projects, removeProject }         = useProjectStore()
-  const { sidebarTab, setSidebarTab }       = useUIStore()
-  const [showModal, setShowModal]           = useState(false)
-  const [editing,   setEditing]             = useState(null)
+  const { projects, removeProject }   = useProjectStore()
+  const { sidebarTab, setSidebarTab } = useUIStore()
+  const [showModal, setShowModal]     = useState(false)
+  const [editing,   setEditing]       = useState(null)
 
   useEffect(() => { onRegisterNewProject?.(() => setShowModal(true)) }, [onRegisterNewProject])
 
@@ -25,10 +25,22 @@ export default function ProjectList({ onRegisterNewProject }) {
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-surface-border flex-shrink-0">
-        <h1 className="text-gold font-bold text-lg tracking-widest uppercase">FabDash</h1>
-        <Button size="sm" onClick={() => setShowModal(true)}>+ Project</Button>
+
+      {/* Header — logo + wordmark + new project button */}
+      <div className="flex items-center gap-2.5 px-3 py-2.5 border-b border-surface-border flex-shrink-0 pl-10">
+        <img
+          src="/logo.png"
+          alt="FabDash logo"
+          className="w-8 h-8 object-contain rounded flex-shrink-0"
+          onError={e => { e.target.style.display = 'none' }}
+        />
+        <div className="flex flex-col leading-tight min-w-0">
+          <span className="text-gold font-black text-sm tracking-widest uppercase">FabDash</span>
+          <span className="text-text-muted/50 text-[9px] tracking-wide">Fabrication Dashboard</span>
+        </div>
+        <div className="ml-auto flex-shrink-0">
+          <Button size="sm" onClick={() => setShowModal(true)}>+ Project</Button>
+        </div>
       </div>
 
       {/* Tab toggle */}
@@ -73,9 +85,9 @@ export default function ProjectList({ onRegisterNewProject }) {
         )}
       </div>
 
-      {/* Keyboard shortcuts legend */}
+      {/* Keyboard shortcut legend */}
       <div className="flex-shrink-0 border-t border-surface-border px-4 py-2 flex flex-wrap gap-x-3 gap-y-1">
-        {[['N','New project'],['B','Toggle sidebar'],['←→','Navigate'],['T','Today']].map(([key, desc]) => (
+        {[['N','New'],['B','Sidebar'],['← →','Navigate'],['T','Today']].map(([key, desc]) => (
           <span key={key} className="flex items-center gap-1 text-[10px] text-text-muted/50">
             <kbd className="bg-surface-border px-1 py-0.5 rounded text-[9px] font-mono">{key}</kbd>
             {desc}