user data

1 files changed, 35 insertions, 8 deletions

diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx
index aff2df8..1df63fe 100644
--- a/frontend/src/components/LeftSidebar.tsx
+++ b/frontend/src/components/LeftSidebar.tsx
@@ -2,9 +2,10 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { useReactFlow } from 'reactflow';
 import { 
   Folder, FileText, Archive, ChevronLeft, ChevronRight, Trash2, MessageSquare, 
-  MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2
+  MoreVertical, Download, Upload, Plus, RefreshCw, Edit3, Loader2, LogOut, User
 } from 'lucide-react';
 import useFlowStore, { type FSItem, type BlueprintDocument, type FileMeta } from '../store/flowStore';
+import { useAuthStore } from '../store/authStore';
 
 interface LeftSidebarProps {
   isOpen: boolean;
@@ -39,6 +40,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
     serializeBlueprint,
     clearBlueprint
   } = useFlowStore();
+  const { user, logout } = useAuthStore();
   const { setViewport, getViewport } = useReactFlow();
   const isDark = theme === 'dark';
   const fileInputRef = useRef<HTMLInputElement | null>(null);
@@ -443,13 +445,38 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
       <div className={`p-3 border-b flex justify-between items-center ${
         isDark ? 'border-gray-700 bg-gray-900' : 'border-gray-200 bg-gray-50'
       }`}>
-        <h2 className={`font-bold text-sm uppercase ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>Workspace</h2>
-        <button 
-          onClick={onToggle}
-          className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}
-        >
-          <ChevronLeft size={16} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
-        </button>
+        <div className="flex items-center gap-2">
+          <h2 className={`font-bold text-sm uppercase ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>Workspace</h2>
+          {user && (
+            <span className={`text-xs px-2 py-0.5 rounded-full ${
+              isDark ? 'bg-gray-700 text-gray-400' : 'bg-gray-200 text-gray-600'
+            }`}>
+              <User size={10} className="inline mr-1" />
+              {user.username}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {user && (
+            <button 
+              onClick={logout}
+              className={`p-1 rounded transition-colors ${
+                isDark 
+                  ? 'hover:bg-red-900/50 text-gray-400 hover:text-red-400' 
+                  : 'hover:bg-red-50 text-gray-500 hover:text-red-500'
+              }`}
+              title="Logout"
+            >
+              <LogOut size={16} />
+            </button>
+          )}
+          <button 
+            onClick={onToggle}
+            className={`p-1 rounded ${isDark ? 'hover:bg-gray-700' : 'hover:bg-gray-200'}`}
+          >
+            <ChevronLeft size={16} className={isDark ? 'text-gray-400' : 'text-gray-500'} />
+          </button>
+        </div>
       </div>
 
       {/* Tabs */}