From 77ed2a70c4bc9c27b207be7f631413f6407afee0 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 11 Mar 2026 17:59:27 +0100
Subject: [PATCH] feat: unified space tooltips and ownership transfer UI

- Use custom Tooltip on all space sidebar items instead of browser title
- Add transferOwnership action to spaceStore (federation-aware)
- Add "Transfer Ownership" context menu item for space owners
- Add TransferOwnershipModal with member search and confirmation
- Add transfer ownership option in SpaceSettings > Danger Zone
---
 .../src/components/layout/SpaceSidebar.tsx    | 199 +++++++++++++++++-
 .../spaceSettingsPanels/OverviewPanel.tsx     | 159 +++++++++++++-
 packages/web/src/stores/spaceStore.ts         |  19 ++
 3 files changed, 362 insertions(+), 15 deletions(-)

diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx
index 31357841..98055e3b 100644
--- a/packages/web/src/components/layout/SpaceSidebar.tsx
+++ b/packages/web/src/components/layout/SpaceSidebar.tsx
@@ -175,11 +175,13 @@ function SpaceContextMenu({ spaceId, x, y, onClose }: { spaceId: string; x: numb
   const setShowDms = useUIStore((s) => s.setShowDms);
   const addToast = useUIStore((s) => s.addToast);
   const navigate = useNavigate();
+  const [showTransferModal, setShowTransferModal] = useState(false);
 
   const isOwner = space?.ownerId === currentUserId;
 
   // Close on click-outside and scroll
   useEffect(() => {
+    if (showTransferModal) return; // Don't close when transfer modal is open
     const handleClickOutside = (e: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
         onClose();
@@ -198,7 +200,7 @@ function SpaceContextMenu({ spaceId, x, y, onClose }: { spaceId: string; x: numb
       document.removeEventListener('scroll', handleScroll, true);
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [onClose]);
+  }, [onClose, showTransferModal]);
 
   if (!space) return null;
 
@@ -215,10 +217,18 @@ function SpaceContextMenu({ spaceId, x, y, onClose }: { spaceId: string; x: numb
     onClose();
   };
 
-  // Viewport-aware clamping
-  const menuWidth = 180;
-  const itemCount = isOwner ? 1 : 2;
-  const menuHeight = itemCount * 32 + 8;
+  if (showTransferModal) {
+    return (
+      <TransferOwnershipModal
+        spaceId={spaceId}
+        onClose={onClose}
+      />
+    );
+  }
+
+  // Viewport-aware clamping — always 2 items (Invite + Transfer or Invite + Leave)
+  const menuWidth = 200;
+  const menuHeight = 2 * 32 + 8;
   const clampedX = Math.min(x, window.innerWidth - menuWidth - 8);
   const clampedY = Math.min(y, window.innerHeight - menuHeight - 8);
 
@@ -237,7 +247,17 @@ function SpaceContextMenu({ spaceId, x, y, onClose }: { spaceId: string; x: numb
         </svg>
         Invite People
       </button>
-      {!isOwner && (
+      {isOwner ? (
+        <button
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-accent-amber hover:bg-accent-amber/10 transition-colors"
+          onClick={() => setShowTransferModal(true)}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" />
+          </svg>
+          Transfer Ownership
+        </button>
+      ) : (
         <button
           className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-accent-rose hover:bg-accent-rose/10 transition-colors"
           onClick={() => {
@@ -261,6 +281,172 @@ function SpaceContextMenu({ spaceId, x, y, onClose }: { spaceId: string; x: numb
   );
 }
 
+function TransferOwnershipModal({ spaceId, onClose }: { spaceId: string; onClose: () => void }) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const space = useSpaceStore((s) => s.spaces.find(sp => sp.id === spaceId));
+  const members = useSpaceStore((s) => s.members);
+  const currentUserId = useAuthStore((s) => s.user?.id);
+  const transferOwnership = useSpaceStore((s) => s.transferOwnership);
+  const addToast = useUIStore((s) => s.addToast);
+
+  const [search, setSearch] = useState('');
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [transferring, setTransferring] = useState(false);
+
+  // Filter members: exclude self, filter by search
+  const filteredMembers = useMemo(() => {
+    const spaceMembers = members.filter(m => m.userId !== currentUserId);
+    if (!search.trim()) return spaceMembers;
+    const q = search.toLowerCase();
+    return spaceMembers.filter(m =>
+      m.user.displayName?.toLowerCase().includes(q) ||
+      m.user.username.toLowerCase().includes(q)
+    );
+  }, [members, currentUserId, search]);
+
+  const selectedMember = selectedUserId ? members.find(m => m.userId === selectedUserId) : null;
+
+  // Close on click-outside and escape
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (selectedUserId) {
+          setSelectedUserId(null);
+        } else {
+          onClose();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose, selectedUserId]);
+
+  if (!space) return null;
+
+  const handleTransfer = async () => {
+    if (!selectedUserId) return;
+    setTransferring(true);
+    try {
+      await transferOwnership(spaceId, selectedUserId);
+      addToast(`Ownership transferred to ${selectedMember?.user.displayName || selectedMember?.user.username}`, 'success', 3000);
+      onClose();
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Failed to transfer ownership', 'warning', 3000);
+    } finally {
+      setTransferring(false);
+    }
+  };
+
+  return ReactDOM.createPortal(
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50">
+      <div
+        ref={modalRef}
+        className="w-[380px] max-h-[480px] bg-surface-overlay rounded-xl border border-white/[0.07] shadow-2xl flex flex-col animate-in fade-in zoom-in-95 duration-150"
+      >
+        {/* Header */}
+        <div className="px-4 pt-4 pb-3 border-b border-white/[0.06]">
+          <h3 className="text-base font-semibold text-txt-primary">Transfer Ownership</h3>
+          <p className="text-xs text-txt-tertiary mt-0.5">
+            Choose a member to become the new owner of <span className="font-medium text-txt-secondary">{space.name}</span>
+          </p>
+        </div>
+
+        {selectedUserId && selectedMember ? (
+          /* Confirm step */
+          <div className="p-4 flex flex-col gap-4">
+            <div className="p-3 rounded-lg bg-accent-amber/10 border border-accent-amber/20">
+              <p className="text-sm text-txt-secondary">
+                Transfer ownership of <span className="font-semibold text-txt-primary">{space.name}</span> to{' '}
+                <span className="font-semibold text-txt-primary">{selectedMember.user.displayName || selectedMember.user.username}</span>?
+              </p>
+              <p className="text-xs text-txt-tertiary mt-1.5">You will become a regular member.</p>
+            </div>
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setSelectedUserId(null)}
+                className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
+                disabled={transferring}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleTransfer}
+                disabled={transferring}
+                className="px-3 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
+              >
+                {transferring ? 'Transferring...' : 'Transfer'}
+              </button>
+            </div>
+          </div>
+        ) : (
+          /* Member list */
+          <>
+            <div className="px-3 pt-3">
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search members..."
+                className="w-full px-3 py-1.5 bg-surface-input rounded text-sm text-txt-primary placeholder-txt-tertiary outline-none focus:ring-1 focus:ring-accent-primary/50"
+                autoFocus
+              />
+            </div>
+            <div className="flex-1 overflow-y-auto p-2 min-h-0">
+              {filteredMembers.length === 0 ? (
+                <p className="text-xs text-txt-tertiary text-center py-4">No members found</p>
+              ) : (
+                filteredMembers.map((member) => {
+                  const avatarUrl = member.user.avatar
+                    ? (member.user.avatar.startsWith('http') ? member.user.avatar : `/api/uploads/${member.user.avatar}`)
+                    : null;
+                  return (
+                    <button
+                      key={member.userId}
+                      onClick={() => setSelectedUserId(member.userId)}
+                      className="w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md hover:bg-white/[0.06] transition-colors"
+                    >
+                      <div className="w-8 h-8 rounded-full bg-surface-input flex-shrink-0 overflow-hidden flex items-center justify-center">
+                        {avatarUrl ? (
+                          <img src={avatarUrl} alt="" className="w-full h-full object-cover" />
+                        ) : (
+                          <span className="text-xs font-bold text-txt-secondary">
+                            {(member.user.displayName || member.user.username).charAt(0).toUpperCase()}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex flex-col items-start min-w-0">
+                        <span className="text-sm text-txt-primary truncate max-w-full">
+                          {member.user.displayName || member.user.username}
+                        </span>
+                        {member.user.displayName && (
+                          <span className="text-[11px] text-txt-tertiary truncate max-w-full">
+                            {member.user.username}
+                          </span>
+                        )}
+                      </div>
+                    </button>
+                  );
+                })
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 export function SpaceSidebar() {
   const spaces = useSpaceStore((s) => s.spaces);
   const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
@@ -381,6 +567,7 @@ export function SpaceSidebar() {
           onClick={() => handleSpaceClick(space.id)}
           onContextMenu={(e) => handleSpaceContextMenu(space.id, e)}
           hasUnread={unreadSpaceIds.has(space.id)}
+          tooltipText={space.name}
         />
       ))}
 
diff --git a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
index 875608a2..39242b1f 100644
--- a/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
+++ b/packages/web/src/components/modals/spaceSettingsPanels/OverviewPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { ImageCropModal } from '../../ui/ImageCropModal';
 import { getSpaceGradient } from '../../../utils/gradients';
 import { useSpaceStore } from '../../../stores/spaceStore';
@@ -47,6 +47,15 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
   const [confirmDelete, setConfirmDelete] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Transfer ownership state
+  const members = useSpaceStore((s) => s.members);
+  const transferOwnership = useSpaceStore((s) => s.transferOwnership);
+  const addToast = useUIStore((s) => s.addToast);
+  const [showTransfer, setShowTransfer] = useState(false);
+  const [transferSearch, setTransferSearch] = useState('');
+  const [transferTargetId, setTransferTargetId] = useState<string | null>(null);
+  const [transferring, setTransferring] = useState(false);
+
   useEffect(() => {
     if (space) {
       setSpaceName(space.name);
@@ -218,6 +227,35 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
     }
   };
 
+  // Transfer ownership logic
+  const transferCandidates = useMemo(() => {
+    const candidates = members.filter(m => m.userId !== currentUser?.id);
+    if (!transferSearch.trim()) return candidates;
+    const q = transferSearch.toLowerCase();
+    return candidates.filter(m =>
+      m.user.displayName?.toLowerCase().includes(q) ||
+      m.user.username.toLowerCase().includes(q)
+    );
+  }, [members, currentUser?.id, transferSearch]);
+
+  const transferTarget = transferTargetId ? members.find(m => m.userId === transferTargetId) : null;
+
+  const handleTransfer = async () => {
+    if (!transferTargetId) return;
+    setTransferring(true);
+    try {
+      await transferOwnership(spaceId, transferTargetId);
+      addToast(`Ownership transferred to ${transferTarget?.user.displayName || transferTarget?.user.username}`, 'success', 3000);
+      setShowTransfer(false);
+      setTransferTargetId(null);
+      setTransferSearch('');
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Failed to transfer ownership', 'warning', 3000);
+    } finally {
+      setTransferring(false);
+    }
+  };
+
   const displayIconSrc = iconPreview ?? (iconFilename === '' ? null : currentIconUrl);
   const displayIconName = space.name;
   const displayBannerSrc = bannerPreview ?? (bannerFilename === '' ? null : currentBannerUrl);
@@ -380,14 +418,117 @@ export function OverviewPanel({ spaceId }: OverviewPanelProps) {
         {isOwner && (
           <div>
             <div className="text-[11px] font-semibold text-txt-danger uppercase tracking-wider mb-1.5">Danger Zone</div>
-            <div className="rounded-lg bg-white/[0.02] p-3.5">
-              <p className="text-xs text-txt-tertiary mb-3">Permanently delete this space and all its data. This cannot be undone.</p>
-              <button
-                onClick={handleDelete}
-                className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
-              >
-                {confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
-              </button>
+            <div className="rounded-lg bg-white/[0.02] p-3.5 space-y-4">
+              {/* Transfer Ownership */}
+              <div>
+                <p className="text-xs text-txt-tertiary mb-3">Transfer ownership to another member. You will become a regular member.</p>
+                {showTransfer ? (
+                  transferTargetId && transferTarget ? (
+                    /* Confirm step */
+                    <div className="space-y-3">
+                      <div className="p-2.5 rounded-lg bg-accent-amber/10 border border-accent-amber/20">
+                        <p className="text-sm text-txt-secondary">
+                          Transfer ownership to{' '}
+                          <span className="font-semibold text-txt-primary">{transferTarget.user.displayName || transferTarget.user.username}</span>?
+                        </p>
+                      </div>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => setTransferTargetId(null)}
+                          className="px-3 py-1.5 text-sm text-txt-secondary hover:text-txt-primary transition-colors"
+                          disabled={transferring}
+                        >
+                          Back
+                        </button>
+                        <button
+                          onClick={handleTransfer}
+                          disabled={transferring}
+                          className="px-3 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
+                        >
+                          {transferring ? 'Transferring...' : 'Transfer'}
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    /* Member picker */
+                    <div className="space-y-2">
+                      <input
+                        type="text"
+                        value={transferSearch}
+                        onChange={(e) => setTransferSearch(e.target.value)}
+                        placeholder="Search members..."
+                        className="w-full px-3 py-1.5 bg-surface-input rounded text-sm text-txt-primary placeholder-txt-tertiary outline-none focus:ring-1 focus:ring-accent-primary/50"
+                        autoFocus
+                      />
+                      <div className="max-h-[160px] overflow-y-auto space-y-0.5">
+                        {transferCandidates.length === 0 ? (
+                          <p className="text-xs text-txt-tertiary text-center py-3">No members found</p>
+                        ) : (
+                          transferCandidates.map((member) => {
+                            const avatarUrl = member.user.avatar
+                              ? (member.user.avatar.startsWith('http') ? member.user.avatar : `/api/uploads/${member.user.avatar}`)
+                              : null;
+                            return (
+                              <button
+                                key={member.userId}
+                                onClick={() => setTransferTargetId(member.userId)}
+                                className="w-full flex items-center gap-2.5 px-2 py-1.5 rounded-md hover:bg-white/[0.06] transition-colors"
+                              >
+                                <div className="w-7 h-7 rounded-full bg-surface-input flex-shrink-0 overflow-hidden flex items-center justify-center">
+                                  {avatarUrl ? (
+                                    <img src={avatarUrl} alt="" className="w-full h-full object-cover" />
+                                  ) : (
+                                    <span className="text-[10px] font-bold text-txt-secondary">
+                                      {(member.user.displayName || member.user.username).charAt(0).toUpperCase()}
+                                    </span>
+                                  )}
+                                </div>
+                                <div className="flex flex-col items-start min-w-0">
+                                  <span className="text-sm text-txt-primary truncate max-w-full">
+                                    {member.user.displayName || member.user.username}
+                                  </span>
+                                  {member.user.displayName && (
+                                    <span className="text-[11px] text-txt-tertiary truncate max-w-full">
+                                      {member.user.username}
+                                    </span>
+                                  )}
+                                </div>
+                              </button>
+                            );
+                          })
+                        )}
+                      </div>
+                      <button
+                        onClick={() => { setShowTransfer(false); setTransferSearch(''); }}
+                        className="text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  )
+                ) : (
+                  <button
+                    onClick={() => setShowTransfer(true)}
+                    className="px-4 py-2 bg-accent-amber hover:bg-accent-amber/80 text-white text-sm font-medium rounded transition-colors"
+                  >
+                    Transfer Ownership
+                  </button>
+                )}
+              </div>
+
+              {/* Divider */}
+              <div className="border-t border-white/[0.05]" />
+
+              {/* Delete Space */}
+              <div>
+                <p className="text-xs text-txt-tertiary mb-3">Permanently delete this space and all its data. This cannot be undone.</p>
+                <button
+                  onClick={handleDelete}
+                  className="px-4 py-2 bg-accent-rose hover:bg-accent-rose/80 text-white text-sm font-medium rounded transition-colors"
+                >
+                  {confirmDelete ? 'Click again to confirm deletion' : 'Delete Space'}
+                </button>
+              </div>
             </div>
           </div>
         )}
diff --git a/packages/web/src/stores/spaceStore.ts b/packages/web/src/stores/spaceStore.ts
index 0caee697..554aef0d 100644
--- a/packages/web/src/stores/spaceStore.ts
+++ b/packages/web/src/stores/spaceStore.ts
@@ -68,6 +68,7 @@ interface SpaceState {
   populateFromReady: (origin: string, spaces: SpaceWithChannelsAndMembers[], folders?: SpaceFolder[], dmChannels?: DmChannel[]) => void;
   addSpaceFromReady: (origin: string, space: SpaceWithChannelsAndMembers) => void;
   removeInstanceSpaces: (origin: string) => void;
+  transferOwnership: (spaceId: string, newOwnerId: string) => Promise<void>;
   findExistingDmForUser: (targetUser: { id: string; homeUserId?: string | null }) => { dm: DmChannel; origin: string } | null;
 }
 
@@ -525,6 +526,24 @@ export const useSpaceStore = create<SpaceState>((set, get) => ({
     }));
   },
 
+  transferOwnership: async (spaceId: string, newOwnerId: string) => {
+    const space = get().spaces.find(s => s.id === spaceId);
+    const origin = (space as TaggedSpace)?._instanceOrigin ?? '';
+    const client = getApiForOrigin(origin);
+    const updated = await client.spaces.transferOwnership(spaceId, newOwnerId);
+    if (origin && updated.icon) {
+      updated.icon = resolveAssetUrl(updated.icon, origin) ?? updated.icon;
+    }
+    if (origin && updated.banner) {
+      updated.banner = resolveAssetUrl(updated.banner, origin) ?? updated.banner;
+    }
+    set((state) => ({
+      spaces: state.spaces.map(s =>
+        s.id === spaceId ? { ...s, ...updated, _instanceOrigin: origin } as TaggedSpace : s
+      ),
+    }));
+  },
+
   findExistingDmForUser: (targetUser) => {
     const { dmChannels, channelOriginMap } = get();
     const me = useAuthStore.getState().user;