[UI/UX] Refractor Install Tab

config/appnavigation.json

@@ -0,0 +1,55 @@
+{
+    "WPFToggleView": {
+        "Content": ["Expanded View", "Compact View"],
+        "Category": "____Actions",
+        "Type": "ToggleButton",
+        "Order": "1",
+        "Description": "Toggle between a list and a compact grid like view"
+    },
+    "WPFSelectedFilter": {
+        "Content": [ "Show All", "Show Selected"],
+        "Category": "____Actions",
+        "Type": "ToggleButton",
+        "Order": "2",
+        "Description": "Toggle between showing all or only the selected applications"
+    },
+    "WPFClearInstallSelection": {
+        "Content": "Clear Selection",
+        "Category": "____Actions",
+        "Type": "Button",
+        "Order": "3",
+        "Description": "Clear the selection of applications"
+    },
+    "WPFGetInstalled": {
+        "Content": "Get Installed",
+        "Category": "____Actions",
+        "Type": "Button",
+        "Order": "4",
+        "Description": "Show installed applications"
+    },
+    "WingetRadioButton": {
+        "Content": "Winget",
+        "Category": "__Package Manager",
+        "Type": "RadioButton",
+        "GroupName": "PackageManagerGroup",
+        "Checked": true,
+        "Order": "1",
+        "Description": "Use Winget for package management"
+    },
+    "ChocoRadioButton": {
+        "Content": "Chocolatey",
+        "Category": "__Package Manager",
+        "Type": "RadioButton",
+        "GroupName": "PackageManagerGroup",
+        "Checked": false,
+        "Order": "2",
+        "Description": "Use Chocolatey for package management"
+    },
+    "autofallback": {
+        "Content": "Auto Fallback",
+        "Category": "__Package Manager",
+        "Checked": true,
+        "Order": "3",
+        "Description": "If the selected package manager fails, automatically switch to the other one"
+    }
+}

config/themes.json

