Leif/vibe jabroni at large

[0xGaspar]

No description provided.

[Copilot]

Pull Request Overview

This pull request adds window resizing functionality and introduces three new application windows (Launchpad, Notepad, and Tetris) to create a desktop-like interface with a dynamic dock system.

Key Changes

• Implemented a new ResizableDirective to enable window resizing with 8-direction handles
• Migrated window dimensions from plain properties to Angular signals for reactive state management
• Added three new windows: Launchpad (app launcher), Notepad (markdown editor), and Tetris (game)
• Introduced a dynamic dock that displays icons for open windows

Reviewed Changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 26 comments.

Show a summary per file

File	Description
src/app/enums/window-types.enum.ts	Added new window types (LAUNCHPAD, NOTEPAD, TETRIS) to support new application windows
src/app/directives/resizable.directive.ts	New directive implementing 8-direction window resizing with dynamically created resize handles
src/app/directives/draggable.directive.ts	Enhanced to prevent drag conflicts with resize handles and added viewport boundary constraints
src/app/components/windows/tetris-window/*	New Tetris game component with full game logic, scoring, and level progression
src/app/components/windows/notepad-window/*	New markdown notepad component with live preview and basic markdown parsing
src/app/components/windows/launchpad-window/*	New launchpad component serving as an app launcher with icon grid
src/app/components/windows/float-window/*	Updated base component to use signals for width/height and added resize event handling
src/app/components/windows/settings-window/*	Updated to use signal-based dimensions and added resizable directive
src/app/components/windows/player-window/*	Updated to use signal-based dimensions and added resizable directive
src/app/components/windows/gallery-window/*	Updated to use signal-based dimensions and added resizable directive
src/app/components/main-view/*	Added dock management system that dynamically updates based on open windows
bun.lock	Added configVersion property to lock file
angular.json	Disabled analytics collection

Comments suppressed due to low confidence (2)

src/app/directives/draggable.directive.ts:122

• The directive uses @HostListener decorators which violates Angular best practices. According to the guidelines, @HostListener and @HostBinding decorators should not be used. Instead, host bindings should be placed inside the host object of the @Directive decorator.

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    // Check if the mousedown event is on a resize handle - if so, don't drag
    const target = event.target as HTMLElement;
    if (target.className && typeof target.className === 'string' && target.className.includes('resize-handle')) {
      return; // Don't drag if clicking on a resize handle
    }

    // Check if the mousedown event is on the drag handle (the header)
    const handle = this.draggableElement.querySelector('.drag-handle');
    if (handle && !handle.contains(event.target as Node)) {
      return; // Don't drag if the click is not on the handle
    }

    // Bring the window to the front by setting a new z-index.
    this.draggableElement.style.zIndex = this.zIndexManager.getNextZIndex().toString();

    this.isDragging = true;
    this.startX = event.clientX;
    this.startY = event.clientY;

    const transform = this.draggableElement.style.transform;
    const translateMatch = transform.match(/translate\(([^,]+)px, ([^,]+)px\)/);
    if (translateMatch) {
      this.initialX = parseInt(translateMatch[1], 10);
      this.initialY = parseInt(translateMatch[2], 10);
    }

    // this.draggableElement.style.cursor = 'grabbing';
    event.preventDefault();
  }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.isDragging) return;

    const dx = event.clientX - this.startX;
    const dy = event.clientY - this.startY;

    // Calculate new position
    let newX = this.initialX + dx;
    let newY = this.initialY + dy;

    // Get element dimensions
    const elementRect = this.draggableElement.getBoundingClientRect();
    const elementWidth = elementRect.width;
    const elementHeight = elementRect.height;

    // Get viewport dimensions
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    // Minimum visible area (in pixels) - keep at least 50px of the header visible
    const minVisibleWidth = Math.min(elementWidth, 100);
    const minVisibleHeight = 50;

    // Constrain horizontal position
    // Allow dragging left but keep some of the window visible on the right
    const minX = -(elementWidth - minVisibleWidth);
    // Allow dragging right but keep some of the window visible on the left
    const maxX = viewportWidth - minVisibleWidth;
    newX = Math.max(minX, Math.min(newX, maxX));

    // Constrain vertical position
    // Don't allow dragging above the top (keep header visible)
    const minY = 0;
    // Allow dragging down but keep some of the window visible at the top
    const maxY = viewportHeight - minVisibleHeight;
    newY = Math.max(minY, Math.min(newY, maxY));

    this.draggableElement.style.transform = `translate(${newX}px, ${newY}px)`;
  }

  @HostListener('document:mouseup')
  onMouseUp() {

src/app/components/main-view/main-view.component.ts:206

• Variable 'appType' is of type string, but it is compared to 'undefined' of type undefined.

          if (appType && typeof appType === 'string' && appType !== undefined) {

[Copilot]

The component uses @HostListener decorator which violates Angular best practices. According to the guidelines, @HostListener and @HostBinding decorators should not be used. Instead, host bindings should be placed inside the host object of the @Component decorator.

[0xGaspar]

@copilot open a new pull request to apply changes based on this feedback

[Copilot]

The template uses ngClass which violates Angular best practices. According to the guidelines, ngClass should not be used - use class bindings instead. Replace [ngClass]="{'cursor-grab': !isDragging, 'cursor-grabbing': isDragging}" with [class.cursor-grab]="!isDragging" [class.cursor-grabbing]="isDragging".

[0xGaspar]

@copilot open a new pull request to apply changes based on this feedback

[Copilot]

Using as any type assertion defeats TypeScript's type safety. Instead of casting to any, the proper solution is to either: 1) define a separate output event for app selection, or 2) modify the closeEvent emitter in FloatWindow to accept an optional parameter of type WindowTypes | void. The current implementation obscures the actual API contract.

[Copilot]

The component should use the inject() function instead of constructor injection for consistency with Angular modern practices. The DomSanitizer should be injected using inject() as demonstrated in the coding guidelines.

[Copilot]

The component should set changeDetection: ChangeDetectionStrategy.OnPush in the @Component decorator according to Angular best practices. This is especially important for components using signals, as it improves performance by leveraging Angular's signal-based change detection.

[Copilot]

Unused variable currentDockItems.

Suggested change

const currentDockItems = this.dockItems();

[Copilot]

Unused import effect.

Suggested change

	import { Component, EventEmitter, Input, Output, ViewChild, signal, effect } from '@angular/core';
	import { Component, EventEmitter, Input, Output, ViewChild, signal } from '@angular/core';

[Copilot]

Unused import SafeHtml.

Suggested change

	import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
	import { DomSanitizer } from '@angular/platform-browser';

[Copilot]

Unused variable elementHeight.

Suggested change

const elementHeight = elementRect.height;

[Copilot]

@0xGaspar I've opened a new pull request, #15, to work on those changes. Once the pull request is ready, I'll request review from you.

[Copilot]

@0xGaspar I've opened a new pull request, #16, to work on those changes. Once the pull request is ready, I'll request review from you.