Refine category select tree gutters and tighten activity charts.

Restore RTL tree lines in category dropdowns, require product category on add, and improve chart bar density with Y-axis tooltips.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/customer/src/components/CategorySearchSelect.module.css

@@ -81,27 +81,95 @@
 }
 
 .dropdown {
-  position: static;
-  margin-top: 6px;
-  max-height: none;
-  overflow: visible;
+  list-style: none;
+  margin: 0;
+  padding: 6px;
   background: var(--elevated-surface);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   box-shadow: var(--glass-shadow);
-  list-style: none;
-  padding: 6px;
-  margin: 0;
+}
+
+.dropdownOverlay {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 120;
+  max-height: min(320px, 50vh);
+  overflow-y: auto;
+}
+
+.dropdownInFlow {
+  position: static;
+  margin-top: 6px;
+  max-height: none;
+  overflow: visible;
+  z-index: auto;
+}
+
+.optionItem {
+  min-width: 0;
+}
+
+.optionItemGroupEnd {
+  margin-bottom: 10px;
+}
+
+.treeGutters {
+  display: flex;
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.treeGutter {
+  position: relative;
+  width: 28px;
+  flex-shrink: 0;
+}
+
+.treeGutterContinue::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
+}
+
+.treeGutterBranch::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  inset-inline-start: 0;
+  border-inline-start: 1px solid rgba(148, 163, 184, 0.55);
+}
+
+.treeGutterBranch::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  width: 22px;
+  height: 1px;
+  background: rgba(148, 163, 184, 0.55);
+  transform: translateY(-50%);
+}
+
+.treeGutterBranchLast::before {
+  bottom: 50%;
 }
 
 .option {
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 6px;
   width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
   padding: 8px 10px;
   font-size: var(--field-font-size);
   font-family: var(--font-ui);
@@ -113,34 +181,35 @@
 }
 
 .optionChild {
-  border-inline-end: 2px solid rgba(var(--primary-rgb) / 0.38);
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-  background: rgba(var(--primary-rgb) / 0.03);
-  padding-inline-end: 14px;
+  padding-inline-end: 4px;
 }
 
-.optionChildGroupEnd {
-  margin-bottom: 10px;
+.optionBody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-start;
+}
+
+.optionParent {
+  font-weight: 600;
 }
 
 .option:hover {
   background: rgba(var(--primary-rgb) / 0.08);
 }
 
-.optionChild:hover {
-  background: rgba(var(--primary-rgb) / 0.1);
-}
-
 .optionSelected {
   background: rgba(var(--primary-rgb) / 0.12);
   color: var(--primary);
   font-weight: 500;
 }
 
