wip

Author: hasparus

src/app/conf/2025/schedule/_components/filters.tsx

@@ -11,6 +11,7 @@ import {
 
 import { Tag } from "@/app/conf/_design-system/tag"
 import { Button } from "@/app/conf/_design-system/button"
+import { CheckboxIcon } from "@/app/conf/_design-system/checkbox-icon"
 
 import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
 import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
@@ -217,41 +218,6 @@ function FiltersCombobox({
   )
 }
 
-interface CheckboxIconProps extends React.SVGProps<SVGSVGElement> {
-  checked: boolean
-}
-function CheckboxIcon({ checked, ...rest }: CheckboxIconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      {...rest}
-    >
-      {!checked ? (
-        <>
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M2.5 2.5H4.16667H15.8333H17.5V17.5H15.8333H4.16667H2.5V2.5ZM15.8333 15.8333V4.16667H4.16667V15.8333H15.8333Z"
-          />
-        </>
-      ) : (
-        <g className="[&>path]:fill-neu-0">
-          <rect x="2" y="3" width="15" height="15" />
-          <path d="M6 10.3333H7.66667V12H6V10.3333Z" />
-          <path d="M7.66667 12H9.33333V13.6667H7.66667V12Z" />
-          <path d="M9.33333 10.3333H11V12H9.33333V10.3333Z" />
-          <path d="M11 8.66667H12.6667V10.3333H11V8.66667Z" />
-          <path d="M12.6667 7H14.3333V8.66667H12.6667V7Z" />
-        </g>
-      )}
-    </svg>
-  )
-}
-
 function FilterComboboxOption({
   active,
   selected,

src/app/conf/_design-system/checkbox-icon.tsx

@@ -0,0 +1,34 @@
+export interface CheckboxIconProps extends React.SVGProps<SVGSVGElement> {
+  checked: boolean
+}
+export function CheckboxIcon({ checked, ...rest }: CheckboxIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      {...rest}
+    >
+      {!checked ? (
+        <>
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.5 2.5H4.16667H15.8333H17.5V17.5H15.8333H4.16667H2.5V2.5ZM15.8333 15.8333V4.16667H4.16667V15.8333H15.8333Z"
+          />
+        </>
+      ) : (
+        <g className="[&>path]:fill-neu-0">
+          <rect x="2" y="3" width="15" height="15" />
+          <path d="M6 10.3333H7.66667V12H6V10.3333Z" />
+          <path d="M7.66667 12H9.33333V13.6667H7.66667V12Z" />
+          <path d="M9.33333 10.3333H11V12H9.33333V10.3333Z" />
+          <path d="M11 8.66667H12.6667V10.3333H11V8.66667Z" />
+          <path d="M12.6667 7H14.3333V8.66667H12.6667V7Z" />
+        </g>
+      )}
+    </svg>
+  )
+}

src/components/checkbox-tree/checkbox-tree.tsx

@@ -1,8 +1,5 @@
 import type { ReactNode } from "react"
-import { useEffect, useMemo, useState } from "react"
-import { clsx } from "clsx"
-
-import { ChevronLeftIcon } from "@/icons"
+import { useMemo } from "react"
 
 export interface CheckboxTreeItem {
   id: string
@@ -38,7 +35,7 @@ export function CheckboxTree({
 }: CheckboxTreeProps) {
   const normalizedSearch = searchQuery?.trim().toLowerCase() ?? ""
 
-  const { allParentIds, defaultExpanded, preparedItems } = useMemo(() => {
+  const { preparedItems } = useMemo(() => {
     const parentIds = new Set<string>()
     const defaultOpen = new Set<string>()
 
@@ -70,23 +67,10 @@ export function CheckboxTree({
 
     return {
       allParentIds: parentIds,
-      defaultExpanded: defaultOpen,
       preparedItems: enhance(items, 0),
     }
   }, [items, normalizedSearch])
 
-  const [expandedItems, setExpandedItems] = useState(
-    () => new Set(defaultExpanded),
-  )
-
-  useEffect(() => {
-    if (!normalizedSearch) {
-      setExpandedItems(new Set(defaultExpanded))
-      return
-    }
-    setExpandedItems(new Set(allParentIds))
-  }, [normalizedSearch, allParentIds, defaultExpanded])
-
   const filteredTree = useMemo(() => {
     function markVisibility(node: PreparedTree): PreparedTree | null {
       const { children } = node
@@ -121,21 +105,8 @@ export function CheckboxTree({
     }
   }
 
-  const toggleExpand = (id: string) => {
-    setExpandedItems(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
   const renderTree = (nodes: PreparedTree[]): ReactNode => {
     return nodes.map(node => {
-      const isExpanded = expandedItems.has(node.id)
       const isSelectable = Boolean(node.value)
       const checkboxId = `checkbox-tree-${node.id}`
 
@@ -145,24 +116,6 @@ export function CheckboxTree({
             className="flex items-start gap-2 py-1"
             style={{ paddingInlineStart: node.depth * 16 }}
           >
-            {node.children && node.children.length > 0 ? (
-              <button
-                type="button"
-                aria-expanded={isExpanded}
-                onClick={() => toggleExpand(node.id)}
-                className="mt-0.5 flex size-5 items-center justify-center text-neu-500 transition-colors hover:text-pri-base"
-              >
-                <ChevronLeftIcon
-                  className={clsx(
-                    "size-4 transition-transform",
-                    isExpanded ? "-rotate-90" : "rotate-180",
-                  )}
-                />
-              </button>
-            ) : (
-              <span className="mt-0.5 block size-5" aria-hidden />
-            )}
-
             {isSelectable ? (
               <label
                 htmlFor={checkboxId}
@@ -196,7 +149,7 @@ export function CheckboxTree({
             )}
           </div>
 
-          {node.children && node.children.length > 0 && isExpanded ? (
+          {node.children && node.children.length > 0 ? (
             <div>{renderTree(node.children)}</div>
           ) : null}
         </div>