Skip to content

Making the settings page fit the new ui #633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dangershony wants to merge 4 commits into
base: main
Choose a base branch
from
+282 −101
Open

Making the settings page fit the new ui #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df17422
making the settings page fit the new ui
dangershony Jan 27, 2026
59c0e9b
defalut indexers when list is empty
dangershony Jan 27, 2026
fda6398
Enhance refresh buttons with loading indicators in settings section
dangershony Jan 28, 2026
a29e3c4
Remove DeleteWallet command and adjust BackupWallet logic in Settings…
dangershony Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions src/Angor/Avalonia/AngorApp/UI/Sections/Settings/ISettingsSectionViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,15 @@ internal interface ISettingsSectionViewModel : IDisposable
ReactiveCommand<Unit, Unit> AddIndexer { get; }
ReactiveCommand<Unit, Unit> AddRelay { get; }
ReactiveCommand<Unit, Unit> RefreshIndexers { get; }
ReactiveCommand<Unit, Unit> DeleteWallet { get; }
ReactiveCommand<Unit, Unit> RefreshRelays { get; }
ReactiveCommand<Unit, Unit> ChangeNetwork { get; }
ReactiveCommand<Unit, Unit> WipeData { get; }
ReactiveCommand<Unit, Unit> BackupWallet { get; }
IEnhancedCommand ImportWallet { get; }
bool IsBitcoinPreferred { get; set; }
bool IsDebugMode { get; set; }
bool IsTestnet { get; }
bool HasWallet { get; }
}

internal class SettingsSectionViewModelSample : ISettingsSectionViewModel
Expand All @@ -32,11 +36,14 @@ public SettingsSectionViewModelSample()
{
Indexers = new ObservableCollection<SettingsUrlViewModel>
{
new("https://indexer.angor.io", true, UrlStatus.Online, DateTime.UtcNow, _ => { }, _ => { })
new("https://test.indexer.angor.io", false, UrlStatus.Offline, DateTime.UtcNow, _ => { }, _ => { }),
new("https://signet.angor.online", true, UrlStatus.Online, DateTime.UtcNow, _ => { }, _ => { }),
new("https://signet2.angor.online", false, UrlStatus.Offline, DateTime.UtcNow, _ => { }, _ => { })
};
Relays = new ObservableCollection<SettingsUrlViewModel>
{
new("wss://relay.angor.io", false, UrlStatus.Offline, DateTime.UtcNow, _ => { })
new("wss://relay.angor.io", false, UrlStatus.Online, DateTime.UtcNow, _ => { }, name: "strfry default"),
new("wss://relay2.angor.io", false, UrlStatus.Online, DateTime.UtcNow, _ => { }, name: "strfry2 default")
};
}

