add hub menagment functions

client/src/components/UserBar.jsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import { useApp } from '../context/AppContext'
 import { colorToCss } from '../utils/color'
 
@@ -16,13 +17,13 @@ export default function UserBar() {
       <span className="text-sm font-medium text-gray-200 truncate flex-1">
         {user?.name ?? '…'}
       </span>
-      <button
-        title="Settings (coming soon)"
-        disabled
-        className="text-gray-600 cursor-not-allowed text-base px-1"
+      <Link
+        to="/settings"
+        title="Settings"
+        className="text-gray-400 hover:text-gray-200 transition-colors text-base px-1"
       >
         ⚙
-      </button>
+      </Link>
     </div>
   )
 }