@raketa-cloud/admin 1.8.23 → 1.9.1

package/dist/application.css

@@ -965,6 +965,37 @@ select {
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
 
+.btn-icon {
+  display: flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: rgba(var(--primary), 0.1);
+  --tw-text-opacity: 1;
+  color: rgba(var(--primary), var(--tw-text-opacity));
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-icon:hover {
+  background-color: rgba(var(--primary), 0.2);
+}
+
+.btn-icon {
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled {
+    opacity: 0.5;
+  }
+  &:disabled:hover {
+    background-color: rgba(var(--primary), 0.1);
+  }
+}
+
 .btn-toolbar {
   display: flex;
   align-items: center;
@@ -1539,6 +1570,20 @@ select {
   gap: 1rem;
 }
 
+.toolbar-divider {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  height: 1.5rem;
+  width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 209 210 / var(--tw-bg-opacity));
+}
+
+.toolbar-divider:where(.dark, .dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 /* Dashboard specific */
 
 .card-button {
@@ -2232,10 +2277,6 @@ select {
   background-color: rgba(var(--primary), var(--tw-bg-opacity));
 }
 
-.bg-raketa-primary\/10 {
-  background-color: rgba(var(--primary), 0.1);
-}
-
 .bg-raketa-primary\/5 {
   background-color: rgba(var(--primary), 0.05);
 }
@@ -3366,10 +3407,6 @@ body {
   background-color: rgba(var(--primary), var(--tw-bg-opacity));
 }
 
-.hover\:bg-raketa-primary\/20:hover {
-  background-color: rgba(var(--primary), 0.2);
-}
-
 .hover\:text-raketa-foreground:hover {
   --tw-text-opacity: 1;
   color: rgba(var(--foreground), var(--tw-text-opacity));

package/package.json

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

package/src/cloud/Resources.js

@@ -1,3 +1,4 @@
+import { buildMagicPreviewAddress } from "../magicPreview";
 import { toDateInput, toDateTimeInput, toUTCISO8601String } from "../utils";
 import RaketaClient from "./RaketaClient";
 import {
@@ -162,6 +163,14 @@ export default class Resources extends RaketaClient {
 
     input.workflow = {
       type: workflow.type,
+      previewUrl: buildMagicPreviewAddress(
+        {
+          slug: input.resource.slug,
+          locale: input.locale,
+          resourceType: input.resource.resourceType,
+        },
+        this.getConfig(),
+      ),
     };
 
     if (workflow.due_date) {

package/src/helpers/AuthHelper.js

@@ -25,7 +25,12 @@ const AuthHelper = {
   isAuthenticated: ({ path, token }) => {
     const ALLOWED_PATHS = ["/login", "/auth/google/callback", "/remote/verify"];
 
-    if (ALLOWED_PATHS.includes(path)) return true;
+    if (
+      ALLOWED_PATHS.includes(path) ||
+      path?.startsWith("/remote/magic-preview/")
+    ) {
+      return true;
+    }
 
     if (token && AuthHelper.verifyJWT(token)) return true;
 

package/src/magicPreview.js

@@ -0,0 +1,103 @@
+import {
+  createCipheriv,
+  createDecipheriv,
+  createHash,
+  randomBytes,
+} from "node:crypto";
+
+const ALGORITHM = "aes-256-gcm";
+const IV_LENGTH = 12;
+const TAG_LENGTH = 16;
+
+function getSecretKey(config = {}) {
+  const secret = config.secrets.crypto_secret;
+
+  if (!secret) {
+    throw new Error(
+      "crypto_secret needs to be setup in the config for the magic preview feature to work",
+    );
+  }
+
+  return createHash("sha256").update(secret).digest();
+}
+
+export function generateMagicPreviewToken(
+  { slug, resourceType, locale } = {},
+  config = {},
+) {
+  const payload = {
+    slug,
+    resourceType,
+    locale,
+  };
+
+  const key = getSecretKey(config);
+  const iv = randomBytes(IV_LENGTH);
+  const cipher = createCipheriv(ALGORITHM, key, iv);
+  const encrypted = Buffer.concat([
+    cipher.update(JSON.stringify(payload), "utf8"),
+    cipher.final(),
+  ]);
+  const tag = cipher.getAuthTag();
+
+  return Buffer.concat([iv, tag, encrypted]).toString("base64url");
+}
+
+export function decipherMagicPreviewToken(token, config) {
+  if (!token || typeof token !== "string") {
+    return null;
+  }
+
+  try {
+    const key = getSecretKey(config);
+    const combined = Buffer.from(token, "base64url");
+
+    if (combined.length < IV_LENGTH + TAG_LENGTH) {
+      return null;
+    }
+
+    const iv = combined.subarray(0, IV_LENGTH);
+    const tag = combined.subarray(IV_LENGTH, IV_LENGTH + TAG_LENGTH);
+    const encrypted = combined.subarray(IV_LENGTH + TAG_LENGTH);
+
+    const decipher = createDecipheriv(ALGORITHM, key, iv);
+    decipher.setAuthTag(tag);
+
+    const decrypted = Buffer.concat([
+      decipher.update(encrypted),
+      decipher.final(),
+    ]).toString("utf8");
+
+    const payload = JSON.parse(decrypted);
+
+    if (!payload || typeof payload !== "object" || !payload.slug) {
+      return null;
+    }
+
+    return payload;
+  } catch {
+    return null;
+  }
+}
+
+export function buildMagicPreviewAddress(
+  { slug, resourceType, locale },
+  globalConfig,
+) {
+  if (!slug || !resourceType || !locale) {
+    throw new Error(
+      "Can't generate a token without a slug, resourceType or locale!",
+    );
+  }
+
+  const token = generateMagicPreviewToken(
+    {
+      slug,
+      resourceType,
+      locale,
+    },
+    globalConfig,
+  );
+
+  return globalConfig.remoteConfig.magicPreviewUrl(token, resourceType, locale);
+}

package/src/setupAuthentication.js

@@ -3,6 +3,7 @@ import { deleteCookie, getCookie, setCookie } from "hono/cookie";
 import currentPath from "./currentPath.cjs";
 import AuthHelper from "./helpers/AuthHelper";
 import cipher from "./cipher";
+import { decipherMagicPreviewToken } from "./magicPreview";
 
 const DELIMITER = ",";
 
@@ -149,6 +150,17 @@ const setupAuthentication = (app, config) => {
 
     return c.json({ token });
   });
+
+  app.get("/remote/magic-preview/:token", (c) => {
+    const token = c.req.param("token") || "";
+    const payload = decipherMagicPreviewToken(token, config);
+
+    if (!payload?.slug) {
+      return c.json({ error: "Invalid or expired preview token" }, 404);
+    }
+
+    return c.json(payload);
+  });
 };
 
 export default setupAuthentication;

package/src/styles/application.css

@@ -110,6 +110,14 @@ body {
     @apply text-red-600 hover:text-raketa-foreground dark:text-red-700;
   }
 
+  .btn-icon {
+    @apply flex items-center justify-center transition-all duration-300 ease-in-out rounded-full size-6 text-raketa-primary bg-raketa-primary/10 hover:bg-raketa-primary/20;
+
+    &:disabled {
+      @apply opacity-50 cursor-not-allowed hover:bg-raketa-primary/10;
+    }
+  }
+
   .btn-toolbar {
     @apply flex items-center gap-1;
 
@@ -318,6 +326,10 @@ body {
     @apply flex items-center gap-4;
   }
 
+  .toolbar-divider {
+    @apply w-px h-6 mx-1 bg-mono-50 dark:bg-neutral-700;
+  }
+
   /* Dashboard specific */
   .card-button {
     @apply flex items-center gap-2 mb-2 max-w-[400px] border p-4 rounded font-semibold text-raketa-primary hover:border-raketa-primary hover:bg-raketa-primary/5;

package/src/tests/handlers/resources/TranslationsHandler.test/create.test.js

@@ -5,8 +5,26 @@ import Factory from "../../../support/factory";
 
 function buildCtx(params, resource) {
   return {
+    globalConfig: {
+      i18n: { defaultLocale: "en" },
+      remoteConfig: {
+        magicPreviewUrl: (token, type, loc) =>
+          `https://example.com/${loc}/magic-preview/${type}s/${token}`,
+      },
+    },
     client: {
-      resources: new Resources(() => ({}), "token"),
+      resources: new Resources(
+        () => ({
+          secrets: {
+            crypto_secret: "super-secret-for-testing-1234",
+          },
+          remoteConfig: {
+            magicPreviewUrl: (token, type, loc) =>
+              `https://example.com/${loc}/magic-preview/${type}s/${token}`,
+          },
+        }),
+        "token",
+      ),
       resourceRevisions: new ResourceRevisions(() => ({}), "token"),
     },
     params: { parent_id: resource.id },
@@ -327,4 +345,64 @@ describe("Resource Translations Handler", () => {
       },
     });
   });
+
+  test("create generates previewUrl when workflow is provided", async () => {
+    const resource = Factory.build("resource", {
+      translations: {},
+      categories: [{ id: "cat1" }],
+    });
+
+    const params = {
+      languages: ["fr"],
+      workflow: {
+        type: "LOKALISE_TT_AI",
+      },
+    };
+
+    const ctx = buildCtx(params, resource);
+
+    jest.spyOn(ctx.client.resources, "find").mockImplementation(() => resource);
+    const mockQuery = jest
+      .spyOn(ctx.client.resources, "query")
+      .mockImplementation(() => ({
+        translate0: {
+          resource: {
+            id: "translated-resource-fr",
+            slug: "resource-slug",
+            visibility: "public",
+          },
+          errors: null,
+        },
+      }));
+
+    const result = await TranslationsHandler.create(ctx);
+
+    expect(mockQuery).toHaveBeenCalledWith(expect.any(String), {
+      input0: {
+        locale: "fr",
+        resource: {
+          categories: ["cat1"],
+          resourceType: "article",
+          settings:
+            '{"layout":"default","meta":{"title":"Open graph","description":"Open graph???","image":{}}}',
+          slug: "resource-slug",
+          tags: [],
+          title: "Resource Title",
+          visibility: "private",
+          widgets: "[]",
+        },
+        sourceResourceId: "2",
+        workflow: {
+          previewUrl: expect.stringMatching(
+            /^https:\/\/example\.com\/fr\/magic-preview\/articles\/[A-Za-z0-9_-]+$/,
+          ),
+          type: "LOKALISE_TT_AI",
+        },
+      },
+    });
+
+    expect(result).toEqual({
+      redirect: `/en/articles/${resource.id}/translations?translations=fr:translated-resource-fr`,
+    });
+  });
 });

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

@@ -69,6 +69,16 @@ describe("AuthHelper", () => {
         AuthHelper.isAuthenticated({ path: "/auth/google/callback" }),
       ).toBe(true);
       expect(AuthHelper.isAuthenticated({ path: "/remote/verify" })).toBe(true);
+      expect(
+        AuthHelper.isAuthenticated({
+          path: "/remote/magic-preview/any-token-here",
+        }),
+      ).toBe(true);
+      expect(
+        AuthHelper.isAuthenticated({
+          path: "/remote/magic-preview/:token",
+        }),
+      ).toBe(true);
     });
 
     test("returns true for valid token", () => {

package/src/tests/magicPreview.test.js

@@ -0,0 +1,127 @@
+import {
+  buildMagicPreviewAddress,
+  decipherMagicPreviewToken,
+  generateMagicPreviewToken,
+} from "../magicPreview";
+
+describe("magicPreview helper", () => {
+  const config = {
+    secrets: {
+      crypto_secret: "super-secret-key-for-testing-123456",
+    },
+    i18n: {
+      defaultLocale: "en",
+      locales: { en: {}, de: {}, fr: {} },
+    },
+    remoteConfig: {
+      magicPreviewUrl: (token, resourceType, locale) => {
+        return [
+          "https://example.com",
+          locale === "en" ? "" : locale,
+          "magic-preview",
+          resourceType === "page" ? "" : resourceType,
+          token,
+        ]
+          .filter(Boolean)
+          .join("/");
+      },
+    },
+  };
+
+  describe("buildMagicPreviewAddress", () => {
+    it("builds full preview URL using remoteConfig.magicPreviewUrl", () => {
+      const address = buildMagicPreviewAddress(
+        {
+          slug: "gocardless",
+          resourceType: "customer",
+          locale: "en",
+        },
+        config,
+      );
+
+      expect(address).toMatch(
+        /^https:\/\/example\.com\/magic-preview\/customer\/[A-Za-z0-9_-]+$/,
+      );
+    });
+
+    it("builds localized preview URL for non-default locale", () => {
+      const address = buildMagicPreviewAddress(
+        {
+          slug: "gocardless",
+          resourceType: "customer",
+          locale: "de",
+        },
+        config,
+      );
+
+      expect(address).toMatch(
+        /^https:\/\/example\.com\/de\/magic-preview\/customer\/[A-Za-z0-9_-]+$/,
+      );
+    });
+
+    it("throws an error for missing slug", () => {
+      expect(() => {
+        buildMagicPreviewAddress(
+          { resourceType: "page", locale: "de" },
+          config,
+        );
+      }).toThrow(
+        "Can't generate a token without a slug, resourceType or locale!",
+      );
+    });
+
+    it("throws an error for missing resourceType", () => {
+      expect(() => {
+        buildMagicPreviewAddress({ slug: "page", locale: "de" }, config);
+      }).toThrow(
+        "Can't generate a token without a slug, resourceType or locale!",
+      );
+    });
+
+    it("throws an error for missing locale", () => {
+      expect(() => {
+        buildMagicPreviewAddress(
+          { resourceType: "page", slug: "dada" },
+          config,
+        );
+      }).toThrow(
+        "Can't generate a token without a slug, resourceType or locale!",
+      );
+    });
+  });
+
+  describe("generateMagicPreviewToken & decipherMagicPreviewToken", () => {
+    it("generates an encrypted token and deciphers it back", () => {
+      const token = generateMagicPreviewToken(
+        {
+          slug: "my-first-ebook",
+          resourceType: "ebook",
+          locale: "en",
+        },
+        config,
+      );
+
+      expect(typeof token).toBe("string");
+      expect(token).not.toContain("my-first-ebook");
+
+      const payload = decipherMagicPreviewToken(token, config);
+      expect(payload).not.toBeNull();
+      expect(payload.slug).toBe("my-first-ebook");
+      expect(payload.resourceType).toBe("ebook");
+      expect(payload.locale).toBe("en");
+    });
+
+    it("returns null on invalid / tampered token", () => {
+      expect(decipherMagicPreviewToken("", config)).toBeNull();
+      expect(decipherMagicPreviewToken(null, config)).toBeNull();
+      expect(decipherMagicPreviewToken("invalid-token", config)).toBeNull();
+
+      const token = generateMagicPreviewToken(
+        { slug: "secure", resourceType: "page", locale: "en" },
+        config,
+      );
+      const tampered = `${token.slice(0, -4)}XXXX`;
+      expect(decipherMagicPreviewToken(tampered, config)).toBeNull();
+    });
+  });
+});

package/src/tests/setupAuthentication.test.js

@@ -50,6 +50,7 @@ function makeCtx(overrides = {}) {
       path: "/en/pages",
       url: "https://example.com/en/pages",
       query: jest.fn().mockReturnValue({}),
+      param: jest.fn().mockReturnValue(""),
       json: jest.fn().mockResolvedValue({}),
       ...overrides.req,
     },
@@ -72,6 +73,10 @@ const config = {
     remoteLogin: "https://remote/login",
     remoteLogout: "https://remote/logout",
   },
+  secrets: {
+    crypto_secret:
+      "cafeb74e0fc1079d384f68620dc0b0919c82bd36351a74fb48f3c96562c1bf672ff5fd4db42180bc9550d06f3621edba5305a443a232337e2945d7bb1271cafe",
+  },
 };
 
 describe("setupAuthentication", () => {
@@ -96,6 +101,10 @@ describe("setupAuthentication", () => {
       "/remote/verify",
       expect.any(Function),
     );
+    expect(app.get).toHaveBeenCalledWith(
+      "/remote/magic-preview/:token",
+      expect.any(Function),
+    );
   });
 
   describe("use middleware", () => {
@@ -407,4 +416,50 @@ describe("setupAuthentication", () => {
       expect(result.status).toBe(401);
     });
   });
+
+  describe("/remote/magic-preview/:token", () => {
+    test("returns the token payload for a valid token", async () => {
+      const app = makeApp();
+      setupAuthentication(app, config);
+
+      const { generateMagicPreviewToken } = require("../magicPreview");
+      const token = generateMagicPreviewToken(
+        { slug: "article-slug", resourceType: "article", locale: "es" },
+        config,
+      );
+
+      const ctx = makeCtx({
+        req: {
+          param: jest.fn().mockReturnValue(token),
+        },
+      });
+
+      await app.handlers["GET /remote/magic-preview/:token"](ctx);
+
+      expect(ctx.json).toHaveBeenCalledWith({
+        slug: "article-slug",
+        resourceType: "article",
+        locale: "es",
+      });
+    });
+
+    test("returns 404 for invalid token", async () => {
+      const app = makeApp();
+
+      setupAuthentication(app, config);
+
+      const ctx = makeCtx({
+        req: {
+          param: jest.fn().mockReturnValue("bad-token"),
+        },
+      });
+
+      await app.handlers["GET /remote/magic-preview/:token"](ctx);
+
+      expect(ctx.json).toHaveBeenCalledWith(
+        { error: "Invalid or expired preview token" },
+        404,
+      );
+    });
+  });
 });

package/src/views/resources/_shared/_toolbar.ejs

@@ -1,75 +1,68 @@
-<div>
-  <%
-    const hasActiveContentTask = utils.feature("contentTasks", _context) &&
-      resource.activeContentTask &&
-      !resource.activeContentTask.completedAt &&
-      !resource.activeContentTask.failedAt;
-  %>
-  <div class="actions-toolbar">
-    <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/${_context.resourceConfig.resourceType}_revisions` %>" class="inline-block">
-      <% if (resource.revisionsCount >= _context?.maxOpenRevisions || hasActiveContentTask) { %>
-      <button type="submit" class="btn-primary" disabled style="opacity: 50%;">
-        Start revision
-      </button>
-      <% } else {%>
-      <button type="submit" class="btn-primary">
-        Start revision
-      </button>
-      <% } %>
-    </form>
+<%
+  const hasActiveContentTask = utils.feature("contentTasks", _context) &&
+    resource.activeContentTask &&
+    !resource.activeContentTask.completedAt &&
+    !resource.activeContentTask.failedAt;
 
-    <% if (hasActiveContentTask) { %>
-    <button type="button" class="btn-text has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
-      </svg>
+  const resourceName = Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType));
+%>
+<div class="actions-toolbar gap-2">
+  <%- render_partial('./_shared/_translations_strip.ejs', { render_partial }) %>
+
+  <span class="toolbar-divider"></span>
 
-      Change URL
+  <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/clones` %>" method="post" class="inline-flex">
+    <button type="submit" class="btn-icon" title="Clone <%= resourceName %>" aria-label="Clone <%= resourceName %>" <%- hasActiveContentTask ? 'disabled' : '' %>>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+        <path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z" />
+        <path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z" />
+      </svg>
     </button>
-    <% } else { %>
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/urls/new` %>" class="btn-text has-icon">
+  </form>
+
+  <details class="relative unstyled-details">
+    <summary class="btn-icon cursor-pointer" title="More actions" aria-label="More actions">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
       </svg>
+    </summary>
 
-      Change URL
-    </a>
-    <% } %>
-
-    <form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/clones` %>" method="post" class="inline-block">
-      <button type="submit" class="btn-text has-icon" <%= hasActiveContentTask ? 'disabled style="opacity: 50%;"' : '' %>>
+    <div class="absolute right-0 z-20 flex flex-col gap-4 p-4 mt-2 border rounded shadow-md bg-raketa-background dark:border-neutral-500">
+      <% if (hasActiveContentTask) { %>
+      <button type="button" class="btn-text has-icon whitespace-nowrap" disabled style="opacity: 50%; cursor: not-allowed;">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
         </svg>
 
-        Clone <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType)) %>
+        Change URL
       </button>
-    </form>
-
-    <% if (hasActiveContentTask) { %>
-    <button type="button" class="btn-danger has-icon" disabled style="opacity: 50%; cursor: not-allowed;">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-      </svg>
+      <% } else { %>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/urls/new` %>" class="btn-text has-icon whitespace-nowrap">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+        </svg>
 
-      Delete <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType)) %>
-    </button>
-    <% } else { %>
-    <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/deletes/new` %>" class="btn-danger has-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-      </svg>
+        Change URL
+      </a>
+      <% } %>
 
-      Delete <%= Inflector.humanize(Inflector.downcase(_context.resourceConfig.resourceType)) %>
-    </a>
-    <% } %>
-  </div>
+      <% if (hasActiveContentTask) { %>
+      <button type="button" class="btn-danger has-icon whitespace-nowrap" disabled style="opacity: 50%; cursor: not-allowed;">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>
 
-  <% if (_context.query?.revisions_count_error) { %>
-  <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
-  <% } %>
+        Delete <%= resourceName %>
+      </button>
+      <% } else { %>
+      <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/deletes/new` %>" class="btn-danger has-icon whitespace-nowrap">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>
 
-  <% if (hasActiveContentTask) { %>
-  <div class="text-orange-700 mt-2 dark:text-orange-300">Actions are disabled while a translation task is in progress.</div>
-  <% } %>
-</div>
+        Delete <%= resourceName %>
+      </a>
+      <% } %>
+    </div>
+  </details>
+</div>

package/src/views/resources/_shared/_translations_strip.ejs

@@ -1,4 +1,4 @@
-<div class="flex flex-wrap items-center gap-1 pb-8">
+<div class="flex items-center gap-1">
   <%
       const availableLocales = Object.keys(_context.locales);
       const totalPossibleTranslations = availableLocales.length - 1;
@@ -49,7 +49,7 @@
   <% }); %>
 
   <% if (canBeTranslated) { %>
-  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" title="Translate" aria-label="Translate" class="flex items-center justify-center transition-all duration-300 ease-in-out rounded-full size-6 text-raketa-primary bg-raketa-primary/10 hover:bg-raketa-primary/20">
+  <a href="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/translations/new` %>" title="Translate" aria-label="Translate" class="btn-icon">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-3.5">
       <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
     </svg>

package/src/views/resources/show.ejs

@@ -1,11 +1,9 @@
 <div class="page-wrapper">
   <div class="page-title">
     <%- render_partial('./_shared/_title.ejs') %>
-    <%- render_partial('./_shared/_toolbar.ejs') %>
+    <%- render_partial('./_shared/_toolbar.ejs', { render_partial }) %>
   </div>
 
-  <%- render_partial('./_shared/_translations_strip.ejs') %>
-
   <%
     const openedRevisions = []
     const scheduledRevisions = []
@@ -43,6 +41,23 @@
       resource.revisionsCount >= _context?.maxOpenRevisions;
     const canStartRevision = !atRevisionLimit && !hasActiveContentTask;
   %>
+
+    <div class="pb-4">
+      <% if (_context.query?.revisions_count_error) { %>
+      <div class="text-red-600">Cannot open a new revision. Current limit is <%= _context.maxOpenRevisions %>. </div>
+      <% } %>
+
+      <% if (hasActiveContentTask) { %>
+      <div class="mb-2 text-orange-700 dark:text-orange-300">Actions are disabled while a translation task is in progress.</div>
+      <% } %>
+
+      <form method="POST" action="<%= `/${_context.locale}/${_context.resourceConfig.resourceTypePlural}/${resource.id}/${_context.resourceConfig.resourceType}_revisions` %>" class="inline-block">
+        <button type="submit" class="btn-primary" <%- canStartRevision ? '' : 'disabled style="opacity: 50%;"' %> <% if (atRevisionLimit && !hasActiveContentTask) { %> title="Open revision limit reached (<%= _context.maxOpenRevisions %>)" <% } %>>
+          Start revision
+        </button>
+      </form>
+    </div>
+
     <% if (openedRevisions.length) { %>
     <table class="data-grid alt">
       <thead>