orcas-angular 1.0.0

package/theme/theme.service.ts

@@ -0,0 +1,33 @@
+import { computed, effect, inject, Injectable } from '@angular/core';
+import { SettingsService } from "../storage/settings.service";
+
+export enum ThemeType {
+  Unset = '',
+  Light = 'light',
+  Dark = 'dark',
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemeService {
+  private settings = inject(SettingsService);
+  public $theme = this.settings.getNewSignal<ThemeType>(ThemeType.Unset, 'theme');
+
+  public $darkMode = computed(() => {
+    const theme = this.$theme();
+    let isDarkMode: boolean = theme === ThemeType.Unset
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      : theme === ThemeType.Dark;
+
+    return isDarkMode;
+  });
+
+  private effectSetDarkMode = effect(async () => {
+    document.documentElement.classList.toggle('dark', this.$darkMode());
+  });
+
+  public async setTheme(theme: ThemeType) {
+    await this.settings.set(theme, 'theme');
+  }
+}

package/ui/README.md

@@ -0,0 +1,42 @@
+# ui
+
+Reusable UI components for the application. Currently contains the context menu system.
+
+## Folders
+
+### `context-menu/`
+
+A fully self-contained context menu implementation built with Angular standalone components and directives. It handles viewport clamping automatically so that menus never render off-screen, and supports nested sub-menus.
+
+**Components and directives:**
+
+| File | Selector | Description |
+|---|---|---|
+| `context-menu.component.ts` | `<context-menu>` | Container that renders a floating menu panel at a given (x, y) coordinate. Can be used as a top-level menu or as an `isSubmenu` variant that positions itself adjacent to the parent button. |
+| `context-button.component.ts` | `<context-button>` | Menu item button. Supports `danger` and `disabled` inputs and an optional `hasSubmenu` flag that reveals a `▶` indicator and conditionally renders a nested `<context-menu>` on hover. |
+| `context-header.component.ts` | `<context-header>` | Non-interactive section header / label for grouping menu items. |
+| `context-menu-trigger.directive.ts` | `[appContextMenu]` | Applied to any element. Intercepts the `contextmenu` event, prevents the default browser menu, and calls `show(x, y)` on the bound `ContextMenuComponent`. Emits a `beforeOpen` output before the menu opens, which is useful for preparing dynamic menu content. |
+| `index.ts` | — | Public barrel re-exporting all of the above. |
+
+**Usage:**
+
+```html
+<div [appContextMenu]="menu" (beforeOpen)="prepareMenu()">
+    Right-click me
+</div>
+
+<context-menu #menu>
+    <context-header>Actions</context-header>
+
+    <context-button (click)="doSomething()">Do something</context-button>
+
+    <context-button danger (click)="deleteItem()">Delete</context-button>
+
+    <context-button [hasSubmenu]="true">
+        More…
+        <context-menu [isSubmenu]="true">
+            <context-button (click)="doNested()">Nested action</context-button>
+        </context-menu>
+    </context-button>
+</context-menu>
+```

package/ui/context-menu/context-button.component.ts

@@ -0,0 +1,55 @@
+import { Component, input, signal, booleanAttribute } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'context-button',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="relative" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
+      <button 
+        class="w-full text-left px-3 py-2 text-sm transition-colors duration-100 flex items-center justify-between gap-2"
+        [class.hover:bg-light-bg-secondary]="!disabled()"
+        [class.dark:hover:bg-[#383838]]="!disabled()"
+        [class.text-red-500]="danger() && !disabled()"
+        [class.hover:bg-red-500]="danger() && !disabled()"
+        [class.hover:text-white]="danger() && !disabled()"
+        [class.opacity-50]="disabled()"
+        [class.cursor-not-allowed]="disabled()"
+        [disabled]="disabled()">
+        <div class="flex items-center gap-2">
+          <ng-content select="[icon]"></ng-content>
+          <ng-content></ng-content>
+        </div>
+        @if (hasSubmenu()) {
+          <span class="text-[10px] text-light-text-secondary opacity-50">▶</span>
+        }
+      </button>
+
+      @if (hasSubmenu() && $showSubmenu() && !disabled()) {
+        <div class="absolute left-full top-0 ml-[-2px] z-[60]">
+          <ng-content select="context-menu"></ng-content>
+        </div>
+      }
+    </div>
+  `
+})
+export class ContextButtonComponent {
+  danger = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+  hasSubmenu = input(false, { transform: booleanAttribute });
+
+  $showSubmenu = signal(false);
+
+  onMouseEnter() {
+    if (this.hasSubmenu() && !this.disabled()) {
+      this.$showSubmenu.set(true);
+    }
+  }
+
+  onMouseLeave() {
+    if (this.hasSubmenu() && !this.disabled()) {
+      this.$showSubmenu.set(false);
+    }
+  }
+}

package/ui/context-menu/context-header.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'context-header',
+    standalone: true,
+    imports: [CommonModule],
+    template: `
+    <div 
+      class="px-3 py-1.5 text-xs font-semibold text-light-text-secondary dark:text-dark-text-secondary truncate border-b border-light-border dark:border-dark-border mb-1">
+      <ng-content></ng-content>
+    </div>
+  `
+})
+export class ContextHeaderComponent { }

package/ui/context-menu/context-menu-trigger.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, input, output, HostListener, ElementRef } from '@angular/core';
+import { ContextMenuComponent } from './context-menu.component';
+
+@Directive({
+    selector: '[appContextMenu]',
+    standalone: true
+})
+export class ContextMenuTriggerDirective {
+    appContextMenu = input.required<ContextMenuComponent>();
+
+    beforeOpen = output<void>();
+
+    constructor(private elementRef: ElementRef) { }
+
+    @HostListener('contextmenu', ['$event'])
+    onContextMenu(event: MouseEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Notify parent to prepare data
+        this.beforeOpen.emit();
+
+        // Show menu at cursor position
+        this.appContextMenu().show(event.clientX, event.clientY);
+    }
+}

package/ui/context-menu/context-menu.component.ts

@@ -0,0 +1,95 @@
+import { Component, input, output, ElementRef, HostListener, booleanAttribute, signal, ViewChild, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'context-menu',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    @if ($isVisible() || $isSubmenu()) {
+    <div 
+      #container
+      [class.fixed]="!$isSubmenu()"
+      [class.absolute]="$isSubmenu()"
+      [class.left-full]="$isSubmenu()"
+      [class.top-0]="$isSubmenu()"
+      [class.ml-[-2px]]="$isSubmenu()"
+      class="bg-white dark:bg-[#2a2a2a] border border-light-border dark:border-dark-border rounded shadow-lg z-50 min-w-[200px] text-light-text-primary dark:text-dark-text-primary py-1"
+      [style.left.px]="!$isSubmenu() ? $x() : null" 
+      [style.top.px]="!$isSubmenu() ? $y() : null" 
+      [style.visibility]="$isMeasuring() ? 'hidden' : 'visible'"
+      (click)="$event.stopPropagation()">
+      <ng-content></ng-content>
+    </div>
+    }
+  `
+})
+export class ContextMenuComponent {
+  $isSubmenu = input(false, { transform: booleanAttribute });
+
+  $isVisible = signal(false);
+  $isMeasuring = signal(false);
+  $x = signal(0);
+  $y = signal(0);
+
+  @ViewChild('container') container?: ElementRef<HTMLDivElement>;
+
+  close = output<void>();
+
+  constructor(private elementRef: ElementRef) { }
+
+  @HostListener('document:mousedown', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    if (this.$isSubmenu()) return;
+
+    // If visible and click is outside, close
+    if (this.$isVisible() && !this.elementRef.nativeElement.contains(event.target)) {
+      this.closeMenu();
+    }
+  }
+
+  show(x: number, y: number) {
+    if (this.$isSubmenu()) return;
+
+    this.$x.set(x);
+    this.$y.set(y);
+    this.$isMeasuring.set(true);
+    this.$isVisible.set(true);
+
+    // Wait for DOM to render the menu so we can measure it
+    setTimeout(() => {
+      if (this.container) {
+        const rect = this.container.nativeElement.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+
+        let newX = x;
+        let newY = y;
+
+        if (x + width > windowWidth)
+          newX = x - width;
+
+        if (y + height > windowHeight)
+          newY = y - height;
+
+        // Final safety check to ensure it doesn't go off the top/left edges
+        this.$x.set(Math.max(0, newX));
+        this.$y.set(Math.max(0, newY));
+      }
+      this.$isMeasuring.set(false);
+    }, 0);
+  }
+
+  hide() {
+    this.$isVisible.set(false);
+    this.$isMeasuring.set(false);
+  }
+
+  private closeMenu() {
+    this.hide();
+    this.close.emit();
+  }
+}

package/ui/context-menu/index.ts

@@ -0,0 +1,4 @@
+export * from './context-menu.component';
+export * from './context-header.component';
+export * from './context-button.component';
+export * from './context-menu-trigger.directive';