From be51dc5f12fdb4f08b55715888ce5fed6921230e Mon Sep 17 00:00:00 2001
From: Ginger <ginger@gingershaped.computer>
Date: Sat, 13 Sep 2025 15:12:10 -0400
Subject: [PATCH] Revert "Add a page and config option for a room directory
 server"

This reverts commit 401d8ed9304a948f5159338e7957479c7e8760cb.

Revert "Minor styling changes"

This reverts commit 3de1ce8f2f6f5e1e46d6496e65035820117a1661.

Revert "Use consistent "bookmark" wording in code and UI"

This reverts commit c45cb62e2d4772cdad6a75295bfac34ab57242c0.

Revert "Move featured servers into the Featured section"

This reverts commit 53612f46410b7bf920d928f327261c1e1e2477cd.
---
 .vscode/settings.json                      |   5 +-
 config.json                                |  12 +-
 src/app/components/info-card/styles.css.ts |   1 +
 src/app/components/room-card/RoomCard.tsx  |  14 +-
 src/app/components/room-card/style.css.ts  |   2 +-
 src/app/hooks/router/useExploreSelected.ts |   6 -
 src/app/hooks/useBookmarkedServers.ts      |  43 ----
 src/app/hooks/useClientConfig.ts           |   1 -
 src/app/hooks/useExploreServers.ts         |  43 ++++
 src/app/pages/client/explore/Explore.tsx   | 256 ++++++++++-----------
 src/app/pages/client/explore/Featured.tsx  |  93 +-------
 src/app/pages/client/explore/Server.tsx    | 178 +++++++-------
 src/types/matrix/accountData.ts            |   2 +-
 13 files changed, 279 insertions(+), 377 deletions(-)
 delete mode 100644 src/app/hooks/useBookmarkedServers.ts
 create mode 100644 src/app/hooks/useExploreServers.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e1027687..8134a7fd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,8 +4,5 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
-}
\ No newline at end of file
+}
diff --git a/config.json b/config.json
index e1f477d8..de6015a1 100644
--- a/config.json
+++ b/config.json
@@ -9,6 +9,7 @@
     "xmr.se"
   ],
   "allowCustomHomeservers": true,
+
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [
@@ -27,16 +28,11 @@
       "#PrivSec.dev:arcticfoxes.net",
       "#disroot:aria-net.org"
     ],
-    "servers": [
-      "envs.net",
-      "matrix.org",
-      "monero.social",
-      "mozilla.org"
-    ],
-    "directoryServer": "matrixrooms.info"
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
   },
+
   "hashRouter": {
     "enabled": false,
     "basename": "/"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/info-card/styles.css.ts b/src/app/components/info-card/styles.css.ts
index 68fe7f0a..c852fbcf 100644
--- a/src/app/components/info-card/styles.css.ts
+++ b/src/app/components/info-card/styles.css.ts
@@ -5,5 +5,6 @@ export const InfoCard = style([
   {
     padding: config.space.S200,
     borderRadius: config.radii.R300,
+    borderWidth: config.borderWidth.B300,
   },
 ]);
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 3b40bafc..34a7e24b 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -45,7 +45,7 @@ const setGridColumnCount = (grid: HTMLElement, count: GridColumnCount): void =>
   grid.style.setProperty('grid-template-columns', `repeat(${count}, 1fr)`);
 };
 
