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:d="http://schemas.microsoft.com/expression/blend/2008"
    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}"
    FontFamily="{DynamicResource MaterialDesignFont}"
    Icon="/DiscordChatExporter;component/favicon.ico"
    SnapsToDevicePixels="True"
    TextElement.FontSize="13"
    TextElement.FontWeight="Regular"
    TextElement.Foreground="{DynamicResource SecondaryTextBrush}"
    TextOptions.TextFormattingMode="Ideal"
    TextOptions.TextRenderingMode="Auto"
    UseLayoutRounding="True"
    WindowStartupLocation="CenterScreen"
    mc:Ignorable="d">
    <materialDesign:DialogHost CloseOnClickAway="True" SnackbarMessageQueue="{Binding Notifications}">
        <DockPanel>
            <!--  Toolbar  -->
            <Border
                Background="{DynamicResource PrimaryHueMidBrush}"
                DockPanel.Dock="Top"
                IsEnabled="{Binding IsEnabled}"
                TextElement.Foreground="{DynamicResource SecondaryInverseTextBrush}">
                <StackPanel>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <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>

                        <!--  Menu  -->
                        <materialDesign:PopupBox
                            Grid.Row="0"
                            Grid.Column="1"
                            Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
                            PlacementMode="LeftAndAlignTopEdges">
                            <StackPanel>
                                <Button Command="{s:Action ShowSettings}" Content="Settings" />
                                <Button Command="{s:Action ShowAbout}" Content="About" />
                            </StackPanel>
                        </materialDesign:PopupBox>
                    </Grid>

                    <!--  Progress bar  -->
                    <ProgressBar
                        Background="Transparent"
                        IsIndeterminate="{Binding IsProgressIndeterminate}"
                        Value="{Binding Progress, Mode=OneWay}" />
                </StackPanel>
            </Border>

            <!--  Content  -->
            <Grid>
                <DockPanel
                    Background="{DynamicResource MaterialDesignCardBackground}"
                    IsEnabled="{Binding IsEnabled}"
                    Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">

                    <!--  Guilds  -->
                    <Border
                        BorderBrush="{DynamicResource DividerBrush}"
                        BorderThickness="0,0,1,0"
                        DockPanel.Dock="Left">
                        <ListBox
                            ItemsSource="{Binding AvailableGuilds}"
                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                            SelectedItem="{Binding SelectedGuild}"
                            VirtualizingStackPanel.IsVirtualizing="False">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <materialDesign:TransitioningContent>
                                        <materialDesign:TransitioningContent.OpeningEffect>
                                            <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" />
                                        </materialDesign:TransitioningContent.OpeningEffect>
                                        <Grid
                                            Margin="-8"
                                            Background="Transparent"
                                            Cursor="Hand"
                                            ToolTip="{Binding 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 IconUrl}" />
                                                </Ellipse.Fill>
                                            </Ellipse>
                                        </Grid>
                                    </materialDesign:TransitioningContent>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>

                    <!--  Channels  -->
                    <Border>
                        <ListBox
                            HorizontalContentAlignment="Stretch"
                            ItemsSource="{Binding AvailableChannels}"
                            VirtualizingStackPanel.IsVirtualizing="False">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <materialDesign:TransitioningContent>
                                        <materialDesign:TransitioningContent.OpeningEffect>
                                            <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" />
                                        </materialDesign:TransitioningContent.OpeningEffect>
                                        <StackPanel
                                            Margin="-8"
                                            Background="Transparent"
                                            Cursor="Hand"
                                            Orientation="Horizontal">
                                            <StackPanel.InputBindings>
                                                <MouseBinding
                                                    Command="{s:Action ExportChannel}"
                                                    CommandParameter="{Binding}"
                                                    MouseAction="LeftClick" />
                                            </StackPanel.InputBindings>
                                            <materialDesign:PackIcon
                                                Margin="16,7,0,6"
                                                VerticalAlignment="Center"
                                                Kind="Pound" />
                                            <TextBlock
                                                Margin="3,8,8,8"
                                                VerticalAlignment="Center"
                                                FontSize="14"
                                                Text="{Binding Name}" />
                                        </StackPanel>
                                    </materialDesign:TransitioningContent>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Border>
                </DockPanel>

                <!--  Usage instructions  -->
                <Grid Margin="32,32,8,8" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                    <!--  User token  -->
                    <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                        <TextBlock FontSize="18" Text="DiscordChatExporter needs your user token to work" />
                        <TextBlock
                            Margin="0,8,0,0"
                            FontSize="16"
                            Text="To obtain it, follow these steps:" />
                        <TextBlock Margin="8,0,0,0" FontSize="14">
                            <Run Text="1. Open the Discord app" />
                            <LineBreak />
                            <Run Text="2. Log in if you haven't" />
                            <LineBreak />
                            <Run Text="3. Press" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+Shift+I" />
                            <Run Text="to show developer tools" />
                            <LineBreak />
                            <Run Text="4. Press" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+R" />
                            <Run Text="to trigger reload" />
                            <LineBreak />
                            <Run Text="5. Navigate to the" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Application" />
                            <Run Text="tab" />
                            <LineBreak />
                            <Run Text="6. 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="7. Find" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="token" />
                            <Run Text="under key and copy the value" />
                        </TextBlock>
                    </StackPanel>

                    <!--  Bot token  -->
                    <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
                        <TextBlock FontSize="18" Text="DiscordChatExporter needs your bot token to work" />
                        <TextBlock
                            Margin="0,8,0,0"
                            FontSize="16"
                            Text="To obtain it, follow these steps:" />
                        <TextBlock Margin="8,0,0,0" FontSize="14">
                            <Run Text="1. Go to Discord developer portal" />
                            <LineBreak />
                            <Run Text="2. Log in if you haven't" />
                            <LineBreak />
                            <Run Text="3. Open your application's settings" />
                            <LineBreak />
                            <Run Text="4. Navigate to the" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Bot" />
                            <Run Text="section on the left" />
                            <LineBreak />
                            <Run Text="5. Under" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Token" />
                            <Run Text="click" />
                            <Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Copy" />
                        </TextBlock>
                    </StackPanel>
                </Grid>

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