Standardize left sidebar controls

public/icons.svg

@@ -12,5 +12,7 @@
   <symbol id="erase" viewBox="0 0 24 24"><path d="m4 15 8-8a2 2 0 0 1 2.8 0l4.2 4.2a2 2 0 0 1 0 2.8l-5 5H7zM13 19h7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></symbol>
   <symbol id="moon" viewBox="0 0 24 24"><path d="M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.8"/></symbol>
   <symbol id="settings" viewBox="0 0 24 24"><path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m19 13.5 1.2 1-.2 2-1.5.8-.3 1.6-1.8.9-1.4-.7-1.5.7-1.8-.9-.3-1.6-1.5-.8-.2-2 1.2-1-.1-1.5-1.2-1 .2-2 1.5-.8.3-1.6 1.8-.9 1.4.7 1.5-.7 1.8.9.3 1.6 1.5.8.2 2-1.2 1.1.1 1.5Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.4"/></symbol>
+  <symbol id="globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M3 12h18M12 3c2.3 2.4 3.4 5.4 3.4 9S14.3 18.6 12 21M12 3c-2.3 2.4-3.4 5.4-3.4 9S9.7 18.6 12 21" fill="none" stroke="currentColor" stroke-width="1.4"/></symbol>
+  <symbol id="tag" viewBox="0 0 24 24"><path d="m4 5 8.5-.5L20 12l-8 8-7.5-7.5L4 5Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.8"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/></symbol>
   <symbol id="close" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"/></symbol>
 </svg>

public/index.html

@@ -57,6 +57,7 @@
         </div>
 
         <div class="select-control">
+          <svg class="sidebar-icon select-icon" aria-hidden="true"><use href="/icons.svg#globe"></use></svg>
           <select class="input-like" id="languageSelect" aria-label="Language">
             <option value="">Select language</option>
           </select>
@@ -65,6 +66,7 @@
 
         <div class="manufacturer-picker" id="manufacturerPicker">
           <button class="manufacturer-trigger" id="manufacturerTrigger" type="button" aria-haspopup="listbox" aria-expanded="false">
+            <svg class="sidebar-icon select-icon" aria-hidden="true"><use href="/icons.svg#tag"></use></svg>
             <span id="manufacturerValue">Select manufacturer</span>
             <span class="select-chevron picker-chevron" aria-hidden="true"></span>
           </button>
@@ -73,7 +75,7 @@
             <div class="manufacturer-options" id="manufacturerOptions" role="listbox"></div>
           </div>
         </div>
-        <select class="input-like native-manufacturer-select" id="manufacturerSelect" aria-label="Manufacturer">
+        <select class="input-like native-manufacturer-select" id="manufacturerSelect" aria-label="Manufacturer" hidden>
           <option value="">Select manufacturer</option>
         </select>
 

src/tailwind.css

@@ -57,13 +57,17 @@
   .sidebar-overlay[hidden] { display: none; }
   .sidebar-drawer[aria-hidden="true"] { @apply -translate-x-full; }
   .sidebar-section { @apply border-t border-slate-700 pt-1; }
-  .drawer-trigger { @apply flex min-h-8 w-full items-center gap-2 rounded border border-slate-700 bg-slate-800 px-2 text-left text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
+  .drawer-trigger { @apply relative flex min-h-8 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-8 text-center text-[11px] font-semibold text-slate-100 transition hover:border-slate-500 hover:bg-slate-700; }
+  .drawer-trigger .sidebar-icon { @apply absolute left-2; }
+  .drawer-trigger > span:not(.drawer-chevron) { @apply min-w-0 truncate text-center; }
   .drawer-trigger .drawer-chevron { @apply inline-flex h-2 w-2 border-b-2 border-r-2 text-[0px] leading-none; }
   .drawer-trigger .drawer-chevron { @apply ml-auto rotate-45 text-slate-300; }
   .drawer-trigger[aria-expanded="true"] .drawer-chevron { @apply rotate-[225deg]; }
   .parser-drawer[hidden] { display: none; }
   .sidebar-icon { @apply inline-flex h-4 w-4 shrink-0 items-center justify-center text-sm leading-none text-slate-300; }
   .action-button { @apply flex items-center justify-center gap-1.5; }
+  .action-button > .sidebar-icon { @apply shrink-0; }
+  .action-button > span { @apply min-w-0 truncate text-center; }
   .action-button .sidebar-icon { @apply text-slate-400; }
   .sidebar-footer { @apply mt-auto grid gap-1 border-t border-slate-700 pt-2; }
   .app-status { @apply rounded border border-slate-700 bg-slate-950 p-1 text-[10px] leading-tight text-slate-100; }
@@ -86,14 +90,16 @@
   .arrow-button:disabled, .action-button:disabled { @apply cursor-not-allowed opacity-50; }
   .input-like { @apply h-7 px-1 text-[11px]; }
   .select-control { @apply relative w-full; }
-  .select-control .input-like { @apply appearance-none pr-7 text-center; }
+  .select-control .input-like { @apply appearance-none pr-7 pl-9 text-center; }
+  .select-icon { @apply pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-slate-300; }
   .select-chevron { @apply pointer-events-none absolute right-3 top-1/2 h-2 w-2 -translate-y-1/2 rotate-45 border-b-2 border-r-2 text-slate-200; }
   .native-manufacturer-select { @apply hidden; }
   .manufacturer-picker { @apply relative; }
-  .manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-2 text-center text-[11px] text-slate-200 shadow-sm; }
+  .manufacturer-trigger { @apply relative flex h-7 w-full items-center justify-center rounded border border-slate-700 bg-slate-800 px-9 text-center text-[11px] text-slate-200 shadow-sm; }
+  .manufacturer-trigger .select-icon { @apply left-3; }
+  .manufacturer-trigger > span:not(.select-chevron) { @apply min-w-0 truncate text-center; }
   .manufacturer-trigger:hover { @apply border-slate-500 bg-slate-700; }
   .manufacturer-trigger[aria-expanded="true"] { @apply border-catalog-focus ring-2 ring-catalog-focus/25; }
-  .manufacturer-trigger span:first-child { @apply min-w-0 truncate; }
   .manufacturer-trigger .select-chevron { @apply right-3 top-1/2 ml-0 translate-y-[-50%]; }
   .manufacturer-menu { @apply absolute left-0 right-0 top-full z-50 mt-1 rounded border border-slate-300 bg-white p-1 shadow-xl; }
   .manufacturer-menu[hidden] { display: none; }
@@ -240,7 +246,8 @@
   html:not(.dark) .column-header { @apply border-slate-300 bg-slate-100 text-slate-700; }
   html:not(.dark) .sidebar-drawer-title { @apply text-slate-700; }
   html:not(.dark) .drawer-trigger .drawer-chevron,
-  html:not(.dark) .select-chevron { @apply text-slate-700; }
+  html:not(.dark) .select-chevron,
+  html:not(.dark) .select-icon { @apply text-slate-700; }
   html:not(.dark) .sidebar-close-button,
   html:not(.dark) .sidebar-open-button,
   html:not(.dark) .drawer-trigger,