Add bookmark details view (#665)

* Experiment with bookmark details

* Add basic tests

* Refactor details into modal

* Implement edit and delete button

* Remove slide down animation

* Add fallback details view

* Add status actions

* Improve dark theme

* Improve return URLs

* Make bookmark details sharable

* Fix E2E tests

bookmarks/styles/bookmark-details.scss

@@ -0,0 +1,79 @@
+/* Common styles */
+.bookmark-details {
+  h2 {
+    flex: 1 1 0;
+    align-items: flex-start;
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  .weblinks {
+    display: flex;
+    flex-direction: column;
+    gap: $unit-2;
+  }
+
+  a.weblink {
+    display: flex;
+    align-items: center;
+    gap: $unit-2;
+  }
+
+  a.weblink img, a.weblink svg {
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    color: $body-font-color;
+  }
+
+  a.weblink span {
+    flex: 1 1 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  dl {
+    margin-bottom: 0;
+  }
+
+  .tags a {
+    color: $alternative-color;
+  }
+
+  .status form {
+    display: flex;
+    gap: $unit-2;
+  }
+
+  .status form .form-group, .status form .form-switch {
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+/* Bookmark details view specific */
+.bookmark-details.page {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-6;
+}
+
+/* Bookmark details modal specific */
+.bookmark-details.modal {
+  .modal-header {
+    display: flex;
+    align-items: flex-start;
+    gap: $unit-2;
+  }
+
+  .modal-body {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

bookmarks/styles/bookmark-page.scss

@@ -82,9 +82,11 @@
 
     .radio-group {
       margin-bottom: $unit-1;
+
       .form-label {
         padding-bottom: 0;
       }
+
       .form-radio.form-inline {
         margin: 0 $unit-2 0 0;
         padding: 0;
@@ -92,6 +94,7 @@
         align-items: center;
         column-gap: $unit-1;
       }
+
       .form-icon {
         top: 0;
         position: relative;
@@ -268,55 +271,13 @@ ul.bookmark-list {
     overflow-y: auto;
   }
 
-  &.show-notes .notes,
-  li.show-notes .notes {
-    display: block;
-  }
-}
-
-/* Bookmark notes markdown styles */
-ul.bookmark-list .notes-content {
-  & {
+  .notes .markdown {
     padding: $unit-2 $unit-3;
   }
 
-  p, ul, ol, pre, blockquote {
-    margin: 0 0 $unit-2 0;
-  }
-
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  ul, ol {
-    margin-left: $unit-4;
-  }
-
-  ul li, ol li {
-    margin-top: $unit-1;
-  }
-
-  pre {
-    padding: $unit-1 $unit-2;
-    background-color: $code-bg-color;
-    border-radius: $unit-1;
-    overflow-x: auto;
-  }
-
-  pre code {
-    background: none;
-    box-shadow: none;
-    padding: 0;
-  }
-
-  > pre:first-child:last-child {
-    padding: 0;
-    background: none;
-    border-radius: 0;
+  &.show-notes .notes,
+  li.show-notes .notes {
+    display: block;
   }
 }
 

bookmarks/styles/markdown.scss

@@ -0,0 +1,40 @@
+.markdown {
+  p, ul, ol, pre, blockquote {
+    margin: 0 0 $unit-2 0;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  ul, ol {
+    margin-left: $unit-4;
+  }
+
+  ul li, ol li {
+    margin-top: $unit-1;
+  }
+
+  pre {
+    padding: $unit-1 $unit-2;
+    background-color: $code-bg-color;
+    border-radius: $unit-1;
+    overflow-x: auto;
+  }
+
+  pre code {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  > pre:first-child:last-child {
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+}

bookmarks/styles/responsive.scss

@@ -37,6 +37,14 @@
   min-width: 0;
 }
 
+.columns-2 {
+  --grid-columns: 2;
+}
+
+.gap-0 {
+  gap: 0;
+}
+
 .col-1 {
   grid-column: unquote("span min(1, var(--grid-columns))");
 }

bookmarks/styles/spectre.scss

@@ -127,6 +127,53 @@ ul.menu li:first-child {
   }
 }
 
+// Customize modal animation
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.modal.active .modal-container, .modal.active .modal-overlay {
+  animation: fade-in .15s ease 1;
+}
+
+.modal.active.closing .modal-container, .modal.active.closing .modal-overlay {
+  animation: fade-out .15s ease 1;
+}
+
+// Customize menu animation
+.dropdown .menu {
+  animation: fade-in .15s ease 1;
+}
+
+// Modal close button
+.modal .modal-header button.close {
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 0;
+  cursor: pointer;
+  opacity: .85;
+  color: $gray-color-dark;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 // Increase input font size on small viewports to prevent zooming on focus the input
 // on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
 // viewport size

bookmarks/styles/theme-dark.scss

@@ -7,9 +7,11 @@
 // Import style modules
 @import "base";
 @import "responsive";
+@import "bookmark-details";
 @import "bookmark-page";
 @import "bookmark-form";
 @import "settings";
+@import "markdown";
 
 /* Dark theme overrides */
 
@@ -40,8 +42,17 @@ a:focus, .btn:focus {
 }
 
 .form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon {
-  background: $dt-primary-button-color;
-  border-color: $dt-primary-button-color;
+  background: $dt-primary-input-color;
+  border-color: $dt-primary-input-color;
+}
+
+.form-switch .form-icon::before, .form-switch input:active + .form-icon::before {
+  background: $light-color;
+}
+
+.form-switch input:checked + .form-icon {
+  background: $dt-primary-input-color;
+  border-color: $dt-primary-input-color;
 }
 
 .form-radio input:checked + .form-icon::before {

bookmarks/styles/theme-light.scss

@@ -7,6 +7,8 @@
 // Import style modules
 @import "base";
 @import "responsive";
+@import "bookmark-details";
 @import "bookmark-page";
 @import "bookmark-form";
 @import "settings";
+@import "markdown";

bookmarks/styles/variables-dark.scss

@@ -30,4 +30,5 @@ $code-bg-color: rgba(255, 255, 255, 0.1);
 $code-shadow-color: rgba(255, 255, 255, 0.2);
 
 /* Dark theme specific */
+$dt-primary-input-color: #5C68E7 !default;
 $dt-primary-button-color: #5761cb !default;