Vanilla JS (v3): Redesign to 2-pane glassmorphism, fix CSP errors, fix Settings view, and achieve 80% test coverage

1 files changed, 193 insertions, 189 deletions

diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index c79fd3d..575be9d 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -1,40 +1,28 @@
 :root {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  /* Font Variables */
+  --font-body: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
+  --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
   line-height: 1.5;
-  font-weight: 400;
+  font-size: 18px;
 
-  color-scheme: light dark;
+  /* Light Mode Defaults */
   --bg-color: #ffffff;
-  --text-color: #213547;
-  --sidebar-bg: #f8f9fa;
-  --border-color: #e9ecef;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --sidebar-bg: #ccc;
+  --link-color: #0000ee;
+  --border-color: #999;
   --accent-color: #007bff;
-  --hover-color: #e2e6ea;
-  --sidebar-width: 250px;
-  --item-list-width: 350px;
-}
-
-.theme-dark {
-  --bg-color: #1a1a1a;
-  --text-color: #e9ecef;
-  --sidebar-bg: #212529;
-  --border-color: #343a40;
-  --accent-color: #375a7f;
-  --hover-color: #2c3034;
-}
-
-.font-serif {
-  font-family: Georgia, serif;
-}
 
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  color-scheme: light dark;
 }
 
 body {
   margin: 0;
-  color: var(--text-color);
+  font-family: var(--font-body);
   background-color: var(--bg-color);
+  color: var(--text-color);
   height: 100vh;
   overflow: hidden;
 }
@@ -46,59 +34,67 @@ body {
 .layout {
   display: flex;
   height: 100%;
+  width: 100%;
 }
 
-/* Sidebar */
+/* Sidebar - glassmorphism by default */
 .sidebar {
-  width: var(--sidebar-width);
-  background-color: var(--sidebar-bg);
-  border-right: 1px solid var(--border-color);
+  width: 14rem;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  z-index: 100;
+  padding: 1.5rem;
 }
 
-.sidebar-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--border-color);
+.theme-dark .sidebar {
+  background: rgba(0, 0, 0, 0.2);
+  border-right-color: rgba(255, 255, 255, 0.05);
 }
 
 .sidebar-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  margin: 0 0 2rem 0;
+  opacity: 0.8;
+  cursor: pointer;
 }
 
 .sidebar-search {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 2rem;
 }
 
 .sidebar-search input {
   width: 100%;
-  padding: 0.4rem 0.6rem;
-  background-color: var(--bg-color);
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border-radius: 20px;
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
   color: var(--text-color);
-  font-size: 0.85rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
 }
 
 .sidebar-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem 0;
