style(client): collapse search into header action

packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css

@@ -70,11 +70,21 @@
 
 .searchSlot {
   flex: 1;
+  max-width: 28px;
   min-width: 0;
   display: flex;
   align-items: center;
-  padding-left: 4px;
+  margin-left: auto;
+  padding-left: 0;
   box-sizing: border-box;
+  transition:
+    max-width 180ms var(--ds-ease-in-out),
+    padding-left 180ms var(--ds-ease-in-out);
+}
+
+.searchSlotExpanded {
+  max-width: 100%;
+  padding-left: 4px;
 }
 
 .headerActions {
@@ -110,15 +120,15 @@
   align-items: center;
   gap: 0;
   width: 100%;
-  height: 26px;
+  height: 28px;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  border: 1px solid var(--dsw-alias-border-l1);
+  border: none;
-  border-radius: 10px;
+  border-radius: 50%;
   background: transparent;
   cursor: text;
-  color: var(--dsw-alias-label-caption);
+  color: var(--dsw-alias-label-secondary);
   overflow: hidden;
   transition:
     width 180ms var(--ds-ease-in-out),
@@ -128,9 +138,12 @@
 }
 
 .searchExpanded {
+  height: 26px;
   padding: 0 4px 0 0;
-  border-color: var(--dsw-alias-border-l2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
   background: transparent;
+  color: var(--dsw-alias-label-caption);
 }
 
 .searchButton {
@@ -138,8 +151,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 26px;
+  width: 28px;
-  height: 26px;
+  height: 28px;
   border: none;
   border-radius: 50%;
   padding: 0;
@@ -148,6 +161,11 @@
   color: inherit;
 }
 
+.searchExpanded .searchButton {
+  width: 26px;
+  height: 26px;
+}
+
 .searchButton:hover {
   background: var(--dsw-alias-interactive-bg-hover);
 }
@@ -420,6 +438,7 @@
   }
 
   .search,
+  .searchSlot,
   .searchInput,
   .headerActions {
     transition: none;

packages/client/ui-workspace/src/client/WorkspaceBrowser.tsx

@@ -691,7 +691,7 @@ export function WorkspaceBrowser({
           </span>
         )}
         {wide && (
-          <div className={css.searchSlot}>
+          <div className={clsx(css.searchSlot, searchExpanded && css.searchSlotExpanded)}>
             <div
               ref={searchRoot}
               className={clsx(css.search, searchExpanded && css.searchExpanded)}
@@ -712,7 +712,7 @@ export function WorkspaceBrowser({
                     setSearchExpanded(true)
                   }}
                 >
-                  <IconSearchOutline16 size={11} />
+                  <IconSearchOutline16 size={searchExpanded ? 11 : 14} />
                 </button>
               </Tooltip>
               <input