Merge branch 'main' of https://github.com/block-core/blockcore-notes

Author: sondreb

src/app/home/home.css

@@ -249,17 +249,19 @@ drag-scroll::-webkit-scrollbar {
   -webkit-user-select: none;
   -webkit-user-drag: none;
   user-drag: none;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: pointer;
+  pointer-events: all;
 }
 
-/* Prevent profile image dragging */
 .horizontal-scroll-container img,
 .horizontal-scroll-container app-event-header img {
   -webkit-user-drag: none;
   user-drag: none;
   pointer-events: none !important;
   -webkit-user-select: none;
   user-select: none;
+  touch-action: none;
 }
 
 .horizontal-scroll-container app-event-header:hover {
@@ -317,6 +319,7 @@ drag-scroll::-webkit-scrollbar {
   height: 64px;
   margin-left: 4px;
   pointer-events: auto;
+  pointer-events: all;
 }
 
 .profile-line-more-button {
@@ -328,4 +331,5 @@ drag-scroll::-webkit-scrollbar {
   align-items: center;
   justify-content: center;
   pointer-events: auto;
+  pointer-events: all;
 }

src/app/home/home.html

@@ -10,7 +10,9 @@
           [displayName]="false"
           [displayContent]="false"
           [profile]="profile"
-          draggable="false">
+          [routerLink]="['/p', profile.pubkey]"
+          draggable="false"
+          ondragstart="return false;">
         </app-event-header>
       }
       <div class="profile-line-more-wrapper">

src/app/shared/directives/drag-scroll.directive.ts

@@ -15,61 +15,93 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
   private startTime = signal(0);
   private moveDistance = signal(0);
 
-  // Momentum scrolling variables
   private velocity = signal(0);
   private timestamp = signal(0);
   private frame = signal(0);
   private amplitude = signal(0);
   private target = signal(0);
-  private timeConstant = 325; // ms - adjust for scroll momentum feel
+  private timeConstant = 500;
   private animationActive = false;
 
-  // Add this new property to track if we should suppress clicks
+  private velocityFactor = 0.5;
+  private momentumMultiplier = 8;
+
   private suppressClick = signal(false);
-  private clickThreshold = 3; // Lower threshold to better differentiate clicks from drags
+  private clickThreshold = 3;
+
+
+  private startPosition = signal(0);
+  private clickStartTime = signal(0);
 
   ngAfterViewInit(): void {
-    // Add passive event listener for smoother scrolling
     this.ngZone.runOutsideAngular(() => {
       this.element.nativeElement.addEventListener('wheel', (e: WheelEvent) => {
         e.preventDefault();
         const scrollAmount = e.deltaY || e.deltaX;
         this.element.nativeElement.scrollLeft += scrollAmount;
       }, { passive: false });
 
-      // Prevent default drag behavior on all images within the container
-      const images = this.element.nativeElement.querySelectorAll('img');
-      images.forEach((img: HTMLImageElement) => {
-        img.setAttribute('draggable', 'false');
-        img.style.pointerEvents = 'none';
+
+      const observer = new MutationObserver((mutations) => {
+        this.preventElementDrag();
       });
 
-      // Also prevent drag on app-event-header components
-      const headers = this.element.nativeElement.querySelectorAll('app-event-header');
-      headers.forEach((header: HTMLElement) => {
-        header.addEventListener('mousedown', (e: MouseEvent) => {
-          // Only prevent default for left mouse button when we're intending to drag
-          if (e.button === 0) {
-            e.preventDefault();
-          }
-        });
-
-        // Prevent drag start
-        header.addEventListener('dragstart', (e: DragEvent) => {
-          e.preventDefault();
-        });
+      observer.observe(this.element.nativeElement, {
+        childList: true,
+        subtree: true
       });
+
+
+      this.preventElementDrag();
     });
   }
 
+
+  private preventElementDrag(): void {
+
+    const images = this.element.nativeElement.querySelectorAll('img');
+    images.forEach((img: HTMLImageElement) => {
+      img.setAttribute('draggable', 'false');
+      img.style.pointerEvents = 'none';
+    });
+
+
+    const headers = this.element.nativeElement.querySelectorAll('app-event-header');
+    headers.forEach((header: HTMLElement) => {
+      header.setAttribute('draggable', 'false');
+
+
+      header.removeEventListener('dragstart', this.preventDragHandler);
+      header.addEventListener('dragstart', this.preventDragHandler);
+    });
+  }
+
+
+  private preventDragHandler = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    return false;
+  };
+
   ngOnDestroy(): void {
     this.cancelAnimation();
+
+
+    try {
+      const headers = this.element.nativeElement.querySelectorAll('app-event-header');
+      headers.forEach((header: HTMLElement) => {
+        header.removeEventListener('dragstart', this.preventDragHandler);
+      });
+    } catch (error) {
+
+    }
   }
 
   @HostListener('mousedown', ['$event'])
   onMouseDown(event: MouseEvent): void {
     this.cancelAnimation();
 
+
     this.isDown.set(true);
     this.startTime.set(Date.now());
     this.moveDistance.set(0);
@@ -78,12 +110,27 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     this.timestamp.set(Date.now());
     this.velocity.set(0);
 
+
+    this.startPosition.set(event.pageX);
+    this.clickStartTime.set(Date.now());
+
     this.element.nativeElement.classList.add('active');
     this.startX.set(event.pageX);
     this.scrollLeft.set(this.element.nativeElement.scrollLeft);
 
-    // Prevent default behavior for drag scrolling
-    event.preventDefault();
+
+
+    const target = event.target as HTMLElement;
+    const isClickable =
+      target.tagName === 'BUTTON' ||
+      target.tagName === 'A' ||
+      target.closest('button') ||
+      target.closest('a') ||
+      target.closest('mat-icon');
+
+    if (!isClickable) {
+      event.preventDefault();
+    }
   }
 
   @HostListener('mouseleave')
@@ -93,10 +140,7 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     this.isDown.set(false);
     this.element.nativeElement.classList.remove('active');
 
-    // Start momentum scrolling if we were dragging
-    if (this.isDragging()) {
-      this.autoScroll();
-    }
+    this.cancelAnimation();
   }
 
   @HostListener('mouseup', ['$event'])
@@ -106,27 +150,37 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     this.isDown.set(false);
     this.element.nativeElement.classList.remove('active');
 
-    // If just a click (no significant drag) allow event to propagate
-    if (!this.isDragging() && this.moveDistance() < this.clickThreshold) {
+
+    const distance = Math.abs(event.pageX - this.startPosition());
+    const timeElapsed = Date.now() - this.clickStartTime();
+
+
+    const isClick = distance < 5 && timeElapsed < 300;
+
+
+    if (isClick) {
+      this.suppressClick.set(false);
       return;
     }
 
-    // If we've dragged significantly, prevent the click event
+
     if (this.isDragging() || this.moveDistance() >= this.clickThreshold) {
-      this.suppressClick.set(true);
 
-      // Start momentum scrolling
-      this.autoScroll();
+      if (distance > 10) {
+        this.suppressClick.set(true);
+      }
+
+      this.cancelAnimation();
     }
   }
 
-  // Add a click event handler to prevent clicks after dragging
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent): void {
+
     if (this.suppressClick()) {
       event.stopPropagation();
       event.preventDefault();
-      this.suppressClick.set(false); // Reset for next interaction
+      this.suppressClick.set(false);
     }
   }
 
@@ -137,38 +191,31 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     const x = event.pageX;
     const delta = x - this.startX();
 
-    // If moved more than threshold, consider it a drag
+
     if (Math.abs(delta) > this.clickThreshold && !this.isDragging()) {
       this.isDragging.set(true);
-      event.preventDefault(); // Prevent text selection when dragging
     }
 
-    // Calculate velocity for momentum scrolling
     const now = Date.now();
     const elapsed = now - this.timestamp();
 
-    // Update timestamp
     this.timestamp.set(now);
 
-    // Calculate movement
-    const currentScrollLeft = this.scrollLeft() - delta;
+    const damping = 0.85;
+    const currentScrollLeft = this.scrollLeft() - (delta * damping);
     this.element.nativeElement.scrollLeft = currentScrollLeft;
 
-    // Update values for next move
     this.startX.set(x);
     this.scrollLeft.set(this.element.nativeElement.scrollLeft);
 
-    // Calculate velocity (pixels/ms)
     if (elapsed > 0) {
-      const v = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocity();
+      const v = 0.6 * (1000 * delta / (1 + elapsed)) + 0.4 * this.velocity();
       this.velocity.set(v);
     }
 
-    // Track total distance moved for distinguishing clicks from drags
     this.moveDistance.set(this.moveDistance() + Math.abs(delta));
   }
 
-  // Touch support with inertial scrolling
   @HostListener('touchstart', ['$event'])
   onTouchStart(event: TouchEvent): void {
     if (event.touches.length !== 1) return;
@@ -195,13 +242,11 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     this.isDown.set(false);
     this.element.nativeElement.classList.remove('active');
 
-    // If we've dragged significantly, prevent any click
     if (this.isDragging() || this.moveDistance() >= this.clickThreshold) {
       this.suppressClick.set(true);
       event.preventDefault();
 
-      // Start momentum scrolling
-      this.autoScroll();
+      this.cancelAnimation();
     }
   }
 
@@ -212,49 +257,45 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
     const x = event.touches[0].pageX;
     const delta = x - this.startX();
 
-    // If moved more than threshold, consider it a drag
     if (Math.abs(delta) > 5 && !this.isDragging()) {
       this.isDragging.set(true);
     }
 
-    // Calculate velocity for momentum scrolling
     const now = Date.now();
     const elapsed = now - this.timestamp();
 
-    // Update timestamp
     this.timestamp.set(now);
 
-    // Calculate movement - smoother for touch
-    const currentScrollLeft = this.scrollLeft() - delta * 1.2; // Slightly faster for touch
+    const touchSpeedMultiplier = 1.0;
+    const currentScrollLeft = this.scrollLeft() - (delta * touchSpeedMultiplier);
     this.element.nativeElement.scrollLeft = currentScrollLeft;
 
-    // Update values for next move
     this.startX.set(x);
     this.scrollLeft.set(this.element.nativeElement.scrollLeft);
 
-    // Calculate velocity (pixels/ms)
     if (elapsed > 0) {
-      const v = 0.8 * (1000 * delta / (1 + elapsed)) + 0.2 * this.velocity();
+      const v = 0.6 * (1000 * delta / (1 + elapsed)) + 0.4 * this.velocity();
       this.velocity.set(v);
     }
 
-    // Track total distance moved for distinguishing taps from drags
     this.moveDistance.set(this.moveDistance() + Math.abs(delta));
   }
 
