Merge branch 'dev' into explore-persistent-server-list

src/app/hooks/usePowerLevelTags.ts

@@ -4,6 +4,8 @@ import { IPowerLevels } from './usePowerLevels';
 import { useStateEvent } from './useStateEvent';
 import { StateEvent } from '../../types/matrix/room';
 import { IImageInfo } from '../../types/matrix/common';
+import { ThemeKind } from './useTheme';
+import { accessibleColor } from '../plugins/color';
 
 export type PowerLevelTagIcon = {
   key?: string;
@@ -63,7 +65,7 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
   100: {
     name: 'Admin',
-    color: '#a000e4',
+    color: '#0088ff',
   },
   50: {
     name: 'Moderator',
@@ -71,9 +73,11 @@ const DEFAULT_TAGS: PowerLevelTags = {
   },
   0: {
     name: 'Member',
+    color: '#91cfdf',
   },
   [-1]: {
     name: 'Muted',
+    color: '#888888',
   },
 };
 
@@ -152,3 +156,24 @@ export const getTagIconSrc = (
   icon?.key?.startsWith('mxc://')
     ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
     : icon?.key;
+
+export const useAccessibleTagColors = (
+  themeKind: ThemeKind,
+  powerLevelTags: PowerLevelTags
+): Map<string, string> => {
+  const accessibleColors: Map<string, string> = useMemo(() => {
+    const colors: Map<string, string> = new Map();
+
+    getPowers(powerLevelTags).forEach((power) => {
+      const tag = powerLevelTags[power];
+      const { color } = tag;
+      if (!color) return;
+
+      colors.set(color, accessibleColor(themeKind, color));
+    });
+
+    return colors;
+  }, [powerLevelTags, themeKind]);
+
+  return accessibleColors;
+};

src/app/hooks/useRoom.ts

@@ -10,3 +10,13 @@ export function useRoom(): Room {
   if (!room) throw new Error('Room not provided!');
   return room;
 }
+
+const IsDirectRoomContext = createContext<boolean>(false);
+
+export const IsDirectRoomProvider = IsDirectRoomContext.Provider;
+
+export const useIsDirectRoom = () => {
+  const direct = useContext(IsDirectRoomContext);
+
+  return direct;
+};

src/app/hooks/useTheme.ts

@@ -1,7 +1,9 @@
 import { lightTheme } from 'folds';
-import { useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
 
 export enum ThemeKind {
   Light = 'light',
@@ -72,3 +74,37 @@ export const useSystemThemeKind = (): ThemeKind => {
 
   return themeKind;
 };
+
+export const useActiveTheme = (): Theme => {
+  const systemThemeKind = useSystemThemeKind();
+  const themes = useThemes();
+  const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
+  const [themeId] = useSetting(settingsAtom, 'themeId');
+  const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
+  const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+
+  if (!systemTheme) {
+    const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
+
+    return selectedTheme;
+  }
+
+  const selectedTheme =
+    systemThemeKind === ThemeKind.Dark
+      ? themes.find((theme) => theme.id === darkThemeId) ?? DarkTheme
+      : themes.find((theme) => theme.id === lightThemeId) ?? LightTheme;
+
+  return selectedTheme;
+};
+
+const ThemeContext = createContext<Theme | null>(null);
+export const ThemeContextProvider = ThemeContext.Provider;
+
+export const useTheme = (): Theme => {
+  const theme = useContext(ThemeContext);
+  if (!theme) {
+    throw new Error('No theme provided!');
+  }
+
+  return theme;
+};