feat: add persistent color selection for browser container sessions

Adds a color picker dialog (9 Firefox container colors) accessible from
the session contextual menu. The chosen color is persisted in the session
model and sent to the browser extension via the existing WebSocket payload,
so Firefox containers are created or updated with the user-defined color
instead of a random fallback.

- Session model gains an optional `color` field
- New ChangeColorDialog component with swatch UI, fully keyboard accessible
- Color dot indicator on session cards, updates live after save
- extension-websocket.service forwards sessionColor to the extension
- @noovolari/dpapi-addon moved to optionalDependencies (Windows-only)

Signed-off-by: Jeremy Snidaro <jeremy.snidaro@papernest.com>
Signed-off-by: Jeremy SNIDARO <jeremy.snidaro@papernest.com>

Author: JeremySnidaro

packages/core/src/models/session.ts

@@ -15,6 +15,7 @@ export class Session {
   startDateTime?: string;
   type: SessionType;
   sessionTokenExpiration: string;
+  color?: string;
 
   constructor(public sessionName: string, public region: string) {
     this.sessionId = uuid.v4();

packages/desktop-app/package.json

@@ -94,9 +94,9 @@
       "desktop": {
         "desktopActions": {
           "NewWindow": {
-             "Exec": "leapp %U"
+            "Exec": "leapp %U"
           }
-       }
+        }
       },
       "target": [
         "deb",
@@ -157,7 +157,6 @@
     "@ng-select/ng-select": "10.0.4",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "~6.0.0",
-    "@noovolari/dpapi-addon": "0.1.2",
     "@noovolari/leapp-core": "file:../core",
     "@smithy/fetch-http-handler": "2.4.2",
     "assert": "2.0.0",
@@ -273,5 +272,8 @@
     "ts-node": "^9.1.1",
     "typescript": "^4.9.0",
     "util": "^0.12.4"
+  },
+  "optionalDependencies": {
+    "@noovolari/dpapi-addon": "0.1.2"
   }
 }

packages/desktop-app/src/app/components/components.module.ts

@@ -43,6 +43,7 @@ import { MatTooltipModule } from "@angular/material/tooltip";
 import { CredentialProcessDialogComponent } from "./dialogs/credential-process-dialog/credential-process-dialog.component";
 import { ChangeRegionDialogComponent } from "./dialogs/change-region-dialog/change-region-dialog.component";
 import { ChangeNamedProfileDialogComponent } from "./dialogs/change-named-profile-dialog/change-named-profile-dialog.component";
+import { ChangeColorDialogComponent } from "./dialogs/change-color-dialog/change-color-dialog.component";
 import { SsmModalDialogComponent } from "./dialogs/ssm-modal-dialog/ssm-modal-dialog.component";
 import { ContextualMenuComponent } from "./contextual-menu/contextual-menu.component";
 import { BottomBarComponent } from "./bottom-bar/bottom-bar.component";
@@ -92,6 +93,7 @@ import { NoovolariDialogComponent } from "./dialogs/noovolari-dialog/noovolari-d
     CredentialProcessDialogComponent,
     ChangeRegionDialogComponent,
     ChangeNamedProfileDialogComponent,
+    ChangeColorDialogComponent,
     SsmModalDialogComponent,
     ContextualMenuComponent,
     BottomBarComponent,

packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.html

@@ -111,6 +111,10 @@
       <i class="moon-User"></i>&nbsp;
       <span>Named Profile</span>
     </button>
+    <button mat-menu-item (click)="changeColorModalOpen();">
+      <i class="moon-Star"></i>&nbsp;
+      <span>Color</span>
+    </button>
   </mat-menu>
 
   <mat-menu #copy>

packages/desktop-app/src/app/components/contextual-menu/contextual-menu.component.ts

@@ -158,6 +158,10 @@ export class ContextualMenuComponent implements OnInit, OnDestroy {
     await this.selectedSessionActionsService.changeProfileModalOpen(this.selectedSession);
   }
 
+  async changeColorModalOpen(): Promise<void> {
+    await this.selectedSessionActionsService.changeColorModalOpen(this.selectedSession);
+  }
+
   async copyCredentials(type: number): Promise<void> {
     await this.selectedSessionActionsService.copyCredentials(this.selectedSession, type);
   }

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.html

