More things

frontend/app/assets/css/_articles.scss

@@ -3,11 +3,68 @@
 // ---------- Articles index ----------
 .topic-tally { font-size: 0.85rem; color: var(--muted); }
 
-.topic-dropdown {
-  @include dropdown-panel;
-  left: 0;
-  right: 0;
-  max-height: 280px;
+// ---------- Folders: the shelf filed by topic ----------
+.folder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 14px;
+}
+
+.folder-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 15px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--shadow-sm);
+  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
+
+  svg { flex: none; color: var(--accent); opacity: 0.85; transition: opacity 0.15s; }
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+    box-shadow: var(--shadow-lg);
+    svg { opacity: 1; }
+  }
+
+  &:focus-visible { box-shadow: var(--ring); }
+}
+
+.folder-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  // the facet tally lowercases every topic; folders wear their names capitalized
+  text-transform: capitalize;
+}
+
+.folder-count { flex: none; margin-left: auto; }
+
+// the folder grid's loading row: a shorter skeleton than an article card's
+.folder-skeleton { height: 60px; border-radius: 14px; @include shimmer; }
+
+// closing a folder: the quiet way back onto the topics
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 14px;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 650;
+  text-decoration: none;
+  transition: color 0.15s;
+
+  &:hover { color: var(--accent); }
 }
 
 .topic-option {
@@ -18,45 +75,6 @@
   &:hover, &.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
 }
 
-.topic-dropdown-none {
-  padding: 8px 12px;
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.topic-search-wrap {
-  position: relative;
-  margin-bottom: 14px;
-
-  svg {
-    position: absolute;
-    left: 14px;
-    top: 50%;
-    translate: 0 -50%;
-    color: var(--faint);
-    pointer-events: none;
-  }
-}
-
-.topic-search {
-  width: 100%;
-  height: 40px;
-  padding: 0 14px 0 40px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  box-shadow: var(--shadow-sm);
-  font-size: 0.9rem;
-  transition: border-color 0.15s, box-shadow 0.2s;
-
-  &:focus {
-    outline: none;
-    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
-  }
-}
-
 .topic-count {
   padding: 1px 7px;
   border-radius: 999px;