Improve gradient-colored name parsing in ChannelListComponent and add scroll support in the channel list UI.

.gitignore

@@ -93,3 +93,4 @@ liquibase*.properties
 node
 
 .env
+virtual_view/*

frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html

@@ -1,5 +1,6 @@
 <div class="channel-list">
   <p>Channels</p>
+  <div class="scroll">
     @for (group of groupedChannels(); track group.type) {
       <p class="channel-group-title" (click)="toggleGroup(group.type)">
         {{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }}
@@ -23,4 +24,5 @@
         }
       }
     }
+  </div>
 </div>

frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss

@@ -45,3 +45,7 @@
     user-select: none;
   }
 }
+
+.scroll {
+  overflow: scroll;
+}

frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts

@@ -69,7 +69,7 @@ export class ChannelListComponent {
   }
 
   protected parseColoredName(name: string): ColoredNameSegment[] {
-    const markerRegex = /\{#([0-9a-fA-F]{6})([<>]?)}/g;
+    const markerRegex = /\{#([0-9a-fA-F]{6})(<>|[<>]?)}/g;
     const segments: ColoredNameSegment[] = [];
     let currentColor: string | undefined;
     let gradientStartColor: string | undefined;
@@ -94,6 +94,13 @@ export class ChannelListComponent {
         currentColor = markerColor;
         gradientStartColor = undefined;
         gradientStartSegmentIndex = undefined;
+      } else if (markerType === '<>') {
+        if (gradientStartColor !== undefined && gradientStartSegmentIndex !== undefined) {
+          this.applyGradient(segments, gradientStartSegmentIndex, gradientStartColor, markerColor);
+        }
+        currentColor = markerColor;
+        gradientStartColor = markerColor;
+        gradientStartSegmentIndex = segments.length;
       } else {
         currentColor = markerColor;
         gradientStartColor = undefined;