Discord-History-Tracker/app/Desktop/Main/Pages/TrackingPage.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:pages="clr-namespace:DHT.Desktop.Main.Pages"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="DHT.Desktop.Main.Pages.TrackingPage"
             x:DataType="pages:TrackingPageModel">

    <Design.DataContext>
        <pages:TrackingPageModel />
    </Design.DataContext>

    <UserControl.Styles>
        <Style Selector="TextBlock">
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
        <Style Selector="WrapPanel > Button">
            <Setter Property="Margin" Value="0 0 10 10" />
        </Style>
    </UserControl.Styles>

    <StackPanel Spacing="20">
        <Expander Header="Method 1: Manual" IsExpanded="True">
            <StackPanel Orientation="Vertical" Spacing="10">
                <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding StringFormat="Use {0} to open Dev Tools in your browser or the Discord app, copy the tracking script, and paste it into the console.">
                            <Binding Path="OpenDevToolsShortcutText" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
                <Button x:Name="CopyTrackingScript" Click="CopyTrackingScriptButton_OnClick">Copy Tracking Script</Button>
                <TextBlock Margin="0 5 0 0">
                    By default, the Discord app blocks the Dev Tools shortcut. The button below changes a hidden setting to unblock the shortcut.
                </TextBlock>
                <Button Command="{Binding OnClickToggleAppDevTools}" Content="{Binding ToggleAppDevToolsButtonText}" IsEnabled="{Binding IsToggleAppDevToolsButtonEnabled}" />
            </StackPanel>
        </Expander>
        <Expander Header="Method 2: Userscript" IsExpanded="True" Padding="12 12 12 2.5">
            <StackPanel Orientation="Vertical" Spacing="10">
                <TextBlock>
                    Requires a userscript manager in your browser. The userscript adds a DHT icon next to the Help icon on Discord.
                    If the icon does not appear, update this app and reinstall the userscript.
                </TextBlock>
                <TextBlock>
                    Copy the Connection Code, click the DHT icon, and paste the code into the prompt.
                </TextBlock>
                <WrapPanel>
                    <Button Command="{Binding OnClickInstallOrUpdateUserscript}">Install or Update Userscript</Button>
                    <Button x:Name="CopyConnectionCode" Click="CopyConnectionScriptButton_OnClick">Copy Connection Code</Button>
                </WrapPanel>
            </StackPanel>
        </Expander>
    </StackPanel>

</UserControl>