Feat show all rooms

.changeset/add_show_all_rooms.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add toggle to list all rooms inside of the home sidebar.

src/app/pages/client/home/Home.tsx

@@ -71,6 +71,10 @@ type HomeMenuProps = {
 const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
   const orphanRooms = useHomeRooms();
   const [hideReads] = useSetting(settingsAtom, 'hideReads');
+  const [isShowingAllRoomsInHome, setIsShowingAllRoomsInHome] = useSetting(
+    settingsAtom,
+    'isShowingAllRoomsInHome'
+  );
   const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
   const mx = useMatrixClient();
 
@@ -94,6 +98,16 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
             Mark as Read
           </Text>
         </MenuItem>
+        <MenuItem
+          onClick={() => setIsShowingAllRoomsInHome(!isShowingAllRoomsInHome)}
+          size="300"
+          after={<Icon size="100" src={isShowingAllRoomsInHome ? Icons.Home : Icons.Globe} />}
+          radii="300"
+        >
+          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+            {isShowingAllRoomsInHome ? 'Show Home Rooms' : 'Show All Rooms'}
+          </Text>
+        </MenuItem>
       </Box>
     </Menu>
   );
@@ -205,7 +219,8 @@ export function Home() {
   const mx = useMatrixClient();
   useNavToActivePathMapper('home');
   const scrollRef = useRef<HTMLDivElement>(null);
-  const rooms = useHomeRooms();
+  const [isShowingAllRoomsInHome] = useSetting(settingsAtom, 'isShowingAllRoomsInHome');
+  const rooms = useHomeRooms(isShowingAllRoomsInHome);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
   const navigate = useNavigate();
@@ -236,7 +251,7 @@ export function Home() {
 
   const sortedRooms = useMemo(() => {
     const items = Array.from(rooms).toSorted(
-      closedCategories.has(DEFAULT_CATEGORY_ID)
+      closedCategories.has(DEFAULT_CATEGORY_ID) || isShowingAllRoomsInHome
         ? factoryRoomIdByActivity(mx)
         : factoryRoomIdByAtoZ(mx)
     );
@@ -248,7 +263,7 @@ export function Home() {
       return items.filter((rId) => hasUnread(rId) || rId === selectedRoomId);
     }
     return items;
-  }, [mx, rooms, closedCategories, roomToUnread, selectedRoomId]);
+  }, [mx, rooms, closedCategories, roomToUnread, selectedRoomId, isShowingAllRoomsInHome]);
 
   const virtualizer = useVirtualizer({
     count: sortedRooms.length,
@@ -411,6 +426,7 @@ export function Home() {
                     const room = mx.getRoom(roomId);
                     if (!room) return null;
                     const selected = selectedRoomId === roomId;
+                    const canonicalName = getCanonicalAliasOrRoomId(mx, roomId);
 
                     return (
                       <VirtualTile
@@ -436,7 +452,7 @@ export function Home() {
                             selected={selected}
                             showAvatar={showIcons()}
                             hideText={hideText}
-                            linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
+                            linkPath={getHomeRoomPath(canonicalName)}
                             notificationMode={getRoomNotificationMode(
                               notificationPreferences,
                               room.roomId

src/app/pages/client/home/RoomProvider.tsx

@@ -6,9 +6,12 @@ import { useMatrixClient } from '$hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '$features/join-before-navigate';
 import { useSearchParamsViaServers } from '$hooks/router/useSearchParamsViaServers';
 import { useHomeRooms } from './useHomeRooms';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 
 export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
+  const [isShowingAllRoomsInHome] = useSetting(settingsAtom, 'isShowingAllRoomsInHome');
   const rooms = useHomeRooms();
 
   const { roomIdOrAlias: encodedRoomIdOrAlias, eventId: encodedEventId } = useParams();
@@ -18,7 +21,7 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
 
-  if (!room || !rooms.includes(room.roomId)) {
+  if (!room || (!isShowingAllRoomsInHome && !rooms.includes(room.roomId))) {
     return (
       <JoinBeforeNavigate
         roomIdOrAlias={roomIdOrAlias!}

src/app/pages/client/home/useHomeRooms.ts

@@ -5,10 +5,10 @@ import { roomToParentsAtom } from '$state/room/roomToParents';
 import { allRoomsAtom } from '$state/room-list/roomList';
 import { useOrphanRooms } from '$state/hooks/roomList';
 
-export const useHomeRooms = () => {
+export const useHomeRooms = (isShowingAllRoomsInHome?: boolean) => {
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const rooms = useOrphanRooms(mx, allRoomsAtom, mDirects, roomToParents);
+  const rooms = useOrphanRooms(mx, allRoomsAtom, mDirects, roomToParents, isShowingAllRoomsInHome);
   return rooms;
 };

src/app/state/hooks/roomList.ts

@@ -152,11 +152,15 @@ export const useOrphanRooms = (
   mx: MatrixClient,
   roomsAtom: RoomsAtom,
   mDirects: Set<string>,
-  roomToParents: RoomToParents
+  roomToParents: RoomToParents,
+  isShowingAllRoomsInHome?: boolean
 ) => {
   const selector: RoomSelector = useCallback(
-    (roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId) && !roomToParents.has(roomId),
-    [mx, mDirects, roomToParents]
+    (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      !mDirects.has(roomId) &&
+      (isShowingAllRoomsInHome || !roomToParents.has(roomId)),
+    [mx, mDirects, roomToParents, isShowingAllRoomsInHome]
   );
   return useSelectedRooms(roomsAtom, selector);
 };

src/app/state/settings.ts

@@ -187,6 +187,7 @@ export interface Settings {
   threadRootHeight: number;
   vcmsgSidebarWidth: number;
   widgetSidebarWidth: number;
+  isShowingAllRoomsInHome: boolean;
 
   // furry stuff
   renderAnimals: boolean;
@@ -321,6 +322,7 @@ export const defaultSettings: Settings = {
   threadRootHeight: 220,
   vcmsgSidebarWidth: 399,
   widgetSidebarWidth: 420,
+  isShowingAllRoomsInHome: false,
   // furry stuff
   renderAnimals: true,