Restyle the backlinks flyout (#8063)

Author: adoriandoran

apps/client/src/widgets/FloatingButtonsDefinitions.tsx

@@ -393,7 +393,7 @@ export function BacklinksList({ note }: { note: FNote }) {
     });
 
     return backlinks.map(backlink => (
-        <div>
+        <li>
             <NoteLink
                 notePath={backlink.noteId}
                 showNotePath showNoteIcon
@@ -407,7 +407,7 @@ export function BacklinksList({ note }: { note: FNote }) {
                     <RawHtml html={excerpt} />
                 ))
             )}
-        </div>
+        </li>
     ));
 }
 

apps/client/src/widgets/layout/StatusBar.css

@@ -155,6 +155,91 @@
             max-height: 90vh;
             overflow: scroll;
         }
+
+        .backlinks-widget > .dropdown-menu {
+            --menu-padding-size: .9em;
+
+            max-height: 60vh;
+            overflow-y: scroll;
+
+            /* Backlink card */
+            li {
+                --border-radius: 8px;
+
+                max-width: 600px;
+                padding: 10px 20px;
+                background: var(--card-background-color);
+
+                & + li {
+                    margin-top: 2px;
+                }
+
+                &:first-child {
+                    border-radius: var(--border-radius) var(--border-radius) 0 0;
+                }
+
+                &:last-child {
+                    border-radius: 0 0 var(--border-radius) var(--border-radius);
+                }
+                
+                /* Card header */
+                & > span:first-child {
+                    display: block;
+
+                    > span {
+                        display: flex;
+                        flex-wrap: wrap;
+                        align-items: center;
+
+                        /* Note path */
+                        > small {
+                            flex: 100%;
+                            order: -1;
+                            font-size: .65rem;
+
+                            .note-path {
+                                padding: 0;
+                            }
+                        }
+
+                        /* Note icon */
+                        > .bx {
+                            color: var(--menu-item-icon-color);
+                        }
+
+                        /* Note title */
+                        > a {
+                            margin-inline-start: 4px;
+                            color: currentColor;
+                            font-weight: 500;
+                        }
+                    }
+                }
+
+                /* Card content - excerpt */
+                & > span:nth-child(2) > div {
+                    all: unset; /* TODO: Remove after disposing the old style from FloatingButtons.css */
+                    display: block;
+
+                    margin: 8px 0;
+                    border-radius: 4px;
+                    background: var(--quick-search-result-content-background);
+                    padding: 8px;
+                    font-size: .75rem;
+
+                    a {
+                        background: transparent;
+                        color: var(--quick-search-result-highlight-color);
+                        text-decoration: underline;
+                    }
+
+                    p {
+                       margin: 0;
+                    }
+                }
+
+            }
+        }
     }
 
     > .attribute-list {