-export function CardGrid({ children }: { children: ReactNode }) {
+export function RoomCardGrid({ children }: { children: ReactNode }) {
   const gridRef = useRef<HTMLDivElement>(null);
 
   useElementSizeObserver(
@@ -60,17 +60,17 @@ export function CardGrid({ children }: { children: ReactNode }) {
   );
 }
 
-export const CardBase = as<'div'>(({ className, ...props }, ref) => (
+export const RoomCardBase = as<'div'>(({ className, ...props }, ref) => (
   <Box
     direction="Column"
     gap="300"
-    className={classNames(css.CardBase, className)}
+    className={classNames(css.RoomCardBase, className)}
     {...props}
     ref={ref}
   />
 ));
 
-export const CardName = as<'h6'>(({ ...props }, ref) => (
+export const RoomCardName = as<'h6'>(({ ...props }, ref) => (
   <Text as="h6" size="H6" truncate {...props} ref={ref} />
 ));
 
@@ -208,7 +208,7 @@ export const RoomCard = as<'div', RoomCardProps>(
     const openTopic = () => setViewTopic(true);
 
     return (
-      <CardBase {...props} ref={ref}>
+      <RoomCardBase {...props} ref={ref}>
         <Box gap="200" justifyContent="SpaceBetween">
           <Avatar size="500">
             <RoomAvatar
@@ -229,7 +229,7 @@ export const RoomCard = as<'div', RoomCardProps>(
           )}
         </Box>
         <Box grow="Yes" direction="Column" gap="100">
-          <CardName>{roomName}</CardName>
+          <RoomCardName>{roomName}</RoomCardName>
           <RoomCardTopic onClick={openTopic} onKeyDown={onEnterOrSpace(openTopic)} tabIndex={0}>
             {roomTopic}
           </RoomCardTopic>
@@ -314,7 +314,7 @@ export const RoomCard = as<'div', RoomCardProps>(
             </ErrorDialog>
           </Box>
         )}
-      </CardBase>
+      </RoomCardBase>
     );
   }
 );
diff --git a/src/app/components/room-card/style.css.ts b/src/app/components/room-card/style.css.ts
index e8c640a8..b15acfe4 100644
--- a/src/app/components/room-card/style.css.ts
+++ b/src/app/components/room-card/style.css.ts
@@ -8,7 +8,7 @@ export const CardGrid = style({
   gap: config.space.S400,
 });
 
-export const CardBase = style([
+export const RoomCardBase = style([
   DefaultReset,
   ContainerColor({ variant: 'SurfaceVariant' }),
   {
diff --git a/src/app/hooks/router/useExploreSelected.ts b/src/app/hooks/router/useExploreSelected.ts
index 7ca00a13..be7615ca 100644
--- a/src/app/hooks/router/useExploreSelected.ts
+++ b/src/app/hooks/router/useExploreSelected.ts
@@ -1,6 +1,5 @@
 import { useMatch, useParams } from 'react-router-dom';
 import { getExploreFeaturedPath, getExplorePath } from '../../pages/pathUtils';
-import { useClientConfig } from '../useClientConfig';
 
 export const useExploreSelected = (): boolean => {
   const match = useMatch({
@@ -27,8 +26,3 @@ export const useExploreServer = (): string | undefined => {
 
   return server;
 };
-
-export const useDirectoryServer = (): string | undefined => {
-  const { featuredCommunities } = useClientConfig();
-  return featuredCommunities?.directoryServer;
-};
diff --git a/src/app/hooks/useBookmarkedServers.ts b/src/app/hooks/useBookmarkedServers.ts
deleted file mode 100644
index fe49f974..00000000
--- a/src/app/hooks/useBookmarkedServers.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
-import { useMatrixClient } from './useMatrixClient';
-
-export type InCinnyBookmarkedServersContent = {
-  servers?: string[];
-};
-
-export const useBookmarkedServers = (): [
-  string[],
-  (server: string) => Promise<void>,
-  (server: string) => Promise<void>
-] => {
-  const mx = useMatrixClient();
-  const accountData = useAccountData(AccountDataEvent.CinnyBookmarkedServers);
-  const bookmarkedServers = useMemo(
-    () => accountData?.getContent<InCinnyBookmarkedServersContent>()?.servers ?? [],
-    [accountData]
-  );
-
-  const addServerBookmark = useCallback(
-    async (server: string) => {
-      if (bookmarkedServers.indexOf(server) === -1) {
-        await mx.setAccountData(AccountDataEvent.CinnyBookmarkedServers, {
-          servers: [...bookmarkedServers, server],
-        });
-      }
-    },
-    [mx, bookmarkedServers]
-  );
-
-  const removeServerBookmark = useCallback(
-    async (server: string) => {
-      await mx.setAccountData(AccountDataEvent.CinnyBookmarkedServers, {
-        servers: bookmarkedServers.filter((addedServer) => server !== addedServer),
-      });
-    },
-    [mx, bookmarkedServers]
-  );
-
-  return [bookmarkedServers, addServerBookmark, removeServerBookmark];
-};
diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts
index 98d7eb92..e5fc6cc6 100644
--- a/src/app/hooks/useClientConfig.ts
+++ b/src/app/hooks/useClientConfig.ts
@@ -15,7 +15,6 @@ export type ClientConfig = {
     spaces?: string[];
     rooms?: string[];
     servers?: string[];
-    directoryServer?: string;
   };
 
   hashRouter?: HashRouterConfig;
diff --git a/src/app/hooks/useExploreServers.ts b/src/app/hooks/useExploreServers.ts
new file mode 100644
index 00000000..cc27baec
--- /dev/null
+++ b/src/app/hooks/useExploreServers.ts
@@ -0,0 +1,43 @@
+import { useCallback, useMemo } from 'react';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+import { useAccountData } from './useAccountData';
+import { useMatrixClient } from './useMatrixClient';
+
+export type InCinnyExploreServersContent = {
+  servers?: string[];
+};
+
+export const useExploreServers = (): [
+  string[],
+  (server: string) => Promise<void>,
+  (server: string) => Promise<void>
+] => {
+  const mx = useMatrixClient();
+  const accountData = useAccountData(AccountDataEvent.CinnyExplore);
+  const userAddedServers = useMemo(
+    () => accountData?.getContent<InCinnyExploreServersContent>()?.servers ?? [],
+    [accountData]
+  );
+
+  const addServer = useCallback(
+    async (server: string) => {
+      if (userAddedServers.indexOf(server) === -1) {
+        await mx.setAccountData(AccountDataEvent.CinnyExplore, {
+          servers: [...userAddedServers, server],
+        });
+      }
+    },
+    [mx, userAddedServers]
+  );
+
+  const removeServer = useCallback(
+    async (server: string) => {
+      await mx.setAccountData(AccountDataEvent.CinnyExplore, {
+        servers: userAddedServers.filter((addedServer) => server !== addedServer),
+      });
+    },
+    [mx, userAddedServers]
+  );
+
+  return [userAddedServers, addServer, removeServer];
+};
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index 4e06830e..e3a99c68 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -31,8 +31,8 @@ import {
   NavLink,
 } from '../../../components/nav';
 import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils';
+import { useClientConfig } from '../../../hooks/useClientConfig';
 import {
-  useDirectoryServer,
   useExploreFeaturedRooms,
   useExploreServer,
 } from '../../../hooks/router/useExploreSelected';
@@ -42,21 +42,21 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { stopPropagation } from '../../../utils/keyboard';
-import { useBookmarkedServers } from '../../../hooks/useBookmarkedServers';
+import { useExploreServers } from '../../../hooks/useExploreServers';
 import { useAlive } from '../../../hooks/useAlive';
 
-type ExploreServerPromptProps = {
-  onSubmit: (server: string, save: boolean) => Promise<void>;
+type AddExploreServerPromptProps = {
+  onSubmit: (server: string) => Promise<void>;
   header: ReactNode;
   children: ReactNode;
   selected?: boolean;
 };
-export function ExploreServerPrompt({
+export function AddExploreServerPrompt({
   onSubmit,
   header,
   children,
   selected = false,
-}: ExploreServerPromptProps) {
+}: AddExploreServerPromptProps) {
   const mx = useMatrixClient();
   const [dialog, setDialog] = useState(false);
   const alive = useAlive();
@@ -69,27 +69,19 @@ export function ExploreServerPrompt({
     return server || undefined;
   };
 
-  const handleSubmit = useCallback(
-    async (saveBookmark: boolean) => {
+  const [submitState, handleSubmit] = useAsyncCallback(
+    useCallback(async () => {
       const server = getInputServer();
       if (!server) return;
 
       await mx.publicRooms({ server, limit: 1 });
-      await onSubmit(server, saveBookmark);
+      await onSubmit(server);
       if (alive()) {
         setDialog(false);
       }
-    },
-    [alive, onSubmit, mx]
+    }, [alive, onSubmit, mx])
   );
 
-  const [viewState, handleView] = useAsyncCallback(() => handleSubmit(false));
-  const [saveViewState, handleSaveView] = useAsyncCallback(() => handleSubmit(true));
-  const busy =
-    viewState.status === AsyncStatus.Loading || saveViewState.status === AsyncStatus.Loading;
-  const failed =
-    viewState.status === AsyncStatus.Error || saveViewState.status === AsyncStatus.Error;
-
   return (
     <>
       <Overlay open={dialog} backdrop={<OverlayBackdrop />}>
@@ -116,46 +108,41 @@ export function ExploreServerPrompt({
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
-              <Box as="form" style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Box
+                as="form"
+                onSubmit={(evt) => {
+                  evt.preventDefault();
+                  handleSubmit();
+                }}
+                style={{ padding: config.space.S400 }}
+                direction="Column"
+                gap="400"
+              >
                 <Text priority="400">Add server name to explore public communities.</Text>
                 <Box direction="Column" gap="100">
                   <Text size="L400">Server Name</Text>
                   <Input ref={serverInputRef} name="serverInput" variant="Background" required />
-                  {failed && (
+                  {submitState.status === AsyncStatus.Error && (
                     <Text style={{ color: color.Critical.Main }} size="T300">
                       Failed to load public rooms. Please try again.
                     </Text>
                   )}
-                  <Box direction="Column" gap="200">
-                    <Button
-                      type="button"
-                      onClick={handleView}
-                      variant="Secondary"
-                      fill="Soft"
-                      before={
-                        viewState.status === AsyncStatus.Loading && (
-                          <Spinner fill="Solid" variant="Secondary" size="200" />
-                        )
-                      }
-                      disabled={busy}
-                    >
-                      <Text size="B400">View</Text>
-                    </Button>
-                    <Button
-                      type="submit"
-                      onClick={handleSaveView}
-                      variant="Primary"
-                      fill="Soft"
-                      before={
-                        saveViewState.status === AsyncStatus.Loading && (
-                          <Spinner fill="Solid" variant="Secondary" size="200" />
-                        )
-                      }
-                      disabled={busy}
-                    >
-                      <Text size="B400">Bookmark & View</Text>
-                    </Button>
-                  </Box>
+                </Box>
+                <Box direction="Column" gap="200">
+                  <Button
+                    type="submit"
+                    onClick={handleSubmit}
+                    variant="Secondary"
+                    fill="Soft"
+                    before={
+                      submitState.status === AsyncStatus.Loading && (
+                        <Spinner fill="Solid" variant="Secondary" size="200" />
+                      )
+                    }
+                    disabled={submitState.status === AsyncStatus.Loading}
+                  >
+                    <Text size="B400">View</Text>
+                  </Button>
                 </Box>
               </Box>
             </Dialog>
@@ -171,34 +158,30 @@ export function ExploreServerPrompt({
   );
 }
 
-type ExploreServerNavItemAction = {
-  onClick: () => Promise<void>;
-  icon: IconSrc;
-  filled?: boolean;
-  alwaysVisible: boolean;
-};
 type ExploreServerNavItemProps = {
   server: string;
   selected: boolean;
   icon: IconSrc;
-  action?: ExploreServerNavItemAction;
+  onRemove?: (() => Promise<void>) | null;
 };
 export function ExploreServerNavItem({
   server,
   selected,
   icon,
-  action,
+  onRemove = null,
 }: ExploreServerNavItemProps) {
   const [hover, setHover] = useState(false);
   const { hoverProps } = useHover({ onHoverChange: setHover });
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
-  const [actionState, actionCallback] = useAsyncCallback(
+  const [removeState, removeCallback] = useAsyncCallback(
     useCallback(async () => {
-      await action?.onClick();
-    }, [action])
+      if (onRemove !== null) {
+        await onRemove();
+      }
+    }, [onRemove])
   );
-  const actionInProgress =
-    actionState.status === AsyncStatus.Loading || actionState.status === AsyncStatus.Success;
+  const removeInProgress =
+    removeState.status === AsyncStatus.Loading || removeState.status === AsyncStatus.Success;
 
   return (
     <NavItem
@@ -222,21 +205,20 @@ export function ExploreServerNavItem({
           </Box>
         </NavItemContent>
       </NavLink>
-      {action !== undefined && (hover || actionInProgress || action.alwaysVisible) && (
+      {onRemove !== null && (hover || removeInProgress) && (
         <NavItemOptions>
           <IconButton
-            onClick={actionCallback}
-            variant={selected ? 'Background' : 'Surface'}
+            onClick={removeCallback}
+            variant="Background"
             fill="None"
-            outlined={action.alwaysVisible}
             size="300"
             radii="300"
-            disabled={actionInProgress}
+            disabled={removeInProgress}
           >
-            {actionInProgress ? (
-              <Spinner variant="Secondary" fill="Solid" size="50" />
+            {removeInProgress ? (
+              <Spinner variant="Secondary" fill="Solid" size="200" />
             ) : (
-              <Icon size="50" src={action.icon} filled={action.filled} />
+              <Icon size="50" src={Icons.Minus} />
             )}
           </IconButton>
         </NavItemOptions>
@@ -250,39 +232,50 @@ export function Explore() {
   const navigate = useNavigate();
   useNavToActivePathMapper('explore');
   const userId = mx.getUserId();
+  const clientConfig = useClientConfig();
   const userServer = userId ? getMxIdServer(userId) : undefined;
-  const directoryServer = useDirectoryServer();
-  const [bookmarkedServers, addServerBookmark, removeServerBookmark] = useBookmarkedServers();
-  const selectedServer = useExploreServer();
+  const featuredServers = useMemo(
+    () =>
+      clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [],
+    [clientConfig, userServer]
+  );
+  const [exploreServers, addServer, removeServer] = useExploreServers();
 
+  const selectedServer = useExploreServer();
   const exploringFeaturedRooms = useExploreFeaturedRooms();
-  const exploringDirectory = directoryServer !== undefined && selectedServer === directoryServer;
   const exploringUnlistedServer = useMemo(
     () =>
       !(
         selectedServer === undefined ||
         selectedServer === userServer ||
-        exploringDirectory ||
-        bookmarkedServers.includes(selectedServer)
+        featuredServers.includes(selectedServer) ||
+        exploreServers.includes(selectedServer)
       ),
-    [bookmarkedServers, selectedServer, userServer, exploringDirectory]
+    [exploreServers, featuredServers, selectedServer, userServer]
   );
 
-  const viewServerCallback = useCallback(
-    async (server: string, saveBookmark: boolean) => {
-      if (saveBookmark && server !== userServer && server !== directoryServer && selectedServer) {
-        await addServerBookmark(server);
+  const addServerCallback = useCallback(
+    async (server: string) => {
+      if (server !== userServer && selectedServer && !featuredServers.includes(selectedServer)) {
+        await addServer(server);
       }
       navigate(getExploreServerPath(server));
     },
-    [addServerBookmark, navigate, userServer, directoryServer, selectedServer]
+    [addServer, navigate, userServer, featuredServers, selectedServer]
   );
 
-  const removeServerBookmarkCallback = useCallback(
+  const removeServerCallback = useCallback(
     async (server: string) => {
-      await removeServerBookmark(server);
+      await removeServer(server);
     },
-    [removeServerBookmark]
+    [removeServer]
+  );
+
+  const exploreUnlistedServerCallback = useCallback(
+    async (server: string) => {
+      navigate(getExploreServerPath(server));
+    },
+    [navigate]
   );
 
   return (
@@ -300,6 +293,29 @@ export function Explore() {
       <PageNavContent>
         <Box direction="Column" gap="300">
           <NavCategory>
+            <AddExploreServerPrompt
+              onSubmit={exploreUnlistedServerCallback}
+              header={<Text size="H4">View Server</Text>}
+              selected={exploringUnlistedServer}
+            >
+              <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                <Avatar size="200" radii="400">
+                  <Icon src={Icons.Link} size="100" />
+                </Avatar>
+                <Box as="span" grow="Yes">
+                  <Text as="span" size="Inherit" truncate>
+                    Explore with Address
+                  </Text>
+                </Box>
+              </Box>
+            </AddExploreServerPrompt>
+          </NavCategory>
+          <NavCategory>
+            <NavCategoryHeader>
+              <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
+                Featured
+              </Text>
+            </NavCategoryHeader>
             <NavItem variant="Background" radii="400" aria-selected={exploringFeaturedRooms}>
               <NavLink to={getExploreFeaturedPath()}>
                 <NavItemContent>
@@ -309,31 +325,13 @@ export function Explore() {
                     </Avatar>
                     <Box as="span" grow="Yes">
                       <Text as="span" size="Inherit" truncate>
-                        Featured
+                        Featured Rooms
                       </Text>
                     </Box>
                   </Box>
                 </NavItemContent>
               </NavLink>
             </NavItem>
-            {directoryServer && (
-              <NavItem variant="Background" radii="400" aria-selected={exploringDirectory}>
-                <NavLink to={getExploreServerPath(directoryServer)}>
-                  <NavItemContent>
-                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                      <Avatar size="200" radii="400">
-                        <Icon src={Icons.Search} size="100" filled={exploringDirectory} />
-                      </Avatar>
-                      <Box as="span" grow="Yes">
-                        <Text as="span" size="Inherit" truncate>
-                          Public Room Directory
-                        </Text>
-                      </Box>
-                    </Box>
-                  </NavItemContent>
-                </NavLink>
-              </NavItem>
-            )}
             {userServer && (
               <ExploreServerNavItem
                 server={userServer}
@@ -341,40 +339,32 @@ export function Explore() {
                 icon={Icons.Home}
               />
             )}
-            {exploringUnlistedServer && selectedServer !== undefined && (
-              <ExploreServerNavItem
-                server={selectedServer}
-                selected
-                icon={Icons.Eye}
-                action={{
-                  alwaysVisible: true,
-                  icon: Icons.Bookmark,
-                  onClick: () => viewServerCallback(selectedServer, true),
-                }}
-              />
-            )}
-          </NavCategory>
-          <NavCategory>
-            <NavCategoryHeader>
-              <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
-                Bookmarks
-              </Text>
-            </NavCategoryHeader>
-            {bookmarkedServers.map((server) => (
+            {featuredServers.map((server) => (
               <ExploreServerNavItem
                 key={server}
                 server={server}
                 selected={server === selectedServer}
                 icon={Icons.Server}
-                action={{
-                  alwaysVisible: false,
-                  icon: Icons.Minus,
-                  onClick: () => removeServerBookmarkCallback(server),
-                }}
               />
             ))}
-            <ExploreServerPrompt
-              onSubmit={viewServerCallback}
+          </NavCategory>
+          <NavCategory>
+            <NavCategoryHeader>
+              <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
+                Servers
+              </Text>
+            </NavCategoryHeader>
+            {exploreServers.map((server) => (
+              <ExploreServerNavItem
+                key={server}
+                server={server}
+                selected={server === selectedServer}
+                onRemove={() => removeServerCallback(server)}
+                icon={Icons.Server}
+              />
+            ))}
+            <AddExploreServerPrompt
+              onSubmit={addServerCallback}
               header={<Text size="H4">Add Server</Text>}
             >
               <Box as="span" grow="Yes" alignItems="Center" gap="200">
@@ -387,7 +377,7 @@ export function Explore() {
                   </Text>
                 </Box>
               </Box>
-            </ExploreServerPrompt>
+            </AddExploreServerPrompt>
           </NavCategory>
         </Box>
       </PageNavContent>
diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx
index c344657a..f056cbb5 100644
--- a/src/app/pages/client/explore/Featured.tsx
+++ b/src/app/pages/client/explore/Featured.tsx
@@ -1,10 +1,8 @@
-import React, { useCallback } from 'react';
-import { Box, Button, color, Icon, IconButton, Icons, Scroll, Spinner, Text } from 'folds';
+import React from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { useAtomValue } from 'jotai';
-import { useQuery } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
 import { useClientConfig } from '../../../hooks/useClientConfig';
-import { RoomCard, CardGrid, CardName, CardBase } from '../../../components/room-card';
+import { RoomCard, RoomCardGrid } from '../../../components/room-card';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { RoomSummaryLoader } from '../../../components/RoomSummaryLoader';
 import {
@@ -20,69 +18,13 @@ import * as css from './style.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { millify } from '../../../plugins/millify';
-import { getExploreServerPath } from '../../pathUtils';
-
-type ServerCardProps = {
-  serverName: string;
-  onExplore: () => unknown;
-};
-
-function ServerCard({ serverName, onExplore }: ServerCardProps) {
-  const mx = useMatrixClient();
-
-  const fetchPublicRooms = useCallback(
-    () => mx.publicRooms({ server: serverName }),
-    [mx, serverName]
-  );
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: [serverName, `publicRooms`],
-    queryFn: fetchPublicRooms,
-  });
-  const publicRoomCount = data?.total_room_count_estimate;
-
-  return (
-    <CardBase>
-      <CardName>{serverName}</CardName>
-      <Box gap="100" grow="Yes" style={isError ? { color: color.Critical.Main } : undefined}>
-        {isLoading ? (
-          <Spinner size="50" />
-        ) : (
-          <>
-            <Icon size="50" src={isError ? Icons.Warning : Icons.Category} />
-            <Text size="T200">
-              {publicRoomCount === undefined
-                ? 'Error loading rooms'
-                : `${millify(publicRoomCount)} Public Rooms`}
-            </Text>
-          </>
-        )}
-      </Box>
-      <Button onClick={onExplore} variant="Secondary" size="300">
-        <Text size="B300" truncate>
-          Explore Rooms
-        </Text>
-      </Button>
-    </CardBase>
-  );
-}
 
 export function FeaturedRooms() {
   const { featuredCommunities } = useClientConfig();
-  const { rooms, spaces, servers } = featuredCommunities ?? {};
+  const { rooms, spaces } = featuredCommunities ?? {};
   const allRooms = useAtomValue(allRoomsAtom);
   const screenSize = useScreenSizeContext();
   const { navigateSpace, navigateRoom } = useRoomNavigate();
-  const navigate = useNavigate();
-
-  const exploreServer = useCallback(
-    async (server: string) => {
-      navigate(getExploreServerPath(server));
-    },
-    [navigate]
-  );
 
   return (
     <Page>
@@ -107,28 +49,15 @@ export function FeaturedRooms() {
                 <PageHeroSection>
                   <PageHero
                     icon={<Icon size="600" src={Icons.Bulb} />}
-                    title="Featured"
-                    subTitle="Find and explore public communities featured by your client provider."
+                    title="Featured by Client"
+                    subTitle="Find and explore public rooms and spaces featured by client provider."
                   />
                 </PageHeroSection>
                 <Box direction="Column" gap="700">
-                  {servers && servers.length > 0 && (
-                    <Box direction="Column" gap="400">
-                      <Text size="H4">Featured Servers</Text>
-                      <CardGrid>
-                        {servers.map((serverName) => (
-                          <ServerCard
-                            serverName={serverName}
-                            onExplore={() => exploreServer(serverName)}
-                          />
-                        ))}
-                      </CardGrid>
-                    </Box>
-                  )}
                   {spaces && spaces.length > 0 && (
                     <Box direction="Column" gap="400">
                       <Text size="H4">Featured Spaces</Text>
-                      <CardGrid>
+                      <RoomCardGrid>
                         {spaces.map((roomIdOrAlias) => (
                           <RoomSummaryLoader key={roomIdOrAlias} roomIdOrAlias={roomIdOrAlias}>
                             {(roomSummary) => (
@@ -151,13 +80,13 @@ export function FeaturedRooms() {
                             )}
                           </RoomSummaryLoader>
                         ))}
-                      </CardGrid>
+                      </RoomCardGrid>
                     </Box>
                   )}
                   {rooms && rooms.length > 0 && (
                     <Box direction="Column" gap="400">
                       <Text size="H4">Featured Rooms</Text>
-                      <CardGrid>
+                      <RoomCardGrid>
                         {rooms.map((roomIdOrAlias) => (
                           <RoomSummaryLoader key={roomIdOrAlias} roomIdOrAlias={roomIdOrAlias}>
                             {(roomSummary) => (
@@ -180,7 +109,7 @@ export function FeaturedRooms() {
                             )}
                           </RoomSummaryLoader>
                         ))}
-                      </CardGrid>
+                      </RoomCardGrid>
                     </Box>
                   )}
                   {((spaces && spaces.length === 0 && rooms && rooms.length === 0) ||
@@ -194,7 +123,7 @@ export function FeaturedRooms() {
                     >
                       <Icon size="400" src={Icons.Info} />
                       <Text size="T300" align="Center">
-                        No rooms or spaces are featured.
+                        No rooms or spaces featured by client provider.
                       </Text>
                     </Box>
                   )}
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 0c47e5a4..9a0618a1 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -9,13 +9,11 @@ import React, {
   useState,
 } from 'react';
 import {
-  Badge,
   Box,
   Button,
   Chip,
   Icon,
   IconButton,
-  IconSrc,
   Icons,
   Input,
   Line,
@@ -39,7 +37,7 @@ import { MatrixClient, Method, RoomType } from 'matrix-js-sdk';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
-import { RoomCard, CardBase, CardGrid } from '../../../components/room-card';
+import { RoomCard, RoomCardBase, RoomCardGrid } from '../../../components/room-card';
 import { ExploreServerPathSearchParams } from '../../paths';
 import { getExploreServerPath, withSearchParam } from '../../pathUtils';
 import * as css from './style.css';
@@ -50,8 +48,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useBookmarkedServers } from '../../../hooks/useBookmarkedServers';
-import { useDirectoryServer } from '../../../hooks/router/useExploreSelected';
+import { useExploreServers } from '../../../hooks/useExploreServers';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -352,10 +349,10 @@ export function PublicRooms() {
   const mx = useMatrixClient();
   const userId = mx.getUserId();
   const userServer = userId && getMxIdServer(userId);
-  const directoryServer = useDirectoryServer();
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateSpace, navigateRoom } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const [searchParams] = useSearchParams();
   const serverSearchParams = useServerSearchParams(searchParams);
@@ -364,18 +361,9 @@ export function PublicRooms() {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const roomTypeFilters = useRoomTypeFilters();
-  const [bookmarkedServers, addServerBookmark, removeServerBookmark] = useBookmarkedServers();
-  const isUserHomeserver = server !== undefined && server === userServer;
-  const isBookmarkedServer = server !== undefined && bookmarkedServers.includes(server);
-  const isDirectoryServer = server !== undefined && server === directoryServer;
-  let headerIcon: IconSrc;
-  if (isUserHomeserver) {
-    headerIcon = Icons.Home;
-  } else if (isDirectoryServer) {
-    headerIcon = Icons.Search;
-  } else {
-    headerIcon = Icons.Server;
-  }
+  const [exploreServers, , removeServer] = useExploreServers();
+  const isUserAddedServer = server && exploreServers.includes(server);
+  const isUserHomeServer = server && server === userServer;
 
   const currentLimit: number = useMemo(() => {
     const limitParam = serverSearchParams.limit;
@@ -488,17 +476,19 @@ export function PublicRooms() {
     explore({ instance: instanceId, since: undefined });
   };
 
-  const [bookmarkActionState, handleBookmarkAction] = useAsyncCallback(
-    useCallback(
-      async (action: (server: string) => Promise<unknown>) => {
-        if (!server) return;
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
 
-        await action(server);
-      },
-      [server]
-    )
+  const [removeServerState, handleRemoveServer] = useAsyncCallback(
+    useCallback(async () => {
+      if (!server) return;
+
+      setMenuAnchor(undefined);
+      await removeServer(server);
+    }, [server, removeServer])
   );
-  const bookmarkActionLoading = bookmarkActionState.status === AsyncStatus.Loading;
+  const isRemoving = removeServerState.status === AsyncStatus.Loading;
 
   return (
     <Page>
@@ -539,70 +529,76 @@ export function PublicRooms() {
               )}
             </Box>
             <Box grow="Yes" basis="Yes" justifyContent="Center" alignItems="Center" gap="200">
-              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={headerIcon} />}
+              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={isUserHomeServer ? Icons.Home : Icons.Server} />}
               <Text size="H3" truncate>
-                {isDirectoryServer ? 'Public Room Directory' : server}
+                {server}
               </Text>
             </Box>
             <Box shrink="No" grow="Yes" basis="No" justifyContent="End">
-              {isDirectoryServer ? (
-                <TooltipProvider
-                  position="Bottom"
-                  align="End"
-                  offset={4}
-                  tooltip={
-                    <Tooltip>
-                      <Text>provided by {directoryServer}</Text>
-                    </Tooltip>
-                  }
-                >
-                  {(triggerRef) => (
-                    <Chip
-                      as="a"
-                      href={`https://${directoryServer}`}
-                      target="_blank"
-                      rel="noreferrer noopener"
-                      variant="Secondary"
-                      radii="Pill"
-                      fill="Soft"
-                      ref={screenSize === ScreenSize.Mobile ? triggerRef : undefined}
-                      style={{ maxWidth: '100%' }}
-                      before={<Icon src={Icons.External} size="50" />}
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>More Options</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) =>
+                  isUserAddedServer && (
+                    <IconButton
+                      onClick={handleOpenMenu}
+                      ref={triggerRef}
+                      aria-pressed={!!menuAnchor}
                     >
-                      <Text size="T200" truncate>
-                        provided by {directoryServer}
-                      </Text>
-                    </Chip>
-                  )}
-                </TooltipProvider>
-              ) : (
-                <TooltipProvider
-                  position="Bottom"
-                  align="End"
-                  offset={4}
-                  tooltip={
-                    <Tooltip>
-                      <Text>{isBookmarkedServer ? 'Remove Bookmark' : 'Add Bookmark'}</Text>
-                    </Tooltip>
-                  }
-                >
-                  {(triggerRef) =>
-                    !isUserHomeserver && (
-                      <IconButton
-                        onClick={() =>
-                          handleBookmarkAction(
-                            isBookmarkedServer ? removeServerBookmark : addServerBookmark
-                          )
-                        }
-                        ref={triggerRef}
-                        disabled={bookmarkActionLoading}
-                      >
-                        <Icon size="400" src={Icons.Bookmark} filled={isBookmarkedServer} />
-                      </IconButton>
-                    )
-                  }
-                </TooltipProvider>
-              )}
+                      <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+                    </IconButton>
+                  )
+                }
+              </TooltipProvider>
+              <PopOut
+                anchor={menuAnchor}
+                position="Bottom"
+                align="End"
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      returnFocusOnDeactivate: false,
+                      onDeactivate: () => setMenuAnchor(undefined),
+                      clickOutsideDeactivates: true,
+                      isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                      isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <Menu style={{ maxWidth: toRem(160), width: '100vw' }}>
+                      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                        <MenuItem
+                          onClick={handleRemoveServer}
+                          variant="Critical"
+                          fill="None"
+                          size="300"
+                          after={
+                            isRemoving ? (
+                              <Spinner fill="Solid" variant="Secondary" size="200" />
+                            ) : (
+                              <Icon size="100" src={Icons.Delete} />
+                            )
+                          }
+                          radii="300"
+                          disabled={isRemoving}
+                        >
+                          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                            Remove Server
+                          </Text>
+                        </MenuItem>
+                      </Box>
+                    </Menu>
+                  </FocusTrap>
+                }
+              />
             </Box>
           </>
         )}
@@ -664,11 +660,11 @@ export function PublicRooms() {
                     </Box>
                   </Box>
                   {isLoading && (
-                    <CardGrid>
+                    <RoomCardGrid>
                       {[...Array(currentLimit).keys()].map((item) => (
-                        <CardBase key={item} style={{ minHeight: toRem(260) }} />
+                        <RoomCardBase key={item} style={{ minHeight: toRem(260) }} />
                       ))}
-                    </CardGrid>
+                    </RoomCardGrid>
                   )}
                   {error && (
                     <Box direction="Column" className={css.PublicRoomsError} gap="200">
@@ -679,7 +675,7 @@ export function PublicRooms() {
                   {data &&
                     (data.chunk.length > 0 ? (
                       <>
-                        <CardGrid>
+                        <RoomCardGrid>
                           {data?.chunk.map((chunkRoom) => (
                             <RoomCard
                               key={chunkRoom.room_id}
@@ -704,7 +700,7 @@ export function PublicRooms() {
                               )}
                             />
                           ))}
-                        </CardGrid>
+                        </RoomCardGrid>
 
                         {(data.prev_batch || data.next_batch) && (
                           <Box justifyContent="Center" gap="200">
diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts
index 4bb6f5c2..b9d81492 100644
--- a/src/types/matrix/accountData.ts
+++ b/src/types/matrix/accountData.ts
@@ -4,7 +4,7 @@ export enum AccountDataEvent {
   IgnoredUserList = 'm.ignored_user_list',
 
   CinnySpaces = 'in.cinny.spaces',
-  CinnyBookmarkedServers = 'in.cinny.bookmarked_servers',
+  CinnyExplore = 'in.cinny.explore',
 
   ElementRecentEmoji = 'io.element.recent_emoji',