@@ -0,0 +1,23 @@
+<a class="close-modal" (click)="closeModal();"><i class="moon-Close"></i></a>
+<h4>{{session.sessionName}}</h4>
+<h5>{{session | detail }}</h5>
+
+<div class="color-form">
+  <p>Select a color</p>
+  <div class="color-swatches">
+    <button
+      *ngFor="let color of colors"
+      type="button"
+      class="color-swatch-wrapper"
+      [class.selected]="selectedColor === color.name"
+      (click)="selectColor(color.name)">
+      <div class="color-swatch" [style.background-color]="color.hex"></div>
+      <span class="color-label">{{color.name}}</span>
+    </button>
+  </div>
+  <br>
+  <button type="button" (click)="saveColor();" [disabled]="!selectedColor"
+          [ngClass]="(!selectedColor) ? 'btn-control mat-button-disabled': 'btn-control'">Save Color
+  </button>
+  <a (click)="closeModal();">Cancel</a>
+</div>

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.scss

@@ -0,0 +1,63 @@
+.color-form {
+  margin-top: 20px;
+
+  p {
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  a {
+    display: inline-block;
+    margin-left: 10px;
+  }
+}
+
+.color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.color-swatch-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  gap: 4px;
+  background: none !important;
+  border: none;
+  padding: 0;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:focus-visible .color-swatch {
+    box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(0, 0, 0, 0.4);
+  }
+
+  &:hover .color-swatch {
+    transform: scale(1.15);
+  }
+
+  &.selected .color-swatch {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 3px white, 0 0 0 5px rgba(0, 0, 0, 0.4);
+  }
+
+  &.selected .color-label {
+    font-weight: bold;
+  }
+}
+
+.color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+
+.color-label {
+  font-size: 9px;
+  text-transform: capitalize;
+  opacity: 0.75;
+}

packages/desktop-app/src/app/components/dialogs/change-color-dialog/change-color-dialog.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { Session } from "@noovolari/leapp-core/models/session";
+import { AppService } from "../../../services/app.service";
+import { AppProviderService } from "../../../services/app-provider.service";
+import { MessageToasterService, ToastLevel } from "../../../services/message-toaster.service";
+
+export const containerColors: { name: string; hex: string }[] = [
+  { name: "toolbar", hex: "#7c7c7d" },
+  { name: "red", hex: "#ff0039" },
+  { name: "pink", hex: "#ff84a3" },
+  { name: "orange", hex: "#ff9f00" },
+  { name: "yellow", hex: "#ffcb00" },
+  { name: "green", hex: "#51cd00" },
+  { name: "turquoise", hex: "#00c79a" },
+  { name: "blue", hex: "#37adff" },
+  { name: "purple", hex: "#af51f5" },
+];
+
+@Component({
+  selector: "app-change-color-dialog",
+  templateUrl: "./change-color-dialog.component.html",
+  styleUrls: ["./change-color-dialog.component.scss"],
+  encapsulation: ViewEncapsulation.None,
+})
+export class ChangeColorDialogComponent implements OnInit {
+  @Input()
+  public session: Session;
+
+  public colors = containerColors;
+  public selectedColor: string;
+
+  constructor(
+    private readonly appService: AppService,
+    private readonly appProviderService: AppProviderService,
+    private readonly messageToasterService: MessageToasterService
+  ) {}
+
+  ngOnInit(): void {
+    this.selectedColor = this.session.color ?? null;
+  }
+
+  closeModal(): void {
+    this.appService.closeModal();
+  }
+
+  selectColor(colorName: string): void {
+    this.selectedColor = colorName;
+  }
+
+  saveColor(): void {
+    if (this.selectedColor) {
+      this.session.color = this.selectedColor;
+      this.appProviderService.repository.updateSession(this.session.sessionId, this.session);
+      this.appProviderService.behaviouralSubjectService.setSessions(this.appProviderService.repository.getSessions());
+      this.messageToasterService.toast("Color has been changed!", ToastLevel.success, "Color changed!");
+      this.closeModal();
+    }
+  }
+}

packages/desktop-app/src/app/components/sessions/session-card/session-card.component.html

@@ -9,6 +9,7 @@
       class="moon-Hover-{{session.status !== eSessionStatus.active && session.status !== eSessionStatus.pending ? 'Start' : 'Stop'}} moon-hover-session hover-item"
       (click)="session.status === eSessionStatus.active || session.status === eSessionStatus.pending ? stopSession() : startSession()"></i>
     <span class="{{session.status === eSessionStatus.active ? 'strong' : ''}}">{{$any(session)?.awsAccount ? $any(session)?.awsAccount?.accountName : session.sessionName}}</span>
+    <span *ngIf="getSessionColorHex()" class="session-color-dot" [style.background-color]="getSessionColorHex()"></span>
     <i class="moon-Pin" *ngIf="optionService.pinned.indexOf(session.sessionId) !== -1"></i>
   </div>
 </td>

packages/desktop-app/src/app/components/sessions/session-card/session-card.component.scss

@@ -266,6 +266,15 @@ td:nth-child(4) {
   left: -65px !important;
 }
 
+.session-color-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
 .session-name-td {
   height: inherit;
   overflow: hidden;