ui improvs

src/App.css

@@ -853,12 +853,35 @@
 }
 
 .bottom-nav-btn svg {
-    width: 18px;
-    height: 18px;
+    width: 22px;
+    height: 22px;
     flex-shrink: 0;
     stroke-width: 2;
 }
 
+.bottom-nav-avatar {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+    border: 2px solid transparent;
+}
+
+.bottom-nav-avatar-placeholder {
+    background: var(--color-primary, #22c55e);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    font-weight: 700;
+}
+
+.bottom-nav-btn-active .bottom-nav-avatar {
+    border-color: currentColor;
+}
+
 .bottom-nav-btn span {
     font-size: 0.8125rem;
     font-weight: 600;
@@ -2143,6 +2166,11 @@
         display: inline;
     }
 
+    .bottom-nav-avatar {
+        width: 31px;
+        height: 31px;
+    }
+
     /* Active pill keeps green but full-width */
     .bottom-nav-btn-active {
         padding: 10px 14px;
@@ -2403,6 +2431,10 @@
     color: #fff;
 }
 
+[data-theme="dark"] .bottom-nav-avatar-placeholder {
+    background: #16a34a;
+}
+
 /* -- Write button -- */
 [data-theme="dark"] .journal-write-btn {
     background: #22c55e;