DiscordChatExporter/DiscordChatExporter.Gui/Views/RootView.xaml

<Window
    Background="{DynamicResource MaterialDesignPaper}"
    FocusManager.FocusedElement="{Binding ElementName=TokenValueTextBox}"
    Height="550"
    Icon="/DiscordChatExporter;component/favicon.ico"
    MinWidth="325"
    Style="{DynamicResource MaterialDesignRoot}"
    Width="600"
    WindowStartupLocation="CenterScreen"
    d:DataContext="{d:DesignInstance Type=viewModels:RootViewModel}"
    mc:Ignorable="d"
    x:Class="DiscordChatExporter.Gui.Views.RootView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:behaviors="clr-namespace:DiscordChatExporter.Gui.Behaviors"
    xmlns:componentModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
    xmlns:converters="clr-namespace:DiscordChatExporter.Gui.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:s="https://github.com/canton7/Stylet"
    xmlns:viewModels="clr-namespace:DiscordChatExporter.Gui.ViewModels"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.TaskbarItemInfo>
        <TaskbarItemInfo ProgressState="Normal" ProgressValue="{Binding Progress.Current.Fraction}" />
    </Window.TaskbarItemInfo>
    <Window.Resources>
        <CollectionViewSource Source="{Binding AvailableChannels, Mode=OneWay}" x:Key="AvailableChannelsViewSource">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="Category.Name" />
            </CollectionViewSource.GroupDescriptions>
            <CollectionViewSource.SortDescriptions>
                <componentModel:SortDescription Direction="Ascending" PropertyName="Position" />
                <componentModel:SortDescription Direction="Ascending" PropertyName="Name" />
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>
    </Window.Resources>

    <materialDesign:DialogHost SnackbarMessageQueue="{Binding Notifications}" Style="{DynamicResource MaterialDesignEmbeddedDialogHost}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!--  Toolbar  -->
            <Grid Background="{DynamicResource MaterialDesignDarkBackground}" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--  Token and pull data button  -->
                <materialDesign:Card
                    Grid.Column="0"
                    Grid.Row="0"
                    Margin="12,12,0,12">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <!--  Token icon  -->
                        <materialDesign:PackIcon
                            Foreground="{DynamicResource PrimaryHueMidBrush}"
                            Grid.Column="0"
                            Height="24"
                            Kind="Password"
                            Margin="8"
                            VerticalAlignment="Center"
                            Width="24" />

                        <!--  Token value  -->
                        <TextBox
                            BorderThickness="0"
                            FontSize="16"
                            Grid.Column="1"
                            Margin="0,6,6,8"
                            Text="{Binding Token, UpdateSourceTrigger=PropertyChanged}"
                            VerticalAlignment="Bottom"
                            materialDesign:HintAssist.Hint="Token"
                            materialDesign:TextFieldAssist.DecorationVisibility="Hidden"
                            materialDesign:TextFieldAssist.TextBoxViewMargin="0,0,2,0"
                            x:Name="TokenValueTextBox" />

                        <!--  Pull data button  -->
                        <Button
                            Command="{s:Action PopulateGuildsAndChannels}"
                            Grid.Column="2"
                            IsDefault="True"
                            Margin="0,6,6,6"
                            Padding="4"
                            Style="{DynamicResource MaterialDesignFlatButton}"
                            ToolTip="Pull available guilds and channels (Enter)">
                            <materialDesign:PackIcon
                                Height="24"
                                Kind="ArrowRight"
                                Width="24" />
                        </Button>
                    </Grid>
                </materialDesign:Card>

                <!--  Settings button  -->
                <Button
                    Command="{s:Action ShowSettings}"
                    Foreground="{DynamicResource MaterialDesignDarkForeground}"
                    Grid.Column="1"
                    Margin="6"
                    Padding="4"
                    Style="{DynamicResource MaterialDesignFlatButton}"
                    ToolTip="Settings">
                    <Button.Resources>
                        <SolidColorBrush Color="#4C4C4C" x:Key="MaterialDesignFlatButtonClick" />
                    </Button.Resources>
                    <materialDesign:PackIcon
                        Height="24"
                        Kind="Settings"
                        Width="24" />
                </Button>
            </Grid>

            <!--  Progress bar  -->
            <ProgressBar
                Background="{DynamicResource MaterialDesignDarkBackground}"
                Grid.Row="1"
                IsIndeterminate="{Binding IsProgressIndeterminate}"
                Value="{Binding Progress.Current.Fraction, Mode=OneWay}" />

            <!--  Content  -->
            <Grid
                Background="{DynamicResource MaterialDesignCardBackground}"
                Grid.Row="2"
                IsEnabled="{Binding IsBusy, Converter={x:Static converters:InverseBoolConverter.Instance}}">
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontWeight" Value="Light" />
                    </Style>
                </Grid.Resources>
                <!--  Placeholder / usage instructions  -->
                <Grid Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                        <TextBlock FontSize="14" Margin="32,16">
                            <Run FontSize="18" Text="Please provide authentication token to continue" />
                            <LineBreak />
                            <LineBreak />

                            <!--  User token  -->
                            <InlineUIContainer>
                                <materialDesign:PackIcon
                                    Foreground="{DynamicResource PrimaryHueMidBrush}"
                                    Kind="Account"
                                    Margin="1,0,0,-2" />
                            </InlineUIContainer>
                            <Run FontSize="16" Text="Authenticate using your personal account" />
                            <LineBreak />
                            <Run Text="1. Open Discord in your" />
                            <Run FontWeight="SemiBold" Text="web browser" />
                            <Run Text="and login" />
                            <LineBreak />
                            <Run Text="2. Press" />
                            <Run FontWeight="SemiBold" Text="Ctrl+Shift+I" />
                            <Run Text="to show developer tools" />
                            <LineBreak />
                            <Run Text="3. Press" />
                            <Run FontWeight="SemiBold" Text="Ctrl+Shift+M" />
                            <Run Text="to toggle device toolbar" />
                            <LineBreak />
                            <Run Text="4. Navigate to the" />
                            <Run FontWeight="SemiBold" Text="Application" />
                            <Run Text="tab" />
                            <LineBreak />
                            <Run Text="5. On the left, expand" />
                            <Run FontWeight="SemiBold" Text="Local Storage" />
                            <Run Text="and select" />
                            <Run FontWeight="SemiBold" Text="https://discord.com" />
                            <LineBreak />
                            <Run Text="6. Type" />
                            <Run FontWeight="SemiBold" Text="token" />
                            <Run Text="into the" />
                            <Run FontWeight="SemiBold" Text="Filter" />
                            <Run Text="box" />
                            <LineBreak />
                            <Run Text="7. If the token key does not appear, press" />
                            <Run FontWeight="SemiBold" Text="Ctrl+R" />
                            <Run Text="to reload" />
                            <LineBreak />
                            <Run Text="8. Copy the value of the" />
                            <Run FontWeight="SemiBold" Text="token" />
                            <Run Text="key" />
                            <LineBreak />
                            <Run Text="*  Automating user accounts is technically against TOS, use at your own risk!" />
                            <LineBreak />
                            <LineBreak />

                            <!--  Bot token  -->
                            <InlineUIContainer>
                                <materialDesign:PackIcon
                                    Foreground="{DynamicResource PrimaryHueMidBrush}"
                                    Kind="Robot"
                                    Margin="1,0,0,-2" />
                            </InlineUIContainer>
                            <Run FontSize="16" Text="Authenticate as a bot" />
                            <LineBreak />
                            <Run Text="1. Open Discord developer portal" />
                            <LineBreak />
                            <Run Text="2. Open your application's settings" />
                            <LineBreak />
                            <Run Text="3. Navigate to the" />
                            <Run FontWeight="SemiBold" Text="Bot" />
                            <Run Text="section on the left" />
                            <LineBreak />
                            <Run Text="4. Under" />
                            <Run FontWeight="SemiBold" Text="Token" />
                            <Run Text="click" />
                            <Run FontWeight="SemiBold" Text="Copy" />
                            <LineBreak />
                            <LineBreak />

                            <Run FontSize="16" Text="If you have questions or issues, please refer to the" />
                            <Hyperlink Command="{s:Action ShowHelp}" FontSize="16">wiki</Hyperlink><Run FontSize="16" Text="." />
                        </TextBlock>
                    </ScrollViewer>
                </Grid>

                <!--  Guilds and channels  -->
                <Grid Background="{DynamicResource MaterialDesignCardBackground}" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <!--  Guilds  -->
                    <Border
                        BorderBrush="{DynamicResource MaterialDesignDivider}"
                        BorderThickness="0,0,1,0"
                        Grid.Column="0">
                        <ListBox
                            ItemsSource="{Binding AvailableGuilds}"
                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                            SelectedItem="{Binding SelectedGuild}"
                            SelectionMode="Single">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Background="Transparent"
                                        Cursor="Hand"
                                        Margin="-8"
                                        ToolTip="{Binding Name}">
                                        <!--  Guild icon placeholder  -->
                                        <Ellipse
                                            Fill="{DynamicResource MaterialDesignDivider}"
                                            Height="48"
                                            Margin="12,4,12,4"
                                            Width="48" />

                                        <!--  Guild icon  -->
                                        <Ellipse
                                            Height="48"
                                            Margin="12,4,12,4"
                                            Stroke="{DynamicResource MaterialDesignDivider}"
                                            StrokeThickness="1"
                                            Width="48">
                                            <Ellipse.Fill>
                                                <ImageBrush ImageSource="{Binding IconUrl}" />
                                            </Ellipse.Fill>
                                        </Ellipse>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>

                    <!--  Channels  -->
                    <Border Grid.Column="1">
                        <ListBox
                            HorizontalContentAlignment="Stretch"
                            ItemsSource="{Binding Source={StaticResource AvailableChannelsViewSource}}"
                            SelectionMode="Extended"
                            TextSearch.TextPath="Model.Name"
                            VirtualizingPanel.IsVirtualizingWhenGrouping="True">
                            <i:Interaction.Behaviors>
                                <behaviors:ChannelMultiSelectionListBoxBehavior SelectedItems="{Binding SelectedChannels}" />
                            </i:Interaction.Behaviors>
                            <ListBox.GroupStyle>
                                <GroupStyle>
                                    <GroupStyle.ContainerStyle>
                                        <Style TargetType="{x:Type GroupItem}">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate d:DataContext="{x:Type CollectionViewGroup}">
                                                        <Expander
                                                            Background="Transparent"
                                                            BorderBrush="{DynamicResource MaterialDesignDivider}"
                                                            BorderThickness="0,0,0,1"
                                                            Header="{Binding Name}"
                                                            IsExpanded="False"
                                                            Margin="0"
                                                            Padding="0">
                                                            <ItemsPresenter />
                                                        </Expander>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </GroupStyle.ContainerStyle>
                                </GroupStyle>
                            </ListBox.GroupStyle>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="Transparent" Margin="-8">
                                        <Grid.InputBindings>
                                            <MouseBinding Command="{s:Action ExportChannels}" MouseAction="LeftDoubleClick" />
                                        </Grid.InputBindings>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <!--  Channel icon  -->
                                        <materialDesign:PackIcon
                                            Grid.Column="0"
                                            Kind="Pound"
                                            Margin="16,7,0,6"
                                            VerticalAlignment="Center" />

                                        <!--  Channel name  -->
                                        <TextBlock
                                            FontSize="14"
                                            Grid.Column="1"
                                            Margin="3,8,8,8"
                                            Text="{Binding Name, Mode=OneWay}"
                                            VerticalAlignment="Center" />

                                        <!--  Is selected checkmark  -->
                                        <materialDesign:PackIcon
                                            Grid.Column="2"
                                            Height="24"
                                            Kind="Check"
                                            Margin="8,0"
                                            VerticalAlignment="Center"
                                            Visibility="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}"
                                            Width="24" />
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>
                </Grid>

                <!--  Export button  -->
                <Button
                    Command="{s:Action ExportChannels}"
                    HorizontalAlignment="Right"
                    Margin="32,24"
                    Style="{DynamicResource MaterialDesignFloatingActionAccentButton}"
                    VerticalAlignment="Bottom"
                    Visibility="{Binding CanExportChannels, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
                    <materialDesign:PackIcon
                        Height="32"
                        Kind="Download"
                        Width="32" />
                </Button>

                <!--  Notifications snackbar  -->
                <materialDesign:Snackbar MessageQueue="{Binding Notifications}" />
            </Grid>
        </Grid>
    </materialDesign:DialogHost>
</Window>