Check if group is readonly using pipe

src/app/components/groups/groups.component.html

@@ -7,7 +7,7 @@
       hideToggle>
       <mat-expansion-panel-header>
         @if ((activeGroupId$ | async) === group.id && isNaN(activeTabId$ | async)) {
-          <app-ripple [focused]="true"></app-ripple>
+          <app-ripple [focused]="true" />
         }
 
         <div class="collapsed">
@@ -17,18 +17,17 @@
               [total]="group.tabs.length"
               [titleText]="(titlesMap$ | async)[group.id]"
               [pinned]="group.timestamp < 0"
-              [readOnly]="!hasTabGroup(group)"
-              (starred)="favGroup(group)">
-            </app-panel-header>
+              [readOnly]="group | isReadOnlyGroup"
+              (starred)="favGroup(group)" />
           }
         </div>
         <div class="expanded">
-          <app-group-controls [group]="group" [readOnly]="!hasTabGroup(group)"></app-group-controls>
+          <app-group-controls [group]="group" [readOnly]="group | isReadOnlyGroup" />
         </div>
       </mat-expansion-panel-header>
 
       <ng-template matExpansionPanelContent>
-        <mat-divider></mat-divider>
+        <mat-divider />
 
         @if (group.tabs$ | async; as tabs) {
           <app-tab-list cdkDropList (cdkDropListDropped)="drop($event, tabs)">

src/app/components/groups/groups.component.ts

@@ -5,6 +5,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { BehaviorSubject, Observable, map, shareReplay } from 'rxjs';
+import { IsReadOnlyGroupPipe } from '../../pipes/index';
 import { NavService, SettingsService, TabService } from '../../services/index';
 import { BrowserTabs, GroupExpanded, TabGroup, TabGroups, TabsByHostname } from '../../utils/index';
 import { GroupControlsComponent } from '../group-controls/group-controls.component';
@@ -28,6 +29,7 @@ import { RippleComponent } from '../ripple/ripple.component';
     CommonModule,
     DragDropModule,
     GroupControlsComponent,
+    IsReadOnlyGroupPipe,
     ListItemComponent,
     MatDividerModule,
     MatExpansionModule,
@@ -90,7 +92,11 @@ export class GroupsComponent {
 
   readonly isNaN = isNaN;
 
-  constructor(private navService: NavService, private tabService: TabService, private settings: SettingsService) {
+  constructor(
+    private readonly navService: NavService,
+    private readonly tabService: TabService,
+    private readonly settings: SettingsService
+  ) {
     this.panelStates$ = this.settings.panelStates$.pipe(map((states) => states ?? {}));
     this.activeGroupId$ = this.navService.paramsGroupId$;
     this.activeTabId$ = this.navService.paramsTabId$;
@@ -100,13 +106,6 @@ export class GroupsComponent {
     this.tabService.favGroupToggle(group);
   }
 
-  /**
-   * Checks if tab group exists in timeline
-   */
-  hasTabGroup(group: TabGroup): boolean {
-    return this.tabService.hasTabGroup(group);
-  }
-
   /**
    * Saves open panel state to local storage
    */

src/app/pipes/index.ts

@@ -1,2 +1,3 @@
 export * from './favicon.pipe';
 export * from './hostname.pipe';
+export * from './is-read-only-group.pipe';

src/app/pipes/is-read-only-group.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TabService } from '../services/index';
+import { TabGroup } from '../utils';
+
+/**
+ * @description
+ * 
+ * Check if tab group is part of saved tab groups
+ */
+@Pipe({
+  name: 'isReadOnlyGroup',
+  standalone: true
+})
+export class IsReadOnlyGroupPipe implements PipeTransform {
+
+  constructor(private readonly tabService: TabService) {}
+
+  transform(group: TabGroup): boolean {
+    return !this.tabService.hasTabGroup(group);
+  }
+}