Move library browsing to main grid

public/assets/styles.css

@@ -75,6 +75,14 @@ button:disabled {
   transform: none;
 }
 
+button.ghost {
+  background: transparent;
+}
+
+.hidden {
+  display: none !important;
+}
+
 input,
 textarea {
   width: 100%;
@@ -170,7 +178,7 @@ h3 {
 
 .shell-note,
 .muted,
-.title-button__meta,
+.title-card__meta,
 .episode span,
 .summary p,
 label span {
@@ -238,13 +246,36 @@ label {
   letter-spacing: 0.08em;
 }
 
-.title-list {
+.sidebar-note {
   display: grid;
+  gap: 6px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 14px;
+}
+
+.sidebar-note__label {
+  color: #ddd0ff;
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.sidebar-note p {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.collection-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 12px;
   min-width: 0;
 }
 
-.title-button {
+.title-card {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -258,25 +289,65 @@ label {
   transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
 }
 
-.title-button:hover {
+.title-card:hover {
   border-color: var(--line-strong);
   background: linear-gradient(180deg, rgba(38, 28, 64, 0.94) 0%, rgba(19, 14, 32, 0.98) 100%);
   transform: translateY(-2px);
 }
 
-.title-button.is-active {
-  border-color: rgba(157, 123, 255, 0.58);
-  background: linear-gradient(180deg, rgba(48, 36, 80, 0.96), rgba(20, 15, 35, 0.96));
-  box-shadow:
-    inset 0 0 0 1px rgba(157, 123, 255, 0.16),
-    0 18px 38px rgba(5, 2, 15, 0.32);
+.title-card__poster {
+  aspect-ratio: 3 / 4;
+  position: relative;
+  border: 1px solid rgba(157, 123, 255, 0.16);
+  border-radius: 16px;
+  background:
+    radial-gradient(circle at top, rgba(157, 123, 255, 0.28), transparent 44%),
+    linear-gradient(180deg, #221734 0%, #0c0915 100%);
+  overflow: hidden;
+  display: grid;
+  place-items: center;
 }
 
-.title-button__name {
+.title-card__poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  opacity: 0;
+  transition: opacity 0.16s ease;
+}
+
+.title-card__poster.has-image img {
+  opacity: 1;
+}
+
+.title-card__fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #d8e5ef;
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  background: linear-gradient(180deg, rgba(157, 123, 255, 0.24), rgba(9, 7, 15, 0.18));
+}
+
+.title-card__poster.has-image .title-card__fallback {
+  display: none;
+}
+
+.title-card__name {
   font-weight: 800;
   overflow-wrap: anywhere;
 }
 
+.title-card__meta {
+  color: var(--muted);
+  font-size: 13px;
+}
+
 .toolbar,
 .details,
 .empty,
@@ -486,4 +557,8 @@ video {
   .summary h2 {
     font-size: 2rem;
   }
+
+  .collection-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
 }