From 354b27e40b1a537c49bcb61b855c347ec5e2cff5 Mon Sep 17 00:00:00 2001
From: Marcel <79279756+aofn@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:42:15 +0100
Subject: [PATCH 1/2] feat: display  homeserver next to space names inside
 /explore

---
 pages/explore/TreePath.js      | 14 ++++++++++++--
 pages/explore/[[...roomId]].js | 34 +++++++++++++++++++++++++++-------
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/pages/explore/TreePath.js b/pages/explore/TreePath.js
index 2ebba116..c76e53b5 100644
--- a/pages/explore/TreePath.js
+++ b/pages/explore/TreePath.js
@@ -11,7 +11,7 @@ import {
     BreadcrumbSeparator,
 } from '@/components/UI/shadcn/Breadcrumb';
 
-const TreePath = ({ selectedSpaceChildren }) => {
+const TreePath = ({ selectedSpaceChildren, federated }) => {
     return (
         <>
             <Breadcrumb className="overflow-hidden">
@@ -36,7 +36,14 @@ const TreePath = ({ selectedSpaceChildren }) => {
                                                         asChild
                                                         className="grid w-full grid-flow-col justify-start gap-2"
                                                     >
-                                                        <Link href={`/explore/${roomId}`}>{path[0].name}</Link>
+                                                        <Link href={`/explore/${roomId}`}>
+                                                            {path[0].name}
+                                                            {federated && (
+                                                                <span className="ml-2 overflow-hidden text-ellipsis text-muted">
+                                                                    {federated}
+                                                                </span>
+                                                            )}
+                                                        </Link>
                                                     </DropdownMenuItem>
                                                 );
                                             }
@@ -59,6 +66,9 @@ const TreePath = ({ selectedSpaceChildren }) => {
                                         <BreadcrumbLink asChild>
                                             <Link disabled href={`/explore/${roomId}`}>
                                                 {path[0].name}
+                                                {federated && (
+                                                    <span className="ml-2 overflow-hidden text-ellipsis text-muted">{federated}</span>
+                                                )}
                                             </Link>
                                         </BreadcrumbLink>
                                     </BreadcrumbItem>
diff --git a/pages/explore/[[...roomId]].js b/pages/explore/[[...roomId]].js
index 811aa87f..5eec52fb 100644
--- a/pages/explore/[[...roomId]].js
+++ b/pages/explore/[[...roomId]].js
@@ -150,6 +150,12 @@ export default function Explore() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [router.query?.roomId, matrix.initialSyncDone, cachedSpace]);
 
+    const extractHomeserverFromRoomId = (roomId) => {
+        const parts = roomId.split(':');
+
+        return parts[1];
+    };
+
     const removeChildFromParent = async (idToRemove) => {
         if (idToRemove === roomId) {
             toast.error('You cannot remove the parent room from itself');
@@ -241,11 +247,18 @@ export default function Explore() {
         {
             accessorKey: 'name',
             header: 'Name',
-            cell: ({ row }) => (
-                <Link target={row.target} href={row.href} rel="noopener noreferrer" className="flex items-center justify-between">
-                    {row.getValue('name')}
-                </Link>
-            ),
+            cell: ({ row }) => {
+                const homeserver = extractHomeserverFromRoomId(row.roomId);
+
+                return (
+                    <Link target={row.target} href={row.href} rel="noopener noreferrer" className="flex items-center justify-between">
+                        {row.getValue('name')}
+                        {homeserver !== matrixClient.getDomain() && (
+                            <span className="ml-2 overflow-hidden text-ellipsis text-muted">{homeserver}</span>
+                        )}
+                    </Link>
+                );
+            },
         },
         {
             id: 'actions',
@@ -331,7 +344,14 @@ export default function Explore() {
                                 content={window.location.href}
                                 title={
                                     !_.isEmpty(selectedSpaceChildren) && (
-                                        <TreePath selectedSpaceChildren={selectedSpaceChildren} iframeRoomId={iframeRoomId} />
+                                        <TreePath
+                                            selectedSpaceChildren={selectedSpaceChildren}
+                                            iframeRoomId={iframeRoomId}
+                                            federated={
+                                                extractHomeserverFromRoomId(roomId) !== matrixClient.getDomain() &&
+                                                extractHomeserverFromRoomId(roomId)
+                                            }
+                                        />
                                     )
                                 }
                                 roomName={selectedSpaceChildren[selectedSpaceChildren.length - 1][0].name}
@@ -341,7 +361,7 @@ export default function Explore() {
                                 myPowerLevel={myPowerLevel}
                                 setActiveContentView={setActiveContentView}
                                 joinRule={selectedSpaceChildren[selectedSpaceChildren.length - 1][0].join_rule}
-                        service="/explore"
+                                service="/explore"
                             />
 
                             <Tabs

From f0fece3f70d641b498517ef30a783845a20649d2 Mon Sep 17 00:00:00 2001
From: Marcel <79279756+aofn@users.noreply.github.com>
Date: Fri, 29 Nov 2024 16:17:29 +0100
Subject: [PATCH 2/2] chore: create component for display of federated
 homeserver domains

---
 pages/explore/DisplayFederatedHomeserverDomain.js | 5 +++++
 pages/explore/TreePath.js                         | 7 ++++---
 pages/explore/[[...roomId]].js                    | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 pages/explore/DisplayFederatedHomeserverDomain.js

diff --git a/pages/explore/DisplayFederatedHomeserverDomain.js b/pages/explore/DisplayFederatedHomeserverDomain.js
new file mode 100644
index 00000000..d1ac3d54
--- /dev/null
+++ b/pages/explore/DisplayFederatedHomeserverDomain.js
@@ -0,0 +1,5 @@
+const FederatedSpan = ({ children }) => {
+    return <span className="ml-2 overflow-hidden text-ellipsis text-muted">{children}</span>;
+};
+
+export default FederatedSpan;
diff --git a/pages/explore/TreePath.js b/pages/explore/TreePath.js
index c76e53b5..850c6bac 100644
--- a/pages/explore/TreePath.js
+++ b/pages/explore/TreePath.js
@@ -10,6 +10,7 @@ import {
     BreadcrumbList,
     BreadcrumbSeparator,
 } from '@/components/UI/shadcn/Breadcrumb';
+import DisplayFederatedHomeserverDomain from './DisplayFederatedHomeserverDomain';
 
 const TreePath = ({ selectedSpaceChildren, federated }) => {
     return (
@@ -39,9 +40,9 @@ const TreePath = ({ selectedSpaceChildren, federated }) => {
                                                         <Link href={`/explore/${roomId}`}>
                                                             {path[0].name}
                                                             {federated && (
-                                                                <span className="ml-2 overflow-hidden text-ellipsis text-muted">
+                                                                <DisplayFederatedHomeserverDomain>
                                                                     {federated}
-                                                                </span>
+                                                                </DisplayFederatedHomeserverDomain>
                                                             )}
                                                         </Link>
                                                     </DropdownMenuItem>
@@ -67,7 +68,7 @@ const TreePath = ({ selectedSpaceChildren, federated }) => {
                                             <Link disabled href={`/explore/${roomId}`}>
                                                 {path[0].name}
                                                 {federated && (
-                                                    <span className="ml-2 overflow-hidden text-ellipsis text-muted">{federated}</span>
+                                                    <DisplayFederatedHomeserverDomain>{federated}</DisplayFederatedHomeserverDomain>
                                                 )}
                                             </Link>
                                         </BreadcrumbLink>
diff --git a/pages/explore/[[...roomId]].js b/pages/explore/[[...roomId]].js
index 5eec52fb..7a95d16b 100644
--- a/pages/explore/[[...roomId]].js
+++ b/pages/explore/[[...roomId]].js
@@ -43,6 +43,7 @@ import { Progress } from '@/components/UI/shadcn/Progress';
 import ExploreMatrixActions from './manage-room/ExploreMatrixActions';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/UI/shadcn/Tabs';
 import { useMediaQuery } from '@/lib/utils';
+import DisplayFederatedHomeserverDomain from './DisplayFederatedHomeserverDomain';
 
 /**
  * Explore component for managing room hierarchies and content.
@@ -254,7 +255,7 @@ export default function Explore() {
                     <Link target={row.target} href={row.href} rel="noopener noreferrer" className="flex items-center justify-between">
                         {row.getValue('name')}
                         {homeserver !== matrixClient.getDomain() && (
-                            <span className="ml-2 overflow-hidden text-ellipsis text-muted">{homeserver}</span>
+                            <DisplayFederatedHomeserverDomain>{homeserver}</DisplayFederatedHomeserverDomain>
                         )}
                     </Link>
                 );