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.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}