DiscordChatExporter/DiscordChatExporter.Gui/Views/RootView.xaml

<Window
    x:Class="DiscordChatExporter.Gui.Views.RootView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="clr-namespace:DiscordChatExporter.Gui.Behaviors"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    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"
    Width="600"
    Height="550"
    MinWidth="325"
    d:DataContext="{d:DesignInstance Type=viewModels:RootViewModel}"
    Background="{DynamicResource MaterialDesignPaper}"
    FocusManager.FocusedElement="{Binding ElementName=TokenValueTextBox}"
    Icon="/DiscordChatExporter;component/favicon.ico"
    Style="{DynamicResource MaterialDesignRoot}"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <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
                Grid.Row="0"
                Background="{DynamicResource PrimaryHueMidBrush}"
                TextElement.Foreground="{DynamicResource SecondaryInverseTextBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

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

                        <!--  Token type  -->
                        <ToggleButton
                            Grid.Column="0"
                            Margin="6"
                            IsChecked="{Binding IsBotToken}"
                            Style="{StaticResource MaterialDesignFlatActionToggleButton}"
                            ToolTip="Switch between user token and bot token">
                            <ToggleButton.Content>
                                <materialDesign:PackIcon
                                    Width="24"
                                    Height="24"
                                    Kind="Account" />
                            </ToggleButton.Content>
                            <materialDesign:ToggleButtonAssist.OnContent>
                                <materialDesign:PackIcon
                                    Width="24"
                                    Height="24"
                                    Kind="Robot" />
                            </materialDesign:ToggleButtonAssist.OnContent>
                        </ToggleButton>

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

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

                <!--  Settings button  -->
                <Button
                    Grid.Column="1"
                    Margin="6"
                    Padding="4"
                    Command="{s:Action ShowSettings}"
                    Style="{DynamicResource MaterialDesignFlatDarkButton}">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Settings" />
                </Button>
            </Grid>

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

            <!--  Content  -->
            <Grid Grid.Row="2">
                <!--  Placeholder / usage instructions  -->
                <Grid Margin="32,32,8,8" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                    <!--  For user token  -->
                    <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                        <TextBlock FontSize="18" Text="Please provide your user token to authorize" />
                        <TextBlock Margin="8,8,0,0" FontSize="14">
                            <Run Text="1. Open Discord" />
                            <LineBreak />
                            <Run Text="2. Press" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+Shift+I" />
                            <Run Text="to show developer tools" />
                            <LineBreak />
                            <Run Text="3. Press" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+R" />
                            <Run Text="to reload" />
                            <LineBreak />
                            <Run Text="4. Navigate to the" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Application" />
                            <Run Text="tab" />
                            <LineBreak />
                            <Run Text="5. Select" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Local Storage" />
                            <Run Text="&gt;" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="https://discordapp.com" />
                            <Run Text="on the left" />
                            <LineBreak />
                            <Run Text="6. Find" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="token" />
                            <Run Text="under key and copy the value" />
                        </TextBlock>
                        <TextBlock Margin="0,24,0,0" FontSize="14">
                            <Run Text="To authorize using bot token instead, click" />
                            <InlineUIContainer>
                                <materialDesign:PackIcon Margin="1,0,0,-3" Kind="Account" />
                            </InlineUIContainer>
                        </TextBlock>
                    </StackPanel>

                    <!--  For bot token  -->
                    <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
                        <TextBlock FontSize="18" Text="Please provide your bot token to authorize" />
                        <TextBlock Margin="8,8,0,0" FontSize="14">
                            <Run Text="1. Open Discord developer portal" />
                            <LineBreak />
                            <Run Text="2. Open your application's settings" />
                            <LineBreak />
                            <Run Text="3. Navigate to the" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Bot" />
                            <Run Text="section on the left" />
                            <LineBreak />
                            <Run Text="4. Under" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Token" />
                            <Run Text="click" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Copy" />
                        </TextBlock>
                        <TextBlock Margin="0,24,0,0" FontSize="14">
                            <Run Text="To authorize using user token instead, click" />
                            <InlineUIContainer>
                                <materialDesign:PackIcon Margin="1,0,0,-1" Kind="Robot" />
                            </InlineUIContainer>
                        </TextBlock>
                    </StackPanel>
                </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
                        Grid.Column="0"
                        BorderBrush="{DynamicResource DividerBrush}"
                        BorderThickness="0,0,1,0">
                        <ListBox
                            ItemsSource="{Binding AvailableGuilds}"
                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                            SelectedItem="{Binding SelectedGuild}"
                            SelectionMode="Single">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid
                                        Margin="-8"
                                        Background="Transparent"
                                        Cursor="Hand"
                                        ToolTip="{Binding Model.Name}">
                                        <!--  Guild icon placeholder  -->
                                        <Ellipse
                                            Width="48"
                                            Height="48"
                                            Margin="12,4,12,4"
                                            Fill="{DynamicResource DividerBrush}" />

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

                    <!--  Channels  -->
                    <Border Grid.Column="1">
                        <ListBox
                            HorizontalContentAlignment="Stretch"
                            ItemsSource="{Binding SelectedGuild.Channels}"
                            SelectionMode="Extended">
                            <i:Interaction.Behaviors>
                                <behaviors:ChannelViewModelMultiSelectionListBoxBehavior SelectedItems="{Binding SelectedChannels}" />
                            </i:Interaction.Behaviors>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel
                                        Margin="-8"
                                        Background="Transparent"
                                        Orientation="Horizontal">
                                        <StackPanel.InputBindings>
                                            <MouseBinding Command="{s:Action ExportChannels}" MouseAction="LeftDoubleClick" />
                                        </StackPanel.InputBindings>
                                        <materialDesign:PackIcon
                                            Margin="16,7,0,6"
                                            VerticalAlignment="Center"
                                            Kind="Pound" />
                                        <TextBlock
                                            Margin="3,8,8,8"
                                            VerticalAlignment="Center"
                                            FontSize="14">
                                            <Run Foreground="{DynamicResource SecondaryTextBrush}" Text="{Binding Category, Mode=OneWay}" />
                                            <Run Text="/" />
                                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="{Binding Model.Name, Mode=OneWay}" />
                                        </TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>
                </Grid>

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

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