@@ -38,6 +38,9 @@
         "ButtonCornerRadius": "2"
     },
     "Light": {
+        "AppInstallUnselectedColor": "#F0F0F0",
+        "AppInstallHighlightedColor": "#CFCFCF",
+        "AppInstallSelectedColor": "#C2C2C2",
         "ComboBoxForegroundColor":  "#232629",
         "ComboBoxBackgroundColor":  "#F7F7F7",
         "LabelboxForegroundColor":  "#232629",
@@ -73,6 +76,9 @@
 
     },
     "Dark": {
+        "AppInstallUnselectedColor": "#232629",
+        "AppInstallHighlightedColor": "#3C3C3C",
+        "AppInstallSelectedColor": "#4C4C4C",
         "ComboBoxForegroundColor":  "#F7F7F7",
         "ComboBoxBackgroundColor":  "#1E3747",
         "LabelboxForegroundColor":  "#0567ff",

functions/private/Add-SelectedAppsMenuItem.ps1

@@ -0,0 +1,50 @@
+    function Add-SelectedAppsMenuItem {
+        <#
+        .SYNOPSIS
+            This is a helper function that generates and adds the Menu Items to the Selected Apps Popup.
+
+        .Parameter name
+            The actual Name of an App like "Chrome" or "Brave"
+            This name is contained in the "Content" property inside the applications.json
+        .PARAMETER key
+            The key which identifies an app object in applications.json
+            For Chrome this would be "WPFInstallchrome" because "WPFInstall" is prepended automatically for each key in applications.json
+        #>
+
+        param ([string]$name, [string]$key)
+
+        $selectedAppGrid = New-Object Windows.Controls.Grid
+
+        $selectedAppGrid.ColumnDefinitions.Add((New-Object System.Windows.Controls.ColumnDefinition -Property @{Width = "*"}))
+        $selectedAppGrid.ColumnDefinitions.Add((New-Object System.Windows.Controls.ColumnDefinition -Property @{Width = "30"}))
+
+        # Sets the name to the Content as well as the Tooltip, because the parent Popup Border has a fixed width and text could "overflow".
+        # With the tooltip, you can still read the whole entry on hover
+        $selectedAppLabel = New-Object Windows.Controls.Label
+        $selectedAppLabel.Content = $name
+        $selectedAppLabel.ToolTip = $name
+        $selectedAppLabel.HorizontalAlignment = "Left"
+        $selectedAppLabel.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        [System.Windows.Controls.Grid]::SetColumn($selectedAppLabel, 0)
+        $selectedAppGrid.Children.Add($selectedAppLabel)
+
+        $selectedAppRemoveButton = New-Object Windows.Controls.Button
+        $selectedAppRemoveButton.FontFamily = "Segoe MDL2 Assets"
+        $selectedAppRemoveButton.Content = [string]([char]0xE711)
+        $selectedAppRemoveButton.HorizontalAlignment = "Center"
+        $selectedAppRemoveButton.Tag = $key
+        $selectedAppRemoveButton.ToolTip = "Remove the App from Selection"
+        $selectedAppRemoveButton.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        $selectedAppRemoveButton.SetResourceReference([Windows.Controls.Control]::StyleProperty, "HoverButtonStyle")
+
+        # Highlight the Remove icon on Hover
+        $selectedAppRemoveButton.Add_MouseEnter({ $this.Foreground = "Red" })
+        $selectedAppRemoveButton.Add_MouseLeave({ $this.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor") })
+        $selectedAppRemoveButton.Add_Click({
+            $sync.($this.Tag).isChecked = $false # On click of the remove button, we only have to uncheck the corresponding checkbox. This will kick of all neccessary changes to update the UI
+        })
+        [System.Windows.Controls.Grid]::SetColumn($selectedAppRemoveButton, 1)
+        $selectedAppGrid.Children.Add($selectedAppRemoveButton)
+        # Add new Element to Popup
+        $sync.selectedAppsstackPanel.Children.Add($selectedAppGrid)
+    }

functions/private/Find-AppsByNameOrDescription.ps1

@@ -0,0 +1,35 @@
+function Find-AppsByNameOrDescription {
+    <#
+        .SYNOPSIS
+            Searches through the Apps on the Install Tab and hides all entries that do not match the string
+
+        .PARAMETER SearchString
+            The string to be searched for
+    #>
+    param(
+        [Parameter(Mandatory=$false)]
+        [string]$SearchString = ""
+    )
+    # Reset the visibility if the search string is empty or the search is cleared
+    if ([string]::IsNullOrWhiteSpace($SearchString)) {
+            Set-CategoryVisibility -Category "*"
+            return
+    }
+    $sync.ItemsControl.Items | ForEach-Object {
+        # Hide all CategoryWrapPanel and ToggleButton
+        $_.Visibility = [Windows.Visibility]::Collapsed
+        if ($_.Tag -like "CategoryWrapPanel_*") {
+            # Search for Apps that match the search string
+            $_.Children | Foreach-Object {
+                if ($sync.configs.applicationsHashtable.$($_.Tag).Content -like "*$SearchString*") {
+                    # Show the App and the parent CategoryWrapPanel if the string is found
+                    $_.Visibility = [Windows.Visibility]::Visible
+                    $_.parent.Visibility = [Windows.Visibility]::Visible
+                }
+                else {
+                    $_.Visibility = [Windows.Visibility]::Collapsed
+                }
+            }
+        }
+    }
+}

functions/private/Initalize-InstallAppEntry.ps1

@@ -0,0 +1,197 @@
+function Initialize-InstallAppEntry {
+    <#
+        .SYNOPSIS
+            Creates the app entry to be placed on the isntall tab for a given app
+            Used to as part of the Install Tab UI generation
+        .PARAMETER TargetElement
+            The Element into which the Apps should be placed
+        .PARAMETER AppKey
+            The Key of the app inside the $sync.configs.applicationsHashtable
+    #>
+        param(
+            [Windows.Controls.WrapPanel]$TargetElement,
+            $AppKey
+        )
+        $App = $sync.configs.applicationsHashtable.$AppKey
+        # Create the outer Border for the application type
+        $border = New-Object Windows.Controls.Border
+        $border.BorderBrush = [Windows.Media.Brushes]::Gray
+        $border.SetResourceReference([Windows.Controls.Control]::BorderThicknessProperty, "AppTileBorderThickness")
+        $border.CornerRadius = 5
+        $border.SetResourceReference([Windows.Controls.Control]::PaddingProperty, "AppTileMargins")
+        $border.SetResourceReference([Windows.Controls.Control]::WidthProperty, "AppTileWidth")
+        $border.VerticalAlignment = "Top"
+        $border.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
+        $border.Cursor = [System.Windows.Input.Cursors]::Hand
+        $border.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
+        $border.Tag = $Appkey
+        $border.ToolTip = $App.description
+        $border.Add_MouseUp({
+            $childCheckbox = ($this.Child.Children | Where-Object {$_.Template.TargetType -eq [System.Windows.Controls.Checkbox]})[0]
+            $childCheckBox.isChecked = -not $childCheckbox.IsChecked
+        })
+        $border.Add_MouseEnter({
+            if (($sync.$($this.Tag).IsChecked) -eq $false) {
+                $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallHighlightedColor")
+            }
+        })
+        $border.Add_MouseLeave({
+            if (($sync.$($this.Tag).IsChecked) -eq $false) {
+                $this.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
+            }
+        })
+        # Create a DockPanel inside the Border
+        $dockPanel = New-Object Windows.Controls.DockPanel
+        $dockPanel.LastChildFill = $true
+        $border.Child = $dockPanel
+
+        # Create the CheckBox, vertically centered
+        $checkBox = New-Object Windows.Controls.CheckBox
+        $checkBox.Name = $AppKey
+        $checkBox.Background = "Transparent"
+        $checkBox.HorizontalAlignment = "Left"
+        $checkBox.VerticalAlignment = "Center"
+        $checkBox.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
+        $checkBox.SetResourceReference([Windows.Controls.Control]::StyleProperty, "CollapsedCheckBoxStyle")
+        $checkbox.Add_Checked({
+            Invoke-WPFSelectedAppsUpdate -type "Add" -checkbox $this
+            $borderElement = $this.Parent.Parent
+            $borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallSelectedColor")
+        })
+
+        $checkbox.Add_Unchecked({
+            Invoke-WPFSelectedAppsUpdate -type "Remove" -checkbox $this
+            $borderElement = $this.Parent.Parent
+            $borderElement.SetResourceReference([Windows.Controls.Control]::BackgroundProperty, "AppInstallUnselectedColor")
+        })
+        $sync.$($checkBox.Name) = $checkBox
+        # Create a StackPanel for the image and name
+        $imageAndNamePanel = New-Object Windows.Controls.StackPanel
+        $imageAndNamePanel.Orientation = "Horizontal"
+        $imageAndNamePanel.VerticalAlignment = "Center"
+
+        # Create the Image and set a placeholder
+        $image = New-Object Windows.Controls.Image
+        # $image.Name = "wpfapplogo" + $App.Name
+        $image.Width = 40
+        $image.Height = 40
+        $image.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
+        $image.Source = $noimage  # Ensure $noimage is defined in your script
+
+        # Clip the image corners
+        $image.Clip = New-Object Windows.Media.RectangleGeometry
+        $image.Clip.Rect = New-Object Windows.Rect(0, 0, $image.Width, $image.Height)
+        $image.Clip.RadiusX = 5
+        $image.Clip.RadiusY = 5
+        $image.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
+
+        $imageAndNamePanel.Children.Add($image) | Out-Null
+
+        # Create the TextBlock for the application name
+        $appName = New-Object Windows.Controls.TextBlock
+        $appName.Text = $App.Content
+        $appName.SetResourceReference([Windows.Controls.Control]::FontSizeProperty, "AppTileFontSize")
+        $appName.FontWeight = [Windows.FontWeights]::Bold
+        $appName.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        $appName.VerticalAlignment = "Center"
+        $appName.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
+        $appName.Background = "Transparent"
+        $imageAndNamePanel.Children.Add($appName) | Out-Null
+
+        # Add the image and name panel to the Checkbox
+        $checkBox.Content = $imageAndNamePanel
+
+        # Add the checkbox to the DockPanel
+        [Windows.Controls.DockPanel]::SetDock($checkBox, [Windows.Controls.Dock]::Left)
+        $dockPanel.Children.Add($checkBox) | Out-Null
+
+        # Create the StackPanel for the buttons and dock it to the right
+        $buttonPanel = New-Object Windows.Controls.StackPanel
+        $buttonPanel.Orientation = "Horizontal"
+        $buttonPanel.HorizontalAlignment = "Right"
+        $buttonPanel.VerticalAlignment = "Center"
+        $buttonPanel.SetResourceReference([Windows.Controls.Control]::MarginProperty, "AppTileMargins")
+        $buttonPanel.SetResourceReference([Windows.Controls.Control]::VisibilityProperty, "AppTileCompactVisibility")
+        [Windows.Controls.DockPanel]::SetDock($buttonPanel, [Windows.Controls.Dock]::Right)
+
+        # Create the "Install" button
+        $installButton = New-Object Windows.Controls.Button
+        $installButton.Width = 45
+        $installButton.Height = 35
+        $installButton.Margin = New-Object Windows.Thickness(0, 0, 10, 0)
+
+        $installIcon = New-Object Windows.Controls.TextBlock
+        $installIcon.Text = [char]0xE118  # Install Icon
+        $installIcon.FontFamily = "Segoe MDL2 Assets"
+        $installIcon.FontSize = 20
+        $installIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        $installIcon.Background = "Transparent"
+        $installIcon.HorizontalAlignment = "Center"
+        $installIcon.VerticalAlignment = "Center"
+
+        $installButton.Content = $installIcon
+        $installButton.ToolTip = "Install or Upgrade the application"
+        $buttonPanel.Children.Add($installButton) | Out-Null
+
+        # Add Click event for the "Install" button
+        $installButton.Add_Click({
+            $appKey = $this.Parent.Parent.Parent.Tag
+            $appObject = $sync.configs.applicationsHashtable.$appKey
+            Invoke-WPFInstall -PackagesToInstall $appObject
+        })
+
+        # Create the "Uninstall" button
+        $uninstallButton = New-Object Windows.Controls.Button
+        $uninstallButton.Width = 45
+        $uninstallButton.Height = 35
+
+        $uninstallIcon = New-Object Windows.Controls.TextBlock
+        $uninstallIcon.Text = [char]0xE74D  # Uninstall Icon
+        $uninstallIcon.FontFamily = "Segoe MDL2 Assets"
+        $uninstallIcon.FontSize = 20
+        $uninstallIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        $uninstallIcon.Background = "Transparent"
+        $uninstallIcon.HorizontalAlignment = "Center"
+        $uninstallIcon.VerticalAlignment = "Center"
+
+        $uninstallButton.Content = $uninstallIcon
+        $buttonPanel.Children.Add($uninstallButton) | Out-Null
+
+        $uninstallButton.ToolTip = "Uninstall the application"
+        $uninstallButton.Add_Click({
+            $appKey = $this.Parent.Parent.Parent.Tag
+            $appObject = $sync.configs.applicationsHashtable.$appKey
+            Invoke-WPFUnInstall -PackagesToUninstall $appObject
+        })
+
+        # Create the "Info" button
+        $infoButton = New-Object Windows.Controls.Button
+        $infoButton.Width = 45
+        $infoButton.Height = 35
+        $infoButton.Margin = New-Object Windows.Thickness(10, 0, 0, 0)
+
+        $infoIcon = New-Object Windows.Controls.TextBlock
+        $infoIcon.Text = [char]0xE946  # Info Icon
+        $infoIcon.FontFamily = "Segoe MDL2 Assets"
+        $infoIcon.FontSize = 20
+        $infoIcon.SetResourceReference([Windows.Controls.Control]::ForegroundProperty, "MainForegroundColor")
+        $infoIcon.Background = "Transparent"
+        $infoIcon.HorizontalAlignment = "Center"
+        $infoIcon.VerticalAlignment = "Center"
+
+        $infoButton.Content = $infoIcon
+        $infoButton.ToolTip = "Open the application's website in your default browser"
+        $buttonPanel.Children.Add($infoButton) | Out-Null
+
+        $infoButton.Add_Click({
+            $appKey = $this.Parent.Parent.Parent.Tag
+            $appObject = $sync.configs.applicationsHashtable.$appKey
+            Start-Process $appObject.link
+        })
+
+        # Add the button panel to the DockPanel
+        $dockPanel.Children.Add($buttonPanel) | Out-Null
+
+        # Add the border to the corresponding Category
+        $TargetElement.Children.Add($border) | Out-Null
+    }

functions/private/Initialize-InstallAppArea.ps1

@@ -0,0 +1,36 @@
+    function Initialize-InstallAppArea {
+        <#
+            .SYNOPSIS
+                Creates a [Windows.Controls.ScrollViewer] containing a [Windows.Controls.ItemsControl] which is setup to use Virtualization to only load the visible elements for performance reasons.
+                This is used as the parent object for all category and app entries on the install tab
+                Used to as part of the Install Tab UI generation
+
+            .PARAMETER TargetElement
+                The element to which the AppArea shoud be added
+
+        #>
+        param($TargetElement)
+        $scrollViewer = New-Object Windows.Controls.ScrollViewer
+        $scrollViewer.VerticalScrollBarVisibility = 'Auto'
+        $scrollViewer.HorizontalAlignment = 'Stretch'
+        $scrollViewer.VerticalAlignment = 'Stretch'
+        $scrollViewer.CanContentScroll = $true
+
+        $itemsControl = New-Object Windows.Controls.ItemsControl
+        $itemsControl.HorizontalAlignment = 'Stretch'
+        $itemsControl.VerticalAlignment = 'Stretch'
+
+        $itemsPanelTemplate = New-Object Windows.Controls.ItemsPanelTemplate
+        $factory = New-Object Windows.FrameworkElementFactory ([Windows.Controls.VirtualizingStackPanel])
+        $itemsPanelTemplate.VisualTree = $factory
+        $itemsControl.ItemsPanel = $itemsPanelTemplate
+
+        $itemsControl.SetValue([Windows.Controls.VirtualizingStackPanel]::IsVirtualizingProperty, $true)
+        $itemsControl.SetValue([Windows.Controls.VirtualizingStackPanel]::VirtualizationModeProperty, [Windows.Controls.VirtualizationMode]::Recycling)
+
+        $scrollViewer.Content = $itemsControl
+
+        [Windows.Controls.DockPanel]::SetDock($scrollViewer, [Windows.Controls.Dock]::Bottom)
+        $null = $TargetElement.Children.Add($scrollViewer)
+        return $itemsControl
+    }