clipforge/ClipForge/MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="ClipForge.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ClipForge"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="ClipForge">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- SIDEBAR -->
        <Border Grid.Column="0"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="0,0,1,0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="48"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <!-- App title -->
                <Border Grid.Row="0" Padding="16,0">
                    <TextBlock Text="CLIPFORGE"
                               FontSize="13"
                               FontWeight="Bold"
                               CharacterSpacing="80"
                               Foreground="#E8FF47"
                               VerticalAlignment="Center"/>
                </Border>

                <!-- Nav items -->
                <StackPanel Grid.Row="1" Spacing="2" Padding="8,8">
                    <Button x:Name="NavClips"
                            HorizontalAlignment="Stretch"
                            Click="NavClips_Click"
                            Style="{StaticResource AccentButtonStyle}">
                        <StackPanel Orientation="Horizontal" Spacing="10">
                            <TextBlock Text="&#xE8F1;"
                                       FontFamily="Segoe MDL2 Assets"
                                       FontSize="14"/>
                            <TextBlock Text="Clips"
                                       FontSize="13"
                                       FontWeight="SemiBold"/>
                        </StackPanel>
                    </Button>
                    <Button x:Name="NavSettings"
                            HorizontalAlignment="Stretch"
                            Click="NavSettings_Click">
                        <StackPanel Orientation="Horizontal" Spacing="10">
                            <TextBlock Text="&#xE713;"
                                       FontFamily="Segoe MDL2 Assets"
                                       FontSize="14"/>
                            <TextBlock Text="Settings"
                                       FontSize="13"
                                       FontWeight="SemiBold"/>
                        </StackPanel>
                    </Button>
                </StackPanel>

                <!-- Record button -->
                <Button x:Name="RecordButton"
                        Grid.Row="2"
                        Margin="8"
                        HorizontalAlignment="Stretch"
                        Click="RecordButton_Click">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <Ellipse x:Name="RecordDot"
                                 Width="8" Height="8"
                                 Fill="#FF4757"/>
                        <TextBlock x:Name="RecordLabel"
                                   Text="CAPTURING"
                                   FontSize="11"
                                   FontWeight="Bold"
                                   CharacterSpacing="40"/>
                    </StackPanel>
                </Button>
            </Grid>
        </Border>

        <!-- MAIN CONTENT -->
        <Grid Grid.Column="1">

            <!-- CLIPS PAGE -->
            <Grid x:Name="ClipsPage" Visibility="Visible">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <!-- Header -->
                <Border Grid.Row="0" Padding="24,20,24,0">
                    <Grid>
                        <StackPanel Orientation="Horizontal" Spacing="12"
                                    VerticalAlignment="Bottom">
                            <TextBlock Text="My Clips"
                                       FontSize="24"
                                       FontWeight="Bold"/>
                            <TextBlock x:Name="ClipCountText"
                                       Text="0 clips"
                                       FontSize="12"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                       VerticalAlignment="Bottom"
                                       Margin="0,0,0,3"/>
                        </StackPanel>
                        <Button Content="Open Folder"
                                HorizontalAlignment="Right"
                                Click="OpenFolder_Click"/>
                    </Grid>
                </Border>

                <!-- Toolbar -->
                <Border Grid.Row="1" Padding="24,12">
                    <AutoSuggestBox x:Name="SearchBox"
                                    PlaceholderText="Search clips..."
                                    Width="260"
                                    HorizontalAlignment="Left"
                                    TextChanged="SearchBox_TextChanged"/>
                </Border>

                <!-- Clip Grid -->
                <ScrollViewer Grid.Row="2" Padding="24,0,24,24">
                    <ItemsControl x:Name="ClipGrid">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsWrapGrid Orientation="Horizontal"
                                               ItemWidth="232"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="local:ClipFile">
                                <Border Width="220"
                                        Margin="0,0,12,12"
                                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                        BorderThickness="1"
                                        CornerRadius="8">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="124"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>

                                        <!-- Thumbnail -->
                                        <Border Grid.Row="0"
                                                Background="#1a1a2e"
                                                CornerRadius="8,8,0,0">
                                            <Grid>
                                                <!-- Placeholder icon -->
                                                <TextBlock Text="&#xE786;"
                                                           FontFamily="Segoe MDL2 Assets"
                                                           FontSize="32"
                                                           Foreground="#333345"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center"/>
                                                <!-- Actual thumbnail -->
                                                <Image Stretch="UniformToFill"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">
                                                    <Image.Source>
                                                        <BitmapImage UriSource="{x:Bind ThumbnailPath, Mode=OneWay}"
                                                                     CreateOptions="IgnoreImageCache"/>
                                                    </Image.Source>
                                                </Image>
                                            </Grid>
                                        </Border>

                                        <!-- Duration badge -->
                                        <Border Grid.Row="0"
                                                Background="#99000000"
                                                CornerRadius="4"
                                                Padding="6,2"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Bottom"
                                                Margin="0,0,6,6">
                                            <TextBlock Text="{x:Bind Duration}"
                                                       FontSize="10"
                                                       FontFamily="Consolas"
                                                       Foreground="White"/>
                                        </Border>

                                        <!-- Info -->
                                        <Border Grid.Row="1" Padding="10,8">
                                            <StackPanel Spacing="6">
                                                <TextBlock Text="{x:Bind Title}"
                                                           FontSize="12"
                                                           FontWeight="SemiBold"
                                                           TextTrimming="CharacterEllipsis"/>
                                                <Grid>
                                                    <TextBlock Text="{x:Bind CreatedAtDisplay}"
                                                               FontSize="10"
                                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                                    <TextBlock Text="{x:Bind FileSize}"
                                                               FontSize="10"
                                                               Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                                               HorizontalAlignment="Right"/>
                                                </Grid>
                                                <StackPanel Orientation="Horizontal" Spacing="6">
                                                    <Button Tag="{x:Bind Path}"
                                                            Click="TrimClip_Click"
                                                            FontSize="11" Padding="8,4">
                                                        <TextBlock Text="&#xE8C6;"
                                                                   FontFamily="Segoe MDL2 Assets"
                                                                   FontSize="12"/>
                                                    </Button>
                                                    <Button Tag="{x:Bind Path}"
                                                            Click="RenameClip_Click"
                                                            FontSize="11" Padding="8,4">
                                                        <TextBlock Text="&#xE8AC;"
                                                                   FontFamily="Segoe MDL2 Assets"
                                                                   FontSize="12"/>
                                                    </Button>
                                                    <Button Tag="{x:Bind Path}"
                                                            Click="DeleteClip_Click"
                                                            FontSize="11" Padding="8,4">
                                                        <TextBlock Text="&#xE74D;"
                                                                   FontFamily="Segoe MDL2 Assets"
                                                                   FontSize="12"/>
                                                    </Button>
                                                </StackPanel>
                                            </StackPanel>
                                        </Border>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </Grid>

            <!-- SETTINGS PAGE -->
            <Grid x:Name="SettingsPage" Visibility="Collapsed">
                <ScrollViewer Padding="24">
                    <StackPanel Spacing="24" MaxWidth="520" HorizontalAlignment="Left">

                        <TextBlock Text="Settings"
                                   FontSize="24"
                                   FontWeight="Bold"/>

                        <!-- Clip Length -->
                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Padding="20">
                            <StackPanel Spacing="12">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock Text="&#xE714;"
                                               FontFamily="Segoe MDL2 Assets"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                    <TextBlock Text="Clip Length"
                                               FontSize="14"
                                               FontWeight="SemiBold"
                                               VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="How many seconds to save when you press the hotkey."
                                           FontSize="12"
                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                <Grid>
                                    <Slider x:Name="ClipLengthSlider"
                                            Minimum="10"
                                            Maximum="120"
                                            StepFrequency="5"
                                            Value="30"
                                            ValueChanged="ClipLengthSlider_ValueChanged"/>
                                    <TextBlock x:Name="ClipLengthLabel"
                                               Text="30 seconds"
                                               FontSize="12"
                                               FontWeight="SemiBold"
                                               Foreground="#E8FF47"
                                               HorizontalAlignment="Right"
                                               VerticalAlignment="Center"/>
                                </Grid>
                            </StackPanel>
                        </Border>

                        <!-- Video Quality -->
                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Padding="20">
                            <StackPanel Spacing="12">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock Text="&#xE7F4;"
                                               FontFamily="Segoe MDL2 Assets"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                    <TextBlock Text="Video Quality"
                                               FontSize="14"
                                               FontWeight="SemiBold"
                                               VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="Higher quality means larger file sizes."
                                           FontSize="12"
                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                <Grid>
                                    <Slider x:Name="QualitySlider"
                                            Minimum="10"
                                            Maximum="100"
                                            StepFrequency="5"
                                            Value="70"
                                            ValueChanged="QualitySlider_ValueChanged"/>
                                    <TextBlock x:Name="QualityLabel"
                                               Text="70%"
                                               FontSize="12"
                                               FontWeight="SemiBold"
                                               Foreground="#E8FF47"
                                               HorizontalAlignment="Right"
                                               VerticalAlignment="Center"/>
                                </Grid>
                            </StackPanel>
                        </Border>

                        <!-- Framerate -->
                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Padding="20">
                            <StackPanel Spacing="12">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock Text="&#xE7F8;"
                                               FontFamily="Segoe MDL2 Assets"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                    <TextBlock Text="Framerate"
                                               FontSize="14"
                                               FontWeight="SemiBold"
                                               VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="Higher framerates are smoother but use more storage."
                                           FontSize="12"
                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                <ComboBox x:Name="FramerateCombo"
                                          SelectionChanged="FramerateCombo_SelectionChanged">
                                    <ComboBoxItem Content="30 FPS"/>
                                    <ComboBoxItem Content="60 FPS" IsSelected="True"/>
                                </ComboBox>
                            </StackPanel>
                        </Border>

                        <!-- Hotkey -->
                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Padding="20">
                            <StackPanel Spacing="12">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock Text="&#xE92E;"
                                               FontFamily="Segoe MDL2 Assets"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                    <TextBlock Text="Clip Hotkey"
                                               FontSize="14"
                                               FontWeight="SemiBold"
                                               VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="Click the key below, then press your desired combination."
                                           FontSize="12"
                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                <Button x:Name="HotkeyRecorderButton"
                                        HorizontalAlignment="Left"
                                        Click="HotkeyRecorderButton_Click"
                                        Background="#1a1a2e"
                                        BorderThickness="0"
                                        CornerRadius="6"
                                        Padding="16,10"
                                        MinWidth="140">
                                    <TextBlock x:Name="HotkeyRecorderText"
                                               Text="Alt + F9"
                                               FontFamily="Consolas"
                                               FontSize="14"
                                               FontWeight="Bold"
                                               Foreground="#E8FF47"/>
                                </Button>
                            </StackPanel>
                        </Border>

                        <!-- Startup with Windows -->
                        <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                BorderThickness="1"
                                CornerRadius="8"
                                Padding="20">
                            <StackPanel Spacing="12">
                                <StackPanel Orientation="Horizontal" Spacing="8">
                                    <TextBlock Text="&#xE7E8;"
                                               FontFamily="Segoe MDL2 Assets"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                    <TextBlock Text="Startup"
                                               FontSize="14"
                                               FontWeight="SemiBold"
                                               VerticalAlignment="Center"/>
                                </StackPanel>
                                <TextBlock Text="Launch ClipForge automatically when Windows starts."
                                           FontSize="12"
                                           Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                <ToggleSwitch x:Name="StartupToggle"
                                             OnContent="Enabled"
                                             OffContent="Disabled"
                                             Toggled="StartupToggle_Toggled"/>
                            </StackPanel>
                        </Border>

                        <!-- Save button -->
                        <Button x:Name="SaveSettingsButton"
                                Content="Save Settings"
                                Style="{StaticResource AccentButtonStyle}"
                                Click="SaveSettings_Click"
                                HorizontalAlignment="Left"/>

                    </StackPanel>
                </ScrollViewer>
            </Grid>

        </Grid>
    </Grid>
</Window>