Replace js by ts

brittle-ui/style.css

@@ -356,11 +356,108 @@ ul { list-style: none; }
 
 /* ── PDF viewer frame ─────────────────────────────────────────────────────── */
 
-.pdf-frame {
+.pdf-tab-container {
+  position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.pdf-frame {
+  flex: 1;
+  width: 100%;
   border: none;
   display: block;
+  min-height: 0;
+}
+
+/* Comment editor — appears at the bottom of the PDF frame when a highlight
+   is clicked.  Positioned absolutely so it overlays the iframe. */
+.comment-editor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg1, #3c3836);
+  border-top: 1px solid var(--border, #504945);
+  padding: 10px 14px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 10;
+}
+
+.comment-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--fg2, #a89984);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.comment-close {
+  background: none;
+  border: none;
+  color: var(--fg2, #a89984);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0 2px;
+}
+.comment-close:hover { color: var(--fg, #ebdbb2); }
+
+.comment-textarea {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  background: var(--bg, #282828);
+  color: var(--fg, #ebdbb2);
+  border: 1px solid var(--border, #504945);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+.comment-textarea:focus {
+  outline: none;
+  border-color: var(--yellow, #d79921);
+}
+
+.comment-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.comment-save {
+  background: var(--yellow, #d79921);
+  color: #1d2021;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 14px;
+  font-size: 13px;
+  cursor: pointer;
+  font-weight: 600;
+}
+.comment-save:hover { filter: brightness(1.1); }
+
+.comment-delete {
+  background: none;
+  border: 1px solid var(--border, #504945);
+  color: var(--fg2, #a89984);
+  border-radius: 4px;
+  padding: 4px 12px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.comment-delete:hover {
+  border-color: var(--red, #cc241d);
+  color: var(--red, #cc241d);
 }
 
 /* ── Drag-and-drop ────────────────────────────────────────────────────────── */