feat: move Workspaces and Worker Logs to sidebar bottom section

[trepechov]

Summary

• Moves Workspaces and Worker Logs nav items from the main nav list into a dedicated bottom section of the sidebar
• Adds a profile-card dropdown at the very bottom with avatar, user info, Profile Settings, and Logout actions
• Refactors inline SVG path strings into named constants for readability

Details

The sidebar now has a clear three-zone layout:

1. Top — collapse toggle + logo
2. Middle — primary nav (Dashboard, Upload, Editor, Chat, Data Sources)
3. Bottom — utility links (Workspaces, Worker Logs) + profile card with dropdown

The profile dropdown closes on outside click via a mousedown listener scoped to the menu ref.

Trello: https://trello.com/c/tG93L5Yt/85-move-workspaces-and-worker-logs-in-to-bottom-section

Test plan

• Workspaces and Worker Logs appear in the sidebar bottom section (above profile card)
• Profile card shows avatar, name, and email
• Profile dropdown opens on click and closes on outside click
• Profile Settings navigates to /profile-settings
• Logout signs the user out
• Sidebar collapsed state hides labels but still shows icons for bottom items
• Mobile drawer works correctly

🤖 Generated with Claude Code

[trepechov]

Overall the feature is well-structured — icon paths extracted to named constants, proper ARIA attributes on the dropdown, and click-outside/Escape handling are all good. One blocking issue needs to be fixed before merging.

Blocking

Rules of Hooks violation in apps/webapp/app/components/Sidebar.tsx.

The useEffect is called after the early return guard:

if (!userData?.user) return null;
const user = userData.user;

useEffect(() => { ... }, [isProfileMenuOpen]); // ❌ called conditionally

Hooks must be called unconditionally, before any early returns. Move useEffect, useState, and useRef above isActive and the if (!userData?.user) guard. React will throw in development and may misbehave silently in production.

Minor

• bottomQuickActions inside the component — has no dependency on props, state, or context. Move to module scope alongside navItems to avoid recreating the array on every render.

• Duplicated dropdown JSX — the Profile Settings link + Logout button block is copied verbatim for both expanded and collapsed sidebar states (~40 lines each). Extract into a shared variable or local component so future changes stay in one place.

• Missing aria-label on collapsed avatar button — title={user.username} is not reliably announced by screen readers. Add aria-label={user.username} alongside it.