ui-improvement-v1.md

iu2frl:: the current password change is by clicking the icon with the session countdown, this is not straight forward, I would like a dedicated button

GitHub Copilot: Let me explore the frontend code to understand the current implementation. Now I have a clear picture. I'll:

1. Remove the onClick from SessionBadge (it should just display session info, not open modals)
2. Add a dedicated "Change Password" button in the header (using a KeyRound icon from lucide-react)
3. Update SessionBadge to remove the click handler

Made changes.

Made changes.

Now update SessionBadge to remove the onClick prop:

Made changes.

iu2frl:: @agent Try Again

GitHub Copilot:

Made changes.

Made changes.

Made changes.

Now verify both files are error-free: No errors. Here's a summary of what changed:

• SessionBadge — removed the onClick prop and converted it from a <button> to a plain <div>. It now purely displays the session countdown with no click behaviour.
• Dashboard — added a dedicated Change Password button (🔑 KeyRound icon) between the session badge and the logout button. Clicking it opens the ChangePasswordModal as before, but the entry point is now an explicit, clearly labelled action.

iu2frl:: To improve user experience on small devices, the side menu with the device selection should be collapsible

GitHub Copilot: Let me read the relevant files first. I can see the Dashboard still has the old SessionBadge onClick wiring (the user manually reverted). I'll now implement the collapsible sidebar. The plan:

1. Add a collapsed prop to DeviceList — when collapsed, render only a narrow icon strip with a toggle button
2. Add sidebarOpen state to Dashboard and pass it down, with a toggle button in the header for mobile

Made changes.

Now replace the return block with both collapsed and expanded views:

Made changes.

Now update Dashboard to add the sidebarCollapsed state and wire up the new props:

Made changes.

Made changes.

Now verify both files are clean: No errors. Here's what was changed:

DeviceList.tsx

• Added collapsed and onToggleCollapse props to the interface
• When collapsed (w-12): renders a narrow icon-only strip with a ChevronsRight expand button at the top, then + / refresh buttons, then one Monitor icon per device (with tooltip showing the device name)
• When expanded (w-64): renders the full existing layout, now with a ChevronsLeft collapse button added to the header action row
• The sidebar width transitions smoothly via transition-all duration-200

Dashboard.tsx

• Added sidebarCollapsed state (defaults to false, i.e. expanded)
• Passes collapsed and onToggleCollapse down to DeviceList