wip

Author: hasparus

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

@@ -35,10 +35,7 @@ export function CheckboxTree({
 }: CheckboxTreeProps) {
   const normalizedSearch = searchQuery?.trim().toLowerCase() ?? ""
 
-  const { preparedItems } = useMemo(() => {
-    const parentIds = new Set<string>()
-    const defaultOpen = new Set<string>()
-
+  const preparedItems = useMemo(() => {
     function enhance(
       itemsToEnhance: CheckboxTreeItem[],
       depth: number,
@@ -54,21 +51,14 @@ export function CheckboxTree({
         }
 
         if (item.children && item.children.length > 0) {
-          parentIds.add(item.id)
-          if (depth === 0) {
-            defaultOpen.add(item.id)
-          }
           prepared.children = enhance(item.children, depth + 1)
         }
 
         return prepared
       })
     }
 
-    return {
-      allParentIds: parentIds,
-      preparedItems: enhance(items, 0),
-    }
+    return enhance(items, 0)
   }, [items, normalizedSearch])
 
   const filteredTree = useMemo(() => {
@@ -114,7 +104,7 @@ export function CheckboxTree({
         <div key={node.id}>
           <div
             className="flex items-start gap-2 py-1"
-            style={{ paddingInlineStart: node.depth * 16 }}
+            style={{ paddingInlineStart: (node.depth - 1) * 16 }}
           >
             {isSelectable ? (
               <label

src/components/tools-and-libraries.tsx

@@ -304,15 +304,13 @@ export function CodePage({ allTags, data }: CodePageProps) {
           <MagnifyingGlassIcon className="shrink-0" />
         </div>
         <div className="mt-8 md:grid md:grid-cols-[minmax(240px,300px)_1fr] md:gap-8 xl:grid-cols-[minmax(260px,320px)_1fr]">
-          <aside className="mb-6 border border-neu-300 p-4 dark:border-neu-200 md:mb-0">
-            <CheckboxTree
-              items={filterTreeItems}
-              selectedValues={selectedTags}
-              onSelectionChange={handleTreeSelection}
-              searchQuery={search}
-              emptyFallback="No categories found"
-            />
-          </aside>
+          <CheckboxTree
+            items={filterTreeItems}
+            selectedValues={selectedTags}
+            onSelectionChange={handleTreeSelection}
+            searchQuery={search}
+            emptyFallback="No categories found"
+          />
           <div>
             <RadioGroup
               value={sort}