New room settings, add customizable power levels and dev tools (#2222)

* WIP - add room settings dialog * join rule setting - WIP * show emojis & stickers in room settings - WIP * restyle join rule switcher * Merge branch 'dev' into new-room-settings * add join rule hook * open room settings from global state * open new room settings from all places * rearrange settings menu item * add option for creating new image pack * room devtools - WIP * render room state events as list * add option to open state event * add option to edit state event * refactor text area code editor into hook * add option to send message and state event * add cutout card component * add hook for room account data * display room account data - WIP * refactor global account data editor component * add account data editor in room * fix font style in devtool * show state events in compact form * add option to delete room image pack * add server badge component * add member tile component * render members in room settings * add search in room settings member * add option to reset member search * add filter in room members * fix member virtual item key * remove color from serve badge in room members * show room in settings * fix loading indicator position * power level tags in room setting - WIP * generate fallback tag in backward compatible way * add color picker * add powers editor - WIP * add props to stop adding emoji to recent usage * add beta feature notice badge * add types for power level tag icon * refactor image pack rooms code to hook * option for adding new power levels tags * remove console log * refactor power icon * add option to edit power level tags * remove power level from powers pill * fix power level labels * add option to delete power levels * fix long power level name shrinks power integer * room permissions - WIP * add power level selector component * add room permissions * move user default permission setting to other group * add power permission peek menu * fix weigh of power switch text * hide above for max power in permission switcher * improve beta badge description * render room profile in room settings * add option to edit room profile * make room topic input text area * add option to enable room encryption in room settings * add option to change message history visibility * add option to change join rule * add option for addresses in room settings * close encryption dialog after enabling
2025-11-10 17:20:28 +03:00 · 2025-03-19 23:14:54 +11:00 · 2025-03-19 23:14:54 +11:00 · 286983c833
commit 286983c833
parent 00f3df8719
73 changed files with 6196 additions and 420 deletions
--- a/src/app/hooks/useRoomAliases.ts
+++ b/src/app/hooks/useRoomAliases.ts
@ -0,0 +1,170 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { MatrixError, Room } from 'matrix-js-sdk';
+import { RoomCanonicalAliasEventContent } from 'matrix-js-sdk/lib/types';
+import { AsyncState, useAsyncCallback } from './useAsyncCallback';
+import { useMatrixClient } from './useMatrixClient';
+import { useAlive } from './useAlive';
+import { useStateEvent } from './useStateEvent';
+import { StateEvent } from '../../types/matrix/room';
+import { getStateEvent } from '../utils/room';
+
+export const usePublishedAliases = (room: Room): [string | undefined, string[]] => {
+  const aliasContent = useStateEvent(
+    room,
+    StateEvent.RoomCanonicalAlias
+  )?.getContent<RoomCanonicalAliasEventContent>();
+
+  const canonicalAlias = aliasContent?.alias;
+
+  const publishedAliases = useMemo(() => {
+    const aliases: string[] = [];
+    if (typeof aliasContent?.alias === 'string') {
+      aliases.push(aliasContent.alias);
+    }
+    aliasContent?.alt_aliases?.forEach((alias) => {
+      if (typeof alias === 'string') {
+        aliases.push(alias);
+      }
+    });
+    return aliases;
+  }, [aliasContent]);
+
+  return [canonicalAlias, publishedAliases];
+};
+
+export const useSetMainAlias = (room: Room): ((alias: string | undefined) => Promise<void>) => {
+  const mx = useMatrixClient();
+  const mainAlias = useCallback(
+    async (alias: string | undefined) => {
+      const content = getStateEvent(
+        room,
+        StateEvent.RoomCanonicalAlias
+      )?.getContent<RoomCanonicalAliasEventContent>();
+
+      const altAliases: string[] = [];
+      if (content?.alias && content.alias !== alias) {
+        altAliases.push(content.alias);
+      }
+      content?.alt_aliases?.forEach((a) => {
+        if (a !== alias) {
+          altAliases.push(a);
+        }
+      });
+
+      const newContent: RoomCanonicalAliasEventContent = {
+        alias,
+        alt_aliases: altAliases,
+      };
+
+      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+    },
+    [mx, room]
+  );
+
+  return mainAlias;
+};
+
+export const usePublishUnpublishAliases = (
+  room: Room
+): {
+  publishAliases: (aliases: string[]) => Promise<void>;
+  unpublishAliases: (aliases: string[]) => Promise<void>;
+} => {
+  const mx = useMatrixClient();
+  const publishAliases = useCallback(
+    async (aliases: string[]) => {
+      const content = getStateEvent(
+        room,
+        StateEvent.RoomCanonicalAlias
+      )?.getContent<RoomCanonicalAliasEventContent>();
+      const altAliases = content?.alt_aliases ?? [];
+
+      aliases.forEach((alias) => {
+        if (!altAliases.includes(alias)) {
+          altAliases.push(alias);
+        }
+      });
+
+      const newContent: RoomCanonicalAliasEventContent = {
+        alias: content?.alias,
+        alt_aliases: altAliases,
+      };
+
+      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+    },
+    [mx, room]
+  );
+
+  const unpublishAliases = useCallback(
+    async (aliases: string[]) => {
+      const content = getStateEvent(
+        room,
+        StateEvent.RoomCanonicalAlias
+      )?.getContent<RoomCanonicalAliasEventContent>();
+      const altAliases: string[] = [];
+
+      content?.alt_aliases?.forEach((alias) => {
+        if (!aliases.includes(alias)) {
+          altAliases.push(alias);
+        }
+      });
+
+      const newContent: RoomCanonicalAliasEventContent = {
+        alias: content?.alias,
+        alt_aliases: altAliases,
+      };
+
+      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+    },
+    [mx, room]
+  );
+
+  return {
+    publishAliases,
+    unpublishAliases,
+  };
+};
+
+export const useLocalAliases = (
+  roomId: string
+): {
+  localAliasesState: AsyncState<string[], MatrixError>;
+  addLocalAlias: (alias: string) => Promise<void>;
+  removeLocalAlias: (alias: string) => Promise<void>;
+} => {
+  const mx = useMatrixClient();
+  const alive = useAlive();
+
+  const [aliasesState, loadAliases] = useAsyncCallback<string[], MatrixError, []>(
+    useCallback(async () => {
+      const content = await mx.getLocalAliases(roomId);
+      return content.aliases;
+    }, [mx, roomId])
+  );
+
+  useEffect(() => {
+    loadAliases();
+  }, [loadAliases]);
+
+  const addLocalAlias = useCallback(
+    async (alias: string) => {
+      await mx.createAlias(alias, roomId);
+      if (alive()) await loadAliases();
+    },
+    [mx, roomId, loadAliases, alive]
+  );
+
+  const removeLocalAlias = useCallback(
+    async (alias: string) => {
+      await mx.deleteAlias(alias);
+      if (alive()) await loadAliases();
+    },
+    [mx, loadAliases, alive]
+  );
+
+  return {
+    localAliasesState: aliasesState,
+    addLocalAlias,
+    removeLocalAlias,
+  };
+};