Use consistent "bookmark" wording in code and UI

src/app/hooks/useBookmarkedServers.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 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];
+};

src/app/hooks/useExploreServers.ts

@@ -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 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];
-};

src/app/pages/client/explore/Explore.tsx

@@ -41,21 +41,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 { useExploreServers } from '../../../hooks/useExploreServers';
+import { useBookmarkedServers } from '../../../hooks/useBookmarkedServers';
 import { useAlive } from '../../../hooks/useAlive';
 
-type AddExploreServerPromptProps = {
+type ExploreServerPromptProps = {
   onSubmit: (server: string, save: boolean) => Promise<void>;
   header: ReactNode;
   children: ReactNode;
   selected?: boolean;
 };
-export function AddExploreServerPrompt({
+export function ExploreServerPrompt({
   onSubmit,
   header,
   children,
   selected = false,
-}: AddExploreServerPromptProps) {
+}: ExploreServerPromptProps) {
   const mx = useMatrixClient();
   const [dialog, setDialog] = useState(false);
   const alive = useAlive();
@@ -68,13 +68,13 @@ export function AddExploreServerPrompt({
     return server || undefined;
   };
 
-  const submit = useCallback(
-    async (save: boolean) => {
+  const handleSubmit = useCallback(
+    async (saveBookmark: boolean) => {
       const server = getInputServer();
       if (!server) return;
 
       await mx.publicRooms({ server, limit: 1 });
-      await onSubmit(server, save);
+      await onSubmit(server, saveBookmark);
       if (alive()) {
         setDialog(false);
       }
@@ -82,10 +82,12 @@ export function AddExploreServerPrompt({
     [alive, onSubmit, mx]
   );
 
-  const [viewState, handleView] = useAsyncCallback(() => submit(false));
-  const [saveViewState, handleSaveView] = useAsyncCallback(() => submit(true));
+  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 (
     <>
@@ -113,20 +115,19 @@ export function AddExploreServerPrompt({
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
-              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Box as="form" 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 />
-                  {viewState.status === AsyncStatus.Error && (
+                  {failed && (
                     <Text style={{ color: color.Critical.Main }} size="T300">
                       Failed to load public rooms. Please try again.
                     </Text>
                   )}
-                </Box>
                   <Box direction="Column" gap="200">
                     <Button
-                    type="submit"
+                      type="button"
                       onClick={handleView}
                       variant="Secondary"
                       fill="Soft"
@@ -151,10 +152,11 @@ export function AddExploreServerPrompt({
                       }
                       disabled={busy}
                     >
-                    <Text size="B400">Save & View</Text>
+                      <Text size="B400">Bookmark & View</Text>
                     </Button>
                   </Box>
                 </Box>
+              </Box>
             </Dialog>
           </FocusTrap>
         </OverlayCenter>
@@ -171,6 +173,7 @@ export function AddExploreServerPrompt({
 type ExploreServerNavItemAction = {
   onClick: () => Promise<void>;
   icon: IconSrc;
+  filled?: boolean;
   alwaysVisible: boolean;
 };
 type ExploreServerNavItemProps = {
@@ -222,16 +225,17 @@ export function ExploreServerNavItem({
         <NavItemOptions>
           <IconButton
             onClick={actionCallback}
-            variant="Background"
+            variant={selected ? 'Background' : 'Surface'}
             fill="None"
+            outlined={action.alwaysVisible}
             size="300"
             radii="300"
             disabled={actionInProgress}
           >
             {actionInProgress ? (
-              <Spinner variant="Secondary" fill="Solid" size="200" />
+              <Spinner variant="Secondary" fill="Solid" size="50" />
             ) : (
-              <Icon size="50" src={action.icon} />
+              <Icon size="50" src={action.icon} filled={action.filled} />
             )}
           </IconButton>
         </NavItemOptions>
@@ -246,7 +250,7 @@ export function Explore() {
   useNavToActivePathMapper('explore');
   const userId = mx.getUserId();
   const userServer = userId ? getMxIdServer(userId) : undefined;
-  const [exploreServers, addServer, removeServer] = useExploreServers();
+  const [bookmarkedServers, addServerBookmark, removeServerBookmark] = useBookmarkedServers();
 
   const selectedServer = useExploreServer();
   const exploringFeaturedRooms = useExploreFeaturedRooms();
@@ -255,26 +259,26 @@ export function Explore() {
       !(
         selectedServer === undefined ||
         selectedServer === userServer ||
-        exploreServers.includes(selectedServer)
+        bookmarkedServers.includes(selectedServer)
       ),
-    [exploreServers, selectedServer, userServer]
+    [bookmarkedServers, selectedServer, userServer]
   );
 
-  const addServerCallback = useCallback(
-    async (server: string, save: boolean) => {
-      if (save && server !== userServer && selectedServer) {
-        await addServer(server);
+  const viewServerCallback = useCallback(
+    async (server: string, saveBookmark: boolean) => {
+      if (saveBookmark && server !== userServer && selectedServer) {
+        await addServerBookmark(server);
       }
       navigate(getExploreServerPath(server));
     },
-    [addServer, navigate, userServer, selectedServer]
+    [addServerBookmark, navigate, userServer, selectedServer]
   );
 
-  const removeServerCallback = useCallback(
+  const removeServerBookmarkCallback = useCallback(
     async (server: string) => {
-      await removeServer(server);
+      await removeServerBookmark(server);
     },
-    [removeServer]
+    [removeServerBookmark]
   );
 
   return (
@@ -319,11 +323,11 @@ export function Explore() {
               <ExploreServerNavItem
                 server={selectedServer}
                 selected
-                icon={Icons.Server}
+                icon={Icons.Eye}
                 action={{
                   alwaysVisible: true,
-                  icon: Icons.Plus,
-                  onClick: () => addServerCallback(selectedServer, true),
+                  icon: Icons.Bookmark,
+                  onClick: () => viewServerCallback(selectedServer, true),
                 }}
               />
             )}
@@ -331,10 +335,10 @@ export function Explore() {
           <NavCategory>
             <NavCategoryHeader>
               <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
-                Servers
+                Bookmarks
               </Text>
             </NavCategoryHeader>
-            {exploreServers.map((server) => (
+            {bookmarkedServers.map((server) => (
               <ExploreServerNavItem
                 key={server}
                 server={server}
@@ -342,13 +346,14 @@ export function Explore() {
                 icon={Icons.Server}
                 action={{
                   alwaysVisible: false,
-                  icon: Icons.Minus,
-                  onClick: () => removeServerCallback(server),
+                  icon: Icons.Bookmark,
+                  filled: true,
+                  onClick: () => removeServerBookmarkCallback(server),
                 }}
               />
             ))}
-            <AddExploreServerPrompt
-              onSubmit={addServerCallback}
+            <ExploreServerPrompt
+              onSubmit={viewServerCallback}
               header={<Text size="H4">Add Server</Text>}
             >
               <Box as="span" grow="Yes" alignItems="Center" gap="200">
@@ -361,7 +366,7 @@ export function Explore() {
                   </Text>
                 </Box>
               </Box>
-            </AddExploreServerPrompt>
+            </ExploreServerPrompt>
           </NavCategory>
         </Box>
       </PageNavContent>

src/app/pages/client/explore/Featured.tsx

@@ -62,7 +62,7 @@ function ServerCard({ serverName, onExplore }: ServerCardProps) {
       </Box>
       <Button onClick={onExplore} variant="Secondary" fill="Soft" size="300">
         <Text size="B300" truncate>
-          Explore
+          Explore Rooms
         </Text>
       </Button>
     </CardBase>

src/app/pages/client/explore/Server.tsx

@@ -48,7 +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 { useExploreServers } from '../../../hooks/useExploreServers';
+import { useBookmarkedServers } from '../../../hooks/useBookmarkedServers';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -352,7 +352,6 @@ export function PublicRooms() {
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateSpace, navigateRoom } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
-  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const [searchParams] = useSearchParams();
   const serverSearchParams = useServerSearchParams(searchParams);
@@ -361,9 +360,9 @@ export function PublicRooms() {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const roomTypeFilters = useRoomTypeFilters();
-  const [exploreServers, addServer, removeServer] = useExploreServers();
-  const isUserHomeserver = server && server === userServer;
-  const isBookmarkedServer = server && exploreServers.includes(server);
+  const [bookmarkedServers, addServerBookmark, removeServerBookmark] = useBookmarkedServers();
+  const isUserHomeserver = server !== undefined && server === userServer;
+  const isBookmarkedServer = server !== undefined && bookmarkedServers.includes(server);
 
   const currentLimit: number = useMemo(() => {
     const limitParam = serverSearchParams.limit;
@@ -476,22 +475,17 @@ export function PublicRooms() {
     explore({ instance: instanceId, since: undefined });
   };
 
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const [menuActionState, handleMenuAction] = useAsyncCallback(
+  const [bookmarkActionState, handleBookmarkAction] = useAsyncCallback(
     useCallback(
       async (action: (server: string) => Promise<unknown>) => {
         if (!server) return;
 
-        setMenuAnchor(undefined);
         await action(server);
       },
       [server]
     )
   );
-  const menuActionBusy = menuActionState.status === AsyncStatus.Loading;
+  const bookmarkActionLoading = bookmarkActionState.status === AsyncStatus.Loading;
 
   return (
     <Page>
@@ -546,69 +540,26 @@ export function PublicRooms() {
                 offset={4}
                 tooltip={
                   <Tooltip>
-                    <Text>More Options</Text>
+                    <Text>{isBookmarkedServer ? 'Remove Bookmark' : 'Add Bookmark'}</Text>
                   </Tooltip>
                 }
               >
                 {(triggerRef) =>
                   !isUserHomeserver && (
                     <IconButton
-                      onClick={handleOpenMenu}
+                      onClick={() =>
+                        handleBookmarkAction(
+                          isBookmarkedServer ? removeServerBookmark : addServerBookmark
+                        )
+                      }
                       ref={triggerRef}
-                      aria-pressed={!!menuAnchor}
+                      disabled={bookmarkActionLoading}
                     >
-                      <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+                      <Icon size="400" src={Icons.Bookmark} filled={isBookmarkedServer} />
                     </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={() =>
-                            handleMenuAction(isBookmarkedServer ? removeServer : addServer)
-                          }
-                          variant={isBookmarkedServer ? 'Critical' : 'Primary'}
-                          fill="None"
-                          size="300"
-                          after={
-                            menuActionBusy ? (
-                              <Spinner fill="Solid" variant="Secondary" size="200" />
-                            ) : (
-                              <Icon
-                                size="100"
-                                src={isBookmarkedServer ? Icons.Delete : Icons.Plus}
-                              />
-                            )
-                          }
-                          radii="300"
-                          disabled={menuActionBusy}
-                        >
-                          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-                            {isBookmarkedServer ? 'Remove Server' : 'Add Server'}
-                          </Text>
-                        </MenuItem>
-                      </Box>
-                    </Menu>
-                  </FocusTrap>
-                }
-              />
             </Box>
           </>
         )}

src/types/matrix/accountData.ts

@@ -4,7 +4,7 @@ export enum AccountDataEvent {
   IgnoredUserList = 'm.ignored_user_list',
 
   CinnySpaces = 'in.cinny.spaces',
-  CinnyExplore = 'in.cinny.explore',
+  CinnyBookmarkedServers = 'in.cinny.bookmarked_servers',
 
   ElementRecentEmoji = 'io.element.recent_emoji',