DiscordChatExporter/DiscordChatExporter.Gui/Views/MainWindow.ammy

using MaterialDesignThemes.Wpf
using MaterialDesignThemes.Wpf.Transitions

Window "DiscordChatExporter.Gui.Views.MainWindow" {
  Title: "DiscordChatExporter"
  Width: 600
  Height: 550
  Background: resource dyn "MaterialDesignPaper"
  DataContext: bind MainViewModel from $resource Container
  FocusManager.FocusedElement: bind from "TokenTextBox"
  FontFamily: resource dyn "MaterialDesignFont"
  Icon: "/DiscordChatExporter;component/favicon.ico"
  SnapsToDevicePixels: true
  TextElement.FontSize: 13
  TextElement.FontWeight: Regular
  TextElement.Foreground: resource dyn "SecondaryTextBrush"
  TextOptions.TextFormattingMode: Ideal
  TextOptions.TextRenderingMode: Auto
  UseLayoutRounding: true
  WindowStartupLocation: CenterScreen

  DialogHost {
    DockPanel {
      IsEnabled: bind IsBusy
                 convert (bool b) => b ? false : true

      // Toolbar
      Border {
        DockPanel.Dock: Top
        Background: resource dyn "PrimaryHueMidBrush"
        TextElement.Foreground: resource dyn "SecondaryInverseTextBrush"
        StackPanel {
          Grid {
            #TwoColumns("*", "Auto")

            Card {
              #Cell(0, 0)
              Margin: [6, 6, 0, 6]

              Grid {
                #TwoColumns("*", "Auto")

                // Token
                TextBox "TokenTextBox" {
                  #Cell(0, 0)
                  Margin: 6
                  BorderThickness: 0
                  HintAssist.Hint: "Token"
                  FontSize: 16
                  Text: bind Token
                        set [ UpdateSourceTrigger: PropertyChanged ]
                  TextFieldAssist.DecorationVisibility: Hidden
                  TextFieldAssist.TextBoxViewMargin: [0, 0, 2, 0]
                }

                // Submit
                Button {
                  #Cell(0, 1)
                  Margin: [0, 6, 6, 6]
                  Padding: 4
                  Command: bind PullDataCommand
                  IsDefault: true
                  Style: resource dyn "MaterialDesignFlatButton"

                  PackIcon {
                    Width: 24
                    Height: 24
                    Kind: PackIconKind.ArrowRight
                  }
                }
              }
            }

            // Popup menu
            PopupBox {
              #Cell(0, 1)
              Foreground: resource dyn "PrimaryHueMidForegroundBrush"
              PlacementMode: LeftAndAlignTopEdges

              StackPanel {
                Button {
                  Command: bind ShowSettingsCommand
                  Content: "Settings"
                }
                Button {
                  Command: bind ShowAboutCommand
                  Content: "About"
                }
              }
            }
          }

          // Progress
          ProgressBar {
            Background: Transparent
            IsIndeterminate: true
            Visibility: bind IsBusy
                             convert (bool b) => b ? Visibility.Visible : Visibility.Hidden
          }
        }
      }

      // Content
      Grid {
        DockPanel {
          Background: resource dyn "MaterialDesignCardBackground"
          Visibility: bind IsDataAvailable
                      convert (bool b) => b ? Visibility.Visible : Visibility.Hidden

          // Guilds
          Border {
            DockPanel.Dock: Left
            BorderBrush: resource dyn "DividerBrush"
            BorderThickness: "0 0 1 0"

            ListBox {
              ItemsSource: bind AvailableGuilds
              ScrollViewer.VerticalScrollBarVisibility: Hidden
              SelectedItem: bind SelectedGuild
              VirtualizingStackPanel.IsVirtualizing: false

              ItemTemplate: DataTemplate {
                TransitioningContent {
                  OpeningEffect: TransitionEffect {
                    Duration: "0:0:0.3"
                    Kind: SlideInFromLeft
                  }

                  Border {
                    Margin: -8
                    Background: Transparent
                    Cursor: CursorType.Hand

                    Image {
                      Margin: [12, 4, 12, 4]
                      Width: 48
                      Height: 48
                      Source: bind IconUrl
                      ToolTip: bind Name
                      OpacityMask: RadialGradientBrush {
                        GradientStops: [
                          GradientStop { Color: "#FF000000", Offset: 0 }
                          GradientStop { Color: "#FF000000", Offset: 0.96 }
                          GradientStop { Color: "#00000000", Offset: 1 }
                        ]
                      }
                    }
                  }
                }
              }
            }
          }

          // Channels
          Border {
            ListBox {
              ItemsSource: bind AvailableChannels
              HorizontalContentAlignment: Stretch
              VirtualizingStackPanel.IsVirtualizing: false

              ItemTemplate: DataTemplate {
                TransitioningContent {
                  OpeningEffect: TransitionEffect {
                    Duration: "0:0:0.3"
                    Kind: SlideInFromLeft
                  }

                  @StackPanelHorizontal {
                    Margin: -8
                    Background: Transparent
                    Cursor: CursorType.Hand
                    InputBindings: [
                      MouseBinding {
                        Command: bind DataContext.ShowExportSetupCommand from $ancestor<ItemsControl>
                        CommandParameter: bind
                        MouseAction: LeftClick
                      }
                    ]

                    PackIcon {
                      Margin: [16, 7, 0, 6]
                      Kind: PackIconKind.Pound
                      VerticalAlignment: Center
                    }
                    TextBlock {
                      Margin: [3, 8, 8, 8]
                      FontSize: 14
                      Text: bind Name
                      VerticalAlignment: Center
                    }  
                  }
                }
              }
            }
          }
        }

        // Content placeholder
        StackPanel {
          Margin: [32, 32, 8, 8]
          Visibility: bind IsDataAvailable
                      convert (bool b) => b ? Visibility.Hidden : Visibility.Visible

          TextBlock {
            FontSize: 18
            Text: "DiscordChatExporter needs your authorization 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 {
              Text: "Ctrl+Shift+I"
              Foreground: resource dyn "PrimaryTextBrush"
            }
            LineBreak { }
            Run {
              Text: "4. Navigate to"
            }
            Run {
              Text: "Application"
              Foreground: resource dyn "PrimaryTextBrush"
            }
            Run { Text: "tab" }
            LineBreak { }
            Run {
              Text: "5. Expand"
            }
            Run {
              Text: "Storage > Local Storage > https://discordapp.com"
              Foreground: resource dyn "PrimaryTextBrush"
            }
            LineBreak { }
            Run {
              Text: "6. Find"
            }
            Run {
              Text: "&quot;token&quot;"
              Foreground: resource dyn "PrimaryTextBrush"
            }
            Run {
              Text: "under key and copy the value"
            }
            LineBreak { }
            Run {
              Text: "7. Paste the value in the textbox above"
            }
          }
        }
      }
    }
  }
}