From b2882095bbed186c7d878e11f17b28d45500ffc3 Mon Sep 17 00:00:00 2001 From: DanS Date: Fri, 10 Jul 2026 01:58:27 -0500 Subject: [PATCH] =?UTF-8?q?feat(wallets):=20redesign=20the=20modal=20layou?= =?UTF-8?q?t=20=E2=80=94=20content-sized,=20framed,=20aligned?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Act on the design review of the Wallets modal (all six points): 1. Content-sized card — size the card to the wallet count (up to 8 rows, then the list scrolls) instead of a fixed 620px, killing the huge empty void a short list floated in. Computed from the KNOWN row count, so it stays a fixed-height dialog (no auto-height feedback — that's what slid content off-screen on a monitor move). 2. Framed wallet list — BordersOuter + PadOuterX so the list reads as a contained panel with room to grow, not loose rows on the backdrop. 3. Right-aligned numeric columns (Size / Addresses / Balance) and their headers, via a custom header row + a right-aligned cell helper, so the numbers line up. 4. Consistent action column — the active wallet's row gets a subtle green tint and an "Active" chip (badge), distinct from the Open/Import buttons. 5. De-cluttered bottom — "Create wallet" stays the primary action; the folder-scan is tucked behind a "+ Scan another folder…" toggle. 6. Polish — the external-file marker is now a real info icon + tooltip (was ICON_MD_FOLDER rendering as a "?" tofu, since that glyph isn't in the subset); Refresh is an icon-only button, de-emphasized next to Close. New i18n keys (wallets_add_folder_toggle, wallets_external_tt) + 8 langs; CJK subset rebuilt. Verified via the headless sweep at 100% and font_scale 1.5. Co-Authored-By: Claude Opus 4.8 (1M context) --- res/fonts/NotoSansCJK-Subset.ttf | Bin 603784 -> 603784 bytes res/lang/de.json | 2 + res/lang/es.json | 2 + res/lang/fr.json | 2 + res/lang/ja.json | 2 + res/lang/ko.json | 2 + res/lang/pt.json | 2 + res/lang/ru.json | 2 + res/lang/zh.json | 2 + src/ui/windows/wallets_dialog.h | 159 +++++++++++++++++++++---------- src/util/i18n.cpp | 2 + 11 files changed, 128 insertions(+), 49 deletions(-) diff --git a/res/fonts/NotoSansCJK-Subset.ttf b/res/fonts/NotoSansCJK-Subset.ttf index 0ff306e16748c89750db35634905513aca51481a..b906a832b96d73f1891eb32581d424e39fb21c02 100644 GIT binary patch delta 83 zcmeBptJ3jSWkMnIVabUTOD0K~3&!)?d}Ux{e!&0)cQ*8yg6L;uZnez{jO_}HAj|~B Y%s|Wn#H>Kf2E^<@%&}d8ku$>-08v;L8~^|S delta 83 zcmeBptJ3jSWkMnIpLegacySize + style.ItemSpacing.y; + const float belowH = 3.0f * Layout::spacingSm() + + (capRow + ctrlRow) // Create label + input row + + (s_showAddFolder ? (capRow + ctrlRow) : capRow) // folder row OR toggle link + + (style.ItemSpacing.y + 1.0f) // separator + + ctrlRow // footer buttons + + 6.0f * style.ItemSpacing.y; // uncounted inter-item gaps + const float headH = Type().h6()->LegacySize + Layout::spacingXs() // framework h6 title + + Type().caption()->LegacySize + Layout::spacingSm(); // intro + gap + const float padV = 48.0f; // content-child padding (top+bottom) + margin + const float cardH = (headH + tableH + belowH + padV) / dp; + OverlayDialogSpec ov; ov.title = TR("wallets_title"); ov.p_open = &s_open; ov.style = OverlayStyle::BlurFloat; ov.cardWidth = 780.0f; - ov.cardHeight = 620.0f; + ov.cardHeight = cardH; ov.idSuffix = "wallets"; if (BeginOverlayDialog(ov)) { Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_intro")); @@ -69,36 +88,52 @@ public: const std::string active = app->settings() ? app->settings()->getActiveWalletFile() : "wallet.dat"; - // Reserve room below the table for the create-wallet + add-folder rows (each a label + - // an input row), the separator, and the footer buttons — computed from real widget - // metrics so nothing clips at any DPI (a fixed px reserve was too small at 150%). - const float rowH = ImGui::GetFrameHeightWithSpacing(); - const float lblH = Type().caption()->LegacySize + ImGui::GetStyle().ItemSpacing.y; - const float belowH = 3.0f * Layout::spacingSm() + 2.0f * lblH + 3.0f * rowH + Layout::spacingMd(); - float tableH = ImGui::GetContentRegionAvail().y - belowH; - if (tableH < 120.0f * dp) tableH = 120.0f * dp; - + // ---- #2 Framed wallet list ------------------------------------------------------------ const ImGuiTableFlags tflags = ImGuiTableFlags_ScrollY | ImGuiTableFlags_RowBg | - ImGuiTableFlags_BordersInnerH; + ImGuiTableFlags_BordersInnerH | ImGuiTableFlags_BordersOuter | + ImGuiTableFlags_PadOuterX; if (ImGui::BeginTable("##wallets", 6, tflags, ImVec2(0, tableH))) { ImGui::TableSetupColumn(TR("wallets_col_name"), ImGuiTableColumnFlags_WidthStretch); ImGui::TableSetupColumn(TR("wallets_col_size"), ImGuiTableColumnFlags_WidthFixed, 90.0f * dp); - ImGui::TableSetupColumn(TR("wallets_col_addresses"), ImGuiTableColumnFlags_WidthFixed, 80.0f * dp); + ImGui::TableSetupColumn(TR("wallets_col_addresses"), ImGuiTableColumnFlags_WidthFixed, 90.0f * dp); ImGui::TableSetupColumn(TR("wallets_col_balance"), ImGuiTableColumnFlags_WidthFixed, 130.0f * dp); ImGui::TableSetupColumn(TR("wallets_col_opened"), ImGuiTableColumnFlags_WidthFixed, 120.0f * dp); - ImGui::TableSetupColumn("##action", ImGuiTableColumnFlags_WidthFixed, 110.0f * dp); + ImGui::TableSetupColumn("##action", ImGuiTableColumnFlags_WidthFixed, 100.0f * dp); ImGui::TableSetupScrollFreeze(0, 1); - ImGui::TableHeadersRow(); + // ---- #3 Right-aligned headers for the numeric columns (Size / Addresses / Balance). + ImGui::TableNextRow(ImGuiTableRowFlags_Headers); + for (int c = 0; c < 6; ++c) { + ImGui::TableSetColumnIndex(c); + const char* cn = ImGui::TableGetColumnName(c); + if (c == 5 || !cn || !cn[0]) continue; + if (c >= 1 && c <= 3) { + float w = ImGui::CalcTextSize(cn).x; + ImGui::SetCursorPosX(ImGui::GetCursorPosX() + ImGui::GetContentRegionAvail().x - w); + ImGui::TextUnformatted(cn); + } else { + ImGui::TableHeader(cn); + } + } + + auto rcell = [&](const std::string& s, bool muted) { + float w = ImGui::CalcTextSize(s.c_str()).x; + ImGui::SetCursorPosX(ImGui::GetCursorPosX() + ImGui::GetContentRegionAvail().x - w); + if (muted) ImGui::TextDisabled("%s", s.c_str()); else ImGui::TextUnformatted(s.c_str()); + }; + const char* kDash = "\xE2\x80\x94"; + + char nb[32]; for (std::size_t i = 0; i < s_rows.size(); ++i) { const WalletRow& r = s_rows[i]; const data::WalletIndexEntry* meta = app->walletIndex().find(r.fileName); const bool isCurrent = r.inDatadir && r.fileName == active; ImGui::TableNextRow(); + if (isCurrent) ImGui::TableSetBgColor(ImGuiTableBgTarget_RowBg0, WithAlpha(Success(), 26)); ImGui::PushID(static_cast(i)); - // Name — + "current" badge, or a folder marker for out-of-datadir files. + // Name (+ #4 current badge / #6 external-file info icon) ImGui::TableNextColumn(); ImGui::TextUnformatted(r.fileName.c_str()); if (isCurrent) { @@ -106,38 +141,45 @@ public: ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(Success()), "%s", TR("wallets_current")); } else if (!r.inDatadir) { ImGui::SameLine(0, 8.0f * dp); - ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(OnSurfaceMedium()), "%s", ICON_MD_FOLDER); - if (ImGui::IsItemHovered()) Tooltip("%s", r.dir.c_str()); + ImGui::PushFont(Type().iconSmall()); + ImGui::TextColored(ImGui::ColorConvertU32ToFloat4(OnSurfaceMedium()), "%s", ICON_MD_INFO); + ImGui::PopFont(); + if (ImGui::IsItemHovered()) Tooltip("%s\n%s", TR("wallets_external_tt"), r.dir.c_str()); } ImGui::TableNextColumn(); - ImGui::TextUnformatted(util::Platform::formatFileSize(static_cast(r.sizeBytes)).c_str()); + rcell(util::Platform::formatFileSize(static_cast(r.sizeBytes)), false); ImGui::TableNextColumn(); - if (meta && meta->cachedAddressCount >= 0) ImGui::Text("%lld", meta->cachedAddressCount); - else ImGui::TextDisabled("—"); + if (meta && meta->cachedAddressCount >= 0) { snprintf(nb, sizeof(nb), "%lld", (long long)meta->cachedAddressCount); rcell(nb, false); } + else rcell(kDash, true); ImGui::TableNextColumn(); - if (meta && meta->cachedBalance >= 0.0) ImGui::Text("%.4f", meta->cachedBalance); - else ImGui::TextDisabled("—"); + if (meta && meta->cachedBalance >= 0.0) { snprintf(nb, sizeof(nb), "%.4f", meta->cachedBalance); rcell(nb, false); } + else rcell(kDash, true); ImGui::TableNextColumn(); if (meta && meta->lastOpenedEpoch > 0) ImGui::TextUnformatted(util::formatTimeAgo(meta->lastOpenedEpoch).c_str()); else ImGui::TextDisabled("%s", TR("wallets_never")); - // Action + // ---- #4 Action column (Active as a chip; Open/Import as buttons) --------------- ImGui::TableNextColumn(); if (isCurrent) { - ImGui::TextDisabled("%s", TR("wallets_active")); + const char* al = TR("wallets_active"); + ImVec2 ts = ImGui::CalcTextSize(al); + ImVec2 p = ImGui::GetCursorScreenPos(); + float cx = 8.0f * dp, cy = 3.0f * dp; + ImDrawList* cdl = ImGui::GetWindowDrawList(); + cdl->AddRectFilled(p, ImVec2(p.x + ts.x + cx * 2, p.y + ts.y + cy * 2), WithAlpha(Success(), 34), 4.0f * dp); + cdl->AddText(ImVec2(p.x + cx, p.y + cy), Success(), al); + ImGui::Dummy(ImVec2(ts.x + cx * 2, ts.y + cy * 2)); } else if (r.inDatadir) { if (StyledButton(TR("wallets_open"), ImVec2(90.0f * dp, 0))) { app->switchToWallet(r.fileName); - s_open = false; // node restarts; the main UI shows the reconnect overlay + s_open = false; } } else { - // Out-of-datadir wallets can't be loaded directly (the daemon rejects paths). - // Import = copy into the datadir under a wallet-*.dat name, then switch to it. if (StyledButton(TR("wallets_import"), ImVec2(90.0f * dp, 0))) importAndOpen(app, r); if (ImGui::IsItemHovered()) Tooltip("%s", TR("wallets_import_tt")); @@ -149,7 +191,7 @@ public: ImGui::Dummy(ImVec2(0, Layout::spacingSm())); - // Create a fresh named wallet — the daemon mints it (with a seed phrase) on first load. + // ---- #5 Create a new wallet (primary) ------------------------------------------------- Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_new_label")); ImGui::SetNextItemWidth(-150.0f * dp); ImGui::InputTextWithHint("##newWalletName", TR("wallets_new_hint"), s_newName, sizeof(s_newName)); @@ -164,33 +206,51 @@ public: } else { s_newName[0] = '\0'; Notifications::instance().info(TR("wallets_creating")); - app->switchToWallet(name); // daemon creates it on start (-usemnemonic=1 -> seed-backed) + app->switchToWallet(name); s_open = false; } } ImGui::Dummy(ImVec2(0, Layout::spacingSm())); - // Add a folder to also scan for wallet files (no native picker — a validated path input). - Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_add_folder")); - ImGui::SetNextItemWidth(-150.0f * dp); - ImGui::InputTextWithHint("##walletFolder", TR("wallets_folder_hint"), s_newFolder, sizeof(s_newFolder)); - ImGui::SameLine(); - if (StyledButton(TR("wallets_add"), ImVec2(120.0f * dp, 0))) { - std::error_code ec; - std::string dir = s_newFolder; - if (!dir.empty() && std::filesystem::is_directory(dir, ec)) { - if (app->walletIndex().addExtraFolder(dir)) app->walletIndex().save(); - s_newFolder[0] = '\0'; - s_needScan = true; - } else { - Notifications::instance().warning(TR("wallets_folder_invalid")); + // ---- #5 Add-folder tucked behind a toggle so it doesn't compete with Create ----------- + if (!s_showAddFolder) { + ImGui::PushStyleColor(ImGuiCol_Text, OnSurfaceMedium()); + ImGui::TextUnformatted(TR("wallets_add_folder_toggle")); + ImGui::PopStyleColor(); + if (ImGui::IsItemHovered()) ImGui::SetMouseCursor(ImGuiMouseCursor_Hand); + if (ImGui::IsItemClicked()) s_showAddFolder = true; + } else { + Type().textColored(TypeStyle::Caption, OnSurfaceMedium(), TR("wallets_add_folder")); + ImGui::SetNextItemWidth(-150.0f * dp); + ImGui::InputTextWithHint("##walletFolder", TR("wallets_folder_hint"), s_newFolder, sizeof(s_newFolder)); + ImGui::SameLine(); + if (StyledButton(TR("wallets_add"), ImVec2(120.0f * dp, 0))) { + std::error_code ec; + std::string dir = s_newFolder; + if (!dir.empty() && std::filesystem::is_directory(dir, ec)) { + if (app->walletIndex().addExtraFolder(dir)) app->walletIndex().save(); + s_newFolder[0] = '\0'; + s_needScan = true; + } else { + Notifications::instance().warning(TR("wallets_folder_invalid")); + } } } ImGui::Dummy(ImVec2(0, Layout::spacingSm())); ImGui::Separator(); - if (StyledButton(TR("refresh"), ImVec2(110.0f * dp, 0))) s_needScan = true; + // ---- #6 Refresh: icon-only, de-emphasized next to the text actions -------------------- + { + float bh = ImGui::GetFrameHeight(); + IconButtonStyle rst; + rst.color = OnSurfaceMedium(); + rst.hoverBg = StateHover(); + rst.bgRounding = 4.0f * dp; + rst.tooltip = TR("refresh"); + if (IconButton("##walletsRefresh", ICON_MD_REFRESH, Type().iconSmall(), ImVec2(bh, bh), rst)) + s_needScan = true; + } ImGui::SameLine(); if (StyledButton(TR("wallets_reveal"), ImVec2(150.0f * dp, 0))) util::Platform::openFolder(util::Platform::getDragonXDataDir()); @@ -279,6 +339,7 @@ private: static inline bool s_needScan = false; static inline char s_newFolder[512] = ""; static inline char s_newName[128] = ""; + static inline bool s_showAddFolder = false; static inline std::vector s_rows; }; diff --git a/src/util/i18n.cpp b/src/util/i18n.cpp index 1de7d20..369e60f 100644 --- a/src/util/i18n.cpp +++ b/src/util/i18n.cpp @@ -267,6 +267,8 @@ void I18n::loadBuiltinEnglish() strings_["wallets_import_hint"] = "Import to open"; strings_["wallets_import_tt"] = "This wallet is outside the data directory. Opening it will copy it in first (coming soon)."; strings_["wallets_add_folder"] = "Also scan another folder for wallet files:"; + strings_["wallets_add_folder_toggle"] = "+ Scan another folder for wallets\xE2\x80\xA6"; + strings_["wallets_external_tt"] = "Outside your data directory \xE2\x80\x94 Import to copy it in."; strings_["wallets_folder_hint"] = "/path/to/folder with wallet .dat files"; strings_["wallets_add"] = "Add folder"; strings_["wallets_folder_invalid"] = "That folder doesn't exist.";