From 2084e5840fc923c8481b7562b94c7f9a2730b9df Mon Sep 17 00:00:00 2001
From: itskovacs <itskovacs@proton.me>
Date: Mon, 6 Oct 2025 18:20:17 +0200
Subject: [PATCH] :lipstick: animations, :art: vars renaming

---
 src/src/app/app.config.ts                     |  4 +-
 .../dashboard/dashboard.component.html        | 26 ++---
 src/src/styles.scss                           | 94 ++++++++++++-------
 3 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/src/src/app/app.config.ts b/src/src/app/app.config.ts
index 34bdfeb..c65b5cb 100644
--- a/src/src/app/app.config.ts
+++ b/src/src/app/app.config.ts
@@ -5,9 +5,7 @@ import {
 } from "@angular/core";
 import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
 import { provideRouter } from "@angular/router";
-
 import { routes } from "./app.routes";
-
 import { providePrimeNG } from "primeng/config";
 import { TripThemePreset } from "../mytheme";
 import { MessageService } from "primeng/api";
@@ -20,7 +18,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideAnimationsAsync(),
+    provideAnimationsAsync(), // primeng/issues/18978
     provideHttpClient(withInterceptors([Interceptor])),
     providePrimeNG({
       translation: {
diff --git a/src/src/app/components/dashboard/dashboard.component.html b/src/src/app/components/dashboard/dashboard.component.html
index a8f513c..696e7fc 100644
--- a/src/src/app/components/dashboard/dashboard.component.html
+++ b/src/src/app/components/dashboard/dashboard.component.html
@@ -40,12 +40,12 @@
 </div>
 
 <div class="absolute z-30 top-2 left-2 p-2 bg-white shadow rounded dark:bg-surface-900">
-  <p-button (click)="gotoTrips()" label="Trips" severity="secondary" text icon="pi pi-bars" />
+  <p-button (click)="navigateToTrips()" label="Trips" severity="secondary" text icon="pi pi-bars" />
 </div>
 
 @if (viewMarkersList) {
-<section
-  class="absolute left-2 right-2 top-4 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow-2xl p-4 flex flex-col dark:bg-surface-900">
+<section animate.enter="slide-x" animate.leave="a-slide-x"
+  class="absolute left-2 right-2 top-2 bottom-4 md:max-w-md bg-white z-40 rounded-xl shadow p-4 flex flex-col dark:bg-surface-900">
   <div class="mt-1 p-4 flex items-center justify-between">
     <div>
       <h1 class="font-semibold tracking-tight text-xl">Points</h1>
@@ -70,8 +70,8 @@
 
     @for (p of visiblePlaces; track p.id) {
     <div
-      class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
-      (click)="gotoPlace(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
+      class="group/item relative mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
+      (click)="togglePlaceSelection(p)" (mouseenter)="hoverPlace(p)" (mouseleave)="resetHoverPlace()">
       <img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">
 
       <div class="flex flex-col gap-1 truncate">
@@ -79,11 +79,8 @@
         <span class="text-xs text-gray-500 truncate">{{ p.place }}</span>
 
         <div class="flex gap-0.5">
-          @if (p.allowdog) {
-          <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
-          } @else {
-          <span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
-          }
+          <span class=" text-sm me-2 px-2.5 py-0.5 rounded"
+            [ngClass]="p.allowdog ? 'bg-green-100 text-green-800 dark:bg-green-100/85' : 'bg-red-100 text-red-800 dark:bg-red-100/85'">🐶</span>
 
           @if (p.visited) {
           <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
@@ -97,6 +94,11 @@
             class="text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate"><i
               class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
         </div>
+
+        <div
+          class="invisible absolute top-7 transition-all right-2 group-hover/item:visible group-hover/item:-translate-x-2">
+          <p-button text icon="pi pi-pencil" (click)="editPlace(p); $event.stopPropagation()" />
+        </div>
       </div>
     </div>
     } @empty {
@@ -110,8 +112,8 @@
 }
 
 @if (viewFilters) {
-<section
-  class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow-2xl p-8 max-w-screen md:max-w-md dark:bg-surface-900">
+<section animate.enter="slide-y" animate.leave="a-slide-y"
+  class="absolute right-2 top-36 bg-white z-40 rounded-xl shadow p-8 max-w-screen md:max-w-md dark:bg-surface-900">
 
   <div class="mt-1 flex justify-between items-center">
     <div>
diff --git a/src/src/styles.scss b/src/src/styles.scss
index 3f81c28..8918900 100644
--- a/src/src/styles.scss
+++ b/src/src/styles.scss
@@ -2,8 +2,6 @@
 @plugin 'tailwindcss-primeui';
 @variant dark (&:where(.dark, .dark *));
 
-@layer tailwind, primeng;
-
 @layer tailwind {
   @import "tailwindcss";
 }
@@ -117,7 +115,7 @@ html {
   width: 24px;
 }
 
-.listHover {
+.list-hover {
   .custom-cluster {
     background-color: red;
   }
@@ -130,13 +128,14 @@ html {
   width: 2px;
   background-color: #999;
 }
+
 @media print {
   .table-colored-resizer .p-datatable-column-resizer {
     background-color: transparent;
   }
 }
 
-@keyframes slideYcenteredX {
+@keyframes slide-y-centered-x {
   0% {
     opacity: 0;
     transform: translateX(-50%) translateY(100px);
@@ -147,15 +146,29 @@ html {
   }
 }
 
-@keyframes slide-x {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-}
+.place-box-dialog {
+  animation: slide-y-centered-x 0.3s both;
+  z-index: 999;
+  min-height: 100px;
+  max-height: 800px;
+  width: 95%;
+  max-width: 1200px;
+  position: fixed;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: none;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  display: flex;
+  align-items: flex-end;
 
-.slide-x {
-  animation: slide-x 0.3s both;
+  &-content {
+    position: relative;
+    padding: 2rem;
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+  }
 }
 
 .custom-button {
@@ -208,27 +221,40 @@ html {
   }
 }
 
-.place-box-dialog {
-  animation: slideYcenteredX 0.3s both;
-  z-index: 999;
-  min-height: 100px;
-  max-height: 800px;
-  width: 95%;
-  max-width: 1200px;
-  position: fixed;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: none;
-  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  display: flex;
-  align-items: flex-end;
-
-  &-content {
-    position: relative;
-    padding: 2rem;
-    border-radius: 8px 8px 0 0;
-    width: 100%;
+@keyframes slide-x {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
   }
 }
+
+@keyframes slide-y {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-x {
+  animation: slide-x 0.3s both normal;
+}
+
+.a-slide-x {
+  animation: slide-x 0.3s both reverse;
+}
+
+.slide-y {
+  animation: slide-y 0.3s both normal;
+}
+
+.a-slide-y {
+  animation: slide-y 0.3s both reverse;
+}
\ No newline at end of file