Point avatar and View Profile at own person page; drop the profile page

internal/directory/directory.go

@@ -48,7 +48,6 @@ func Register(mux *http.ServeMux, cache *Cache, mapsKey string) {
 		mux.HandleFunc("GET /"+section, a.page)
 	}
 	mux.HandleFunc("GET /my-family", a.myFamily)
-	mux.HandleFunc("GET /profile", a.page)
 	mux.HandleFunc("GET /people/{email}", a.page)
 	mux.HandleFunc("GET /families/{key}", a.page)
 	mux.HandleFunc("GET /classrooms/{name}", a.page)

web/directory/index.html

@@ -57,7 +57,7 @@
 <div class="brand"><img src="/static/brand/icon-192.png" alt=""><span>Helios Who?</span></div>
 <nav id="nav"></nav>
 <div class="user-menu" id="user-menu" hidden>
-<a href="/profile">View Profile</a>
+<a href="/people/{{.UserEmail}}">View Profile</a>
 <form method="post" action="/auth/logout"><button>Sign Out</button></form>
 </div>
 <div class="user" id="user"><span class="user-avatar">{{.UserInitial}}</span><span>{{.UserName}}</span></div>
@@ -73,7 +73,7 @@
 <div class="drawer-user">
 <div class="drawer-user-menu-anchor">
 <div class="user-menu" id="drawer-user-menu" hidden>
-<a href="/profile">View Profile</a>
+<a href="/people/{{.UserEmail}}">View Profile</a>
 <form method="post" action="/auth/logout"><button>Sign Out</button></form>
 </div>
 </div>

web/static/directory/app.js

@@ -609,9 +609,6 @@ function fromCrumbs() {
   if (seg[0] === 'staff') {
     return [['Staff', back]];
   }
-  if (seg[0] === 'profile') {
-    return [['Profile', back]];
-  }
   if (seg[0] === 'email-list') {
     return [['Email List', back]];
   }
@@ -1075,8 +1072,6 @@ function renderFamilyDetail(key) {
       crumbs = [['People', back], [shortName, null], ['Family', null]];
     } else if (rseg[0] === 'map') {
       crumbs = [['Map', back], [shortName, null], ['Family', null]];
-    } else if (rseg[0] === 'profile') {
-      crumbs = [['Profile', back], ['Family', null]];
     }
   }
   main.append(breadcrumbs(crumbs));
@@ -1946,30 +1941,6 @@ function pronounceEditor(target, key) {
   return box;
 }
 
-function renderProfile() {
-  const main = document.querySelector('#main');
-  main.replaceChildren();
-  const me = byEmail[document.body.dataset.userEmail];
-  if (!me) {
-    main.append(el('div', 'empty', 'Not found.'));
-    return;
-  }
-  const content = el('div', 'container content');
-  const family = state.model.families[me.familyKey];
-  if (family) {
-    content.append(el('h1', 'profile-heading', 'Family Photo'));
-    content.append(listRow(thumbUrl(family.photoUrl), '', 'Family Photo', family.photoCaption || '', familyLink(me.familyKey)));
-    const kids = (family.kidEmails || []).map(e => byEmail[e]).filter(Boolean);
-    if (kids.length) {
-      content.append(el('h1', 'profile-heading', 'Students'));
-      for (const k of kids) {
-        content.append(listRow(thumbUrl(k.photoUrl), (k.pronouns || '').toUpperCase(), firstName(k.fullName), '', personLink(k)));
-      }
-    }
-  }
-  main.append(content);
-}
-
 function tabParam(fallback) {
   return new URLSearchParams(location.search).get('tab') || fallback;
 }
@@ -2037,7 +2008,6 @@ const sectionTitles = {
   staff: 'Staff',
   map: 'Map',
   'email-list': 'Email List',
-  profile: 'Profile',
 };
 
 function render() {
@@ -2070,8 +2040,6 @@ function render() {
   } else if (seg[0] === 'map') {
     state.q = '';
     renderMapPage();
-  } else if (seg[0] === 'profile') {
-    renderProfile();
   }
 }
 
@@ -2080,6 +2048,10 @@ document.querySelector('#user').addEventListener('click', e => {
   e.stopPropagation();
   userMenu.hidden = !userMenu.hidden;
 });
+document.querySelector('#user .user-avatar').addEventListener('click', e => {
+  e.stopPropagation();
+  location.href = withFrom('/people/' + encodeURIComponent(document.body.dataset.userEmail));
+});
 
 const drawer = document.querySelector('#drawer');
 const drawerOverlay = document.querySelector('#drawer-overlay');

web/static/directory/style.css

@@ -612,16 +612,6 @@ main {
   fill: currentColor;
 }
 
-.profile-heading {
-  font-size: 24px;
-  font-weight: 700;
-  margin: 26px 0 10px;
-}
-
-.profile-heading:first-child {
-  margin-top: 4px;
-}
-
 .controls {
   display: flex;
   gap: 10px;