From d40f5e1d8470e09a532c55114daef1c1adac8ad5 Mon Sep 17 00:00:00 2001
From: whekin <stanislavkalishin@gmail.com>
Date: Wed, 11 Mar 2026 17:57:35 +0400
Subject: [PATCH] feat(miniapp): simplify ready state layout

---
 apps/miniapp/src/App.tsx   | 84 ++++++++++++++++++++++++--------------
 apps/miniapp/src/i18n.ts   |  5 +++
 apps/miniapp/src/index.css | 14 +++++--
 3 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/apps/miniapp/src/App.tsx b/apps/miniapp/src/App.tsx
index 3c1b312..d2f4e7d 100644
--- a/apps/miniapp/src/App.tsx
+++ b/apps/miniapp/src/App.tsx
@@ -369,6 +369,7 @@ function App() {
   const [cycleRentOpen, setCycleRentOpen] = createSignal(false)
   const [addingUtilityBillOpen, setAddingUtilityBillOpen] = createSignal(false)
   const [addingPaymentOpen, setAddingPaymentOpen] = createSignal(false)
+  const [profileEditorOpen, setProfileEditorOpen] = createSignal(false)
   const [addingPayment, setAddingPayment] = createSignal(false)
   const [billingForm, setBillingForm] = createSignal({
     settlementCurrency: 'GEL' as 'USD' | 'GEL',
@@ -3984,6 +3985,13 @@ function App() {
               {readySession()?.telegramUser.firstName ?? readySession()?.member.displayName}
             </h2>
             <p>{copy().overviewBody}</p>
+            <Show when={readySession()?.mode === 'live'}>
+              <div class="panel-toolbar">
+                <Button variant="secondary" onClick={() => setProfileEditorOpen(true)}>
+                  {copy().manageProfileAction}
+                </Button>
+              </div>
+            </Show>
           </section>
 
           <nav class="nav-grid">
@@ -4006,9 +4014,11 @@ function App() {
           </nav>
 
           <section class="content-grid">
-            <article class="panel panel--wide">
-              <p class="eyebrow">{copy().overviewTitle}</p>
-              <h3>{readySession()?.member.displayName}</h3>
+            <article class="balance-item balance-item--accent profile-card">
+              <header>
+                <strong>{readySession()?.member.displayName}</strong>
+                <span>{readySession()?.member.isAdmin ? copy().adminTag : copy().residentTag}</span>
+              </header>
               <p>
                 {copy().memberStatusSummary.replace(
                   '{status}',
@@ -4017,35 +4027,49 @@ function App() {
                     : copy().memberStatusActive
                 )}
               </p>
-              <Show when={readySession()?.mode === 'live'}>
-                <div class="settings-grid">
-                  <label class="settings-field settings-field--wide">
-                    <span>{copy().displayNameLabel}</span>
-                    <input
-                      value={displayNameDraft()}
-                      onInput={(event) => setDisplayNameDraft(event.currentTarget.value)}
-                    />
-                    <small>{copy().displayNameHint}</small>
-                  </label>
-                </div>
-                <div class="inline-actions">
-                  <button
-                    class="ghost-button"
-                    type="button"
-                    disabled={
-                      savingOwnDisplayName() ||
-                      displayNameDraft().trim().length < 2 ||
-                      displayNameDraft().trim() === readySession()?.member.displayName
-                    }
-                    onClick={() => void handleSaveOwnDisplayName()}
-                  >
-                    {savingOwnDisplayName() ? copy().savingDisplayName : copy().saveDisplayName}
-                  </button>
-                </div>
-              </Show>
-              <div>{renderPanel()}</div>
+              <div class="ledger-compact-card__meta">
+                <span class="mini-chip">
+                  {readySession()?.mode === 'demo' ? copy().demoBadge : copy().liveBadge}
+                </span>
+                <span class="mini-chip mini-chip--muted">{locale().toUpperCase()}</span>
+              </div>
             </article>
+            <div class="content-stack">{renderPanel()}</div>
           </section>
+          <Modal
+            open={profileEditorOpen()}
+            title={copy().displayNameLabel}
+            description={copy().profileEditorBody}
+            closeLabel={copy().closeEditorAction}
+            onClose={() => setProfileEditorOpen(false)}
+            footer={
+              <div class="modal-action-row modal-action-row--single">
+                <Button variant="ghost" onClick={() => setProfileEditorOpen(false)}>
+                  {copy().closeEditorAction}
+                </Button>
+                <Button
+                  variant="primary"
+                  disabled={
+                    savingOwnDisplayName() ||
+                    displayNameDraft().trim().length < 2 ||
+                    displayNameDraft().trim() === readySession()?.member.displayName
+                  }
+                  onClick={() => void handleSaveOwnDisplayName()}
+                >
+                  {savingOwnDisplayName() ? copy().savingDisplayName : copy().saveDisplayName}
+                </Button>
+              </div>
+            }
+          >
+            <div class="editor-grid">
+              <Field label={copy().displayNameLabel} hint={copy().displayNameHint} wide>
+                <input
+                  value={displayNameDraft()}
+                  onInput={(event) => setDisplayNameDraft(event.currentTarget.value)}
+                />
+              </Field>
+            </div>
+          </Modal>
         </Match>
       </Switch>
     </main>
diff --git a/apps/miniapp/src/i18n.ts b/apps/miniapp/src/i18n.ts
index 6bd0a35..33f314c 100644
--- a/apps/miniapp/src/i18n.ts
+++ b/apps/miniapp/src/i18n.ts
@@ -181,6 +181,8 @@ export const dictionary = {
     adminsBody: 'Promote trusted household members so they can manage billing and approvals.',
     displayNameLabel: 'Household display name',
     displayNameHint: 'This name appears in balances, ledger entries, and assistant replies.',
+    manageProfileAction: 'Edit profile',
+    profileEditorBody: 'Keep your own display name in a focused editor instead of the page body.',
     memberEditorBody: 'Member billing state and admin controls stay grouped in one editor.',
     editMemberAction: 'Edit member',
     saveDisplayName: 'Save name',
@@ -402,6 +404,9 @@ export const dictionary = {
       'Повышай доверенных участников, чтобы они могли управлять биллингом и подтверждениями.',
     displayNameLabel: 'Имя в household',
     displayNameHint: 'Это имя будет видно в балансе, леджере и ответах ассистента.',
+    manageProfileAction: 'Редактировать профиль',
+    profileEditorBody:
+      'Своё имя для household лучше менять в отдельном окне, а не на самой странице.',
     memberEditorBody: 'Статус, политика и админские действия по участнику собраны в одном окне.',
     editMemberAction: 'Редактировать участника',
     saveDisplayName: 'Сохранить имя',
diff --git a/apps/miniapp/src/index.css b/apps/miniapp/src/index.css
index 6fade0f..d19c104 100644
--- a/apps/miniapp/src/index.css
+++ b/apps/miniapp/src/index.css
@@ -279,6 +279,11 @@ button {
   margin-top: 16px;
 }
 
+.content-stack {
+  display: grid;
+  gap: 12px;
+}
+
 .panel {
   border-radius: 24px;
   padding: 18px;
@@ -312,6 +317,10 @@ button {
   border-color: rgb(247 179 137 / 0.28);
 }
 
+.profile-card {
+  gap: 10px;
+}
+
 .balance-item header,
 .ledger-item header,
 .activity-row header,
@@ -679,6 +688,7 @@ button {
 
 .panel-toolbar {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-end;
   margin-top: 12px;
 }
@@ -893,10 +903,6 @@ button {
     padding: 32px 24px 40px;
   }
 
-  .content-grid {
-    grid-template-columns: 1.3fr 1fr 1fr;
-  }
-
   .home-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }