From 2e68af3bdbbd640b784fa56c97ea5c582819563b Mon Sep 17 00:00:00 2001
From: Dominik Zborowski <dominik.zborowski@gmail.com>
Date: Fri, 25 Oct 2024 23:37:38 +0200
Subject: [PATCH] Add widget scroll

---
 .../grid/components/AddWidgetSelection.vue    | 354 +++++++++---------
 1 file changed, 178 insertions(+), 176 deletions(-)

diff --git a/domains/grid/components/AddWidgetSelection.vue b/domains/grid/components/AddWidgetSelection.vue
index 89ad1049..2198cb9a 100644
--- a/domains/grid/components/AddWidgetSelection.vue
+++ b/domains/grid/components/AddWidgetSelection.vue
@@ -41,191 +41,193 @@ const handleSelectWidget = (widgetType: GridWidgetType) => {
     </div>
   </div>
 
-  <!-- Website section -->
-  <section
-    class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
-  >
-    <div class="paragraph-inter-16-semi-bold mb-4">
-      {{ formatMessage('add_widget_section_website') }}
-    </div>
-    <div class="flex gap-5">
-      <!-- Iframe -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_iframe')"
-      >
-        <div
-          class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
-          @click="handleSelectWidget('IFRAME')"
+  <div class="max-h-[calc(100vh-250px)] overflow-y-auto">
+    <!-- Website section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_website') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Iframe -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_iframe')"
         >
-          <lukso-icon
-            name="code-outline"
-            size="medium"
-            color="neutral-100"
-          ></lukso-icon>
-        </div>
-      </lukso-tooltip>
-    </div>
-  </section>
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            @click="handleSelectWidget('IFRAME')"
+          >
+            <lukso-icon
+              name="code-outline"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+      </div>
+    </section>
 
-  <!-- Custom section -->
-  <section
-    class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
-  >
-    <div class="paragraph-inter-16-semi-bold mb-4">
-      {{ formatMessage('add_widget_section_custom') }}
-    </div>
-    <div class="flex gap-5">
-      <!-- Image -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_image')"
-      >
-        <div
-          class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
-          @click="handleSelectWidget('IMAGE')"
+    <!-- Custom section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_custom') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Image -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_image')"
         >
-          <lukso-icon
-            name="camera"
-            size="medium"
-            color="neutral-100"
-          ></lukso-icon>
-        </div>
-      </lukso-tooltip>
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            @click="handleSelectWidget('IMAGE')"
+          >
+            <lukso-icon
+              name="camera"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
 
-      <!-- Text -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_text')"
-      >
-        <div
-          class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
-          @click="handleSelectWidget('TEXT')"
+        <!-- Text -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_text')"
         >
-          <lukso-icon
-            name="document-outline"
-            size="medium"
-            color="neutral-100"
-          ></lukso-icon>
-        </div>
-      </lukso-tooltip>
-    </div>
-  </section>
+          <div
+            class="flex size-10 cursor-pointer items-center justify-center rounded-full bg-neutral-20 transition hover:scale-[1.05]"
+            @click="handleSelectWidget('TEXT')"
+          >
+            <lukso-icon
+              name="document-outline"
+              size="medium"
+              color="neutral-100"
+            ></lukso-icon>
+          </div>
+        </lukso-tooltip>
+      </div>
+    </section>
 
-  <!-- Video section -->
-  <section
-    class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
-  >
-    <div class="paragraph-inter-16-semi-bold mb-4">
-      {{ formatMessage('add_widget_section_video') }}
-    </div>
-    <div class="flex gap-5">
-      <!-- Youtube -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_youtube')"
-      >
-        <img
-          src="/images/social-media-youtube.svg"
-          alt="Youtube"
-          class="size-10 cursor-pointer transition hover:scale-[1.05]"
-          @click="handleSelectWidget('YOUTUBE')"
-        />
-      </lukso-tooltip>
-    </div>
-  </section>
+    <!-- Video section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_video') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Youtube -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_youtube')"
+        >
+          <img
+            src="/images/social-media-youtube.svg"
+            alt="Youtube"
+            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            @click="handleSelectWidget('YOUTUBE')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
 
