Add user icon field and update version number

src/lib/components/UserAvatar.svelte

@@ -2,7 +2,14 @@
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
   export let user: any;
-  let firstLetter = user.first_name.charAt(0);
+
+  let icon: string = "";
+
+  if (user.icon != null && user.icon != "") {
+    icon = user.icon;
+  } else {
+    icon = user.username.charAt(0);
+  }
 
   async function navToSettings() {
     goto("/settings");
@@ -15,7 +22,7 @@
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
   <div class="avatar placeholder">
     <div class="bg-neutral text-neutral-content rounded-full w-10 ml-4">
-      <span class="text-2xl -mt-0.5">{firstLetter}</span>
+      <span class="text-2xl -mt-0.5">{icon}</span>
     </div>
   </div>
   <!-- svelte-ignore a11y-missing-attribute -->
@@ -26,6 +33,7 @@
   >
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-missing-attribute -->
+    <p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
     <li><a>Profile</a></li>
     <li><button on:click={navToLog}>My Log</button></li>
     <li><button on:click={navToSettings}>Settings</button></li>

src/lib/db/schema.ts

@@ -23,6 +23,7 @@ export const userTable = pgTable("user", {
   username: text("username").notNull(),
   first_name: text("first_name").notNull(),
   last_name: text("last_name").notNull(),
+  icon: text("icon"),
   hashed_password: varchar("hashed_password").notNull(),
 });
 

src/lib/server/auth.ts

@@ -19,6 +19,7 @@ export const lucia = new Lucia(adapter, {
       id: attributes.id,
       first_name: attributes.first_name,
       last_name: attributes.last_name,
+      icon: attributes.icon,
     };
   },
 });
@@ -35,5 +36,6 @@ export interface DatabaseUser {
   username: string;
   first_name: string;
   last_name: string;
+  icon: string;
   hashed_password: string;
 }

src/routes/settings/+page.server.ts

@@ -20,6 +20,7 @@ export const actions: Actions = {
     let username = formData.get("username");
     let firstName = formData.get("first_name");
     let lastName = formData.get("last_name");
+    let icon = formData.get("icon");
 
     let password = formData.get("password");
 
@@ -32,6 +33,15 @@ export const actions: Actions = {
         };
     }
 
+    if (icon.length > 1) {
+        return {
+            status: 400,
+            body: {
+                message: "Icon must be a single character"
+            }
+        };
+    }
+
     if (password) {
         let hashedPassword = await new Argon2id().hash(password);
         console.log(hashedPassword)
@@ -47,6 +57,7 @@ export const actions: Actions = {
             username: username,
             first_name: firstName,
             last_name: lastName,
+            icon: icon
         })
         .where(eq(userTable.id, userId));
 

src/routes/settings/+page.svelte

@@ -6,6 +6,7 @@
     let first_name = data.user?.first_name;
     let last_name = data.user?.last_name;
     let user_id = data.user?.id;
+    let icon = data.user?.icon;
 </script>
 
 <h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>
@@ -37,6 +38,14 @@
             id="last_name"
             class="block mb-2 input input-bordered w-full max-w-xs"
         /><br />
+        <label for="icon">Profile Icon (emoji)</label>
+        <input
+            type="emoji"
+            bind:value={icon}
+            name="icon"
+            id="icon"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        /><br />
         <label for="password">Password</label>
         <input
             type="password"