-.optionChild.optionSelected {
-  border-inline-end-color: var(--primary);
-  background: rgba(var(--primary-rgb) / 0.14);
+.optionParent.optionSelected {
+  font-weight: 600;
 }
 
 .optionLabel {

apps/customer/src/components/CategorySearchSelect.tsx

@@ -16,6 +16,8 @@ interface CategorySearchSelectProps {
   disabled?: boolean
   placeholder?: string
   id?: string
+  allowEmpty?: boolean
+  dropdownVariant?: 'overlay' | 'inFlow'
 }
 
 function categoryLabel(category: UserProductCategoryOption, isFa: boolean) {
@@ -57,7 +59,6 @@ export function flattenCategoryTree(
 
   walk(null, 0)
 
-  // Orphans whose parent is missing from the list
   for (const category of categories) {
     if (category.parentId && !ids.has(category.parentId)) {
       if (!result.some((item) => item.id === category.id)) {
@@ -96,13 +97,37 @@ function filterCategoryTree(
   return flat.filter((item) => matchedIds.has(item.id))
 }
 
-function isLastChildBeforeParent(items: FlatCategoryOption[], index: number): boolean {
+function isLastChildInGroup(items: FlatCategoryOption[], index: number): boolean {
   const current = items[index]
   if (current.depth === 0) return false
   const next = items[index + 1]
   return !next || next.depth < current.depth
 }
 
+function CategoryTreeGutters({ depth, isLast }: { depth: number; isLast: boolean }) {
+  if (depth === 0) return null
+
+  return (
+    <div className={styles.treeGutters} aria-hidden>
+      {Array.from({ length: depth }, (_, level) => {
+        const isBranchLevel = level === depth - 1
+        return (
+          <span
+            key={level}
+            className={[
+              styles.treeGutter,
+              isBranchLevel ? styles.treeGutterBranch : styles.treeGutterContinue,
+              isBranchLevel && isLast ? styles.treeGutterBranchLast : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
 export function CategorySearchSelect({
   options,
   value,
@@ -110,6 +135,8 @@ export function CategorySearchSelect({
   disabled = false,
   placeholder,
   id,
+  allowEmpty = false,
+  dropdownVariant = 'overlay',
 }: CategorySearchSelectProps) {
   const t = useT()
   const { locale } = useLocale()
@@ -152,6 +179,13 @@ export function CategorySearchSelect({
     setQuery('')
   }
 
+  const dropdownClassName = [
+    styles.dropdown,
+    dropdownVariant === 'inFlow' ? styles.dropdownInFlow : styles.dropdownOverlay,
+  ]
+    .filter(Boolean)
+    .join(' ')
+
   return (
     <div
       className={styles.wrapper}
@@ -187,7 +221,7 @@ export function CategorySearchSelect({
           aria-expanded={open}
           aria-autocomplete="list"
         />
-        {value && !open && !disabled ? (
+        {allowEmpty && value && !open && !disabled ? (
           <button
             type="button"
             className={styles.clearBtn}
@@ -205,47 +239,55 @@ export function CategorySearchSelect({
       </div>
 
       {open && !disabled ? (
-        <ul className={styles.dropdown} role="listbox">
+        <ul className={dropdownClassName} role="listbox">
           {filtered.length === 0 ? (
             <li className={styles.noResults}>{t('myProducts.fields.noCategories')}</li>
           ) : (
-            filtered.map((option, index) => (
-              <li key={option.id}>
-                <button
-                  type="button"
+            filtered.map((option, index) => {
+              const isLastChild = isLastChildInGroup(filtered, index)
+              return (
+                <li
+                  key={option.id}
                   className={[
-                    styles.option,
-                    option.depth > 0 ? styles.optionChild : '',
-                    isLastChildBeforeParent(filtered, index) ? styles.optionChildGroupEnd : '',
-                    value === option.id ? styles.optionSelected : '',
+                    styles.optionItem,
+                    isLastChild ? styles.optionItemGroupEnd : '',
                   ]
                     .filter(Boolean)
                     .join(' ')}
-                  style={
-                    option.depth > 0
-                      ? {
-                          marginInlineStart: `${option.depth * 28}px`,
-                        }
-                      : undefined
-                  }
-                  onClick={() => selectOption(option.id)}
-                  role="option"
-                  aria-selected={value === option.id}
                 >
-                  <span className={styles.optionLabel}>
-                    {categoryLabel(option, isFa)}
-                  </span>
-                  {!isFa && option.nameFa ? (
-                    <span className={styles.optionSecondary}>{option.nameFa}</span>
-                  ) : null}
-                  {isFa && option.name && option.name !== option.nameFa ? (
-                    <span className={styles.optionSecondary} dir="ltr">
-                      {option.name}
+                  <button
+                    type="button"
+                    className={[
+                      styles.option,
+                      option.depth === 0 ? styles.optionParent : styles.optionChild,
+                      value === option.id ? styles.optionSelected : '',
+                    ]
+                      .filter(Boolean)
+                      .join(' ')}
+                    onClick={() => selectOption(option.id)}
+                    role="option"
+                    aria-selected={value === option.id}
+                  >
+                    {option.depth > 0 ? (
+                      <CategoryTreeGutters depth={option.depth} isLast={isLastChild} />
+                    ) : null}
+                    <span className={styles.optionBody}>
+                      <span className={styles.optionLabel}>
+                        {categoryLabel(option, isFa)}
+                      </span>
+                      {!isFa && option.nameFa ? (
+                        <span className={styles.optionSecondary}>{option.nameFa}</span>
+                      ) : null}
+                      {isFa && option.name && option.name !== option.nameFa ? (
+                        <span className={styles.optionSecondary} dir="ltr">
+                          {option.name}
+                        </span>
+                      ) : null}
                     </span>
-                  ) : null}
-                </button>
-              </li>
-            ))
+                  </button>
+                </li>
+              )
+            })
           )}
         </ul>
       ) : null}