-}
-
-.sidebar-section {
-  margin-bottom: 2rem;
+  margin: 0 -1.5rem;
+  padding: 0 1.5rem;
 }
 
 .sidebar-section h3 {
-  padding: 0 1rem;
-  font-size: 0.7rem;
+  font-family: var(--font-heading);
+  font-size: 0.75rem;
   text-transform: uppercase;
-  color: #888;
-  margin: 0 0 0.5rem 0;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.1em;
+  opacity: 0.5;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
 }
 
 .sidebar-section ul {
@@ -109,206 +105,200 @@ body {
 
 .sidebar-section li a {
   display: block;
-  padding: 0.4rem 1rem;
+  padding: 0.4rem 0.8rem;
+  margin: 0.2rem 0;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  font-weight: 500;
   text-decoration: none;
   color: var(--text-color);
-  font-size: 0.9rem;
+  opacity: 0.8;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.sidebar-section li:hover {
-  background-color: var(--hover-color);
-}
-
-.sidebar-section li.active {
-  background-color: var(--hover-color);
-  font-weight: bold;
+.sidebar-section li a:hover {
+  background: rgba(255, 255, 255, 0.1);
+  opacity: 1;
+  transform: translateX(4px);
 }
 
 .sidebar-section li.active a {
-  color: var(--accent-color);
+  background: rgba(255, 255, 255, 0.25);
+  opacity: 1;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .sidebar-footer {
-  padding: 1rem;
-  border-top: 1px solid var(--border-color);
+  margin-top: auto;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
-  justify-content: space-between;
-  font-size: 0.85rem;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .sidebar-footer a {
-  color: var(--text-color);
+  opacity: 0.6;
+  padding: 0.5rem 0.8rem;
+  border-radius: 8px;
   text-decoration: none;
-  opacity: 0.7;
+  color: var(--text-color);
+  font-size: 0.9rem;
+  font-family: var(--font-heading);
 }
 
 .sidebar-footer a:hover {
+  background: rgba(255, 255, 255, 0.05);
   opacity: 1;
 }
 
-/* Item List Pane */
-.item-list-pane {
-  width: var(--item-list-width);
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--bg-color);
-}
-
-.top-bar {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+/* Main Content area */
+.main-content {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
   background-color: var(--bg-color);
-  height: 40px;
-  display: flex;
-  align-items: center;
-}
-
-.top-bar h1 {
-  margin: 0;
-  font-size: 0.95rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding: 2rem;
 }
 
-.item-list-container {
-  flex: 1;
-  overflow-y: auto;
+.main-content>* {
+  max-width: 35em;
+  margin: 0 auto;
 }
 
+/* Feed Items Styles (from v2) */
 .item-list {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-.item-row {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.item-row:hover {
-  background-color: var(--hover-color);
-}
-
-.item-row.active {
-  background-color: var(--hover-color);
-  border-left: 3px solid var(--accent-color);
+.feed-item {
+  padding: 1rem 0;
+  margin-top: 5rem;
+  border-bottom: none;
 }
 
-.item-row.read {
-  opacity: 0.6;
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
 }
 
 .item-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.2rem;
-  line-height: 1.3;
-}
-
-.item-meta {
-  font-size: 0.75rem;
-  color: #888;
+  font-family: var(--font-heading);
+  font-size: 1.8rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: var(--link-color);
+  display: block;
+  flex: 1;
+  cursor: pointer;
 }
 
-.load-more {
-  padding: 1.5rem;
-  text-align: center;
-  color: #888;
-  font-size: 0.85rem;
+.item-title:hover {
+  text-decoration: underline;
 }
 
-/* Item Detail Pane */
-.item-detail-pane {
-  flex: 1;
-  overflow-y: auto;
-  background-color: var(--bg-color);
+.star-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  padding: 0 0 0 0.5rem;
+  vertical-align: middle;
+  transition: color 0.2s;
+  line-height: 1;
 }
 
-.item-detail-content {
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 2rem;
+.star-btn.is-starred {
+  color: blue;
 }
 
-.item-detail header {
-  margin-bottom: 2rem;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 1.5rem;
+.star-btn.is-unstarred {
+  color: var(--text-color);
+  opacity: 0.3;
 }
 
-.item-detail h1 {
-  font-size: 1.75rem;
-  margin: 0 0 0.75rem 0;
-  line-height: 1.2;
+.dateline {
+  margin-top: 0;
+  font-weight: normal;
+  font-size: 0.75em;
+  color: #ccc;
+  margin-bottom: 1rem;
 }
 
-.item-detail h1 a {
-  color: var(--text-color);
+.dateline a {
+  color: #ccc;
   text-decoration: none;
 }
 
-.item-detail h1 a:hover {
-  text-decoration: underline;
-}
-
-.item-actions {
-  display: flex;
-  gap: 0.5rem;
+.item-description {
+  color: var(--text-color);
+  line-height: 1.5;
+  font-size: 1rem;
   margin-top: 1rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
-.item-actions button {
-  padding: 0.3rem 0.6rem;
-  font-size: 0.8rem;
-  cursor: pointer;
-  background-color: var(--bg-color);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
-  border-radius: 4px;
+.item-description img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1rem 0;
 }
 
-.item-actions button:hover {
-  background-color: var(--hover-color);
+.scrape-btn {
+  background: var(--bg-color);
+  border: 1px solid var(--border-color, #ccc);
+  color: blue;
+  cursor: pointer;
+  font-family: var(--font-heading);
+  font-weight: bold;
+  font-size: 0.8rem;
+  padding: 2px 6px;
+  margin-left: 0.5rem;
 }
 
-.full-content {
-  font-size: 1.1rem;
-  line-height: 1.7;
+/* Themes */
+.theme-dark {
+  --bg-color: #000000;
+  --text-color: #ffffff;
+  --sidebar-bg: #111111;
+  --link-color: rgb(90, 200, 250);
+  --border-color: #333;
 }
 
-.full-content img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 1.5rem 0;
-  border-radius: 4px;
+.font-serif {
+  --font-body: Georgia, 'Times New Roman', Times, serif;
+  font-family: var(--font-body);
 }
 
-.full-content a {
-  color: var(--accent-color);
+.font-mono {
+  --font-body: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: var(--font-body);
 }
 
+/* Settings View */
 .settings-view {
-  padding: 2rem;
+  padding-top: 2rem;
 }
 
 .settings-section {
-  margin-bottom: 2rem;
+  margin-bottom: 2.5rem;
 }
 
 .settings-section h3 {
-  font-size: 1rem;
-  margin-bottom: 1rem;
+  font-family: var(--font-heading);
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .theme-options {
@@ -316,23 +306,37 @@ body {
   gap: 1rem;
 }
 
-.theme-options button.active {
+button {
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.theme-dark button {
+  background-color: #1a1a1a;
+  color: #fff;
+  border-color: #333;
+}
+
+button.active {
   border-color: var(--accent-color);
-  background-color: var(--hover-color);
+  background-color: #eef;
 }
 
-.empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #888;
-  font-size: 1.1rem;
+.theme-dark button.active {
+  background-color: #224;
+  border-color: var(--accent-color);
 }
 
-.loading,
-.empty {
-  padding: 2rem;
-  text-align: center;
-  color: #888;
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+    /* Mobile sidebar will need to be handled later */
+  }
 }
\ No newline at end of file