feat: migrate workspace to shadcn sidebar and chat components

src/styles.css

@@ -1,4 +1,5 @@
-/* Hallmark · macrostructure: Workbench · tone: compact · anchor hue: Twitter blue */
+/* Hallmark · macrostructure: Workbench · tone: compact · anchor hue: neutral */
+@import "./ui.css";
 @import "../tokens.css";
 
 :root {
@@ -6,10 +7,7 @@
   --surface: var(--color-paper-2);
   --paper: var(--color-paper);
   --ink: var(--color-ink);
-  --secondary: var(--color-muted);
-  --accent: var(--color-accent);
   --accent-hover: var(--color-accent-hover);
-  --border: var(--color-rule);
   --control-border: var(--color-control-rule);
   --error: var(--color-error);
   color: var(--ink);
@@ -37,7 +35,7 @@ select {
   font: inherit;
 }
 a {
-  color: var(--accent);
+  color: var(--primary);
   text-underline-offset: 0.18em;
 }
 a:active {
@@ -47,47 +45,6 @@ a:active {
   outline: var(--rule-active) solid var(--color-focus);
   outline-offset: 2px;
 }
-.app {
-  width: 100%;
-  height: 100dvh;
-  min-height: 0;
-  background: var(--canvas);
-}
-.app-deck {
-  display: grid;
-  grid-template-columns: 188px minmax(0, 1fr);
-}
-.app-sidebar {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-  padding: var(--space-md) var(--space-sm);
-  border-right: var(--rule-hairline) solid var(--border);
-  overflow-y: auto;
-}
-svg {
-  flex-shrink: 0;
-}
-.sidebar-note {
-  margin-top: auto;
-  margin-bottom: 0;
-  color: var(--secondary);
-  font-size: var(--text-xs);
-  line-height: 1.6;
-}
-.reader {
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  margin: var(--space-sm);
-  padding: var(--space-xs);
-  border: var(--rule-hairline) solid var(--border);
-  border-radius: 16px;
-  background: var(--paper);
-  overflow: hidden;
-}
 h1 {
   margin: 0;
   min-width: 0;
@@ -99,24 +56,24 @@ h1 {
 }
 .handle {
   display: block;
-  color: var(--secondary);
+  color: var(--muted-foreground);
   font-size: var(--text-xs);
 }
-@media (max-width: 767px) {
-  .app-deck {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-  .app-sidebar {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--space-xs);
-    padding: var(--space-xs);
-    overflow: visible;
-    border-right: 0;
-    border-bottom: var(--rule-hairline) solid var(--border);
-  }
-  .sidebar-note {
-    display: none;
+
+.workspace .reader {
+  overflow: hidden;
+}
+.sidebar-note {
+  color: var(--muted-foreground);
+  font-size: var(--text-xs);
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    /* biome-ignore lint/complexity/noImportantStyles: Respect reduced motion over registry component animation utilities. */
+    animation-duration: 0.01ms !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Respect reduced motion over registry component transition utilities. */
+    transition-duration: 0.01ms !important;
   }
 }