diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css index ccf4be02..d2fc7817 100644 --- a/web/src/ui/roomlist/RoomList.css +++ b/web/src/ui/roomlist/RoomList.css @@ -151,4 +151,9 @@ img.avatar { width: 1rem; height: 1rem; } + + &.large { + width: 5rem; + height: 5rem; + } } diff --git a/web/src/ui/settings/SettingsView.css b/web/src/ui/settings/SettingsView.css index b680e22e..2135a6b3 100644 --- a/web/src/ui/settings/SettingsView.css +++ b/web/src/ui/settings/SettingsView.css @@ -1,4 +1,20 @@ div.settings-view { + div.room-details { + display: flex; + gap: .5rem; + + img.avatar { + margin-top: 0.5rem; + } + + div.room-name { + font-size: 1.2rem; + font-weight: bold; + text-overflow: ellipsis; + text-wrap: nowrap; + } + } + width: min(60rem, 80vw); display: flex; flex-direction: column; diff --git a/web/src/ui/settings/SettingsView.tsx b/web/src/ui/settings/SettingsView.tsx index 99a8b3ec..1621c8d4 100644 --- a/web/src/ui/settings/SettingsView.tsx +++ b/web/src/ui/settings/SettingsView.tsx @@ -16,6 +16,7 @@ import { Suspense, lazy, use, useCallback, useRef, useState } from "react" import { ScaleLoader } from "react-spinners" import Client from "@/api/client.ts" +import { getRoomAvatarURL } from "@/api/media.ts" import { RoomStateStore, usePreferences } from "@/api/statestore" import { Preference, @@ -25,8 +26,10 @@ import { preferenceContextToInt, preferences, } from "@/api/types/preferences" +import { useEventAsState } from "@/util/eventdispatcher.ts" import useEvent from "@/util/useEvent.ts" import ClientContext from "../ClientContext.ts" +import { LightboxContext } from "../modal/Lightbox.tsx" import JSONView from "../util/JSONView.tsx" import Toggle from "../util/Toggle.tsx" import CloseIcon from "@/icons/close.svg?react" @@ -289,6 +292,7 @@ const AppliedSettingsView = ({ room }: SettingsViewProps) => { } const SettingsView = ({ room }: SettingsViewProps) => { + const roomMeta = useEventAsState(room.meta) const client = use(ClientContext)! const setPref = useCallback((context: PreferenceContext, key: keyof Preferences, value: PreferenceValueType | undefined) => { if (context === PreferenceContext.Account) { @@ -330,7 +334,20 @@ const SettingsView = ({ room }: SettingsViewProps) => { const roomLocal = room.localPreferenceCache return <>

Settings

- {room.roomID} +
+ +
+ {roomMeta.name &&
{roomMeta.name}
} + {room.roomID} +
{roomMeta.topic}
+
+