Workspace: Workspace switching UI components

webapp/src/app/core/workspace/workspace-add-button/workspace-add-button.component.ts

@@ -0,0 +1,26 @@
+import { Component, computed, input } from '@angular/core';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlm } from '@spartan-ng/ui-core';
+import { LucideAngularModule, CirclePlus, Plus } from 'lucide-angular';
+
+@Component({
+  selector: 'app-workspace-add-button',
+  standalone: true,
+  imports: [HlmButtonDirective, LucideAngularModule],
+  template: `
+    <button hlmBtn variant="ghost" [class]="computedClass()" [size]="isCompact() ? 'icon' : 'default'">
+      <lucide-angular [img]="isCompact() ? Plus : CirclePlus" class="size-5" />
+      @if (!isCompact()) {
+        Add a Workspace
+      }
+    </button>
+  `
+})
+export class WorkspaceAddButtonComponent {
+  protected CirclePlus = CirclePlus;
+  protected Plus = Plus;
+
+  isCompact = input.required<boolean>();
+
+  computedClass = computed(() => hlm(this.isCompact() ? '' : 'flex gap-2 w-full justify-start'));
+}

webapp/src/app/core/workspace/workspace-add-button/workspace-add-button.stories.ts

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { WorkspaceAddButtonComponent } from './workspace-add-button.component';
+
+const meta: Meta<WorkspaceAddButtonComponent> = {
+  component: WorkspaceAddButtonComponent,
+  tags: ['autodocs'],
+  args: {
+    isCompact: false
+  },
+  argTypes: {
+    isCompact: {
+      control: { type: 'boolean' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<WorkspaceAddButtonComponent>;
+
+export const Default: Story = {};
+
+export const IsCompact: Story = {
+  args: {
+    isCompact: true
+  }
+};

webapp/src/app/core/workspace/workspace-badge/workspace-badge.component.html

@@ -0,0 +1,30 @@
+<div class="flex items-center gap-2">
+  <div class="block md:hidden">
+    <hlm-sheet side="left">
+      <app-workspace-thumb [iconUrl]="selectedWorkspace().iconUrl" [hoverRingEnabled]="false" />
+      <hlm-sheet-content *brnSheetContent="let ctx" class="w-11/12 p-2.5 flex flex-col gap-2">
+        <hlm-sheet-header class="text-left mt-2">
+          <h3 hlmSheetTitle>Workspaces</h3>
+        </hlm-sheet-header>
+        <hlm-scroll-area class="h-full scrollbar-thin -mr-2.5">
+          <div class="pr-2.5">
+            <app-workspace-option-selector
+              [isCompact]="false"
+              [selectedWorkspace]="selectedWorkspace()"
+              [workspaces]="workspaces()"
+              (onSelect)="onSelect.emit($event)"
+              (onSignOut)="onSignOut.emit($event)"
+            />
+          </div>
+        </hlm-scroll-area>
+        <hlm-sheet-footer>
+          <app-workspace-add-button [isCompact]="false" />
+          <hlm-menu-separator />
+        </hlm-sheet-footer>
+      </hlm-sheet-content>
+    </hlm-sheet>
+  </div>
+  <span class="text-xl font-semibold">
+    {{ selectedWorkspace().title }}
+  </span>
+</div>

webapp/src/app/core/workspace/workspace-badge/workspace-badge.component.ts

@@ -0,0 +1,40 @@
+import { Component, input, output } from '@angular/core';
+import { BrnSheetContentDirective } from '@spartan-ng/ui-sheet-brain';
+import { HlmSheetComponent, HlmSheetContentComponent, HlmSheetFooterComponent, HlmSheetHeaderComponent, HlmSheetTitleDirective } from '@spartan-ng/ui-sheet-helm';
+import { HlmMenuSeparatorComponent } from '@spartan-ng/ui-menu-helm';
+import { HlmScrollAreaComponent } from '@spartan-ng/ui-scrollarea-helm';
+import { WorkspaceThumbComponent } from '../workspace-thumb/workspace-thumb.component';
+import { WorkspaceOptionSelectorComponent } from '../workspace-option-selector/workspace-option-selector.component';
+import { WorkspaceAddButtonComponent } from '../workspace-add-button/workspace-add-button.component';
+
+type Workspace = {
+  id: string;
+  title: string;
+  iconUrl: string;
+};
+
+@Component({
+  selector: 'app-workspace-badge',
+  standalone: true,
+  imports: [
+    BrnSheetContentDirective,
+    HlmSheetComponent,
+    HlmSheetContentComponent,
+    HlmSheetHeaderComponent,
+    HlmSheetFooterComponent,
+    HlmSheetTitleDirective,
+    HlmScrollAreaComponent,
+    HlmMenuSeparatorComponent,
+    WorkspaceThumbComponent,
+    WorkspaceOptionSelectorComponent,
+    WorkspaceAddButtonComponent
+  ],
+  templateUrl: './workspace-badge.component.html'
+})
+export class WorkspaceBadgeComponent {
+  selectedWorkspace = input.required<Workspace>();
+  workspaces = input.required<Workspace[]>();
+
+  onSelect = output<Workspace>();
+  onSignOut = output<Workspace>();
+}

webapp/src/app/core/workspace/workspace-badge/workspace-badge.stories.ts

@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { WorkspaceBadgeComponent } from './workspace-badge.component';
+import { fn } from '@storybook/test';
+
+const workspaces = [
+  {
+    id: '1',
+    title: 'AET TUM',
+    iconUrl: 'https://avatars.githubusercontent.com/u/11064260?s=48&v=4'
+  },
+  {
+    id: '2',
+    title: 'Hephaestus',
+    iconUrl: ''
+  },
+  {
+    id: '3',
+    title: 'Intro Course',
+    iconUrl: 'https://avatars.githubusercontent.com/u/11064260?s=48&v=4'
+  }
+];
+
+const meta: Meta<WorkspaceBadgeComponent> = {
+  component: WorkspaceBadgeComponent,
+  tags: ['autodocs'],
+  args: {
+    selectedWorkspace: workspaces[0],
+    workspaces,
+    onSelect: fn(),
+    onSignOut: fn()
+  },
+  argTypes: {
+    selectedWorkspace: {
+      control: { type: 'object' }
+    },
+    workspaces: {
+      control: { type: 'object' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<WorkspaceBadgeComponent>;
+
+export const Default: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'responsive'
+    }
+  }
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1'
+    }
+  }
+};

webapp/src/app/core/workspace/workspace-option-selector/workspace-option-selector.component.ts

@@ -0,0 +1,39 @@
+import { Component, computed, input, output } from '@angular/core';
+import { WorkspaceOptionComponent } from '../workspace-option/workspace-option.component';
+import { hlm } from '@spartan-ng/ui-core';
+
+type Workspace = {
+  id: string;
+  title: string;
+  iconUrl: string;
+};
+
+@Component({
+  selector: 'app-workspace-option-selector',
+  standalone: true,
+  imports: [WorkspaceOptionComponent],
+  template: `
+    <div [class]="computedClass()">
+      @for (workspace of workspaces(); track workspace.id) {
+        <app-workspace-option
+          [isCompact]="isCompact()"
+          [isSelected]="selectedWorkspace().id === workspace.id"
+          [iconUrl]="workspace.iconUrl"
+          [title]="workspace.title"
+          (onSelect)="onSelect.emit(workspace)"
+          (onSignOut)="onSignOut.emit(workspace)"
+        />
+      }
+    </div>
+  `
+})
+export class WorkspaceOptionSelectorComponent {
+  isCompact = input.required<boolean>();
+  selectedWorkspace = input.required<Workspace>();
+  workspaces = input.required<Workspace[]>();
+
+  onSelect = output<Workspace>();
+  onSignOut = output<Workspace>();
+
+  computedClass = computed(() => hlm('flex flex-col', this.isCompact() ? 'gap-3' : 'gap-1'));
+}

webapp/src/app/core/workspace/workspace-option-selector/workspace-option-selector.stories.ts

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { WorkspaceOptionSelectorComponent } from './workspace-option-selector.component';
+import { fn } from '@storybook/test';
+
+const workspaces = [
+  {
+    id: '1',
+    title: 'AET TUM',
+    iconUrl: 'https://avatars.githubusercontent.com/u/11064260?s=48&v=4'
+  },
+  {
+    id: '2',
+    title: 'Hephaestus',
+    iconUrl: ''
+  },
+  {
+    id: '3',
+    title: 'Intro Course',
+    iconUrl: 'https://avatars.githubusercontent.com/u/11064260?s=48&v=4'
+  }
+];
+
+const meta: Meta<WorkspaceOptionSelectorComponent> = {
+  component: WorkspaceOptionSelectorComponent,
+  tags: ['autodocs'],
+  args: {
+    isCompact: false,
+    selectedWorkspace: workspaces[0],
+    workspaces,
+    onSelect: fn(),
+    onSignOut: fn()
+  },
+  argTypes: {
+    isCompact: {
+      control: { type: 'boolean' }
+    },
+    selectedWorkspace: {
+      control: { type: 'object' }
+    },
+    workspaces: {
+      control: { type: 'object' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<WorkspaceOptionSelectorComponent>;
+
+export const Default: Story = {};
+
+export const IsCompact: Story = {
+  args: {
+    isCompact: true
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};

webapp/src/app/core/workspace/workspace-option/workspace-option.component.html

@@ -0,0 +1,37 @@
+@if (isCompact()) {
+  <hlm-tooltip>
+    <app-workspace-thumb
+      [iconUrl]="iconUrl()"
+      [isSelected]="isSelected()"
+      (onClick)="onSelect.emit()"
+      hlmTooltipTrigger
+      position="right"
+      [aria-describedby]="title()"
+      [brnCtxMenuTriggerFor]="menu"
+    />
+    <span *brnTooltipContent class="flex items-center"> {{ title() }} </span>
+  </hlm-tooltip>
+} @else {
+  <div [class]="computedClass()">
+    <app-workspace-thumb [iconUrl]="iconUrl()" [isSelected]="isSelected()" [hoverRingEnabled]="false" variant="base" />
+    <span class="text-base font-semibold flex-1">
+      {{ title() }}
+    </span>
+    @if (isSelected()) {
+      <button [brnMenuTriggerFor]="menu">
+        <lucide-angular [img]="Ellipsis" class="size-5 text-muted-foreground block" />
+      </button>
+    }
+  </div>
+}
+
+<ng-template #menu>
+  <hlm-menu>
+    <hlm-menu-group>
+      <button hlmMenuItem class="text-destructive hover:text-destructive" (click)="onSignOut.emit()">
+        <lucide-angular [img]="LogOut" hlmMenuIcon class="size-4" />
+        Sign Out
+      </button>
+    </hlm-menu-group>
+  </hlm-menu>
+</ng-template>

webapp/src/app/core/workspace/workspace-option/workspace-option.component.ts

@@ -0,0 +1,41 @@
+import { Component, computed, input, output } from '@angular/core';
+import { WorkspaceThumbComponent } from '../workspace-thumb/workspace-thumb.component';
+import { LucideAngularModule, Ellipsis, LogOut } from 'lucide-angular';
+import { hlm } from '@spartan-ng/ui-core';
+import { HlmTooltipComponent, HlmTooltipTriggerDirective } from '@spartan-ng/ui-tooltip-helm';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
+import { BrnContextMenuTriggerDirective, BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
+import { HlmMenuComponent, HlmMenuGroupComponent, HlmMenuItemDirective, HlmMenuItemIconDirective } from '@spartan-ng/ui-menu-helm';
+
+@Component({
+  selector: 'app-workspace-option',
+  standalone: true,
+  imports: [
+    HlmTooltipComponent,
+    BrnContextMenuTriggerDirective,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
+    BrnMenuTriggerDirective,
+    HlmMenuComponent,
+    HlmMenuItemDirective,
+    HlmMenuItemIconDirective,
+    HlmMenuGroupComponent,
+    WorkspaceThumbComponent,
+    LucideAngularModule
+  ],
+  templateUrl: './workspace-option.component.html'
+})
+export class WorkspaceOptionComponent {
+  protected Ellipsis = Ellipsis;
+  protected LogOut = LogOut;
+
+  isCompact = input.required<boolean>();
+  isSelected = input<boolean>();
+  iconUrl = input<string>();
+  title = input.required<string>();
+
+  onSelect = output<void>();
+  onSignOut = output<void>();
+
+  computedClass = computed(() => hlm('flex items-center gap-2 hover:bg-accent/50 p-3 rounded-xl cursor-pointer duration-300 transition-all', this.isSelected() && 'bg-accent'));
+}