Fix RBAC role system bugs and improve UX (#446)

* Fix RBAC role system bugs and improve UX

- Fix user list dropdown selection in host sharing
- Fix role sharing permissions to include role-based access
- Fix translation template interpolation for success messages
- Standardize system roles to admin and user only
- Auto-assign user role to new registrations
- Remove blocking confirmation dialogs in modal contexts
- Add missing i18n keys for common actions
- Fix button type to prevent unintended form submissions

* Enhance RBAC system with UI improvements and security fixes

- Move role assignment to Users tab with per-user role management
- Protect system roles (admin/user) from editing and manual assignment
- Simplify permission system: remove Use level, keep View and Manage
- Hide Update button and Sharing tab for view-only/shared hosts
- Prevent users from sharing hosts with themselves
- Unify table and modal styling across admin panels
- Auto-assign system roles on user registration
- Add permission metadata to host interface

* Add empty state message for role assignment

- Display helpful message when no custom roles available
- Clarify that system roles are auto-assigned
- Add noCustomRolesToAssign translation in English and Chinese

* fix: Prevent credential sharing errors for shared hosts

- Skip credential resolution for shared hosts with credential authentication
  to prevent decryption errors (credentials are encrypted per-user)
- Add warning alert in sharing tab when host uses credential authentication
- Inform users that shared users cannot connect to credential-based hosts
- Add translations for credential sharing warning (EN/ZH)

This prevents authentication failures when sharing hosts configured
with credential authentication while maintaining security by keeping
credentials isolated per user.

* feat: Improve rbac UI and fixes some bugs

---------

Co-authored-by: Luke Gustafson <88517757+LukeGus@users.noreply.github.com>
Co-authored-by: LukeGus <bugattiguy527@gmail.com>

src/ui/desktop/user/UserProfile.tsx

@@ -19,6 +19,8 @@ import {
   deleteAccount,
   logoutUser,
   isElectron,
+  getUserRoles,
+  type UserRole,
 } from "@/ui/main-axios.ts";
 import { PasswordReset } from "@/ui/desktop/user/PasswordReset.tsx";
 import { useTranslation } from "react-i18next";
@@ -105,6 +107,7 @@ export function UserProfile({
     useState<boolean>(
       localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
     );
+  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
 
   useEffect(() => {
     fetchUserInfo();
@@ -133,6 +136,15 @@ export function UserProfile({
         is_dual_auth: info.is_dual_auth || false,
         totp_enabled: info.totp_enabled || false,
       });
+
+      // Fetch user roles
+      try {
+        const rolesResponse = await getUserRoles(info.userId);
+        setUserRoles(rolesResponse.roles || []);
+      } catch (rolesErr) {
+        console.error("Failed to fetch user roles:", rolesErr);
+        setUserRoles([]);
+      }
     } catch (err: unknown) {
       const error = err as { response?: { data?: { error?: string } } };
       setError(error?.response?.data?.error || t("errors.loadFailed"));
@@ -304,11 +316,26 @@ export function UserProfile({
                       <Label className="text-gray-300">
                         {t("profile.role")}
                       </Label>
-                      <p className="text-lg font-medium mt-1 text-white">
-                        {userInfo.is_admin
-                          ? t("interface.administrator")
-                          : t("interface.user")}
-                      </p>
+                      <div className="mt-1">
+                        {userRoles.length > 0 ? (
+                          <div className="flex flex-wrap gap-2">
+                            {userRoles.map((role) => (
+                              <span
+                                key={role.roleId}
+                                className="inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-muted/50 text-white border border-border"
+                              >
+                                {t(role.roleDisplayName)}
+                              </span>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-lg font-medium text-white">
+                            {userInfo.is_admin
+                              ? t("interface.administrator")
+                              : t("interface.user")}
+                          </p>
+                        )}
+                      </div>
                     </div>
                     <div>
                       <Label className="text-gray-300">