From 8031e1bcbe263d77b3ca5ca723719a889b95b2f3 Mon Sep 17 00:00:00 2001
From: nilsk <nils.kruthoff@iubh-fernstudium.de>
Date: Mon, 19 May 2025 10:14:51 +0200
Subject: [PATCH] WIP: Extending dialog content to be very descriptive and
 beginner friendly

---
 .../Dialogs/PandocDialog.razor                | 10 +++++--
 .../Dialogs/PandocDialog.razor.cs             |  1 -
 app/MindWork AI Studio/Pages/About.razor      |  7 +++++
 app/MindWork AI Studio/Pages/About.razor.cs   | 10 ++++++-
 app/MindWork AI Studio/wwwroot/app.css        | 29 +++++++++++++++++++
 5 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/app/MindWork AI Studio/Dialogs/PandocDialog.razor b/app/MindWork AI Studio/Dialogs/PandocDialog.razor
index a420667c..5341541c 100644
--- a/app/MindWork AI Studio/Dialogs/PandocDialog.razor	
+++ b/app/MindWork AI Studio/Dialogs/PandocDialog.razor	
@@ -39,11 +39,17 @@
                     </MudListItem>
                     <MudListItem T="string">
                         Open the folder and copy the path to the <code>pandoc.exe</code> file into you clipboard.
-                        (ex. <code>C:\Users\%USERNAME%\pandoc\pandoc-3.6.4</code>)
+                        (ex. <code></code>)
+                        <CodeBlock>C:\Users\%USERNAME%\pandoc</CodeBlock>
+                        
                     </MudListItem>
                     <MudListItem T="string">
                         Add the copied path to your systems environment variables and check the installation by typing
-                        <code>pandoc --version</code> into your command line interface.
+                        <CodeBlock IsInline="@true">pandoc --version</CodeBlock> into your command line interface.
+                        <CodeTabs>
+                            <CodeBlock Title="Windows">pandoc.exe --version<br/>Der Befehl "pandoc.exe" ist entweder falsch geschrieben oder<br/>konnte nicht gefunden werden.</CodeBlock>
+                            <CodeBlock Title="Mac OS">pandoc --version</CodeBlock>
+                        </CodeTabs>
                     </MudListItem>
                 </MudList>
                 <MudText Class="mb-3" Typo="Typo.caption">
diff --git a/app/MindWork AI Studio/Dialogs/PandocDialog.razor.cs b/app/MindWork AI Studio/Dialogs/PandocDialog.razor.cs
index 43ad2400..cf599d80 100644
--- a/app/MindWork AI Studio/Dialogs/PandocDialog.razor.cs	
+++ b/app/MindWork AI Studio/Dialogs/PandocDialog.razor.cs	
@@ -27,7 +27,6 @@ public partial class PandocDialog : ComponentBase
 
     private async Task CheckPandocAvailabilityAsync()
     {
-        await Task.Delay(2500);
         this.isPandocAvailable = await Pandoc.CheckAvailabilityAsync();
         this.showSkeleton = false;
         await this.InvokeAsync(this.StateHasChanged);
diff --git a/app/MindWork AI Studio/Pages/About.razor b/app/MindWork AI Studio/Pages/About.razor
index 5054de98..3bec93f9 100644
--- a/app/MindWork AI Studio/Pages/About.razor	
+++ b/app/MindWork AI Studio/Pages/About.razor	
@@ -26,6 +26,13 @@
         </MudButton>
     </MudItem>
 
+    <MudItem Class="my-9">
+        <h3>Pandoc dialog</h3>
+        <MudButton OnClick="OpenDialog">
+            Open dialog
+        </MudButton>
+    </MudItem>
+
     <InnerScrolling>
         <MudExpansionPanels Class="mb-3" MultiExpansion="@false">
             <ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="Versions" IsExpanded="@true">
diff --git a/app/MindWork AI Studio/Pages/About.razor.cs b/app/MindWork AI Studio/Pages/About.razor.cs
index d4c2c20e..eed9d2ab 100644
--- a/app/MindWork AI Studio/Pages/About.razor.cs	
+++ b/app/MindWork AI Studio/Pages/About.razor.cs	
@@ -1,5 +1,5 @@
 using System.Reflection;
-
+using AIStudio.Dialogs;
 using AIStudio.Tools.Rust;
 using AIStudio.Tools.Services;
 
@@ -18,6 +18,9 @@ public partial class About : ComponentBase
     [Inject]
     private ISnackbar Snackbar { get; init; } = null!;
     
+    [Inject]
+    private IDialogService DialogService { get; init; } = null!;
+    
     private static readonly Assembly ASSEMBLY = Assembly.GetExecutingAssembly();
     private static readonly MetaDataAttribute META_DATA = ASSEMBLY.GetCustomAttribute<MetaDataAttribute>()!;
     
@@ -205,4 +208,9 @@ public partial class About : ComponentBase
     {
         await Pandoc.FetchLatestVersionAsync();
     }
+
+    private async Task OpenDialog()
+    {
+        await this.DialogService.ShowAsync<PandocDialog>("install dialog");
+    }
 }
diff --git a/app/MindWork AI Studio/wwwroot/app.css b/app/MindWork AI Studio/wwwroot/app.css
index 83c35efb..c8ec7384 100644
--- a/app/MindWork AI Studio/wwwroot/app.css	
+++ b/app/MindWork AI Studio/wwwroot/app.css	
@@ -109,4 +109,33 @@
 /* Fixed the slider part of MudSplitter inside context div for inner scrolling component */
 .inner-scrolling-context > .mud-splitter > .mud-slider > .mud-slider-container {
     padding-bottom: 12px;
+}
+
+.code-block {
+    background-color: #2d2d2d;
+    color: #f8f8f2;
+    border-radius: 6px !important;
+    overflow: auto !important;
+    font-family: Consolas, "Courier New", monospace  !important;
+    text-align: left !important;
+}
+.code-block pre {
+    margin: 0 !important;
+}
+.code-block code {
+    font-family: inherit !important;
+}
+
+.inline-code-block {
+    background-color: #2d2d2d;
+    color: #f8f8f2;
+    border-radius: 6px;
+    font-family: Consolas, "Courier New", monospace;
+    text-align: left;
+    padding: 4px 6px;
+    margin: 0 2px;
+}
+
+.no-elevation {
+    box-shadow: none !important;
 }
\ No newline at end of file