Sharepoint-Toolbox/.planning/phases/12-branding-ui-views/12-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
12-branding-ui-views	02	execute	2	12-01	SharepointToolbox/Views/Tabs/SettingsView.xaml	true	BRAND-02	truths artifacts key_links SettingsView displays an MSP Logo section with a labeled GroupBox below the data folder section The logo section shows a live thumbnail preview bound to MspLogoPreview via Base64ToImageConverter When MspLogoPreview is null, the preview area shows a 'No logo configured' placeholder text Import and Clear buttons are bound to BrowseMspLogoCommand and ClearMspLogoCommand respectively StatusMessage displays below the logo section when set path provides contains SharepointToolbox/Views/Tabs/SettingsView.xaml MSP logo section with live preview, import, and clear controls MspLogoPreview from to via pattern SharepointToolbox/Views/Tabs/SettingsView.xaml SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs data binding BrowseMspLogoCommand|ClearMspLogoCommand|MspLogoPreview from to via pattern SharepointToolbox/Views/Tabs/SettingsView.xaml SharepointToolbox/Views/Converters/Base64ToImageSourceConverter.cs StaticResource Base64ToImageConverter

Add the MSP logo section to SettingsView.xaml with live thumbnail preview, Import and Clear buttons.

Purpose: Allows administrators to see the current MSP logo and manage it directly from the Settings tab.

Output: Updated SettingsView.xaml with a logo section that binds to existing ViewModel commands and properties.

<execution_context> @C:/Users/dev/.claude/get-shit-done/workflows/execute-plan.md @C:/Users/dev/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md @.planning/phases/12-branding-ui-views/12-RESEARCH.md

From SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs:

public string? MspLogoPreview { get; }       // data URI string or null
public IAsyncRelayCommand BrowseMspLogoCommand { get; }
public IAsyncRelayCommand ClearMspLogoCommand { get; }
public string StatusMessage { get; set; }     // inherited from FeatureViewModelBase

From SharepointToolbox/Views/Tabs/SettingsView.xaml:

<UserControl ...
  xmlns:loc="clr-namespace:SharepointToolbox.Localization">
  <StackPanel Margin="16">
    <!-- Language section -->
    <Label Content="{Binding Source=..., Path=[settings.language]}" />
    <ComboBox ... />
    <Separator Margin="0,12" />
    <!-- Data folder section -->
    <Label Content="{Binding Source=..., Path=[settings.folder]}" />
    <DockPanel>
      <Button DockPanel.Dock="Right" ... Command="{Binding BrowseFolderCommand}" />
      <TextBox Text="{Binding DataFolder, ...}" />
    </DockPanel>
  </StackPanel>
</UserControl>

• {StaticResource Base64ToImageConverter} — converts data URI string to BitmapImage (added in 12-01)
• {StaticResource StringToVisibilityConverter} — returns Visible if string non-empty, else Collapsed

Task 1: Add MSP logo section to SettingsView.xaml SharepointToolbox/Views/Tabs/SettingsView.xaml - Below the data folder DockPanel, a Separator and a new MSP Logo section appears - The section has a Label with localized "MSP Logo" text - A Border contains either an Image (when logo exists) or a TextBlock placeholder (when no logo) - Image is bound to MspLogoPreview via Base64ToImageConverter, max 80px height, max 240px width - Placeholder TextBlock shows localized "No logo configured" text, visible only when MspLogoPreview is null/empty - Two buttons (Import, Clear) are horizontally aligned below the preview - A TextBlock shows StatusMessage when set (for error feedback) 1. Edit `SharepointToolbox/Views/Tabs/SettingsView.xaml`: After the Data folder ``, before ``, add:

   ```xml
   <Separator Margin="0,12" />

   <!-- MSP Logo -->
   <Label Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.title]}" />
   <Border BorderBrush="#DDDDDD" BorderThickness="1" Padding="8" CornerRadius="4"
           HorizontalAlignment="Left" MinWidth="200" MinHeight="60" Margin="0,4,0,0">
     <Grid>
       <Image Source="{Binding MspLogoPreview, Converter={StaticResource Base64ToImageConverter}}"
              MaxHeight="80" MaxWidth="240" Stretch="Uniform" HorizontalAlignment="Left"
              Visibility="{Binding MspLogoPreview, Converter={StaticResource StringToVisibilityConverter}}" />
       <TextBlock Text="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.nopreview]}"
                  VerticalAlignment="Center" HorizontalAlignment="Center"
                  Foreground="#999999" FontStyle="Italic">
         <TextBlock.Style>
           <Style TargetType="TextBlock">
             <Setter Property="Visibility" Value="Visible" />
             <Style.Triggers>
               <DataTrigger Binding="{Binding MspLogoPreview, Converter={StaticResource StringToVisibilityConverter}}" Value="Visible">
                 <Setter Property="Visibility" Value="Collapsed" />
               </DataTrigger>
             </Style.Triggers>
           </Style>
         </TextBlock.Style>
       </TextBlock>
     </Grid>
   </Border>
   <StackPanel Orientation="Horizontal" Margin="0,6,0,0">
     <Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.browse]}"
             Command="{Binding BrowseMspLogoCommand}" Width="80" Margin="0,0,8,0" />
     <Button Content="{Binding Source={x:Static loc:TranslationSource.Instance}, Path=[settings.logo.clear]}"
             Command="{Binding ClearMspLogoCommand}" Width="80" />
   </StackPanel>
   <TextBlock Text="{Binding StatusMessage}" Foreground="#CC0000" FontSize="11" Margin="0,4,0,0"
              Visibility="{Binding StatusMessage, Converter={StaticResource StringToVisibilityConverter}}" />
   ```

   Key decisions:
   - Border with light gray outline creates a visual container for the logo preview
   - Grid overlays Image and placeholder TextBlock — only one visible at a time
   - DataTrigger hides placeholder when StringToVisibilityConverter returns Visible
   - MaxHeight="80" and MaxWidth="240" keep the preview small but readable
   - Stretch="Uniform" preserves aspect ratio
   - StatusMessage in red only shows when non-empty (error feedback from import failures)

dotnet build --no-restore -warnaserror SettingsView shows MSP logo section with live preview, Import/Clear buttons, and error message area. Build passes. ```bash dotnet build --no-restore -warnaserror ``` Build must pass with zero failures. Visual verification requires manual testing.

<success_criteria>

• SettingsView.xaml has a visible MSP Logo section below the data folder
• Image binds to MspLogoPreview via Base64ToImageConverter
• Placeholder text shows when no logo is configured
• Import and Clear buttons bind to existing ViewModel commands
• StatusMessage displays in red when set
• Build passes with zero warnings </success_criteria>

After completion, create `.planning/phases/12-branding-ui-views/12-02-SUMMARY.md`