how avatar and name of accounts

src/views/login/index.tsx

@@ -10,8 +10,17 @@ export const LoginView = () => {
   if (current) return <Navigate to={location.state?.from ?? "/"} replace />;
 
   return (
-    <Flex direction="column" alignItems="center" justifyContent="center" gap="4" height="80%" px="4">
-      <Avatar src="/apple-touch-icon.png" size="lg" />
+    <Flex
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      gap="4"
+      height="100%"
+      padding="4"
+      overflowX="hidden"
+      overflowY="auto"
+    >
+      <Avatar src="/apple-touch-icon.png" size="lg" flexShrink={0} />
       <Heading>noStrudel</Heading>
       <Outlet />
     </Flex>

src/views/login/nip05.tsx

@@ -91,7 +91,7 @@ export const LoginNip05View = () => {
   };
 
   return (
-    <Flex as="form" direction="column" gap="4" onSubmit={handleSubmit} minWidth="400">
+    <Flex as="form" direction="column" gap="4" onSubmit={handleSubmit} minWidth="350">
       <FormControl>
         <FormLabel>Enter user NIP-05 id</FormLabel>
         <InputGroup>

src/views/login/npub.tsx

@@ -29,7 +29,7 @@ export const LoginNpubView = () => {
   };
 
   return (
-    <Flex as="form" direction="column" gap="4" onSubmit={handleSubmit} minWidth="400">
+    <Flex as="form" direction="column" gap="4" onSubmit={handleSubmit} minWidth="350">
       <FormControl>
         <FormLabel>Enter user npub</FormLabel>
         <Input type="text" placeholder="npub1" isRequired value={npub} onChange={(e) => setNpub(e.target.value)} />

src/views/login/start.tsx

@@ -1,9 +1,59 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Button, Flex, Spinner } from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  Button,
+  Flex,
+  Heading,
+  IconButton,
+  Spinner,
+  Text,
+} from "@chakra-ui/react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { UserAvatar } from "../../components/user-avatar";
+import { getUserDisplayName } from "../../helpers/user-metadata";
 import useSubject from "../../hooks/use-subject";
+import { useUserMetadata } from "../../hooks/use-user-metadata";
 import accountService from "../../services/account";
 
+const AvailableAccount = ({ pubkey }: { pubkey: string }) => {
+  // this wont load unless the data is cached since there are no relay connections yet
+  const metadata = useUserMetadata(pubkey, []);
+
+  return (
+    <Box
+      display="flex"
+      gap="4"
+      alignItems="center"
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      padding="2"
+      cursor="pointer"
+      onClick={() => accountService.switchAccount(pubkey)}
+    >
+      <UserAvatar pubkey={pubkey} size="sm" />
+      <Text flex={1} mr="4" overflow="hidden">
+        {getUserDisplayName(metadata, pubkey)}
+      </Text>
+      <IconButton
+        icon={<CloseIcon />}
+        aria-label="Remove Account"
+        onClick={(e) => {
+          e.stopPropagation();
+          accountService.removeAccount(pubkey);
+        }}
+        size="sm"
+        variant="ghost"
+      />
+    </Box>
+  );
+};
+
 export const LoginStartView = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
@@ -37,7 +87,7 @@ export const LoginStartView = () => {
   if (loading) return <Spinner />;
 
   return (
-    <>
+    <Flex direction="column" gap="2" flexShrink={0} alignItems="center">
       <Alert status="warning" maxWidth="30rem">
         <AlertIcon />
         <Box>
@@ -49,16 +99,19 @@ export const LoginStartView = () => {
         Use browser extension
       </Button>
       <Button onClick={() => navigate("./nip05")}>Login with Nip-05 Id</Button>
-      <Button variant="link" onClick={() => navigate("./npub")}>
-        Login with npub
-      </Button>
-      <Flex gap="2" direction="column">
-        {accounts.map((account) => (
-          <Button key={account.pubkey} onClick={() => accountService.switchAccount(account.pubkey)}>
-            {account.pubkey}
-          </Button>
-        ))}
-      </Flex>
-    </>
+      <Button onClick={() => navigate("./npub")}>Login with npub</Button>
+      {accounts.length > 0 && (
+        <>
+          <Heading size="md" mt="4">
+            Accounts:
+          </Heading>
+          <Flex gap="2" direction="column">
+            {accounts.map((account) => (
+              <AvailableAccount key={account.pubkey} pubkey={account.pubkey} />
+            ))}
+          </Flex>
+        </>
+      )}
+    </Flex>
   );
 };

src/views/settings/index.tsx

@@ -19,6 +19,7 @@ import settings from "../../services/settings";
 import { clearCacheData, deleteDatabase } from "../../services/db";
 import accountService from "../../services/account";
 import useSubject from "../../hooks/use-subject";
+import { LogoutIcon } from "../../components/icons";
 
 export const SettingsView = () => {
   const blurImages = useSubject(settings.blurImages);
@@ -171,7 +172,9 @@ export const SettingsView = () => {
         </AccordionItem>
       </Accordion>
       <Flex gap="2" padding="4">
-        <Button onClick={() => accountService.logout()}>Logout</Button>
+        <Button leftIcon={<LogoutIcon />} onClick={() => accountService.logout()}>
+          Logout
+        </Button>
       </Flex>
     </Flex>
   );