Expand All @@ -49,10 +56,14 @@ public SettingsSectionViewModelSample()
public ReactiveCommand<Unit, Unit> AddIndexer { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> AddRelay { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> RefreshIndexers { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> DeleteWallet { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> RefreshRelays { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> ChangeNetwork { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> WipeData { get; } = ReactiveCommand.Create(() => { });
public ReactiveCommand<Unit, Unit> BackupWallet { get; } = ReactiveCommand.Create(() => { });
public IEnhancedCommand ImportWallet { get; } = ReactiveCommand.Create(() => { }).Enhance();
public bool IsBitcoinPreferred { get; set; } = true;
public bool IsDebugMode { get; set; } = false;
public bool IsTestnet { get; } = true;
public bool HasWallet { get; } = true;
public void Dispose() { }
}
180 changes: 131 additions & 49 deletions src/Angor/Avalonia/AngorApp/UI/Sections/Settings/SettingsSectionView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:AngorApp.UI.Shared.Controls"
xmlns:settings="clr-namespace:AngorApp.UI.Sections.Settings"
xmlns:fa="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:i="https://github.com/projektanker/icons.avalonia"
mc:Ignorable="d" d:DesignWidth="1200"
x:Class="AngorApp.UI.Sections.Settings.SettingsSectionView"
x:DataType="settings:ISettingsSectionViewModel">
Expand Down Expand Up @@ -32,108 +34,188 @@
<Style Selector="Card StackPanel">
<Setter Property="Spacing" Value="10" />
</Style>
<!-- Status Badge Styles -->
<Style Selector="Badge[Tag=Unknown]">
<Setter Property="Color" Value="Gray" />
</Style>
<Style Selector="Badge[Tag=Online]">
<Setter Property="Color" Value="{DynamicResource SuccessColor}" />
</Style>
<Style Selector="Badge[Tag=Offline]">
<Setter Property="Color" Value="{DynamicResource ErrorColor}" />
</Style>
<Style Selector="Badge[Tag=NotReady]">
<Setter Property="Color" Value="{DynamicResource WarningColor}" />
</Style>

<!-- Link styling for URLs -->
<Style Selector="SlimDataGrid TextBlock.Link">
<Setter Property="Foreground" Value="{DynamicResource SuccessColor}" />
</Style>

<!-- Trash button styling -->
<Style Selector="EnhancedButton.Trash">
<Setter Property="Foreground" Value="{DynamicResource ErrorColor}" />
</Style>

</UserControl.Styles>

<controls:PageContainer>
<ScrollViewer IconOptions.Size="{StaticResource IconSizeSmall}">
<StackPanel Classes="BigGap" MaxWidth="700">
<Card HeaderStartContent="{Icon fa-network-wired}" Header="Network">
<StackPanel Classes="BigGap">
<TextBlock Classes="Warning Wrap Center">WARNING NOTICE: Changing networks will wipe your wallet data.</TextBlock>
<ComboBox HorizontalAlignment="Center" MinWidth="200" ItemsSource="{Binding Networks}" SelectedItem="{Binding Network}" />
</StackPanel>
</Card>
<Card Header="Appearance">
<ToggleSwitch IsChecked="{Binding IsBitcoinPreferred}" Content="Unit for amount entry" OnContent="BTC" OffContent="sats" />
</Card>
<Card Header="Debug Mode" IsVisible="{Binding IsTestnet}">
<StackPanel Classes="BigGap">
<TextBlock Classes="Wrap Center">Debug mode is only available on testnet networks. When enabled, additional debugging features will be available.</TextBlock>
<ToggleSwitch IsChecked="{Binding IsDebugMode}" Content="Debug Mode" OnContent="Enabled" OffContent="Disabled" HorizontalAlignment="Center" />

<!-- Network Section -->
<Card HeaderStartContent="{Icon fa-globe}" Header="Network">
<Card.HeaderEndContent>
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Change Network" Command="{Binding ChangeNetwork}" />
</Card.HeaderEndContent>
<StackPanel Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
<TextBlock Text="Network Type:" VerticalAlignment="Center" />
<TextBlock Text="{Binding Network}" FontWeight="Bold" VerticalAlignment="Center" />
</StackPanel>
</Card>

<!-- Indexer Section -->
<Card HeaderStartContent="{Icon fa-server}" Header="Indexer">
<Card.HeaderEndContent>
<StackPanel Orientation="Horizontal" Spacing="10">
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Add" Command="{Binding AddIndexer}" />
<EnhancedButton Classes="Primary" Content="Refresh" Command="{Binding RefreshIndexers}">
<EnhancedButton.Icon>
<Panel>
<i:Icon Value="fa-rotate-right" IsVisible="{Binding !RefreshIndexers.IsExecuting^}" />
<fa:ProgressRing Width="16" Height="16" IsVisible="{Binding RefreshIndexers.IsExecuting^}" />
</Panel>
</EnhancedButton.Icon>
</EnhancedButton>
</StackPanel>
</Card.HeaderEndContent>
<StackPanel>
<DockPanel Margin="0 0 20 0">
<StackPanel DockPanel.Dock="Right" Orientation="Horizontal" Spacing="10">
<EnhancedButton Icon="{Icon fa-rotate-right}" Command="{Binding RefreshIndexers}" />
<EnhancedButton Icon="{Icon fa-plus}" Command="{Binding AddIndexer}" />
</StackPanel>
<TextBox VerticalContentAlignment="Center" Watermark="Enter new indexer link" Text="{Binding NewIndexer}" />
</DockPanel>
<TextBox Watermark="Enter new indexer link" Text="{Binding NewIndexer}" Margin="0 0 0 10" />
<SlimDataGrid ItemsSource="{Binding Indexers}">
<SlimDataGrid.Columns>
<Column Header="Primary" Width="Auto" Binding="{Binding}">
<Column Header="Link" Width="*">
<Column.CellTemplate>
<DataTemplate>
<RadioButton GroupName="Indexer" Command="{Binding SetPrimary}" IsChecked="{Binding IsPrimary, Mode=TwoWay}" />
<TextBlock Classes="Link" Text="{Binding Url}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
<Column Header="Address" Binding="{Binding Url}" />
<Column Header="Status" Width="Auto">
<Column.CellTemplate>
<DataTemplate>
<Badge Content="{Binding Status}" Tag="{Binding Status}">
<Badge.Styles>
<Style Selector="Badge[Tag=Unknown]">
<Setter Property="Color" Value="Gray" />
</Style>
<Style Selector="Badge[Tag=Online]">
<Setter Property="Color" Value="{DynamicResource SuccessColor}" />
</Style>
<Style Selector="Badge[Tag=Offline]">
<Setter Property="Color" Value="{DynamicResource ErrorColor}" />
</Style>
<Style Selector="Badge[Tag=NotReady]">
<Setter Property="Color" Value="{DynamicResource WarningColor}" />
</Style>
</Badge.Styles>
</Badge>
<Badge Content="{Binding Status}" Tag="{Binding Status}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
<Column Header="Default" Width="Auto">
<Column.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsPrimary}" Command="{Binding SetPrimary}" IsEnabled="{Binding !IsPrimary}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
<Column Width="Auto" Binding="{Binding}">
<Column.CellTemplate>
<DataTemplate>
<EnhancedButton Icon="{Icon fa-trash}" Command="{Binding Remove}" />
<EnhancedButton Classes="Trash" Icon="{Icon fa-trash}" Command="{Binding Remove}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
</SlimDataGrid.Columns>
</SlimDataGrid>
</StackPanel>
</Card>

<!-- Nostr Relays Section -->
<Card HeaderStartContent="{Icon mdi-antenna}" Header="Nostr Relays">
<Card.HeaderEndContent>
<StackPanel Orientation="Horizontal" Spacing="10">
<EnhancedButton Classes="Primary" Icon="{Icon fa-plus}" Content="Add" Command="{Binding AddRelay}" />
<EnhancedButton Classes="Primary" Content="Refresh" Command="{Binding RefreshRelays}">
<EnhancedButton.Icon>
<Panel>
<i:Icon Value="fa-rotate-right" IsVisible="{Binding !RefreshRelays.IsExecuting^}" />
<fa:ProgressRing Width="16" Height="16" IsVisible="{Binding RefreshRelays.IsExecuting^}" />
</Panel>
</EnhancedButton.Icon>
</EnhancedButton>
</StackPanel>
</Card.HeaderEndContent>
<StackPanel>
<DockPanel Margin="0 0 20 0">
<EnhancedButton Icon="{Icon fa-plus}" Command="{Binding AddRelay}" />
<TextBox Watermark="Enter new relay link" Text="{Binding NewRelay}" />
</DockPanel>
<TextBox Watermark="Enter new relay link" Text="{Binding NewRelay}" Margin="0 0 0 10" />
<SlimDataGrid ItemsSource="{Binding Relays}">
<SlimDataGrid.Columns>
<Column Header="Address" Binding="{Binding Url}" />
<Column Header="Link" Width="*">
<Column.CellTemplate>
<DataTemplate>
<TextBlock Classes="Link" Text="{Binding Url}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
<Column Header="Name" Binding="{Binding Name}" Width="Auto" />
<Column Header="Status" Width="Auto">
<Column.CellTemplate>
<DataTemplate>
<Badge Content="{Binding Status}" Tag="{Binding Status}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
<Column Width="Auto" Binding="{Binding}">
<Column.CellTemplate>
<DataTemplate>
<EnhancedButton Icon="{Icon fa-trash}" Command="{Binding Remove}" />
<EnhancedButton Classes="Trash" Icon="{Icon fa-trash}" Command="{Binding Remove}" />
</DataTemplate>
</Column.CellTemplate>
</Column>
</SlimDataGrid.Columns>
</SlimDataGrid>
</StackPanel>
</Card>
<Card HeaderStartContent="{Icon fa-wallet}" Header="Wallet">

<!-- Currency Display Section -->
<Card HeaderStartContent="{Icon fa-bitcoin}" Header="Currency Display">
<StackPanel Classes="BigGap">
<TextBlock Classes="Wrap Center">Import an existing wallet using your recovery words.</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="15">
<TextBlock Text="Select Currency:" VerticalAlignment="Center" />
<ToggleSwitch IsChecked="{Binding IsBitcoinPreferred}" OnContent="Bitcoin (BTC)" OffContent="Satoshis (sats)" />
</StackPanel>
<TextBlock Classes="Muted Wrap" Text="Bitcoin-only application - currency display is fixed to BTC or sats." />
</StackPanel>
</Card>

<!-- Debug Mode Section (Testnet only) -->
<Card Header="Debug Mode" IsVisible="{Binding IsTestnet}">
<StackPanel Classes="BigGap">
<TextBlock Classes="Wrap Muted">Debug mode is only available on testnet networks. When enabled, additional debugging features will be available.</TextBlock>
<ToggleSwitch IsChecked="{Binding IsDebugMode}" Content="Debug Mode" OnContent="Enabled" OffContent="Disabled" HorizontalAlignment="Left" />
</StackPanel>
</Card>

<!-- Backup Account Section -->
<Card HeaderStartContent="{Icon fa-download}" Header="Backup Account" IsVisible="{Binding HasWallet}">
<StackPanel Classes="BigGap">
<TextBlock Classes="Wrap Muted">Download a backup of your account (seed) so you never lose access.</TextBlock>
<EnhancedButton HorizontalAlignment="Left" Icon="{Icon fa-download}" Content="Download Backup" Command="{Binding BackupWallet}" />
</StackPanel>
</Card>

<!-- Wallet Section -->
<Card HeaderStartContent="{Icon fa-wallet}" Header="Wallet" IsVisible="{Binding !HasWallet}">
<StackPanel Classes="BigGap">
<TextBlock Classes="Wrap Muted">Import an existing wallet using your recovery words.</TextBlock>
<EnhancedButton HorizontalAlignment="Right" Command="{Binding ImportWallet}" Content="Import wallet" />
</StackPanel>
</Card>

<!-- Danger Zone Section -->
<Card BorderBrush="{StaticResource DangerColor}" BorderThickness="3" HeaderStartContent="{Icon mdi alert-outline}" Header="Danger Zone">
<EnhancedButton HorizontalAlignment="Right" Classes="Danger" Content="Delete wallet" Command="{Binding DeleteWallet}" />
<Card.HeaderEndContent>
<TextBlock Classes="Muted" Text="Irreversible actions" VerticalAlignment="Center" />
</Card.HeaderEndContent>
<EnhancedButton HorizontalAlignment="Left" Classes="Danger" Icon="{Icon fa-trash}" Content="Wipe Data" Command="{Binding WipeData}" />
</Card>

</StackPanel>
</ScrollViewer>
</controls:PageContainer>
Expand Down
Loading
Loading