Display shared state in bookmark list (#515)

* Add unshare action

* Show shared state in bookmark list

* Update tests

* Reflect unread and shared state as CSS class

bookmarks/styles/base.scss

@@ -65,13 +65,19 @@ section.content-area {
 span.confirmation {
   display: flex;
   align-items: baseline;
-}
-
-span.confirmation .btn.btn-link {
+  gap: $unit-1;
   color: $error-color !important;
 
-  &:hover {
-    text-decoration: underline;
+  svg {
+    align-self: center;
+  }
+
+  .btn.btn-link {
+    color: $error-color !important;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
@@ -116,3 +122,13 @@ span.confirmation .btn.btn-link {
   padding-left: $unit-6;
   padding-right: $unit-6;
 }
+
+.btn.btn-sm.btn-icon {
+  display: inline-flex;
+  align-items: baseline;
+  gap: $unit-h;
+
+  svg {
+    align-self: center;
+  }
+}

bookmarks/styles/bookmark-page.scss

@@ -66,6 +66,10 @@ li[ld-bookmark-item] {
     text-overflow: ellipsis;
   }
 
+  &.unread .title a {
+    font-style: italic;
+  }
+
   .title img {
     width: 16px;
     height: 16px;
@@ -85,11 +89,18 @@ li[ld-bookmark-item] {
     }
   }
 
-  .actions {
+  .actions, .extra-actions {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
-    gap: $unit-2;
+    column-gap: $unit-2;
+  }
+
+  @media (max-width: $size-sm) {
+    .extra-actions {
+      width: 100%;
+      margin-top: $unit-1;
+    }
   }
 
   .actions {
@@ -113,13 +124,6 @@ li[ld-bookmark-item] {
     .separator {
       align-self: flex-start;
     }
-
-    .toggle-notes {
-      align-self: center;
-      display: flex;
-      align-items: center;
-      gap: $unit-h;
-    }
   }
 }