emojis and sticker user settings - WIP

src/app/features/settings/Settings.tsx

@@ -11,6 +11,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { UserAvatar } from '../../components/user-avatar';
 import { nameInitials } from '../../utils/common';
 import { Notifications } from './notifications';
+import { EmojisStickers } from './emojis-stickers';
 import { DeveloperTools } from './developer-tools';
 import { About } from './about';
 
@@ -170,6 +171,9 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
       {activePage === SettingsPages.NotificationPage && (
         <Notifications requestClose={handlePageRequestClose} />
       )}
+      {activePage === SettingsPages.EmojisStickersPage && (
+        <EmojisStickers requestClose={handlePageRequestClose} />
+      )}
       {activePage === SettingsPages.DeveloperToolsPage && (
         <DeveloperTools requestClose={handlePageRequestClose} />
       )}

src/app/features/settings/emojis-stickers/EmojisStickers.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
+import { Page, PageContent, PageHeader } from '../../../components/page';
+import { GlobalPacks } from './GlobalPacks';
+import { UserPack } from './UserPack';
+
+type EmojisStickersProps = {
+  requestClose: () => void;
+};
+export function EmojisStickers({ requestClose }: EmojisStickersProps) {
+  return (
+    <Page>
+      <PageHeader outlined={false}>
+        <Box grow="Yes" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text size="H3" truncate>
+              Emojis & Stickers
+            </Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton onClick={requestClose} variant="Surface">
+              <Icon src={Icons.Cross} />
+            </IconButton>
+          </Box>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <Box direction="Column" gap="700">
+              <UserPack />
+              <GlobalPacks />
+            </Box>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  Icon,
+  Icons,
+  IconButton,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+} from 'folds';
+import { useGlobalImagePacks } from '../../../hooks/useImagePacks';
+import { SequenceCardStyle } from '../styles.css';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SettingTile } from '../../../components/setting-tile';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { ImageUsage } from '../../../plugins/custom-emoji';
+import { LineClamp2 } from '../../../styles/Text.css';
+
+export function GlobalPacks() {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const globalPacks = useGlobalImagePacks();
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Globally Accessible</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Select Pack"
+          description="Pick emojis and stickers pack to use in all rooms."
+          after={
+            <Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
+              <Text size="B300">Select</Text>
+            </Button>
+          }
+        />
+      </SequenceCard>
+      {globalPacks.map((pack) => {
+        const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
+        const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+
+        return (
+          <SequenceCard
+            className={SequenceCardStyle}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            <SettingTile
+              title={pack.meta.name ?? 'Unknown'}
+              description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
+              before={
+                <Box alignItems="Center" gap="300">
+                  <IconButton size="300" radii="Pill" variant="Secondary">
+                    <Icon src={Icons.Cross} size="100" />
+                  </IconButton>
+                  <Avatar size="300" radii="300">
+                    {avatarUrl ? (
+                      <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
+                    ) : (
+                      <AvatarFallback>
+                        <Icon size="400" src={Icons.Sticker} filled />
+                      </AvatarFallback>
+                    )}
+                  </Avatar>
+                </Box>
+              }
+              after={
+                <Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
+                  <Text size="B300">View</Text>
+                </Button>
+              }
+            />
+          </SequenceCard>
+        );
+      })}
+    </Box>
+  );
+}

src/app/features/settings/emojis-stickers/UserPack.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Avatar, AvatarFallback, AvatarImage, Box, Button, Icon, Icons, Text } from 'folds';
+import { useUserImagePack } from '../../../hooks/useImagePacks';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { ImageUsage } from '../../../plugins/custom-emoji';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+
+export function UserPack() {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const userPack = useUserImagePack();
+  const avatarMxc = userPack?.getAvatarUrl(ImageUsage.Emoticon);
+  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Personal Pack</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title={userPack?.meta.name ?? 'Default'}
+          description={userPack?.meta.attribution}
+          before={
+            <Avatar size="300" radii="300">
+              {avatarUrl ? (
+                <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
+              ) : (
+                <AvatarFallback>
+                  <Icon size="400" src={Icons.Sticker} filled />
+                </AvatarFallback>
+              )}
+            </Avatar>
+          }
+          after={
+            <Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
+              <Text size="B300">View</Text>
+            </Button>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}

src/app/features/settings/emojis-stickers/index.ts

@@ -0,0 +1 @@
+export * from './EmojisStickers';