Merge 8e81f8725e into 31c6d13fdf

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

src/app/hooks/router/useExploreSelected.ts

@@ -11,7 +11,7 @@ export const useExploreSelected = (): boolean => {
   return !!match;
 };
 
-export const useExploreFeaturedSelected = (): boolean => {
+export const useExploreFeaturedRooms = (): boolean => {
   const match = useMatch({
     path: getExploreFeaturedPath(),
     caseSensitive: true,

src/app/hooks/useExploreServers.ts

@@ -0,0 +1,44 @@
+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 = (
+  exclude?: string[]
+): [string[], (server: string) => Promise<void>, (server: string) => Promise<void>] => {
+  const mx = useMatrixClient();
+  const accountData = useAccountData(AccountDataEvent.CinnyExplore);
+  const userAddedServers = useMemo(
+    () =>
+      accountData
+        ?.getContent<InCinnyExploreServersContent>()
+        ?.servers?.filter((server) => !exclude?.includes(server)) ?? [],
+    [exclude, 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

@@ -1,4 +1,4 @@
-import React, { FormEventHandler, useCallback, useRef, useState } from 'react';
+import React, { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import {
@@ -9,26 +9,30 @@ import {
   Header,
   Icon,
   IconButton,
+  IconSrc,
   Icons,
   Input,
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
+  Spinner,
   Text,
   color,
   config,
 } from 'folds';
+import { useFocusWithin, useHover } from 'react-aria';
 import {
+  NavButton,
   NavCategory,
   NavCategoryHeader,
   NavItem,
   NavItemContent,
+  NavItemOptions,
   NavLink,
 } from '../../../components/nav';
 import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils';
-import { useClientConfig } from '../../../hooks/useClientConfig';
 import {
-  useExploreFeaturedSelected,
+  useExploreFeaturedRooms,
   useExploreServer,
 } from '../../../hooks/router/useExploreSelected';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
@@ -37,17 +41,27 @@ 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 { useAlive } from '../../../hooks/useAlive';
+import { useClientConfig } from '../../../hooks/useClientConfig';
 
-export function AddServer() {
+type AddExploreServerPromptProps = {
+  onSubmit: (server: string, save: boolean) => Promise<void>;
+  header: ReactNode;
+  children: ReactNode;
+  selected?: boolean;
+};
+export function AddExploreServerPrompt({
+  onSubmit,
+  header,
+  children,
+  selected = false,
+}: AddExploreServerPromptProps) {
   const mx = useMatrixClient();
-  const navigate = useNavigate();
   const [dialog, setDialog] = useState(false);
+  const alive = useAlive();
   const serverInputRef = useRef<HTMLInputElement>(null);
 
-  const [exploreState] = useAsyncCallback(
-    useCallback((server: string) => mx.publicRooms({ server, limit: 1 }), [mx])
-  );
-
   const getInputServer = (): string | undefined => {
     const serverInput = serverInputRef.current;
     if (!serverInput) return undefined;
@@ -55,22 +69,24 @@ export function AddServer() {
     return server || undefined;
   };
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+  const submit = useCallback(
-    evt.preventDefault();
+    async (save: boolean) => {
-    const server = getInputServer();
+      const server = getInputServer();
-    if (!server) return;
+      if (!server) return;
-    // explore(server);
 
-    navigate(getExploreServerPath(server));
+      await mx.publicRooms({ server, limit: 1 });
-    setDialog(false);
+      await onSubmit(server, save);
-  };
+      if (alive()) {
+        setDialog(false);
+      }
+    },
+    [alive, onSubmit, mx]
+  );
 
-  const handleView = () => {
+  const [viewState, handleView] = useAsyncCallback(() => submit(false));
-    const server = getInputServer();
+  const [saveViewState, handleSaveView] = useAsyncCallback(() => submit(true));
-    if (!server) return;
+  const busy =
-    navigate(getExploreServerPath(server));
+    viewState.status === AsyncStatus.Loading || saveViewState.status === AsyncStatus.Loading;
-    setDialog(false);
-  };
 
   return (
     <>
@@ -93,79 +109,181 @@ export function AddServer() {
                 variant="Surface"
                 size="500"
               >
-                <Box grow="Yes">
+                <Box grow="Yes">{header}</Box>
-                  <Text size="H4">Add Server</Text>
-                </Box>
                 <IconButton size="300" onClick={() => setDialog(false)} radii="300">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
-              <Box
+              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-                as="form"
-                onSubmit={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 />
-                  {exploreState.status === AsyncStatus.Error && (
+                  {viewState.status === AsyncStatus.Error && (
                     <Text style={{ color: color.Critical.Main }} size="T300">
                       Failed to load public rooms. Please try again.
                     </Text>
                   )}
                 </Box>
                 <Box direction="Column" gap="200">
-                  {/* <Button
+                  <Button
                     type="submit"
+                    onClick={handleView}
                     variant="Secondary"
+                    fill="Soft"
                     before={
-                      exploreState.status === AsyncStatus.Loading ? (
+                      viewState.status === AsyncStatus.Loading && (
                         <Spinner fill="Solid" variant="Secondary" size="200" />
-                      ) : undefined
+                      )
                     }
-                    aria-disabled={exploreState.status === AsyncStatus.Loading}
+                    disabled={busy}
                   >
-                    <Text size="B400">Save</Text>
-                  </Button> */}
-
-                  <Button type="submit" onClick={handleView} variant="Secondary" fill="Soft">
                     <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">Save & View</Text>
+                  </Button>
                 </Box>
               </Box>
             </Dialog>
           </FocusTrap>
         </OverlayCenter>
       </Overlay>
-      <Button
+      <NavItem variant="Background" aria-selected={selected}>
-        variant="Secondary"
+        <NavButton onClick={() => setDialog(true)}>
-        fill="Soft"
+          <NavItemContent>{children}</NavItemContent>
-        size="300"
+        </NavButton>
-        before={<Icon size="100" src={Icons.Plus} />}
+      </NavItem>
-        onClick={() => setDialog(true)}
-      >
-        <Text size="B300" truncate>
-          Add Server
-        </Text>
-      </Button>
     </>
   );
 }
 
+type ExploreServerNavItemAction = {
+  onClick: () => Promise<void>;
+  icon: IconSrc;
+  alwaysVisible: boolean;
+};
+type ExploreServerNavItemProps = {
+  server: string;
+  selected: boolean;
+  icon: IconSrc;
+  action?: ExploreServerNavItemAction;
+};
+export function ExploreServerNavItem({
+  server,
+  selected,
+  icon,
+  action,
+}: ExploreServerNavItemProps) {
+  const [hover, setHover] = useState(false);
+  const { hoverProps } = useHover({ onHoverChange: setHover });
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
+  const [actionState, actionCallback] = useAsyncCallback(
+    useCallback(async () => {
+      await action?.onClick();
+    }, [action])
+  );
+  const actionInProgress =
+    actionState.status === AsyncStatus.Loading || actionState.status === AsyncStatus.Success;
+
+  return (
+    <NavItem
+      variant="Background"
+      radii="400"
+      aria-selected={selected}
+      {...hoverProps}
+      {...focusWithinProps}
+    >
+      <NavLink to={getExploreServerPath(server)}>
+        <NavItemContent>
+          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+            <Avatar size="200" radii="400">
+              <Icon src={icon} size="100" filled={selected} />
+            </Avatar>
+            <Box as="span" grow="Yes">
+              <Text as="span" size="Inherit" truncate>
+                {server}
+              </Text>
+            </Box>
+          </Box>
+        </NavItemContent>
+      </NavLink>
+      {action !== undefined && (hover || actionInProgress || action.alwaysVisible) && (
+        <NavItemOptions>
+          <IconButton
+            onClick={actionCallback}
+            variant="Background"
+            fill="None"
+            size="300"
+            radii="300"
+            disabled={actionInProgress}
+          >
+            {actionInProgress ? (
+              <Spinner variant="Secondary" fill="Solid" size="200" />
+            ) : (
+              <Icon size="50" src={action.icon} />
+            )}
+          </IconButton>
+        </NavItemOptions>
+      )}
+    </NavItem>
+  );
+}
+
 export function Explore() {
   const mx = useMatrixClient();
+  const navigate = useNavigate();
   useNavToActivePathMapper('explore');
   const userId = mx.getUserId();
   const clientConfig = useClientConfig();
   const userServer = userId ? getMxIdServer(userId) : undefined;
-  const servers =
+  const featuredServers = useMemo(
-    clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [];
+    () =>
+      clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [],
+    [clientConfig, userServer]
+  );
+  const [exploreServers, addServer, removeServer] = useExploreServers(featuredServers);
 
-  const featuredSelected = useExploreFeaturedSelected();
   const selectedServer = useExploreServer();
+  const exploringFeaturedRooms = useExploreFeaturedRooms();
+  const exploringUnlistedServer = useMemo(
+    () =>
+      !(
+        selectedServer === undefined ||
+        selectedServer === userServer ||
+        featuredServers.includes(selectedServer) ||
+        exploreServers.includes(selectedServer)
+      ),
+    [exploreServers, selectedServer, userServer, featuredServers]
+  );
+
+  const addServerCallback = useCallback(
+    async (server: string, save: boolean) => {
+      if (save && server !== userServer && !featuredServers.includes(server) && selectedServer) {
+        await addServer(server);
+      }
+      navigate(getExploreServerPath(server));
+    },
+    [addServer, navigate, userServer, featuredServers, selectedServer]
+  );
+
+  const removeServerCallback = useCallback(
+    async (server: string) => {
+      await removeServer(server);
+    },
+    [removeServer]
+  );
 
   return (
     <PageNav>
@@ -182,12 +300,12 @@ export function Explore() {
       <PageNavContent>
         <Box direction="Column" gap="300">
           <NavCategory>
-            <NavItem variant="Background" radii="400" aria-selected={featuredSelected}>
+            <NavItem variant="Background" radii="400" aria-selected={exploringFeaturedRooms}>
               <NavLink to={getExploreFeaturedPath()}>
                 <NavItemContent>
                   <Box as="span" grow="Yes" alignItems="Center" gap="200">
                     <Avatar size="200" radii="400">
-                      <Icon src={Icons.Bulb} size="100" filled={featuredSelected} />
+                      <Icon src={Icons.Bulb} size="100" filled={exploringFeaturedRooms} />
                     </Avatar>
                     <Box as="span" grow="Yes">
                       <Text as="span" size="Inherit" truncate>
@@ -199,67 +317,68 @@ export function Explore() {
               </NavLink>
             </NavItem>
             {userServer && (
-              <NavItem
+              <ExploreServerNavItem
-                variant="Background"
+                server={userServer}
-                radii="400"
+                selected={userServer === selectedServer}
-                aria-selected={selectedServer === userServer}
+                icon={Icons.Home}
-              >
+              />
-                <NavLink to={getExploreServerPath(userServer)}>
+            )}
-                  <NavItemContent>
+            {exploringUnlistedServer && selectedServer !== undefined && (
-                    <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              <ExploreServerNavItem
-                      <Avatar size="200" radii="400">
+                server={selectedServer}
-                        <Icon
+                selected
-                          src={Icons.Server}
+                icon={Icons.Server}
-                          size="100"
+                action={{
-                          filled={selectedServer === userServer}
+                  alwaysVisible: true,
-                        />
+                  icon: Icons.Plus,
-                      </Avatar>
+                  onClick: () => addServerCallback(selectedServer, true),
-                      <Box as="span" grow="Yes">
+                }}
-                        <Text as="span" size="Inherit" truncate>
+              />
-                          {userServer}
-                        </Text>
-                      </Box>
-                    </Box>
-                  </NavItemContent>
-                </NavLink>
-              </NavItem>
             )}
           </NavCategory>
-          {servers.length > 0 && (
+          <NavCategory>
-            <NavCategory>
+            <NavCategoryHeader>
-              <NavCategoryHeader>
+              <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
-                <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
+                Servers
-                  Servers
+              </Text>
-                </Text>
+            </NavCategoryHeader>
-              </NavCategoryHeader>
+            {featuredServers.map((server) => (
-              {servers.map((server) => (
+              <ExploreServerNavItem
-                <NavItem
+                key={server}
-                  key={server}
+                server={server}
-                  variant="Background"
+                selected={server === selectedServer}
-                  radii="400"
+                icon={Icons.Server}
-                  aria-selected={server === selectedServer}
+              />
-                >
+            ))}
-                  <NavLink to={getExploreServerPath(server)}>
+            {exploreServers.map((server) => (
-                    <NavItemContent>
+              <ExploreServerNavItem
-                      <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                key={server}
-                        <Avatar size="200" radii="400">
+                server={server}
-                          <Icon src={Icons.Server} size="100" filled={server === selectedServer} />
+                selected={server === selectedServer}
-                        </Avatar>
+                icon={Icons.Server}
-                        <Box as="span" grow="Yes">
+                action={{
-                          <Text as="span" size="Inherit" truncate>
+                  alwaysVisible: false,
-                            {server}
+                  icon: Icons.Minus,
-                          </Text>
+                  onClick: () => removeServerCallback(server),
-                        </Box>
+                }}
-                      </Box>
+              />
-                    </NavItemContent>
+            ))}
-                  </NavLink>
+            <AddExploreServerPrompt
-                </NavItem>
+              onSubmit={addServerCallback}
-              ))}
+              header={<Text size="H4">Add Server</Text>}
-            </NavCategory>
+            >
-          )}
+              <Box as="span" grow="Yes" alignItems="Center" gap="200">
-          <Box direction="Column">
+                <Avatar size="200" radii="400">
-            <AddServer />
+                  <Icon src={Icons.Plus} size="100" />
-          </Box>
+                </Avatar>
+                <Box as="span" grow="Yes">
+                  <Text as="span" size="Inherit" truncate>
+                    Add Server
+                  </Text>
+                </Box>
+              </Box>
+            </AddExploreServerPrompt>
+          </NavCategory>
         </Box>
       </PageNavContent>
     </PageNav>

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

@@ -24,6 +24,8 @@ import {
   Scroll,
   Spinner,
   Text,
+  Tooltip,
+  TooltipProvider,
   config,
   toRem,
 } from 'folds';
@@ -45,6 +47,8 @@ import { getMxIdServer } from '../../../utils/matrix';
 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';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -348,6 +352,7 @@ 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);
@@ -356,6 +361,9 @@ export function PublicRooms() {
   const searchInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const roomTypeFilters = useRoomTypeFilters();
+  const [exploreServers, , removeServer] = useExploreServers();
+  const isUserAddedServer = server && exploreServers.includes(server);
+  const isUserHomeServer = server && server === userServer;
 
   const currentLimit: number = useMemo(() => {
     const limitParam = serverSearchParams.limit;
@@ -468,6 +476,20 @@ export function PublicRooms() {
     explore({ instance: instanceId, since: undefined });
   };
 
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const [removeServerState, handleRemoveServer] = useAsyncCallback(
+    useCallback(async () => {
+      if (!server) return;
+
+      setMenuAnchor(undefined);
+      await removeServer(server);
+    }, [server, removeServer])
+  );
+  const isRemoving = removeServerState.status === AsyncStatus.Loading;
+
   return (
     <Page>
       <PageHeader balance>
@@ -506,13 +528,78 @@ export function PublicRooms() {
                 </BackRouteHandler>
               )}
             </Box>
-            <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+            <Box grow="Yes" basis="Yes" justifyContent="Center" alignItems="Center" gap="200">
-              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Server} />}
+              {screenSize !== ScreenSize.Mobile && <Icon size="400" src={isUserHomeServer ? Icons.Home : Icons.Server} />}
               <Text size="H3" truncate>
                 {server}
               </Text>
             </Box>
-            <Box grow="Yes" basis="No" />
+            <Box shrink="No" grow="Yes" basis="No" justifyContent="End">
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>More Options</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) =>
+                  isUserAddedServer && (
+                    <IconButton
+                      onClick={handleOpenMenu}
+                      ref={triggerRef}
+                      aria-pressed={!!menuAnchor}
+                    >
+                      <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>
           </>
         )}
       </PageHeader>

src/types/matrix/accountData.ts

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