From 39651135b35a4352823df15e68a74db86a0c5b87 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Mon, 20 Apr 2026 16:28:03 +0200
Subject: [PATCH] feat(web): header chip opens Account; drop Home footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Top-right DeviceChip now navigates to /settings — same destination as
the old footer "Account" link, one less piece of chrome. Pricing stays
reachable from the Account page via the existing "Compare" link in the
Free plan panel. Profile editing moves into the Account section so the
capability isn't lost when the chip stops opening the edit modal.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/pages/Home.tsx     | 33 ++++++-------------------------
 web/src/pages/Settings.tsx | 40 +++++++++++++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index ff8e741..49249a2 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { Link } from "react-router-dom";
 import { useSignaling } from "../hooks/useSignaling";
 import { useStore } from "../stores/useStore";
@@ -27,7 +27,6 @@ function HomeConnected() {
   const setError = useStore((s) => s.setError);
 
   const { deviceName, avatar } = useProfileStore();
-  const [showProfileEdit, setShowProfileEdit] = useState(false);
 
   const selectedPeer = peers.find((p) => p.peerId === selectedPeerId) ?? null;
 
@@ -87,11 +86,7 @@ function HomeConnected() {
               Peer to peer · Encrypted
             </p>
           </div>
-          <DeviceChip
-            name={deviceName}
-            avatar={avatar}
-            onEdit={() => setShowProfileEdit(true)}
-          />
+          <DeviceChip name={deviceName} avatar={avatar} />
         </header>
 
         {error && (
@@ -145,23 +140,8 @@ function HomeConnected() {
           </div>
         </section>
 
-        <footer className="pt-6 mt-10 sm:pt-8 sm:mt-14 rule flex items-center justify-between text-xs text-ink-muted">
-          <span>Nothing transits the server</span>
-          <div className="flex items-center gap-4">
-            <Link to="/pricing" className="text-ink-muted hover:text-ink transition-colors duration-fast">
-              Pricing →
-            </Link>
-            <Link to="/settings" className="text-ink hover:text-signal transition-colors duration-fast">
-              Account →
-            </Link>
-          </div>
-        </footer>
       </div>
 
-      {showProfileEdit && (
-        <ProfileSetup isEditing onDone={() => setShowProfileEdit(false)} />
-      )}
-
       {incomingRequest && (
         <ReceiveDialog
           request={incomingRequest}
@@ -176,15 +156,14 @@ function HomeConnected() {
 function DeviceChip({
   name,
   avatar,
-  onEdit,
 }: {
   name: string;
   avatar: string | null;
-  onEdit: () => void;
 }) {
   return (
-    <button
-      onClick={onEdit}
+    <Link
+      to="/settings"
+      aria-label="Account"
       className="group shrink-0 flex items-center gap-2 px-2.5 py-1.5 border border-paper-edge
                  hover:border-ink transition-colors duration-fast ease-crisp
                  bg-paper rounded-sm"
@@ -206,7 +185,7 @@ function DeviceChip({
       <span className="text-xs sm:text-sm text-ink truncate max-w-[80px] sm:max-w-[120px]">
         {name}
       </span>
-    </button>
+    </Link>
   );
 }
 
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index a13cc72..de7d9de 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { useAuthStore } from "../stores/useAuthStore";
 import { useProfileStore } from "../stores/useProfileStore";
+import ProfileSetup from "../components/ProfileSetup";
 import {
   deleteTransfer,
   listInboxTransfers,
@@ -29,6 +30,7 @@ export default function Settings() {
   const [searchParams] = useSearchParams();
   const signedIn = searchParams.get("signed_in") === "1";
   const error = searchParams.get("error");
+  const [editingProfile, setEditingProfile] = useState(false);
 
   useEffect(() => {
     loadUser();
@@ -79,12 +81,44 @@ export default function Settings() {
         <h2 className="font-display text-2xl text-ink mt-2 mb-5 tracking-tight">
           Your identity
         </h2>
-        <div className="paper-panel px-5 py-4">
-          <div className="text-xs uppercase tracking-[0.15em] text-ink-muted">Email</div>
-          <div className="text-ink mt-1">{user.email}</div>
+        <div className="paper-panel px-5 py-4 space-y-4">
+          <div>
+            <div className="text-xs uppercase tracking-[0.15em] text-ink-muted">Email</div>
+            <div className="text-ink mt-1">{user.email}</div>
+          </div>
+          <div className="pt-4 border-t border-paper-edge flex items-center gap-3">
+            {profile.avatar ? (
+              <img
+                src={profile.avatar}
+                alt=""
+                className="w-10 h-10 rounded-full object-cover border border-paper-edge"
+              />
+            ) : (
+              <span className="w-10 h-10 rounded-full bg-paper-deep border border-paper-edge
+                               flex items-center justify-center text-xs text-ink-muted">
+                ◦
+              </span>
+            )}
+            <div className="min-w-0 flex-1">
+              <div className="text-xs uppercase tracking-[0.15em] text-ink-muted">
+                This device
+              </div>
+              <div className="text-ink mt-0.5 truncate">{profile.deviceName}</div>
+            </div>
+            <button
+              onClick={() => setEditingProfile(true)}
+              className="shrink-0 text-xs text-ink-muted hover:text-ink transition-colors"
+            >
+              Edit →
+            </button>
+          </div>
         </div>
       </section>
 
+      {editingProfile && (
+        <ProfileSetup isEditing onDone={() => setEditingProfile(false)} />
+      )}
+
       <PlanSection />
 
       <ReceivedSection />