Link the user's own picture and name in settings to their profile page

src/app/components/MenuSettings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {Capacitor} from "@capacitor/core"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
   import ServerPath from "@assets/icons/server-path.svg?dataurl"
   import GalleryMinimalistic from "@assets/icons/gallery-minimalistic.svg?dataurl"
   import Shield from "@assets/icons/shield-minimalistic.svg?dataurl"
@@ -14,6 +15,7 @@
   import LogOut from "@app/components/LogOut.svelte"
   import {user} from "@app/core"
   import {pushModal} from "@app/modal"
+  import {makeProfilePath} from "@app/routes"
 
   const logout = () => pushModal(LogOut)
 </script>
@@ -21,10 +23,16 @@
 <Modal>
   <ModalBody>
     <div class="flex flex-col gap-8 items-center py-12 max-w-[16rem] m-auto w-full">
-      <Link href="/settings/profile">
+      <Link href={makeProfilePath($user.pubkey)}>
         <Profile inert pubkey={$user.pubkey} />
       </Link>
       <div class="grid grid-cols-3 gap-3 w-full">
+        <Link
+          href="/settings/profile"
+          class="aspect-square button button-neutral h-[unset] flex flex-col gap-2 text-center">
+          <Icon icon={UserCircle} size={5} />
+          Profile
+        </Link>
         <Link
           href="/settings/alerts"
           class="aspect-square button button-neutral h-[unset] flex flex-col gap-2 text-center">

src/app/components/PrimaryNav.svelte

@@ -103,7 +103,7 @@
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>
     </div>
-    <PrimaryNavItem onclick={showSettingsMenu}>
+    <PrimaryNavItem onclick={showSettingsMenu} aria-label="Settings">
       {#if $userProfile?.picture()}
         <ImageIcon alt="Settings" src={$userProfile.picture()!} size={10} class="rounded-full" />
       {:else}

src/routes/settings/profile/+page.svelte

@@ -16,6 +16,7 @@
   import AltArrowUp from "@assets/icons/alt-arrow-up.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
@@ -29,6 +30,7 @@
   import InfoKeys from "@app/components/InfoKeys.svelte"
   import {pushModal} from "@app/modal"
   import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/pomade"
+  import {makeProfilePath} from "@app/routes"
   import {clip, pushToast} from "@app/toast"
   import {profiles, session, user} from "@app/core"
   import {isPomadeSession, requirePomadeSession} from "@app/pomade"
@@ -90,7 +92,7 @@
 <PageContent>
   <div class="card shadow-md flex flex-col gap-2">
     <div class="flex justify-between gap-2">
-      <div class="flex max-w-full gap-3">
+      <Link href={makeProfilePath($user.pubkey)} class="flex max-w-full gap-3">
         <div class="py-1">
           <ProfileCircle pubkey={$user.pubkey} size={10} />
         </div>
@@ -104,7 +106,7 @@
             {$profile?.nip05() ? displayNip05($profile.nip05()!) : pubkeyDisplay}
           </div>
         </div>
-      </div>
+      </Link>
       <Button
         class="button button-neutral button-circle flex justify-center items-center -mr-2 -mt-2 h-12 w-12"
         onclick={startEdit}>