Add links-mode embed thumbnails, item metadata, and media filters

poc/public/media.css

@@ -202,9 +202,87 @@
     box-shadow: inset 0 0 0 1px var(--color-neutral-800);
 }
 
+.vk-media-modal-box.vk-media-wide {
+    width: min(760px, 94vw);
+    height: min(80vh, 720px);
+}
+
 .vk-media-modal-list {
     max-height: 220px;
     overflow-y: auto;
     font: 400 11px/1.5 ui-monospace, Menlo, monospace;
     color: var(--color-neutral-400);
 }
+
+.vk-media-wide .vk-media-modal-list {
+    max-height: none;
+    flex: 1;
+}
+
+.vk-media-history-row {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--color-neutral-900);
+}
+
+.vk-media-tree {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.vk-media-tree-head {
+    padding: 6px 8px;
+    border: none;
+    border-radius: var(--radius-sm, 6px);
+    background: var(--color-neutral-900);
+    color: var(--color-neutral-200);
+    font: 500 12px/1.2 inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.vk-media-tree-children {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin: 4px 0 4px 14px;
+}
+
+.vk-media-channel {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.vk-media-channel-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 400 11px/1.4 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-300);
+}
+
+@keyframes vk-media-pulse {
+    0%,
+    100% {
+        opacity: 0.25;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+.vk-media-pulse {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-accent-400, #4f8cff);
+    animation: vk-media-pulse 1.2s ease-in-out infinite;
+}