entering settings component

app/client/web/src/constants/Strings.ts

@@ -177,6 +177,7 @@ export const en = {
   details: 'Details',
   host: 'Host',
   guest: 'Guest',
+  edit: 'Edit',
   editSubject: 'Edit Subject',
   editMembership: 'Edit Membership',
   deleteTopic: 'Delete Topic',
@@ -390,6 +391,7 @@ export const fr = {
   details: 'Détails',
   host: 'Hôte',
   guest: 'Invité',
+  edit: 'Modifier',
   editSubject: 'Modifier le Sujet',
   editMembership: 'Modifier Membres du Suject',
   deleteTopic: 'Supprimer le Sujet',
@@ -604,6 +606,7 @@ export const sp = {
   details: 'Detalles',
   host: 'Anfitrión',
   guest: 'Invitado',
+  edit: 'Editar',
   editSubject: 'Editar tema',
   editMembership: 'Editar Miembros del Tema',
   deleteTopic: 'Eliminar tema',
@@ -817,6 +820,7 @@ export const pt = {
   details: 'Detalhes',
   host: 'Anfitrião',
   guest: 'Convidado',
+  edit: 'Editar',
   editSubject: 'Editar tópico',
   editMembership: 'Editar membros do tópico',
   deleteTopic: 'Excluir tópico',
@@ -1030,6 +1034,7 @@ export const de = {
   details: 'Details',
   host: 'Host',
   guest: 'Gast',
+  edit: 'Bearbeiten',
   editSubject: 'Thema bearbeiten',
   editMembership: 'Mitgliedschaft im Thema bearbeiten',
   deleteTopic: 'Thema löschen',
@@ -1244,6 +1249,7 @@ export const ru = {
   details: 'Детали',
   host: 'Хост',
   guest: 'Гость',
+  edit: 'Pедактировать',
   editSubject: 'Редактировать тему',
   editMembership: 'Редактировать участников темы',
   deleteTopic: 'Удалить тему',

app/client/web/src/settings/Settings.module.css

@@ -1,2 +1,28 @@
 .settings {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  .header {
+    font-size: 24px;
+    text-align: center;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .image {
+    position: relative;
+    width: 80%;
+    max-width: 250px;
+  }
+
+  .edit {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
 }

app/client/web/src/settings/Settings.tsx

@@ -1,10 +1,22 @@
 import { useSettings } from './useSettings.hook';
+import { Text, Image, Button } from '@mantine/core';
+import classes from './Settings.module.css';
 
 export function Settings() {
   const { state, actions } = useSettings();
 
   console.log(state);
   
-  return <div>SETTINGS!!!</div>
+  return (
+    <div className={classes.settings}>
+      <Text className={classes.header}>{`${state.profile.handle}${state.profile.node ? '/' + state.profile.node : ''}`}</Text>
+      <div className={classes.image}>
+        <Image radius="md" src={state.imageUrl} /> 
+        <div className={classes.edit}>
+          <Button size="compact-md" variant="light">{ state.strings.edit }</Button>
+        </div>
+      </div>
+    </div>
+  );
 }
 

app/client/web/src/settings/useSettings.hook.ts

@@ -1,15 +1,19 @@
 import { useEffect, useState, useContext } from 'react'
 import { AppContext } from '../context/AppContext';
+import { DisplayContext } from '../context/DisplayContext';
 import { ContextType } from '../context/ContextType';
 import { Session, Settings, Identity, type Profile, type Config } from 'databag-client-sdk'
 
 export function useSettings() {
 
+  const display = useContext(DisplayContext) as ContextType;
   const app = useContext(AppContext) as ContextType;
 
   const [state, setState] = useState({
     config: {},
     profile: {},
+    imageUrl: null,
+    strings: display.state.strings,
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -33,9 +37,8 @@ export function useSettings() {
       updateState({ config }) 
     }
     settings.addConfigListener(setConfig);
-    const setProfile = (profile: Profile) => { 
-console.log("URL: ", identity.getProfileImageUrl());
-      updateState({ profile }) 
+    const setProfile = (profile: Profile) => {
+      updateState({ profile, imageUrl: identity.getProfileImageUrl() }) 
     }
     identity.addProfileListener(setProfile)
     return () => {