feat: add authenticated list reading

src/styles.css

@@ -116,6 +116,73 @@ a {
   line-height: 1.7;
 }
 
+.list-picker {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 0.9rem;
+  background: var(--paper);
+}
+
+.list-picker h2 {
+  margin: 0 0 0.75rem;
+  font-size: 0.9rem;
+  letter-spacing: 0.01em;
+}
+
+.list-picker-state {
+  margin: 0;
+  color: var(--secondary);
+  font-size: 0.84rem;
+}
+
+.list-picker-state p {
+  margin-top: 0;
+}
+
+.list-choices {
+  display: grid;
+  max-height: 22rem;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  scrollbar-gutter: stable;
+}
+
+.list-choices a {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 0.65rem;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.list-choices a[aria-current="page"] {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
+  box-shadow: inset 3px 0 var(--accent);
+}
+
+.list-choices span {
+  font-weight: 750;
+}
+
+.list-choices small {
+  color: var(--secondary);
+  font-size: 0.74rem;
+}
+
+.list-choices p {
+  margin: 0.2rem 0 0;
+  color: var(--secondary);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+
 .intent-form {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -167,6 +234,7 @@ a {
 }
 
 .intent-form button,
+.list-picker-state button,
 .state button {
   min-height: 2.75rem;
   padding: 0.65rem 1rem;
@@ -457,6 +525,7 @@ video.media {
   }
 
   .intent-form button:hover,
+  .list-picker-state button:hover,
   .state button:hover {
     border-color: var(--accent-hover);
     background: var(--accent-hover);
@@ -470,6 +539,11 @@ video.media {
     border-color: var(--accent-hover);
     background: var(--accent-hover);
   }
+
+  .list-choices a:hover {
+    border-color: var(--accent);
+    color: var(--ink);
+  }
 }
 
 @media (max-width: 42rem) {