feat: multiple selected notes panel

app/assets/stylesheets/_notes.scss

@@ -28,7 +28,6 @@
   }
 
   #notes-title-bar {
-    padding-top: 16px;
     font-weight: normal;
 
     .section-title-bar-header .title {

app/assets/stylesheets/_sn.scss

@@ -1,9 +1,5 @@
 /* Components and utilities that are good candidates for extraction to StyleKit. */
 
-.outline-none {
-  outline: none;
-}
-
 .border-2 {
   border-width: 2px;
 }
@@ -12,22 +8,59 @@
   border-color: var(--sn-stylekit-background-color);
 }
 
-.focus-within\:border-background:focus-within {
-  border-color: var(--sn-stylekit-background-color);
+.border-transparent {
+  border-color: transparent;
 }
 
-.border-transparent {
-  border-color: var(--sn-stylekit-background-color);
+.border-info {
+  border-color: var(--sn-stylekit-info-color);
 }
 
 .bg-clip-padding {
   background-clip: padding-box;
 }
 
+.bg-secondary-contrast {
+  background-color: var(--sn-stylekit-secondary-contrast-background-color);
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.focus-within\:border-background:focus-within {
+  border-color: var(--sn-stylekit-background-color);
+}
+
+.grid {
+  display: grid;
+}
+
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
+.my-2\.5 {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+
+.outline-none {
+  outline: none;
+}
+
 .ring-info {
   box-shadow: 0 0 0 2px var(--sn-stylekit-info-color);
 }
 
+.inner-ring-info {
+  box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color);
+}
+
+.focus\:inner-ring-info:focus {
+  @extend .inner-ring-info;
+}
+
 .focus\:ring-info:focus {
   @extend .ring-info;
 }
@@ -36,8 +69,29 @@
   @extend .ring-info;
 }
 
-.border-transparent {
-  border-color: transparent;
+.text-left {
+  text-align: left;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.w-32px {
+  width: 32px;
+}
+
+.h-32px {
+  height: 32px;
+}
+
+.h-1px {
+  height: 1px;
+}
+
+.h-10 {
+  height: 2.5rem;
 }
 
 /**
@@ -63,8 +117,6 @@
   @extend .bg-default;
   @extend .min-w-80;
   @extend .duration-150;
-  @extend .grid;
-  @extend .gap-2;
   @extend .slide-down-animation;
   @extend .rounded;
   @extend .box-shadow;

app/assets/stylesheets/_stylekit-sub.scss

@@ -109,3 +109,7 @@ input:focus {
   box-shadow: 0 0 0 2px var(--sn-stylekit-background-color),
     0 0 0 4px var(--sn-stylekit-info-color);
 }
+
+.sk-button:focus-visible, button:focus-visible {
+  outline: none;
+}

app/assets/stylesheets/_ui.scss

@@ -209,18 +209,9 @@ $screen-md-max:              ($screen-lg-min - 1) !default;
   font-weight: 700 !important;
 }
 
-.grid {
-  display: grid;
-}
 .grid-template-cols-1fr {
   grid-template-columns: 1fr;
 }
-.col-span-all {
-  grid-column: 1 / -1;
-}
-.grid-col-2 {
-  grid-column: 2;
-}
 
 .relative {
   position: relative;