Update event viewer to have colored text

Needlework.Net/ViewModels/EventViewModel.cs

@@ -0,0 +1,22 @@
+using BlossomiShymae.GrrrLCU;
+using CommunityToolkit.Mvvm.ComponentModel;
+using System;
+
+namespace Needlework.Net.ViewModels
+{
+    public class EventViewModel : ObservableObject
+    {
+        public string Time { get; }
+        public string Type { get; }
+        public string Uri { get; }
+
+        public string Key => $"{Time} {Type} {Uri}";
+
+        public EventViewModel(EventData eventData)
+        {
+            Time = $"{DateTime.Now:HH:mm:ss.fff}";
+            Type = eventData?.EventType.ToUpper() ?? string.Empty;
+            Uri = eventData?.Uri ?? string.Empty;
+        }
+    }
+}

Needlework.Net/ViewModels/WebsocketViewModel.cs

@@ -16,20 +16,20 @@ namespace Needlework.Net.ViewModels
 {
     public partial class WebsocketViewModel : PageBase
     {
-        public ObservableCollection<string> EventLog { get; } = [];
+        public ObservableCollection<EventViewModel> EventLog { get; } = [];
         public SemaphoreSlim EventLogLock { get; } = new(1, 1);
 
         [NotifyPropertyChangedFor(nameof(FilteredEventLog))]
         [ObservableProperty] private string _search = string.Empty;
         [ObservableProperty] private bool _isAttach = true;
         [ObservableProperty] private bool _isTail = false;
-        [ObservableProperty] private string? _selectedEventLog = null;
+        [ObservableProperty] private EventViewModel? _selectedEventLog = null;
 
         private Dictionary<string, EventMessage> _events = [];
 
         public WebsocketClient? Client { get; set; }
 
-        public IReadOnlyList<string> FilteredEventLog => string.IsNullOrWhiteSpace(Search) ? EventLog : [.. EventLog.Where(x => x.Contains(Search, StringComparison.InvariantCultureIgnoreCase))];
+        public IReadOnlyList<EventViewModel> FilteredEventLog => string.IsNullOrWhiteSpace(Search) ? EventLog : [.. EventLog.Where(x => x.Key.Contains(Search, StringComparison.InvariantCultureIgnoreCase))];
 
         public WebsocketViewModel() : base("Event Viewer", "plug", -100)
         {
@@ -59,17 +59,10 @@ namespace Needlework.Net.ViewModels
             }
         }
 
-        [RelayCommand]
-        private void Clear()
-        {
-            _events.Clear();
-            EventLog.Clear();
-        }
-
-        partial void OnSelectedEventLogChanged(string? value)
+        partial void OnSelectedEventLogChanged(EventViewModel? value)
         {
             if (value == null) return;
-            if (_events.TryGetValue(value, out var message))
+            if (_events.TryGetValue(value.Key, out var message))
             {
                 var text = JsonSerializer.Serialize(message, App.JsonSerializerOptions);
                 if (text.Length >= App.MaxCharacters) WeakReferenceMessenger.Default.Send(new OopsiesDialogRequestedMessage(text));
@@ -77,6 +70,13 @@ namespace Needlework.Net.ViewModels
             }
         }
 
+        [RelayCommand]
+        private void Clear()
+        {
+            _events.Clear();
+            EventLog.Clear();
+        }
+
         private void OnReconnection(ReconnectionInfo info)
         {
             Trace.WriteLine($"-- Reconnection --\nType{info.Type}");
@@ -96,8 +96,7 @@ namespace Needlework.Net.ViewModels
             {
                 if (!IsAttach) return;
 
-                var line = $"{DateTime.Now:HH:mm:ss.fff} {message.Data?.EventType.ToUpper()} {message.Data?.Uri}";
-                Trace.WriteLine($"Message: {line}");
+                var line = new EventViewModel(message.Data!);
 
                 await EventLogLock.WaitAsync();
                 try
@@ -105,16 +104,16 @@ namespace Needlework.Net.ViewModels
                     if (EventLog.Count < 1000)
                     {
                         EventLog.Add(line);
-                        _events[line] = message;
+                        _events[line.Key] = message;
                     }
                     else
                     {
-                        var key = EventLog[0];
+                        var _event = EventLog[0];
                         EventLog.RemoveAt(0);
-                        _events.Remove(key);
+                        _events.Remove(_event.Key);
 
                         EventLog.Add(line);
-                        _events[line] = message;
+                        _events[line.Key] = message;
                     }
                 }
                 finally

Needlework.Net/Views/WebsocketView.axaml

@@ -42,7 +42,26 @@
 						 Name="EventViewer"
 						 Margin="0 8 0 0"
 						 ItemsSource="{Binding FilteredEventLog}"
-						 SelectedItem="{Binding SelectedEventLog}"/>
+						 SelectedItem="{Binding SelectedEventLog}"
+						 ScrollViewer.HorizontalScrollBarVisibility="Auto">
+					<ListBox.ItemTemplate>
+						<DataTemplate>
+							<Grid ColumnDefinitions="auto,auto,*">
+								<TextBlock Text="{Binding Time}"
+										   Margin="0 0 4 0"
+										   Grid.Column="0"
+										   Foreground="#8be9fd"/>
+								<TextBlock Text="{Binding Type}"
+										   Grid.Column="1"
+										   Margin="0 0 4 0"
+										   Foreground="#ffb86c"/>
+								<TextBlock Text="{Binding Uri}"
+										   Grid.Column="2"
+										   Foreground="#f8f8f2"/>
+							</Grid>
+						</DataTemplate>
+					</ListBox.ItemTemplate>
+				</ListBox>
 			</Grid>
 		</Border>
 		<GridSplitter Grid.Row="1" ResizeDirection="Rows" Background="Gray"/>