Add EditIdentity page (wip)

src/features/edit-identity/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import List, { ListItem } from 'soapbox/components/list';
+import { Button, Column, HStack, Icon, Input } from 'soapbox/components/ui';
+import { useInstance, useOwnAccount } from 'soapbox/hooks';
+
+interface IEditIdentity {
+}
+
+const messages = defineMessages({
+  title: { id: 'settings.edit_identity', defaultMessage: 'Identity' },
+});
+
+const identifiers = [
+  'alex@alexgleason.me',
+  'lunk@alexgleason.me',
+  'yolo@alexgleason.me',
+];
+
+/** EditIdentity component. */
+const EditIdentity: React.FC<IEditIdentity> = () => {
+  const intl = useIntl();
+  const { account } = useOwnAccount();
+
+  if (!account) return null;
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <List>
+        {identifiers.map((identifier) => (
+          <ListItem
+            key={identifier}
+            label={identifier}
+            isSelected={account.acct === identifier}
+            onSelect={() => { /* TODO */ }}
+          />
+        ))}
+        <ListItem label={<UsernameInput className='w-full' placeholder='Add new identity' />}>
+          <Button theme='accent'>Add</Button>
+        </ListItem>
+      </List>
+    </Column>
+  );
+};
+
+const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
+  const instance = useInstance();
+
+  return (
+    <Input
+      placeholder='Username'
+      append={(
+        <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
+          <Icon className='h-4 w-4' src={require('@tabler/icons/at.svg')} />
+          <span>{instance.domain}</span>
+        </HStack>
+      )}
+      {...props}
+    />
+  );
+};
+
+export default EditIdentity;

src/features/settings/index.tsx

@@ -20,6 +20,7 @@ const messages = defineMessages({
   configureMfa: { id: 'settings.configure_mfa', defaultMessage: 'Configure MFA' },
   deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
   editProfile: { id: 'settings.edit_profile', defaultMessage: 'Edit Profile' },
+  editIdentity: { id: 'settings.edit_identity', defaultMessage: 'Identity' },
   exportData: { id: 'column.export_data', defaultMessage: 'Export data' },
   importData: { id: 'navigation_bar.import_data', defaultMessage: 'Import data' },
   mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
@@ -65,6 +66,9 @@ const Settings = () => {
             <ListItem label={intl.formatMessage(messages.editProfile)} to='/settings/profile'>
               <span className='max-w-full truncate'>{displayName}</span>
             </ListItem>
+            <ListItem label={intl.formatMessage(messages.editIdentity)} to='/settings/identity'>
+              <span className='max-w-full truncate'>{account?.source?.nostr?.nip05}</span>
+            </ListItem>
           </List>
         </CardBody>
 

src/features/ui/index.tsx

@@ -137,6 +137,7 @@ import {
   ExternalLogin,
   LandingTimeline,
   BookmarkFolders,
+  EditIdentity,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -305,6 +306,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
+      <WrappedRoute path='/settings/identity' page={DefaultPage} component={EditIdentity} content={children} />
       {features.exportData && <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />}
       {features.importData && <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />}
       {features.accountAliases && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}

src/features/ui/util/async-components.ts

@@ -167,3 +167,4 @@ export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components
 export const BookmarkFolders = lazy(() => import('soapbox/features/bookmark-folders'));
 export const EditBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/edit-bookmark-folder-modal'));
 export const SelectBookmarkFolderModal = lazy(() => import('soapbox/features/ui/components/modals/select-bookmark-folder-modal'));
+export const EditIdentity = lazy(() => import('soapbox/features/edit-identity'));