From 6a59036e2160ce321ea30bc62af51c7df8385ce9 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Sat, 17 May 2025 16:56:09 -0300
Subject: [PATCH] feat: alignments

---
 .../achievement-notification.scss             | 203 ++++++++++--------
 .../notification/achievement-notification.tsx |  15 +-
 .../src/pages/theme-editor/theme-editor.tsx   |  44 +++-
 3 files changed, 157 insertions(+), 105 deletions(-)

diff --git a/src/renderer/src/components/achievements/notification/achievement-notification.scss b/src/renderer/src/components/achievements/notification/achievement-notification.scss
index 7e374412..1e68714b 100644
--- a/src/renderer/src/components/achievements/notification/achievement-notification.scss
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.scss
@@ -1,7 +1,8 @@
 @use "../../../scss/globals.scss";
 
 $margin-horizontal: 40px;
-$margin-vertical: 52px;
+$margin-top: 52px;
+$margin-bottom: 28px;
 
 @keyframes content-in {
   0% {
@@ -141,13 +142,43 @@ $margin-vertical: 52px;
 .achievement-notification {
   width: 360px;
   height: 192px;
+  display: flex;
+
+  &.closing * {
+    animation: none;
+  }
 
-  &.closing *,
   &.closing *::before,
   &.closing *::after {
     animation: none !important;
   }
 
+  &.top_left {
+    align-items: start;
+  }
+
+  &.top_center {
+    align-items: start;
+  }
+
+  &.top_right {
+    justify-content: end;
+    align-items: start;
+  }
+
+  &.bottom_left {
+    align-items: end;
+  }
+
+  &.bottom_center {
+    align-items: end;
+  }
+
+  &.bottom_right {
+    justify-content: end;
+    align-items: end;
+  }
+
   .achievement-notification__outer-container {
     position: relative;
     display: grid;
@@ -161,35 +192,33 @@ $margin-vertical: 52px;
     box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.25);
 
     &.top_left {
-      margin: $margin-vertical 0 0 $margin-horizontal;
+      margin: $margin-top 0 0 $margin-horizontal;
     }
 
     &.top_center {
-      margin: $margin-vertical 0 0 $margin-horizontal;
+      margin: $margin-top 0 0 $margin-horizontal;
     }
 
     &.top_right {
-      margin: $margin-vertical $margin-horizontal 0 0;
-      align-self: end;
+      margin: $margin-top $margin-horizontal 0 0;
     }
 
     &.bottom_left {
-      margin: 0 0 $margin-vertical $margin-horizontal;
+      margin: 0 0 $margin-bottom $margin-horizontal;
     }
 
     &.bottom_center {
-      margin: 0 0 $margin-vertical $margin-horizontal;
+      margin: 0 0 $margin-bottom $margin-horizontal;
     }
 
     &.bottom_right {
-      margin: 0 $margin-horizontal $margin-vertical 0;
-      align-self: end;
+      margin: 0 $margin-horizontal $margin-bottom 0;
     }
+  }
 
-    &.closing {
-      animation: content-out 450ms ease-in-out;
-      animation-fill-mode: forwards;
-    }
+  &.closing .achievement-notification__outer-container {
+    animation: content-out 450ms ease-in-out;
+    animation-fill-mode: forwards;
   }
 
   &__container {
@@ -278,79 +307,6 @@ $margin-vertical: 52px;
     box-shadow: 0px 0px 12px 0px rgba(12, 241, 202, 0.25);
   }
 
-  &__text-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    width: 100%;
-    overflow: hidden;
-  }
-
-  &__title {
-    font-size: 14px;
-    font-weight: 700;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: globals.$muted-color;
-    animation: title-in 450ms ease-in-out 900ms;
-  }
-
-  &__hidden-icon {
-    margin-right: 4px;
-    opacity: 0.5;
-  }
-
-  &__description {
-    font-size: 14px;
-    font-weight: 400;
-    overflow: hidden;
-    -webkit-line-clamp: 2; /* number of lines to show */
-    line-clamp: 2;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    color: globals.$body-color;
-    animation: description-in 450ms ease-in-out 900ms;
-  }
-
-  &__chip-container {
-    position: relative;
-    z-index: 2;
-
-    animation:
-      chip-stand-by 900ms,
-      chip-in 300ms ease-in-out 900ms;
-
-    &.closing {
-      animation: content-out 450ms ease-in-out;
-      animation-fill-mode: forwards;
-    }
-
-    &.top_left {
-      margin: $margin-vertical 0 0 $margin-horizontal;
-    }
-
-    &.top_center {
-      margin: $margin-vertical 0 0 $margin-horizontal;
-    }
-
-    &.top_right {
-      margin: $margin-vertical $margin-horizontal 0 0;
-    }
-
-    &.bottom_left {
-      margin: 0 0 $margin-vertical $margin-horizontal;
-    }
-
-    &.bottom_center {
-      margin: 0 0 $margin-vertical $margin-horizontal;
-    }
-
-    &.bottom_right {
-      margin: 0 $margin-horizontal $margin-vertical 0;
-    }
-  }
-
   &__additional-overlay {
     position: absolute;
     top: 0;
@@ -391,9 +347,49 @@ $margin-vertical: 52px;
     }
   }
 
