Rebuild UI as a faithful recreation of the original Aurora-themed layout: sidebar panel nav, two-pane rename list, live naming-scheme preview

2026-08-29 01:55:54 +00:00
parent e01852f292
commit 87e150f31b
14 changed files with 914 additions and 145 deletions
@@ -0,0 +1,88 @@
+.sidebar {
+  width: var(--sidebar-width);
+  flex: 0 0 var(--sidebar-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 64px 6px 14px;
+  position: relative;
+  /* Approximates the original's diagonal LinearGradientPaint(0,0 -> width,height,
+     [dock-deep, dock, dock-mist] at [0, 0.72, 1]). */
+  background: linear-gradient(165deg, var(--dock-deep) 0%, var(--dock) 72%, var(--dock-mist) 100%);
+}
+
+.sidebar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(180deg, var(--aurora-green) 0%, var(--aurora-cyan) 48%, var(--aurora-lilac) 100%);
+}
+
+.sidebar-list {
+  list-style: none;
+  margin: 0;
+  padding: 8px 9px;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-item {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 54px;
+  padding: 0 10px;
+  border-radius: 14px;
+  color: var(--muted-text);
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+  position: relative;
+}
+
+.sidebar-item:hover {
+  color: var(--text);
+}
+
+.sidebar-item.selected {
+  background: rgba(0, 0, 0, 0.13);
+  color: var(--text);
+}
+
+.sidebar-item-accent {
+  position: absolute;
+  left: 5px;
+  top: 11px;
+  bottom: 11px;
+  width: 3px;
+  border-radius: 6px;
+  background: var(--aurora-cyan);
+}
+
+.sidebar-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding-bottom: 6px;
+}
+
+.sidebar-wordmark {
+  font-weight: 700;
+  font-size: 13px;
+  background: linear-gradient(135deg, var(--aurora-cyan), var(--aurora-lilac));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.sidebar-version {
+  font-size: 10px;
+  color: var(--muted-text);
+  opacity: 0.7;
+}