---
phase: 12-branding-ui-views
plan: 02
type: execute
wave: 2
depends_on: [12-01]
files_modified:
  - SharepointToolbox/Views/Tabs/SettingsView.xaml
autonomous: true
requirements:
  - BRAND-02

must_haves:
  truths:
    - "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"
  artifacts:
    - path: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
      provides: "MSP logo section with live preview, import, and clear controls"
      contains: "MspLogoPreview"
  key_links:
    - from: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
      to: "SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs"
      via: "data binding"
      pattern: "BrowseMspLogoCommand|ClearMspLogoCommand|MspLogoPreview"
    - from: "SharepointToolbox/Views/Tabs/SettingsView.xaml"
      to: "SharepointToolbox/Views/Converters/Base64ToImageSourceConverter.cs"
      via: "StaticResource"
      pattern: "Base64ToImageConverter"
---

<objective>
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.
</objective>

<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>

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

<interfaces>
<!-- SettingsViewModel properties and commands (already exist from Phase 11) -->

From SharepointToolbox/ViewModels/Tabs/SettingsViewModel.cs:
```csharp
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
```

<!-- Current SettingsView.xaml structure -->
From SharepointToolbox/Views/Tabs/SettingsView.xaml:
```xml
<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>
```

<!-- Available converters from App.xaml -->
- `{StaticResource Base64ToImageConverter}` — converts data URI string to BitmapImage (added in 12-01)
- `{StaticResource StringToVisibilityConverter}` — returns Visible if string non-empty, else Collapsed
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Add MSP logo section to SettingsView.xaml</name>
  <files>
    SharepointToolbox/Views/Tabs/SettingsView.xaml
  </files>
  <behavior>
    - 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)
  </behavior>
  <action>
    1. Edit `SharepointToolbox/Views/Tabs/SettingsView.xaml`:
       After the Data folder `</DockPanel>`, before `</StackPanel>`, 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)
  </action>
  <verify>
    <automated>dotnet build --no-restore -warnaserror</automated>
  </verify>
  <done>SettingsView shows MSP logo section with live preview, Import/Clear buttons, and error message area. Build passes.</done>
</task>

</tasks>

<verification>
```bash
dotnet build --no-restore -warnaserror
```
Build must pass with zero failures. Visual verification requires manual testing.
</verification>

<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>

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