Fixes according to Stephen's code review

firestore.rules

@@ -14,7 +14,7 @@ service cloud.firestore {
     match /users/{userId} {
       allow read;
       allow update: if resource.data.id == request.auth.uid 
-        || request.resource.data.diff(resource.data).affectedKeys()
+        && request.resource.data.diff(resource.data).affectedKeys()
             .hasOnly(['bio', 'bannerUrl', 'website', 'twitterHandle', 'discordHandle']);
     }
 

web/components/profile-menu.tsx

@@ -35,7 +35,7 @@ function getNavigationOptions(
       href: user ? '/home' : '/',
     },
     {
-      name: `@${user?.username}`,
+      name: `Your profile`,
       href: `/${user?.username}`,
     },
     ...(mobile

web/components/user-page.tsx

@@ -132,6 +132,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
 }
 
 // Assign each user to a random default banner based on the hash of userId
+// TODO: Consider handling banner uploads using our own storage bucket, like user avatars.
 export function defaultBannerUrl(userId: string) {
   const defaultBanner = [
     'https://images.unsplash.com/photo-1501523460185-2aa5d2a0f981?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2131&q=80',

web/pages/profile.tsx

@@ -20,24 +20,33 @@ import { User } from '../../common/user'
 import { updateUser } from '../lib/firebase/users'
 import { defaultBannerUrl } from '../components/user-page'
 import { SiteLink } from '../components/site-link'
+import Textarea from 'react-expanding-textarea'
 
 function EditUserField(props: {
   user: User
   field: 'bio' | 'bannerUrl' | 'twitterHandle' | 'discordHandle'
   label: string
-  isEditing: boolean
 }) {
-  const { user, field, label, isEditing } = props
+  const { user, field, label } = props
   const [value, setValue] = useState(user[field] ?? '')
 
   async function updateField() {
-    await updateUser(user.id, { [field]: value })
+    // Note: We trim whitespace before uploading to Firestore
+    await updateUser(user.id, { [field]: value.trim() })
   }
 
   return (
     <div>
       <label className="label">{label}</label>
 
+      {field === 'bio' ? (
+        <Textarea
+          className="textarea textarea-bordered w-full"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onBlur={updateField}
+        />
+      ) : (
         <input
           type="text"
           className="input input-bordered"
@@ -45,6 +54,7 @@ function EditUserField(props: {
           onChange={(e) => setValue(e.target.value || '')}
           onBlur={updateField}
         />
+      )}
     </div>
   )
 }