Merge branch 'main' into latest-activity

* main:
  Ensure notification panels have a visible border in dark mode
  Polish divider

app/assets/stylesheets/bubbles.css

@@ -402,10 +402,10 @@
   --border-size: 2px;
   --divider-color: var(--color-subtle-dark);
 
-  block-size: calc(100% + 4ch);
+  block-size: calc(100% + 12ch);
   font-size: 1rem;
   cursor: grab;
-  margin-inline: -1rem;
+  margin-inline: -6ch;
   visibility: hidden;
 }
 
@@ -431,9 +431,11 @@
 }
 
 .bubbles-list__count {
-  background-color: var(--divider-color);
-  color: var(--color-ink-reversed);
-  padding: 0.1em 0.7em;
+  --btn-background: var(--divider-color);
+  --btn-color: var(--color-ink-reversed);
+  --btn-gap: 0.5ch;
+  --btn-icon-size: 1em;
+  --btn-padding: 0.1em 1em 0.1em 0.7em;
 }
 
 .bubble__title-text {

app/assets/stylesheets/notifications.css

@@ -96,6 +96,10 @@
 .notification__content {
   color: var(--color-ink);
 
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid var(--color-subtle-dark);
+  }
+
   .notificiations-list--read & {
     border: 1px solid var(--color-subtle);
     box-shadow: none;

app/views/bubbles/list/_divider.html.erb

@@ -1,8 +1,9 @@
 <li class="bubbles-list__divider flex align-center gap-half" draggable="true" data-divider-target="divider">
   <div class="divider-drag-image" data-divider-target="dragImage">Drag up or down</div>
   <hr class="separator--horizontal flex-item-grow">
-  <strong class="bubbles-list__count border-radius">
-    Bubble up <span data-divider-target="count">10</span>
+  <strong class="btn bubbles-list__count border-radius">
+    <%= image_tag "drag.svg", aria: { hidden: true }, size: 24, class: "colorize-black"  %>
+    <span data-divider-target="count">10</span> Bubbled up 
   </strong>
   <hr class="separator--horizontal flex-item-grow">
   <span></span>

app/views/notifications/_notification.html.erb

@@ -1,6 +1,6 @@
 <% cache notification do %>
   <%= notification_tag notification do %>
-    <div class="notification__content border-radius borderless pad shadow fill-white flex align-start txt-align-start gap">
+    <div class="notification__content border-radius pad shadow fill-white flex align-start txt-align-start gap">
       <div class="avatar txt-small flex-item-no-shrink">
         <%= avatar_image_tag(notification.creator) %>
       </div>