Merge branch 'main' into mobile/prepare-webviews-2

* main: (26 commits)
  Add a new Pins section to docs/API.md covering pin/unpin and the pinned cards list response.
  Align board name start so it doesn't get too big
  Clean up card/events header layout
  Sync email to Stripe when user changes email address (#2432)
  Fix IDOR in webhook activation endpoint (#2431)
  Add card reactions to API docs and reactions_url to card JSON (#2427)
  Remove unnecessary claude plan
  Allow boosts on cards (#2411)
  Revert "Fix notification click URL by using correct data property"
  Add migration to remove draft cards from search index
  Guard search indexing with searchable? check
  Forbid comments on draft cards
  prefactor: update search to use published cards
  Fix notification click URL by using correct data property
  Wait for service worker to be active before subscribing
  Fix stuck state when permission granted but no subscription
  Extract Card::Commentable
  Include arm64 build in Docker workflow
  Remove unnecessary `await` in push handler
  Correctly initialise WebPush connection (#2417)
  ...

Author: adjogima

.github/workflows/publish-image.yml

@@ -34,6 +34,9 @@ jobs:
           - runner: ubuntu-latest
             platform: linux/amd64
             arch: amd64
+          - runner: ubuntu-24.04-arm
+            platform: linux/arm64
+            arch: arm64
     env:
       REGISTRY: ghcr.io
       IMAGE_NAME: ${{ github.repository }}
@@ -170,11 +173,13 @@ jobs:
               docker buildx imagetools create \
                 --tag "$tag" \
                 --annotation "index:org.opencontainers.image.description=${IMAGE_DESCRIPTION}" \
-                "${src_tag}-amd64"
+                "${src_tag}-amd64" \
+                "${src_tag}-arm64"
             else
               docker buildx imagetools create \
                 --tag "$tag" \
-                "${src_tag}-amd64"
+                "${src_tag}-amd64" \
+                "${src_tag}-arm64"
             fi
           done <<< "$tags"
 

app/assets/images/person.svg

@@ -536,16 +536,33 @@
     /* Set lower limit for font size */
     font-size: clamp(0.6rem, 0.85cqi, 100px);
 
+    .card__counts {
+      --gap: 0.5ch;
+
+      align-items: flex-end;
+      display: flex;
+      flex-shrink: 0;
+      gap: calc(2 * var(--gap));
+      margin-inline: auto calc(var(--card-padding-inline) * -0.5);
+      padding-inline-start: var(--gap);
+    }
+
+    .card__boosts,
     .card__comments {
-      --column-gap: 0.8ch;
+      --icon-size: 1.6em;
 
+      align-items: center;
       display: flex;
-      margin-block-end: calc(var(--block-space) * -1.7);
-      margin-inline-end: calc(var(--card-padding-inline) * -0.5);
+      flex-shrink: 0;
+      font-weight: 600;
+      gap: var(--gap);
 
-      .icon {
-        --icon-size: 1.6em;
+      img {
+        block-size: var(--icon-size);
+        inline-size: var(--icon-size);
+      }
 
+      .icon--comment {
         color: var(--card-color);
       }
     }
@@ -584,11 +601,16 @@
       .local-time-value {
         font-weight: inherit;
       }
+
+      @media (max-width: 639px) {
+        inline-size: auto;
+      }
     }
 
     &:has(.card__background img:not([src=""])) {
       .card__content,
       .card__meta,
+      .card__boosts,
       .card__comments,
       .card__column-name:not(.card__column-name--current) {
         opacity: 0;
@@ -599,6 +621,7 @@
         &:hover {
           .card__content,
           .card__footer,
+          .card__boosts,
           .card__comments,
           .card__column-name:not(.card__column-name--current) {
             opacity: 1;

app/assets/stylesheets/card-columns.css

@@ -34,6 +34,23 @@
       }
     }
 
+    @media (max-width: 799px) {
+      --half-btn-height: 1.25rem;
+      --padding-inline: 1.5ch;
+
+      column-gap: 0;
+      grid-template-areas:
+        "notch-top notch-top notch-top"
+        "card card card"
+        "actions-left notch-bottom actions-right"
+        "closure-message closure-message closure-message";
+      grid-template-columns: 1fr auto 1fr;
+      inline-size: calc(100% + 2 * var(--padding-inline));
+      margin-inline: calc(-1 * var(--padding-inline));
+      max-inline-size: none;
+      position: relative;
+    }
+
     .card {
       --card-aspect-ratio: 2 / 0.95;
       --lexxy-bg-color: var(--card-bg-color);
@@ -47,6 +64,8 @@
     }
 
     .card__body {
+      position: relative;
+
       @media (max-width: 639px) {
         flex-direction: column;
         padding-block-end: calc(var(--card-padding-block) * 1.5);
@@ -86,6 +105,11 @@
       }
     }
 
+    .card__meta {
+      grid-area: meta;
+      margin-inline-end: auto;
+    }
+
     .card__stages {
       max-inline-size: 32ch;
 
@@ -119,6 +143,71 @@
       }
     }
 
+    .card__footer {
+      --btn-size: 2.5rem;
+
+      display: flex;
+      gap: 0.5ch;
+      inline-size: 100%;
+      text-align: start;
+
+      /* Switch to grid layout so that the bg zoom button can stay next to the
+       * meta element, and the reactions can sit below */
+      &:has(.reaction) {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-template-areas:
+          "meta bg-zoom"
+          "reactions reactions";
+      }
+
+      @media (max-width: 639px) {
+        font-size: var(--text-x-small);
+      }
+    }
+
+    .reactions {
+      --reaction-size: var(--btn-size);
+
+      align-self: flex-end;
+      display: flex;
+      gap: 0.5ch;
+      grid-area: reactions;
+      margin-inline-start: auto;
+
+      &:has(.reaction) {
+        --padding: calc(var(--card-padding-block) / 2);
+        --reaction-size: 1.6875rem;
+
+        margin-block: var(--padding) calc(-1 * var(--padding));
+        padding-block-start: var(--padding);
+        position: relative;
+
+        &:before {
+          border-block-start: 1px dashed color-mix(in srgb, transparent, var(--card-color) 33%);
+          content: "";
+          inset: 0 calc(-1 * var(--card-padding-inline)) auto;
+          position: absolute;
+        }
+      }
+
+      &:not(:has(.reaction)) {
+        position: static;
+
+        .reactions__trigger {
+          --btn-border-color: var(--color-ink-light);
+        }
+      }
+    }
+
+    .reaction__popup.popup {
+      inline-size: max-content;
+    }
+
+    .card__zoom-bg-btn {
+      grid-area: bg-zoom;
+    }
+
     .bubble {
       --bubble-number-max: 42px;
       --bubble-size: 6rem;
@@ -132,23 +221,6 @@
         inset: calc(var(--bubble-size) / 1.5) 0 auto auto;
       }
     }
-
-    @media (max-width: 799px) {
-      --half-btn-height: 1.5rem;
-      --padding-inline: 1.5ch;
-
-      column-gap: 0;
-      grid-template-areas:
-        "notch-top notch-top notch-top"
-        "card card card"
-        "actions-left notch-bottom actions-right"
-        "closure-message closure-message closure-message";
-      grid-template-columns: 1fr auto 1fr;
-      inline-size: calc(100% + 2 * var(--padding-inline));
-      margin-inline: calc(-1 * var(--padding-inline));
-      max-inline-size: none;
-      position: relative;
-    }
   }
 
   /* Child items

app/assets/stylesheets/card-perma.css

@@ -62,6 +62,8 @@
   }
 
   .card__board {
+    align-items: center;
+    align-self: start;
     background-color: var(--card-color);
     border-radius: var(--border-radius) 0 var(--border-radius) 0;
     color: var(--color-ink-inverted);
@@ -252,9 +254,10 @@
     padding-block: var(--block-space-half);
   }
 
-  /* Meta
+  /* Footer
   /* ------------------------------------------------------------------------ */
 
+  /* Card metadata */
   .card__meta {
      --meta-spacer-block: 0.5ch;
      --meta-spacer-inline: 0.75ch;
@@ -376,11 +379,12 @@
     display: flex;
     flex-direction: column;
     font-weight: bold;
-    inset: auto 1ch 1ch auto;
+    inset: auto 0 -1lh auto;
     justify-content: center;
     max-inline-size: 25ch;
     min-inline-size: 16ch;
     padding: 1ch;
+    pointer-events: none;
     position: absolute;
     rotate: 5deg;
     transform-origin: top right;

app/assets/stylesheets/cards.css

@@ -80,6 +80,11 @@
         display: none !important;
       }
     }
+
+    .reactions {
+      margin-block-start: var(--block-space-half);
+      margin-inline: calc(var(--column-gap) / -1);
+    }
   }
 
   .comment__author {

app/assets/stylesheets/comments.css

@@ -291,6 +291,7 @@
 
   .event {
     --column-gap: 0.7ch;
+    --event-padding: 0.6em;
 
     background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
     border-radius: 0.2em;
@@ -300,7 +301,7 @@
     max-inline-size: 100%;
     min-inline-size: 0;
     overflow: clip;
-    padding: 0.6em;
+    padding: var(--event-padding);
     position: relative;
     z-index: 0;
 
@@ -325,12 +326,15 @@
       z-index: 0;
     }
 
+    .card__header {
+      inline-size: 100%;
+      margin-block-start: calc(-1 * var(--event-padding));
+    }
+
     .card__board {
       background-color: transparent;
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
       font-size: 0.7em;
-      padding: 0;
-      translate: 0 -0.3em;
     }
 
     .card__board-name {
@@ -377,16 +381,11 @@
   }
 
   .event__icon {
+    color: var(--card-color);
     display: grid;
-    margin: -0.3em -0.3em auto auto;
+    margin-inline-start: auto;
     place-content: center;
-
-    .icon {
-      background-color: var(--card-color);
-      block-size: 1em;
-      inline-size: 1em;
-      grid-area: 1 / 1;
-    }
+    translate: calc(var(--event-padding) / 2);
   }
 
   .event__timestamp {

app/assets/stylesheets/events.css

@@ -10,8 +10,6 @@
     flex-wrap: wrap;
     gap: var(--inline-space-half);
     inline-size: 100%;
-    margin-block-start: var(--block-space-half);
-    margin-inline: calc(var(--column-gap) / -1);
 
     &:has([open]) {
       z-index: var(--z-popup);
@@ -34,11 +32,8 @@
 
       .reactions__trigger {
         --btn-border-color: var(--color-ink-lightest);
-        background-color: var(--color-ink-lightest);
 
-        &:not(:hover) {
-          opacity: 0.66;
-        }
+        background-color: var(--color-ink-lightest);
       }
     }
   }

app/assets/stylesheets/reactions.css

@@ -440,6 +440,7 @@
     .card__meta-text:not(.card__meta-text--updated),
     .card__stages,
     .card__steps,
+    .card__boosts,
     .card__comments,
     .card__closed {
       display: none;