-  <!-- Music section -->
-  <section
-    class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
-  >
-    <div class="paragraph-inter-16-semi-bold mb-4">
-      {{ formatMessage('add_widget_section_music') }}
-    </div>
-    <div class="flex gap-5">
-      <!-- Spotify -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_spotify')"
-      >
-        <img
-          src="/images/social-media-spotify.svg"
-          alt="Spotify"
-          class="size-10 cursor-pointer transition hover:scale-[1.05]"
-          @click="handleSelectWidget('SPOTIFY')"
-        />
-      </lukso-tooltip>
+    <!-- Music section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_music') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- Spotify -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_spotify')"
+        >
+          <img
+            src="/images/social-media-spotify.svg"
+            alt="Spotify"
+            class="size-10 cursor-pointer transition hover:scale-[1.05]"
+            @click="handleSelectWidget('SPOTIFY')"
+          />
+        </lukso-tooltip>
 
-      <!-- Sound Cloud -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_soundcloud')"
-      >
-        <img
-          src="/images/social-media-soundcloud.svg"
-          alt="Sound Cloud"
-          class="cursor-pointer transition hover:scale-[1.05]"
-          @click="handleSelectWidget('SOUNDCLOUD')"
-        />
-      </lukso-tooltip>
-    </div>
-  </section>
+        <!-- Sound Cloud -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_soundcloud')"
+        >
+          <img
+            src="/images/social-media-soundcloud.svg"
+            alt="Sound Cloud"
+            class="cursor-pointer transition hover:scale-[1.05]"
+            @click="handleSelectWidget('SOUNDCLOUD')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
 
-  <!-- Social section -->
-  <section
-    class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
-  >
-    <div class="paragraph-inter-16-semi-bold mb-4">
-      {{ formatMessage('add_widget_section_social') }}
-    </div>
-    <div class="flex gap-5">
-      <!-- X -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_x')"
-      >
-        <img
-          src="/images/social-media-x.svg"
-          alt="X"
-          class="cursor-pointer transition hover:scale-[1.05]"
-          @click="handleSelectWidget('X')"
-        />
-      </lukso-tooltip>
+    <!-- Social section -->
+    <section
+      class="border-b border-b-neutral-90 px-6 py-4 last-of-type:border-b-0 last-of-type:pb-6"
+    >
+      <div class="paragraph-inter-16-semi-bold mb-4">
+        {{ formatMessage('add_widget_section_social') }}
+      </div>
+      <div class="flex gap-5">
+        <!-- X -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_x')"
+        >
+          <img
+            src="/images/social-media-x.svg"
+            alt="X"
+            class="cursor-pointer transition hover:scale-[1.05]"
+            @click="handleSelectWidget('X')"
+          />
+        </lukso-tooltip>
 
-      <!-- Warpcast -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_warpcast')"
-      >
-        <img
-          src="/images/social-media-warpcast.png"
-          alt="Warpcast"
-          class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
-          @click="handleSelectWidget('WARPCAST')"
-        />
-      </lukso-tooltip>
+        <!-- Warpcast -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_warpcast')"
+        >
+          <img
+            src="/images/social-media-warpcast.png"
+            alt="Warpcast"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            @click="handleSelectWidget('WARPCAST')"
+          />
+        </lukso-tooltip>
 
-      <!-- Instagram -->
-      <lukso-tooltip
-        variant="light"
-        :show-delay="SHOW_TOOLTIP_DELAY"
-        :text="formatMessage('widget_type_instagram')"
-      >
-        <img
-          src="/images/social-media-instagram.svg"
-          alt="Warpcast"
-          class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
-          @click="handleSelectWidget('INSTAGRAM')"
-        />
-      </lukso-tooltip>
-    </div>
-  </section>
+        <!-- Instagram -->
+        <lukso-tooltip
+          variant="light"
+          :show-delay="SHOW_TOOLTIP_DELAY"
+          :text="formatMessage('widget_type_instagram')"
+        >
+          <img
+            src="/images/social-media-instagram.svg"
+            alt="Warpcast"
+            class="size-10 cursor-pointer rounded-full transition hover:scale-[1.05]"
+            @click="handleSelectWidget('INSTAGRAM')"
+          />
+        </lukso-tooltip>
+      </div>
+    </section>
+  </div>
 </template>