sidebarListItem: fixed active states to be displayed in ui

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css

@@ -1,4 +1,4 @@
-.sidebar__list__item {
+.sidebar__list__link {
   position: relative;
   cursor: theme(cursor.pointer);
 
@@ -19,12 +19,12 @@
   &:hover:after {
     background: var(--clr-bg-inv-acc-2);
     transform: scale(theme(scale.100));
-    transition: transform 0.24s ease-in-out;
+    transition: transform 0.32s ease-in-out;
   }
 
   &:active {
     transform: scale(0.99);
-    transition: transform 0.08s ease-in-out;
+    transition: transform 0.12s ease-in-out;
   }
 
   &:active:after {
@@ -37,7 +37,13 @@
   position: relative;
   z-index: 20;
   display: block;
-  padding: theme(padding.3);
+  padding: theme(padding.2) theme(padding.3);
+}
+
+.sidebar__list__link.active {
+  &:after {
+    background: var(--clr-bg-inv-acc-3);
+  }
 }
 
 .sidebar__list__content {

pkgs/webview-ui/app/src/components/Sidebar/index.tsx

@@ -81,7 +81,7 @@ export const Sidebar = (props: RouteSectionProps) => {
                   title={route.label}
                   icon={route.icon || "Paperclip"}
                 >
-                  <ul>
+                  <ul class="flex flex-col gap-y-0.5">
                     <For each={children().filter((r) => !r.hidden)}>
                       {(child) => (
                         <SidebarListItem

pkgs/webview-ui/app/src/index.css

@@ -30,7 +30,7 @@
 
 :root {
   --clr-bg-def-1: theme(colors.white);
-  --clr-bg-def-2: theme(colors.secondary.50);
+  --clr-bg-def-2: theme(colors.primary.50);
   --clr-bg-def-3: theme(colors.secondary.100);
   --clr-bg-def-4: theme(colors.secondary.200);
   --clr-bg-def-5: theme(colors.secondary.300);