From 94a9239cd54098b3b5eb00fb5c98336c67884e01 Mon Sep 17 00:00:00 2001
From: Paul Schneider <paul@pschneider.fr>
Date: Sat, 26 Sep 2026 11:42:28 +0100
Subject: [PATCH] [PostIt][Blogs] Margins and wrap mode #55

---
 src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml | 278 +++++++++++-------
 1 file changed, 165 insertions(+), 113 deletions(-)

diff --git a/src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml b/src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml
index a20f27195..37c5bed64 100644
--- a/src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml
+++ b/src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml
@@ -1,93 +1,110 @@
-<ContentPage xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="using:PostIt.ViewModels"
-             xmlns:postitControls="using:PostIt.Controls"
-             xmlns:AvaloniaEdit="clr-namespace:AvaloniaEdit;assembly=AvaloniaEdit"
-             xmlns:models="using:Yavsc.Blogspot"
-             xmlns:views="using:PostIt.Views.Blogs"
-             xmlns:md="using:MarkdownViewer.Core.Controls"
-             mc:Ignorable="d"
-             x:Class="PostIt.Views.Blogs.BlogsPage"
-             x:DataType="vm:BlogsViewModel"
-             HorizontalAlignment="Stretch"
-             VerticalAlignment="Stretch">
+<ContentPage
+  x:Class="PostIt.Views.Blogs.BlogsPage"
+  xmlns="https://github.com/avaloniaui"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:AvaloniaEdit="clr-namespace:AvaloniaEdit;assembly=AvaloniaEdit"
+  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+  xmlns:md="using:MarkdownViewer.Core.Controls"
+  xmlns:models="using:Yavsc.Blogspot"
+  xmlns:postitControls="using:PostIt.Controls"
+  xmlns:views="using:PostIt.Views.Blogs"
+  xmlns:vm="using:PostIt.ViewModels"
+  HorizontalAlignment="Stretch"
+  VerticalAlignment="Stretch"
+  x:DataType="vm:BlogsViewModel"
+  mc:Ignorable="d">
   <Design.DataContext>
     <vm:BlogsViewModel />
   </Design.DataContext>
   <ScrollViewer