+  &__text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: globals.$muted-color;
+    animation: title-in 450ms ease-in-out 900ms;
+  }
+
+  &__hidden-icon {
+    margin-right: 4px;
+    opacity: 0.5;
+  }
+
+  &__description {
+    font-size: 14px;
+    font-weight: 400;
+    overflow: hidden;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    color: globals.$body-color;
+    animation: description-in 450ms ease-in-out 900ms;
+  }
+
+  &.closing &__chip {
+    animation: content-out 450ms ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
   &__chip {
     position: absolute;
-    top: -12px;
+
     right: 8px;
     display: flex;
     gap: 4px;
@@ -405,6 +401,37 @@ $margin-vertical: 52px;
     animation:
       chip-stand-by 900ms ease-in-out,
       chip-in 450ms ease-in-out 900ms;
+    z-index: 2;
+
+    &.top_left {
+      top: -12px;
+      margin: $margin-top 0 0 $margin-horizontal;
+    }
+
+    &.top_center {
+      top: -12px;
+      margin: $margin-top 0 0 $margin-horizontal;
+    }
+
+    &.top_right {
+      top: -12px;
+      margin: $margin-top $margin-horizontal 0 0;
+    }
+
+    &.bottom_left {
+      bottom: 70px;
+      margin: 0 0 $margin-bottom $margin-horizontal;
+    }
+
+    &.bottom_center {
+      bottom: 70px;
+      margin: 0 0 $margin-bottom $margin-horizontal;
+    }
+
+    &.bottom_right {
+      bottom: 70px;
+      margin: 0 $margin-horizontal $margin-bottom 0;
+    }
 
     &__icon {
       width: 16px;
diff --git a/src/renderer/src/components/achievements/notification/achievement-notification.tsx b/src/renderer/src/components/achievements/notification/achievement-notification.tsx
index 9ce551b9..18f361cf 100644
--- a/src/renderer/src/components/achievements/notification/achievement-notification.tsx
+++ b/src/renderer/src/components/achievements/notification/achievement-notification.tsx
@@ -30,30 +30,25 @@ export function AchievementNotificationItem({
     >
       {achievement.points && (
         <div
-          className={cn("achievement-notification__chip-container", {
+          className={cn("achievement-notification__chip", {
             [position]: true,
-            closing: isClosing,
           })}
         >
-          <div className="achievement-notification__chip">
-            <HydraIcon className="achievement-notification__chip__icon" />
-            <span className="achievement-notification__chip__label">
-              +{achievement.points}
-            </span>
-          </div>
+          <HydraIcon className="achievement-notification__chip__icon" />
+          <span className="achievement-notification__chip__label">
+            +{achievement.points}
+          </span>
         </div>
       )}
 
       <div
         className={cn("achievement-notification__outer-container", {
           [position]: true,
-          closing: isClosing,
         })}
       >
         <div
           className={cn("achievement-notification__container", {
             [position]: true,
-            closing: isClosing,
           })}
         >
           <div className="achievement-notification__content">
diff --git a/src/renderer/src/pages/theme-editor/theme-editor.tsx b/src/renderer/src/pages/theme-editor/theme-editor.tsx
index c3db23b8..4b7075dd 100644
--- a/src/renderer/src/pages/theme-editor/theme-editor.tsx
+++ b/src/renderer/src/pages/theme-editor/theme-editor.tsx
@@ -33,6 +33,8 @@ export default function ThemeEditor() {
 
   const [notificationVariation, setNotificationVariation] =
     useState<keyof typeof notificationVariations>("default");
+  const [notificationAlignment, setNotificationAlignment] =
+    useState<AchievementCustomNotificationPosition>("top_left");
 
   const achievementPreview = useMemo(() => {
     return {
@@ -42,9 +44,9 @@ export default function ThemeEditor() {
         isHidden: notificationVariation === "hidden",
         isPlatinum: notificationVariation === "platinum",
       },
-      position: "top_center" as AchievementCustomNotificationPosition,
+      position: notificationAlignment,
     };
-  }, [t, i18n.language, notificationVariation]);
+  }, [t, i18n.language, notificationVariation, notificationAlignment]);
 
   useEffect(() => {
     window.document.title = "Hydra - Theme Editor";
@@ -95,6 +97,21 @@ export default function ThemeEditor() {
     }
   };
 
+  const achievementCustomNotificationPositionOptions = useMemo(() => {
+    return [
+      "top_left",
+      "top_center",
+      "top_right",
+      "bottom_left",
+      "bottom_center",
+      "bottom_right",
+    ].map((position) => ({
+      key: position,
+      value: position,
+      label: t(position),
+    }));
+  }, [t]);
+
   return (
     <div className="theme-editor">
       <div
@@ -139,7 +156,7 @@ export default function ThemeEditor() {
           <div className="theme-editor__notification-preview">
             <SelectField
               className="theme-editor__notification-preview__select-variation"
-              label="Notification Variation"
+              label="Variation"
               options={Object.values(notificationVariations).map(
                 (variation) => {
                   return {
@@ -156,11 +173,24 @@ export default function ThemeEditor() {
               }
             />
 
-            <AchievementNotificationItem
-              position={achievementPreview.position}
-              achievement={achievementPreview.achievement}
-              isClosing={isClosingNotifications}
+            <SelectField
+              label={"alignment"}
+              value={notificationAlignment}
+              onChange={(e) =>
+                setNotificationAlignment(
+                  e.target.value as AchievementCustomNotificationPosition
+                )
+              }
+              options={achievementCustomNotificationPositionOptions}
             />
+
+            <div style={{ border: "1px solid #444" }}>
+              <AchievementNotificationItem
+                position={achievementPreview.position}
+                achievement={achievementPreview.achievement}
+                isClosing={isClosingNotifications}
+              />
+            </div>
           </div>
         </CollapsedMenu>