added features and fixes

web/src/components/UserProfileModal.tsx

@@ -1,5 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useAuthStore, type PublicProfile } from '../stores/auth.ts';
+import { useServerStore } from '../stores/server.ts';
+import { useMemberStore } from '../stores/member.ts';
+import { usePermissions } from '../lib/usePermissions.ts';
+import { MemberRoleAssign } from './MemberRoleAssign.tsx';
 
 interface UserProfileModalProps {
   userId: string;
@@ -9,9 +13,44 @@ interface UserProfileModalProps {
 export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
   const getPublicProfile = useAuthStore((s) => s.getPublicProfile);
   const blockUser = useAuthStore((s) => s.blockUser);
+  const currentUser = useAuthStore((s) => s.user);
+  const activeServerId = useServerStore((s) => s.activeServerId);
   const [profile, setProfile] = useState<PublicProfile | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const isSelf = currentUser?.id === userId;
+  const { isOwner, canManageServer, canChangeNickname, canManageNicknames } = usePermissions(activeServerId);
+  const canEditNickname = isOwner || canManageServer || (isSelf ? canChangeNickname : canManageNicknames);
+
+  const membersByServer = useMemberStore((s) => s.membersByServer);
+  const serverMembers = activeServerId ? membersByServer[activeServerId] || [] : [];
+  const memberData = serverMembers.find((m) => m.id === userId);
+  const currentNickname = memberData?.nickname || '';
+
+  const setMemberNickname = useMemberStore((s) => s.setMemberNickname);
+
+  const [nickname, setNickname] = useState(currentNickname);
+  const [isEditingNickname, setIsEditingNickname] = useState(false);
+  const [savingNickname, setSavingNickname] = useState(false);
+
+  useEffect(() => {
+    setNickname(currentNickname);
+  }, [currentNickname]);
+
+  const handleSaveNickname = async () => {
+    if (!activeServerId) return;
+    setSavingNickname(true);
+    setError(null);
+    try {
+      await setMemberNickname(activeServerId, userId, nickname.trim());
+      setIsEditingNickname(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save nickname');
+    } finally {
+      setSavingNickname(false);
+    }
+  };
+
   useEffect(() => {
     getPublicProfile(userId).then(setProfile).catch(setError);
   }, [userId, getPublicProfile]);
@@ -40,10 +79,54 @@ export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
                 <div className="mt-12">
                   <div className="flex items-center gap-2">
                     <span className={`w-2 h-2 rounded-full ${statusColor}`} />
-                    <span className="text-gb-fg font-bold">{profile.display_name || profile.username}</span>
+                    <span className="text-gb-fg font-bold">{currentNickname || profile.display_name || profile.username}</span>
                   </div>
                   <div className="text-gb-fg-s text-xs">@{profile.username}</div>
                   {profile.pronouns && <div className="text-gb-fg-t text-[10px]">{profile.pronouns}</div>}
+                  {activeServerId && (
+                    <div className="text-[10px] font-mono mt-1 flex items-center gap-1.5">
+                      <span className="text-gb-fg-t">NICKNAME:</span>
+                      {isEditingNickname ? (
+                        <div className="flex items-center gap-1">
+                          <input
+                            type="text"
+                            value={nickname}
+                            onChange={(e) => setNickname(e.target.value)}
+                            placeholder="no nickname"
+                            className="bg-gb-bg-t text-gb-fg px-1 py-0.5 text-[10px] outline-none border border-gb-orange max-w-[120px]"
+                          />
+                          <button
+                            onClick={handleSaveNickname}
+                            disabled={savingNickname}
+                            className="text-gb-green hover:underline font-bold"
+                          >
+                            [SAVE]
+                          </button>
+                          <button
+                            onClick={() => {
+                              setNickname(currentNickname);
+                              setIsEditingNickname(false);
+                            }}
+                            className="text-gb-fg-f hover:underline"
+                          >
+                            [X]
+                          </button>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <span className="text-gb-fg-s">{currentNickname || '[NONE]'}</span>
+                          {canEditNickname && (
+                            <button
+                              onClick={() => setIsEditingNickname(true)}
+                              className="text-gb-aqua hover:underline"
+                            >
+                              [EDIT]
+                            </button>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
                 </div>
               </div>
               {profile.tagline && <div className="text-gb-fg text-sm mb-2 italic">"{profile.tagline}"</div>}
@@ -67,6 +150,12 @@ export function UserProfileModal({ userId, onClose }: UserProfileModalProps) {
                   ))}
                 </div>
               )}
+              {activeServerId && (
+                <div className="mb-4 mt-2">
+                  <div className="text-xs text-gb-fg-t font-mono mb-1">{'>'} ROLES:</div>
+                  <MemberRoleAssign serverId={activeServerId} member={profile as any} />
+                </div>
+              )}
               <div className="flex justify-end gap-2">
                 <button onClick={onClose} className="text-xs text-gb-fg-f hover:text-gb-orange font-mono">[CLOSE]</button>
                 <button