-  VerticalScrollBarVisibility="Visible"
-  HorizontalScrollBarVisibility="Disabled"
-  Padding="5"
-  Margin="5"
-      >
+    Margin="5"
+    Padding="5"
+    HorizontalScrollBarVisibility="Disabled"
+    VerticalScrollBarVisibility="Visible">
 
 
-  <StackPanel HorizontalAlignment="Stretch">
-    <StackPanel Orientation="Horizontal" Spacing="10" Margin="5">
-      <TextBlock Text="Blog Posts" FontSize="20" FontWeight="SemiBold" />
-      <TextBox HorizontalAlignment="Right"
-               Text="{Binding SearchText, Mode=TwoWay}" PlaceholderText="Filter by title or author..." />
-    </StackPanel>
-    <CommandBar IsDynamicOverflowEnabled="True"
-           HorizontalAlignment="Right"     >
-      <CommandBar.PrimaryCommands>
-        <CommandBarButton Label="Refresh" Command="{Binding RefreshAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource RefreshIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarButton x:Name="SaveButton" Label="Save" Command="{Binding SaveAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource SaveIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarButton Label="Delete" Command="{Binding DeleteAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource DeleteIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarButton Label="Ajouter fichiers" Click="AddAttachment_Click"
-                          x:Name="AddAttachmentButton">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource AddIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarButton x:Name="ManageAclButton"
-                          Label="ACL"
-                          Command="{Binding ManageAclAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource AclIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarButton x:Name="OpenCirclesButton"
-                          Label="Mes cercles" Command="{Binding OpenCirclesAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource CircleIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-        <CommandBarToggleButton Label="Publié"
-               Command="{Binding TogglePublishCommand}"
-                                IsChecked="{Binding DraftIsPublished, Mode=TwoWay}">
-          <CommandBarToggleButton.Icon>
-            <PathIcon Data="{StaticResource PublishedIcon}" />
-          </CommandBarToggleButton.Icon>
-        </CommandBarToggleButton>
-        <CommandBarToggleButton Label="Markdown Viewer"
-                                IsChecked="{Binding IsMarkdownViewerVisible, Mode=TwoWay}">
-          <CommandBarToggleButton.Icon>
-            <PathIcon Data="{StaticResource MarkdownIcon}" />
-          </CommandBarToggleButton.Icon>
-        </CommandBarToggleButton>
-        <CommandBarButton x:Name="OpenSignatureDevButton"
-                          Label="[DEV] Signature" Command="{Binding OpenSignatureDevAsync}">
-          <CommandBarButton.Icon>
-            <PathIcon Data="{StaticResource SignIcon}" />
-          </CommandBarButton.Icon>
-        </CommandBarButton>
-      </CommandBar.PrimaryCommands>
-    </CommandBar>
+    <StackPanel HorizontalAlignment="Stretch">
+      <StackPanel
+        Margin="5"
+        Orientation="Horizontal"
+        Spacing="10">
+        <TextBlock
+          FontSize="20"
+          FontWeight="SemiBold"
+          Text="Blog Posts" />
+        <TextBox
+          HorizontalAlignment="Right"
+          PlaceholderText="Filter by title or author..."
+          Text="{Binding SearchText, Mode=TwoWay}" />
+      </StackPanel>
+      <CommandBar HorizontalAlignment="Right" IsDynamicOverflowEnabled="True">
+        <CommandBar.PrimaryCommands>
+          <CommandBarButton Command="{Binding RefreshAsync}" Label="Refresh">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource RefreshIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarButton
+            x:Name="SaveButton"
+            Command="{Binding SaveAsync}"
+            Label="Save">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource SaveIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarButton Command="{Binding DeleteAsync}" Label="Delete">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource DeleteIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarButton
+            x:Name="AddAttachmentButton"
+            Click="AddAttachment_Click"
+            Label="Ajouter fichiers">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource AddIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarButton
+            x:Name="ManageAclButton"
+            Command="{Binding ManageAclAsync}"
+            Label="ACL">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource AclIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarButton
+            x:Name="OpenCirclesButton"
+            Command="{Binding OpenCirclesAsync}"
+            Label="Mes cercles">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource CircleIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+          <CommandBarToggleButton
+            Command="{Binding TogglePublishCommand}"
+            IsChecked="{Binding DraftIsPublished, Mode=TwoWay}"
+            Label="Publié">
+            <CommandBarToggleButton.Icon>
+              <PathIcon Data="{StaticResource PublishedIcon}" />
+            </CommandBarToggleButton.Icon>
+          </CommandBarToggleButton>
+          <CommandBarToggleButton IsChecked="{Binding IsMarkdownViewerVisible, Mode=TwoWay}" Label="Markdown Viewer">
+            <CommandBarToggleButton.Icon>
+              <PathIcon Data="{StaticResource MarkdownIcon}" />
+            </CommandBarToggleButton.Icon>
+          </CommandBarToggleButton>
+          <CommandBarButton
+            x:Name="OpenSignatureDevButton"
+            Command="{Binding OpenSignatureDevAsync}"
+            Label="[DEV] Signature">
+            <CommandBarButton.Icon>
+              <PathIcon Data="{StaticResource SignIcon}" />
+            </CommandBarButton.Icon>
+          </CommandBarButton>
+        </CommandBar.PrimaryCommands>
+      </CommandBar>
 
       <Grid Margin="12" RowSpacing="12">
         <Grid.RowDefinitions>
@@ -95,30 +112,49 @@
           <RowDefinition Height="*" />
           <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" Padding="8">
-          <ListBox ItemsSource="{Binding FilteredPosts}"
-                   SelectedItem="{Binding SelectedPost, Mode=TwoWay}">
+        <Border
+          Grid.Row="1"
+          Padding="8"
+          BorderBrush="Gray"
+          BorderThickness="1">
+          <ListBox ItemsSource="{Binding FilteredPosts}" SelectedItem="{Binding SelectedPost, Mode=TwoWay}">
             <ListBox.ItemTemplate>
               <DataTemplate x:DataType="models:BlogPostDto">
-                <StackPanel Spacing="4" >
-                  <TextBlock Text="{Binding Title}" FontWeight="SemiBold" />
-                  <TextBlock Text="{Binding DateModified, StringFormat='Updated: {0:yyyy-MM-dd HH:mm}'}" FontSize="10" Foreground="Gray" />
-                  <TextBlock Text="{Binding AuthorId}" FontSize="10" Foreground="DarkSlateGray" />
+                <StackPanel Spacing="4">
+                  <TextBlock FontWeight="SemiBold" Text="{Binding Title}" />
+                  <TextBlock
+                    FontSize="10"
+                    Foreground="Gray"
+                    Text="{Binding DateModified, StringFormat='Updated: {0:yyyy-MM-dd HH:mm}'}" />
+                  <TextBlock
+                    FontSize="10"
+                    Foreground="DarkSlateGray"
+                    Text="{Binding AuthorId}" />
                 </StackPanel>
               </DataTemplate>
             </ListBox.ItemTemplate>
           </ListBox>
         </Border>
 
-        <md:MarkdownViewer Grid.Row="2" Name="MarkdownViewer"
-          IsVisible="{Binding IsMarkdownViewerVisible}"
-          MarkdownText="{Binding DraftArticle}" />
+        <Border
+          Grid.Row="2"
+          Padding="8"
+          BorderBrush="Gray"
+          BorderThickness="1"
+          IsVisible="{Binding IsMarkdownViewerVisible}">
+          <md:MarkdownViewer Name="MarkdownViewer" MarkdownText="{Binding DraftArticle}" />
+        </Border>
 
-        <Border Grid.Row="2" BorderBrush="Gray" BorderThickness="1" Padding="8"
-              IsVisible="{Binding !IsMarkdownViewerVisible}">
-          <Grid RowSpacing="10"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch">
+        <Border
+          Grid.Row="2"
+          Padding="8"
+          BorderBrush="Gray"
+          BorderThickness="1"
+          IsVisible="{Binding !IsMarkdownViewerVisible}">
+          <Grid
+            HorizontalAlignment="Stretch"
+            VerticalAlignment="Stretch"
+            RowSpacing="10">
             <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="Auto" />
@@ -129,21 +165,38 @@
               <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <TextBlock Grid.Row="0" Text="Post detail" FontWeight="SemiBold" />
-            <TextBox x:Name="DraftTitleTextBox"
-                     Grid.Row="1" Text="{Binding DraftTitle, Mode=TwoWay}" PlaceholderText="Title" />
+            <TextBlock
+              Grid.Row="0"
+              FontWeight="SemiBold"
+              Text="Post detail" />
+            <TextBox
+              x:Name="DraftTitleTextBox"
+              Grid.Row="1"
+              PlaceholderText="Title"
+              Text="{Binding DraftTitle, Mode=TwoWay}" />
 
-                     <AvaloniaEdit:TextEditor
-                     Grid.Row="2" VerticalAlignment="Stretch"
+            <AvaloniaEdit:TextEditor
+              Grid.Row="2"
+              VerticalAlignment="Stretch"
+              Document="{Binding DraftArticleDocument, Mode=TwoWay}"
+              FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
+              ShowLineNumbers="True"
+              WordWrap="True"
+              BorderThickness="1"
+              BorderBrush="LightGray"
+              CornerRadius="5"
+              Padding="5,5,5,15"
 
-                      Document="{Binding DraftArticleDocument, Mode=TwoWay}"
-                           ShowLineNumbers="True"
-                           FontFamily="Cascadia Code,Consolas,Menlo,Monospace"/>
+              />
 
 
-            <Border Grid.Row="3" BorderBrush="LightGray" BorderThickness="1" Padding="8">
+            <Border
+              Grid.Row="3"
+              Padding="8"
+              BorderBrush="LightGray"
+              BorderThickness="1">
               <StackPanel Spacing="4">
-                <TextBlock Text="Pièces jointes" FontWeight="SemiBold" />
+                <TextBlock FontWeight="SemiBold" Text="Pièces jointes" />
                 <ItemsControl ItemsSource="{Binding DraftAttachments}">
                   <ItemsControl.ItemTemplate>
                     <DataTemplate>
@@ -154,12 +207,11 @@
               </StackPanel>
             </Border>
 
-            <postitControls:StatusBar Grid.Row="4"
-                                      DataContext="{Binding ActionStatus}" />
+            <postitControls:StatusBar Grid.Row="4" DataContext="{Binding ActionStatus}" />
 
           </Grid>
         </Border>
       </Grid>
-  </StackPanel>
-    </ScrollViewer>
+    </StackPanel>
+  </ScrollViewer>
 </ContentPage>