feat(desktop): collapsible sidebar

5 files changed, 69 insertions, 38 deletions

diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index f5a08067a..f76d7465b 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -7,6 +7,7 @@
   border-radius: 6px;
   text-decoration: none;
   user-select: none;
+  cursor: default;
   outline: none;
 
   &[data-variant="primary"] {
@@ -93,11 +94,12 @@
 
     gap: 8px;
 
+    /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
+    font-size: var(--font-size-small);
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 171.429% */
+    line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
   }
 
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index 6fe95fccf..a491074fe 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -2,20 +2,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 100%;
+  border-radius: 6px;
   text-decoration: none;
   user-select: none;
   aspect-ratio: 1;
-
-  &:disabled {
-    background-color: var(--icon-strong-disabled);
-    color: var(--icon-invert-base);
-    cursor: not-allowed;
-  }
-
-  &:focus {
-    outline: none;
-  }
+  flex-shrink: 0;
 
   &[data-variant="primary"] {
     background-color: var(--icon-strong-base);
@@ -51,45 +42,62 @@
   }
 
   &[data-variant="secondary"] {
+    border: transparent;
     background-color: var(--button-secondary-base);
     color: var(--text-strong);
+    box-shadow: var(--shadow-xs-border);
 
     &:hover:not(:disabled) {
-      background-color: var(--surface-hover);
+      background-color: var(--button-secondary-hover);
     }
     &:active:not(:disabled) {
-      background-color: var(--surface-active);
+      background-color: var(--button-secondary-base);
     }
     &:focus:not(:disabled) {
-      background-color: var(--surface-focus);
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
+    }
+
+    [data-slot="icon"] {
+      color: var(--icon-strong-base);
     }
   }
 
   &[data-variant="ghost"] {
     background-color: transparent;
+    /* color: var(--icon-base); */
 
     [data-slot="icon"] {
-      color: var(--icon-weak-base);
+      color: var(--icon-base);
+    }
 
-      &:hover:not(:disabled) {
-        color: var(--icon-weak-hover);
+    &:hover:not(:disabled) {
+      background-color: var(--surface-base-hover);
+
+      [data-slot="icon"] {
+        color: var(--icon-hover);
       }
-      &:active:not(:disabled) {
-        color: var(--icon-string-active);
+    }
+    &:active:not(:disabled) {
+      [data-slot="icon"] {
+        color: var(--icon-active);
       }
     }
-
-    /* color: var(--text-strong); */
-    /**/
-    /* &:hover:not(:disabled) { */
-    /*   background-color: var(--surface-hover); */
-    /* } */
-    /* &:active:not(:disabled) { */
-    /*   background-color: var(--surface-active); */
-    /* } */
-    /* &:focus:not(:disabled) { */
-    /*   background-color: var(--surface-focus); */
-    /* } */
+    &:selected:not(:disabled) {
+      background-color: var(--surface-base-active);
+      [data-slot="icon"] {
+        color: var(--icon-selected);
+      }
+    }
+    &:focus:not(:disabled) {
+      background-color: var(--surface-focus);
+    }
   }
 
   &[data-size="normal"] {
@@ -103,9 +111,14 @@
 
   &[data-size="large"] {
     height: 32px;
-    padding: 0 8px 0 6px;
+    /* padding: 0 8px 0 6px; */
     gap: 8px;
 
+    [data-slot="icon"] {
+      height: 16px;
+      width: 16px;
+    }
+
     /* text-12-medium */
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
@@ -114,4 +127,14 @@
     line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
   }
+
+  &:disabled {
+    background-color: var(--icon-strong-disabled);
+    color: var(--icon-invert-base);
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
index abc82609b..fccdebd04 100644
--- a/packages/ui/src/components/icon-button.tsx
+++ b/packages/ui/src/components/icon-button.tsx
@@ -2,7 +2,7 @@ import { Button as Kobalte } from "@kobalte/core/button"
 import { type ComponentProps, splitProps } from "solid-js"
 import { Icon, IconProps } from "./icon"
 
-export interface IconButtonProps {
+export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
   icon: IconProps["name"]
   size?: "normal" | "large"
   iconSize?: IconProps["size"]
@@ -22,7 +22,11 @@ export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Icon data-slot="icon" name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
+      <Icon
+        data-slot="icon"
+        name={props.icon}
+        size={split.iconSize ?? (split.size === "large" ? "normal" : "small")}
+      />
     </Kobalte>
   )
 }
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 2e96b9d85..082bbea90 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -152,6 +152,8 @@ const newIcons = {
   "circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
   stop: `<rect x="6" y="6" width="8" height="8" fill="currentColor"/>`,
   enter: `<path d="M5.83333 15.8334L2.5 12.5L5.83333 9.16671M3.33333 12.5H17.9167V4.58337H10" stroke="currentColor" stroke-linecap="square"/>`,
+  "layout-left": `<path d="M2.91675 2.91699L2.91675 2.41699L2.41675 2.41699L2.41675 2.91699L2.91675 2.91699ZM17.0834 2.91699L17.5834 2.91699L17.5834 2.41699L17.0834 2.41699L17.0834 2.91699ZM17.0834 17.0837L17.0834 17.5837L17.5834 17.5837L17.5834 17.0837L17.0834 17.0837ZM2.91675 17.0837L2.41675 17.0837L2.41675 17.5837L2.91675 17.5837L2.91675 17.0837ZM7.41674 17.0837L7.41674 17.5837L8.41674 17.5837L8.41674 17.0837L7.91674 17.0837L7.41674 17.0837ZM8.41674 2.91699L8.41674 2.41699L7.41674 2.41699L7.41674 2.91699L7.91674 2.91699L8.41674 2.91699ZM2.91675 2.91699L2.91675 3.41699L17.0834 3.41699L17.0834 2.91699L17.0834 2.41699L2.91675 2.41699L2.91675 2.91699ZM17.0834 2.91699L16.5834 2.91699L16.5834 17.0837L17.0834 17.0837L17.5834 17.0837L17.5834 2.91699L17.0834 2.91699ZM17.0834 17.0837L17.0834 16.5837L2.91675 16.5837L2.91675 17.0837L2.91675 17.5837L17.0834 17.5837L17.0834 17.0837ZM2.91675 17.0837L3.41675 17.0837L3.41675 2.91699L2.91675 2.91699L2.41675 2.91699L2.41675 17.0837L2.91675 17.0837ZM7.91674 17.0837L8.41674 17.0837L8.41674 2.91699L7.91674 2.91699L7.41674 2.91699L7.41674 17.0837L7.91674 17.0837Z" fill="currentColor"/>`,
+  "speech-bubble": `<path d="M18.3334 10.0003C18.3334 5.57324 15.0927 2.91699 10.0001 2.91699C4.90749 2.91699 1.66675 5.57324 1.66675 10.0003C1.66675 11.1497 2.45578 13.1016 2.5771 13.3949C2.5878 13.4207 2.59839 13.4444 2.60802 13.4706C2.69194 13.6996 3.04282 14.9364 1.66675 16.7684C3.5186 17.6538 5.48526 16.1982 5.48526 16.1982C6.84592 16.9202 8.46491 17.0837 10.0001 17.0837C15.0927 17.0837 18.3334 14.4274 18.3334 10.0003Z" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 1d786fb4a..67f289283 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -7,7 +7,7 @@
   overflow: clip;
 
   [data-slot="list"] {
-    height: 40px;
+    height: 48px;
     width: 100%;
     position: relative;
     display: flex;
@@ -39,7 +39,7 @@
   [data-slot="trigger"] {
     position: relative;
     height: 100%;
-    padding: 8px 24px;
+    padding: 14px 24px;
     display: flex;
     align-items: center;
     color: var(--text-base);