Show annotations on overview of favorites

app/assets/stylesheets/favorites.scss

@@ -33,11 +33,22 @@
 }
 
 .thumb {
-  width: 3em;
+  display: inline-block;
+  max-width: 48px;
+  height: auto;
+
+  img {
+    vertical-align: middle;
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
 }
 
 .table_buttons {
   display: flex;
+  justify-content: flex-end;
 
   :nth-child(2) {
     -webkit-text-fill-color: #ffffff;
@@ -82,4 +93,82 @@
     color: black;
     text-decoration: none;
   }
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.header-button-container {
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  .button {
+    margin-right: 8px;
+    text-align: right;
+    align-self: center;
+    line-height: 34px;
+  }
+}
+
+#annotation {
+  display: none;
 }