@raketa-cloud/admin 1.10.1 → 1.10.4

package/dist/application.css

@@ -1525,6 +1525,7 @@ select {
 
 .page-title {
   margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1626,6 +1627,10 @@ select {
   position: static;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -1642,6 +1647,11 @@ select {
   inset: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .-right-0 {
   right: -0px;
 }
@@ -1662,6 +1672,10 @@ select {
   top: -0.125rem;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .bottom-20 {
   bottom: 5rem;
 }
@@ -1863,6 +1877,10 @@ select {
   height: 2rem;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .h-2 {
   height: 0.5rem;
 }
@@ -1908,6 +1926,10 @@ select {
   max-height: 100vh;
 }
 
+.min-h-0 {
+  min-height: 0px;
+}
+
 .w-1 {
   width: 0.25rem;
 }
@@ -1986,6 +2008,22 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -2035,6 +2073,10 @@ select {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -2263,6 +2305,20 @@ select {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
+.bg-gradient-to-t {
+  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
+.from-raketa-primary\/15 {
+  --tw-gradient-from: rgba(var(--primary), 0.15) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgba(var(--primary), 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .fill-\[\#34a853\] {
   fill: #34a853;
 }
@@ -2334,6 +2390,10 @@ select {
   padding-bottom: 1rem;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2530,6 +2590,10 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-10 {
   opacity: 0.1;
 }
@@ -2589,6 +2653,12 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2601,6 +2671,14 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.scrollbar-hidden {
+  scrollbar-width: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
 :root {
   --background: 255, 255, 255;
   --foreground: 0, 0, 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.10.1",
+  "version": "1.10.4",
   "main": "src/index.js",
   "files": [
     "src/",

package/src/helpers/content_tasks_helper.js

@@ -24,26 +24,21 @@ export const buildResourceUrl = (resource, globalConfig) => {
   return `/${locale}/${route}/${id}`;
 };
 
-export const hasUnattachedKeys = (task) => {
-  if (!task) return false;
+export const unattachedKeys = (task) => {
+  const keys = task?.lokaliseWorkflow?.settings?.unattached_keys;
+  const values = keys?.names || keys?.ids;
 
-  const unattachedKeys = task.lokaliseWorkflow?.settings?.unattached_keys;
-  const ids = unattachedKeys?.ids;
+  if (Array.isArray(values)) return values;
 
-  if (Array.isArray(ids)) {
-    return ids.length > 0;
-  }
-
-  return Boolean(ids);
+  return values ? [values] : [];
 };
 
-export const unattachedKeyIds = (task) => {
-  const unattachedKeys = task?.lokaliseWorkflow?.settings?.unattached_keys;
-  const ids = unattachedKeys?.ids;
+export const hasUnattachedKeys = (task) => unattachedKeys(task).length > 0;
 
-  if (Array.isArray(ids)) {
-    return ids.join(", ");
-  }
+export const unattachedKeyUrl = (task, key) => {
+  const keys = task?.lokaliseWorkflow?.settings?.unattached_keys;
+
+  if (!keys?.names || !keys.url) return null;
 
-  return ids ? String(ids) : "";
+  return `${keys.url}${encodeURIComponent(key)}`;
 };

package/src/styles/application.css

@@ -319,7 +319,7 @@ body {
   }
 
   .page-title {
-    @apply flex items-center justify-between mt-6;
+    @apply flex items-center justify-between my-6;
   }
 
   .actions-toolbar {
@@ -359,6 +359,16 @@ body {
   }
 }
 
+@layer utilities {
+  .scrollbar-hidden {
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hidden::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .space-the-final-frontier {
   position: fixed;
   top: 50%;

package/src/tests/helpers/content_tasks_helper.test.js

@@ -2,7 +2,8 @@ import {
   workflowsMap,
   buildResourceUrl,
   hasUnattachedKeys,
-  unattachedKeyIds,
+  unattachedKeys,
+  unattachedKeyUrl,
 } from "../../helpers/content_tasks_helper";
 
 describe("content_tasks_helper", () => {
@@ -114,46 +115,89 @@ describe("content_tasks_helper", () => {
       ).toBe(false);
     });
 
-    test("returns true when task is in progress and has unattached key ids", () => {
+    test("returns true when the task has unattached key ids or names", () => {
       expect(
         hasUnattachedKeys({
-          completedAt: null,
-          failedAt: null,
           lokaliseWorkflow: {
             settings: { unattached_keys: { ids: [101, 102] } },
           },
         }),
       ).toBe(true);
+      expect(
+        hasUnattachedKeys({
+          lokaliseWorkflow: {
+            settings: { unattached_keys: { names: ["key_a"] } },
+          },
+        }),
+      ).toBe(true);
     });
   });
 
-  describe("unattachedKeyIds", () => {
-    test("returns empty string when no unattached keys exist", () => {
-      expect(unattachedKeyIds(null)).toBe("");
-      expect(unattachedKeyIds({})).toBe("");
-      expect(
-        unattachedKeyIds({
-          lokaliseWorkflow: { settings: { unattached_keys: {} } },
-        }),
-      ).toBe("");
+  describe("unattachedKeys", () => {
+    test("returns an empty array when no unattached keys exist", () => {
+      expect(unattachedKeys(null)).toEqual([]);
+      expect(unattachedKeys({})).toEqual([]);
     });
 
-    test("returns comma separated string of ids", () => {
+    test("prefers names and falls back to ids", () => {
       expect(
-        unattachedKeyIds({
+        unattachedKeys({
           lokaliseWorkflow: {
-            settings: { unattached_keys: { ids: [101, 102, 103] } },
+            settings: {
+              unattached_keys: { names: ["key_a", "key_b"], ids: [101, 102] },
+            },
           },
         }),
-      ).toBe("101, 102, 103");
-
+      ).toEqual(["key_a", "key_b"]);
       expect(
-        unattachedKeyIds({
+        unattachedKeys({
           lokaliseWorkflow: {
-            settings: { unattached_keys: { ids: ["key_a", "key_b"] } },
+            settings: { unattached_keys: { ids: [101, 102] } },
           },
         }),
-      ).toBe("key_a, key_b");
+      ).toEqual([101, 102]);
+    });
+  });
+
+  describe("unattachedKeyUrl", () => {
+    const task = {
+      lokaliseWorkflow: {
+        settings: {
+          unattached_keys: {
+            names: ["key one"],
+            url: "https://app.lokalise.com/project/123/?search=",
+          },
+        },
+      },
+    };
+
+    test("builds a Lokalise URL for a key name", () => {
+      expect(unattachedKeyUrl(task, "key one")).toBe(
+        "https://app.lokalise.com/project/123/?search=key%20one",
+      );
+    });
+
+    test("returns null for legacy ids or when the URL is missing", () => {
+      expect(
+        unattachedKeyUrl(
+          {
+            lokaliseWorkflow: {
+              settings: { unattached_keys: { ids: [101] } },
+            },
+          },
+          101,
+        ),
+      ).toBeNull();
+      expect(
+        unattachedKeyUrl(
+          {
+            lokaliseWorkflow: {
+              settings: { unattached_keys: { names: ["key_a"] } },
+            },
+          },
+          "key_a",
+        ),
+      ).toBeNull();
     });
   });
 });

package/src/views/_shared/_content_tasks.ejs

@@ -66,7 +66,15 @@
 
             <% if (isMarked) { %>
               <div class="body-3 text-raketa-foreground/50">
-                <%= content_tasks.unattachedKeyIds(task) %>
+                <% content_tasks.unattachedKeys(task).forEach((key, index) => { %>
+                  <% if (index > 0) { %>, <% } %>
+                  <% const keyUrl = content_tasks.unattachedKeyUrl(task, key) %>
+                  <% if (keyUrl) { %>
+                    <a href="<%= keyUrl %>" target="_blank" class="btn-text"><%= key %></a>
+                  <% } else { %>
+                    <%= key %>
+                  <% } %>
+                <% }) %>
               </div>
             <% } %>
           </td>

package/src/views/layouts/application.ejs

@@ -64,7 +64,8 @@
         </svg>
       </button>
 
-      <div class="my-4">
+      <div class="relative flex-1 min-h-0">
+      <div id="sidebar-menu" class="h-full py-4 overflow-y-auto scrollbar-hidden">
         <% _context.layout.sidebar.forEach((menu, idx) => { %>
         <% if (!menu) { %>
         <% } else if (menu.submenus) { %>
@@ -77,7 +78,7 @@
             </div>
           </div>
 
-          <div class="absolute z-50 top-0 left-[64px] w-[250px] border-l bg-[#F7F7FC] shadow-lg hidden group-hover/item:block">
+          <div data-sidebar-flyout class="fixed z-50 left-[64px] w-[250px] border-l bg-[#F7F7FC] shadow-lg hidden group-hover/item:block">
             <% menu.submenus.forEach(submenu => { %>
             <a href="<%= `/${_context.locale}${submenu.link}` %>" title="<%= submenu.label %>" class="block py-3 px-4 body-2 <%= _context.path.includes(submenu.link) ? "text-raketa-foreground" : "text-raketa-foreground/50 hover:text-raketa-foreground transition-all ease-in-out duration-300" %>"><%= submenu.label %></a>
             <% }) %>
@@ -132,6 +133,13 @@
 
       </div>
 
+      <div id="sidebar-scroll-hint" class="pointer-events-none absolute inset-x-0 bottom-0 h-12 flex items-end justify-center pb-1 bg-gradient-to-t from-raketa-primary/15 to-transparent text-raketa-primary transition-opacity duration-300 opacity-0">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 animate-bounce">
+          <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+        </svg>
+      </div>
+      </div>
+
       <div class="group/item">
         <a href="/logout" class="relative flex items-center gap-3 px-5 py-4 border-t border-neutral-300 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white dark:border-neutral-700">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
@@ -165,6 +173,50 @@
     toggleEl.addEventListener('click', handleToggle);
   </script>
 
+  <script>
+    (() => {
+      const menuEl = document.getElementById('sidebar-menu');
+      const hintEl = document.getElementById('sidebar-scroll-hint');
+      let hoveredItem = null;
+
+      const updateHint = () => {
+        const hasMore = menuEl.scrollHeight - menuEl.clientHeight > 1;
+        hintEl.classList.toggle('opacity-0', !hasMore || menuEl.scrollTop > 0);
+      };
+
+      // Flyouts are position: fixed so the scrollable menu doesn't clip them
+      const positionFlyout = (item) => {
+        const flyout = item.querySelector('[data-sidebar-flyout]');
+        if (!flyout) return;
+
+        const { top } = item.getBoundingClientRect();
+        const maxTop = window.innerHeight - flyout.offsetHeight;
+        flyout.style.top = `${Math.max(0, Math.min(top, maxTop))}px`;
+      };
+
+      menuEl.querySelectorAll('[data-sidebar-flyout]').forEach((flyout) => {
+        const item = flyout.parentElement;
+
+        item.addEventListener('mouseenter', () => {
+          hoveredItem = item;
+          positionFlyout(item);
+        });
+        item.addEventListener('mouseleave', () => {
+          hoveredItem = null;
+        });
+      });
+
+      menuEl.addEventListener('scroll', () => {
+        updateHint();
+        if (hoveredItem) positionFlyout(hoveredItem);
+      }, { passive: true });
+
+      const resizeObserver = new ResizeObserver(updateHint);
+      resizeObserver.observe(menuEl);
+      Array.from(menuEl.children).forEach((child) => resizeObserver.observe(child));
+    })();
+  </script>
+
   <script>
     const TIMEZONES = JSON.parse("<%= JSON.stringify(_context.timezones) %>".replaceAll("&#34;", '"'))
     const TIME_LOCALE = JSON.parse("<%= JSON.stringify(_context.timeLocale || 'en-GB') %>".replaceAll("&#34;", '"'))