-  // Momentum scrolling with physics-based deceleration
   private autoScroll(): void {
-    const amplitude = this.velocity() * 0.8; // Adjust amplitude for desired momentum
+    const amplitude = this.velocity() * this.velocityFactor;
     const initialPosition = this.element.nativeElement.scrollLeft;
-    const targetPosition = initialPosition - amplitude * 15; // Adjust multiplier for momentum distance
 
-    this.amplitude.set(targetPosition - initialPosition);
-    this.target.set(targetPosition);
+    const targetPosition = initialPosition - amplitude * this.momentumMultiplier;
+
+    const maxScrollLeft = this.element.nativeElement.scrollWidth - this.element.nativeElement.clientWidth;
+    const boundedTarget = Math.max(0, Math.min(targetPosition, maxScrollLeft));
+
+    this.amplitude.set(boundedTarget - initialPosition);
+    this.target.set(boundedTarget);
     this.timestamp.set(Date.now());
 
     this.animationActive = true;
 
-    // Run animation outside Angular for better performance
     this.ngZone.runOutsideAngular(() => {
       cancelAnimationFrame(this.frame());
       this.frame.set(requestAnimationFrame(() => this.autoScrollStep()));
@@ -279,5 +320,7 @@ export class DragScrollDirective implements AfterViewInit, OnDestroy {
   private cancelAnimation(): void {
     this.animationActive = false;
     cancelAnimationFrame(this.frame());
+
+    this.velocity.set(0);
   }
 }