Skip to content

Port responsive mobile/tablet layout to design/App#771

Merged
dangershony merged 5 commits intomainfrom
responsive-mobile-port
Apr 20, 2026
Merged

Port responsive mobile/tablet layout to design/App#771
dangershony merged 5 commits intomainfrom
responsive-mobile-port

Conversation

@DavidGershony
Copy link
Copy Markdown
Collaborator

Summary

  • Ports responsive mobile/tablet layout from Zazawowow/angor:responsive-mobile into the current src/design/App structure
  • Adds breakpoint system: Mobile (<768px), Tablet (<1024px), Desktop (>=1024px) with LayoutModeService
  • Adds MD3 bottom tab bar navigation (Home, Investor, Founder, Funds, Settings) for compact layouts
  • Adds floating sub-tabs, back bars, and detail view state tracking for mobile navigation
  • Preserves all of main's SDK integration (ICurrencyService, IWalletContext, PrototypeSettings, Serilog, etc.)

What changed

New files (6):

  • LayoutMode.cs — responsive breakpoint enum + reactive singleton service
  • TabBar.axaml — MD3 bottom tab bar + sub-tab styles
  • ShellService.cs — static singleton for decoupled shell access (toast, modal)
  • RangeObservableCollection.cs — batch-update observable collection helper
  • SendFundsModalViewModel.cs — extracted VM with reactive validation
  • PrivateKeysPasswordModalViewModel.cs — extracted VM with reactive validation

Modified files (40):

  • Shell (ShellView, ShellViewModel, MainWindow) — tab bar, layout switching, mobile navigation handlers
  • All section views code-behind — LayoutModeService.IsCompact subscriptions for responsive padding
  • Theme/Colors — tab bar, sub-tab, and mobile back button color resources
  • Various AXAML files — responsive modal sizing, layout adjustments

Approach

Zaza's branch worked in src/Angor/Avalonia/Avalonia2 (namespace Avalonia2). Main uses src/design/App (namespace App). This PR:

  1. Copies mobile/responsive UI changes with namespace fix (Avalonia2App)
  2. Keeps main's ViewModels with full SDK integration (not Zaza's simplified versions)
  3. Keeps main's CompositionRoot, DI registrations, Serilog logging, etc.

Desktop build: 0 errors, 0 warnings
(Android build requires Android SDK not available on build machine)

Test plan

  • Run desktop app — verify responsive layout at various window sizes
  • Test tab bar appears below 1024px, sidebar appears above 1024px
  • Test mobile navigation: tab switching, sub-tabs, back bars
  • Verify no regressions on desktop full-size layout
  • Test modal sizing on narrow windows

🤖 Generated with Claude Code

DavidGershony and others added 2 commits April 20, 2026 16:03
…mobile branch

Adds responsive breakpoint system (mobile <768px, tablet <1024px, desktop >=1024px)
with bottom tab bar navigation, floating sub-tabs, back bars, and layout mode
switching. Preserves main's SDK integration (ICurrencyService, IWalletContext,
PrototypeSettings, Serilog logging, etc.) while porting only the mobile UI changes.

New files: LayoutMode.cs, ShellService.cs, TabBar.axaml, RangeObservableCollection.cs,
SendFundsModalViewModel.cs, PrivateKeysPasswordModalViewModel.cs

Based on work from Zazawowow/angor:responsive-mobile (Avalonia2 namespace -> App)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restore AXAML files that referenced properties/types from Zaza's ViewModels
(WalletItem, WalletSwitcherItem, SubmitOpacity, IsEmpty, etc.) that don't
exist in main's ViewModels. Remove InvestorCtaEnabled binding.

All 19 integration tests now pass (0 failures).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
/// Request testnet coins for a single wallet via its WalletCard.
/// Awaits the result and shows a toast notification on success or failure.
/// </summary>
private async Task RequestTestCoinsAsync(Button btn)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like this got deleted?

/// Refresh balance for a single wallet via its WalletCard.
/// Sets IsRefreshing on the card to show a spinning icon during the operation.
/// </summary>
private async void RefreshWalletBalance(Button btn)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also this or maybe it was moved

}
}

private async void OnRefreshClick(object? sender, RoutedEventArgs e)
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also this got deleted

@dangershony
Copy link
Copy Markdown
Member

there might be some missing methods but otherwise looks good, I will test this locally

…e test coverage

The responsive layout commit accidentally stripped event handlers, AutomationIds,
DataContext bindings, toast forwarding, and data-loading calls from many code-behind
files. This restores all dropped functional code while keeping the layout changes,
and updates InvestAndRecoverTest to use UI-level button clicks instead of direct
VM method calls for better integration coverage.
…e mismatch

Debug prefill used DateTime.Now.Day for payout day while StartDate used
DateTime.UtcNow, causing a one-day offset in BST/UTC+N timezones that
made stages appear locked ('spend in 1 days'). Standardize all date
logic in the App project to DateTime.UtcNow for consistency.
@dangershony dangershony merged commit a2b3177 into main Apr 20, 2026
1 check passed
@dangershony dangershony deleted the responsive-mobile-port branch April 20, 2026 23:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants