From 3d1013390c5639de52829cbd613ea351af47c551 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Fri, 3 Jan 2025 19:39:57 +0100
Subject: [PATCH] Improve explorer experience

---
 web/package.json                              |  1 +
 web/pnpm-lock.yaml                            |  3 +
 .../search_tasks/SearchTaskTable.tsx          |  7 ++-
 .../settings/_layout/locations/explorer.tsx   | 56 ++++++++++++-------
 4 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/web/package.json b/web/package.json
index 385aac4..afeab01 100644
--- a/web/package.json
+++ b/web/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-hover-card": "^1.1.2",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 14149f1..309b8ed 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.2
+        version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-dialog':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
diff --git a/web/src/components/search_tasks/SearchTaskTable.tsx b/web/src/components/search_tasks/SearchTaskTable.tsx
index 124edf0..20fa0b6 100644
--- a/web/src/components/search_tasks/SearchTaskTable.tsx
+++ b/web/src/components/search_tasks/SearchTaskTable.tsx
@@ -4,6 +4,7 @@ import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
 import { useEffect } from 'react';
 import { FiCheck, FiLoader } from 'react-icons/fi';
+import { SiMeilisearch } from 'react-icons/si';
 import { match } from 'ts-pattern';
 
 import { useAuth } from '@/api/auth';
@@ -58,7 +59,11 @@ const TaskTableEntry = ({
     return (
         <tr key={task.task_id} className="w-full border-b border-gray-200">
             <td>#{task.task_id}</td>
-            <td>meili/{task.external_task_id}</td>
+            <td>
+                <div className="flex items-center gap-1">
+                    <SiMeilisearch />{task.external_task_id}
+                </div>
+            </td>
             <td className={clsx('py-0.5')}>
                 <div className="flex items-center gap-2">
                     <div className={clsx(statusClass)}>{
diff --git a/web/src/routes/settings/_layout/locations/explorer.tsx b/web/src/routes/settings/_layout/locations/explorer.tsx
index 2e81db6..c631948 100644
--- a/web/src/routes/settings/_layout/locations/explorer.tsx
+++ b/web/src/routes/settings/_layout/locations/explorer.tsx
@@ -1,9 +1,13 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
 import { createFileRoute } from '@tanstack/react-router';
-import { FC } from 'react';
-import { FiFile, FiFolder } from 'react-icons/fi';
+import clsx from 'clsx';
+import { FC, useState } from 'react';
+import { FiChevronDown } from 'react-icons/fi';
+import { LuFolder, LuFolderOpen } from 'react-icons/lu';
 
 import { useItemItems } from '@/api/item';
-import { useLocationItems, useLocationLocations } from '@/api/locations';
+import { useLocation, useLocationItems, useLocationLocations } from '@/api/locations';
+import { ItemPreview } from '@/components/item/ItemPreview';
 
 export const Route = createFileRoute('/settings/_layout/locations/explorer')({
     component: RouteComponent,
@@ -19,7 +23,7 @@ export const ItemNode: FC<{ item_id: string }> = ({ item_id }) => {
 
     return <div className="">
         <div className="flex items-center gap-1">
-            <FiFile /> {item_id}
+            <ItemPreview item_id={item_id} variant='compact' />
         </div>
         <div className="pl-4">
             <ul>
@@ -32,33 +36,43 @@ export const ItemNode: FC<{ item_id: string }> = ({ item_id }) => {
 };
 
 export const LocationNode: FC<{ location_id: string }> = ({ location_id }) => {
+    const { data: location } = useLocation(location_id);
     const { data: locations } = useLocationLocations(location_id);
     const { data: items } = useLocationItems(location_id);
+    const [isExpanded, setIsExpanded] = useState(false);
 
     return (
-        <div>
-            <div className="flex items-center gap-1">
-                <FiFolder /> {location_id}
-            </div>
-            <div className="pl-4">
-                <ul>
-                    {locations?.map((location) => <li key={location.location_id}>
-                        <LocationNode location_id={location.location_id} />
-                    </li>)}
-                    {items?.map((item) => <li key={item.item_id}>
-                        <ItemNode item_id={item.item_id} />
-                    </li>)}
-                </ul>
-            </div>
-        </div>
+        <Collapsible.Root open={isExpanded} onOpenChange={setIsExpanded}>
+            <Collapsible.Trigger className='flex w-full cursor-pointer items-center justify-between gap-1 rounded-md px-4 py-1 hover:bg-gray-100'>
+                <div className="flex items-center gap-1">
+                    {isExpanded ? <LuFolderOpen /> : <LuFolder />} {location?.name || location_id}
+                </div>
+                <FiChevronDown className={clsx('transition-transform duration-100', isExpanded && 'rotate-180')} />
+            </Collapsible.Trigger>
+            <Collapsible.Content>
+                <div className="pl-8">
+                    <ul>
+                        {locations?.map((location) => <li key={location.location_id}>
+                            <LocationNode location_id={location.location_id} />
+                        </li>)}
+                        {items?.map((item) => <li key={item.item_id}>
+                            <ItemNode item_id={item.item_id} />
+                        </li>)}
+                    </ul>
+                </div>
+            </Collapsible.Content>
+        </Collapsible.Root>
     );
 };
 
 function RouteComponent() {
     const { data: locations } = useLocationLocations('_');
 
-    return <div className="card">
-        <ul>
+    return <div className="card space-y-2">
+        <div className="h-1 w-full border-b">
+
+        </div>
+        <ul className="space-y-1 rounded-md border p-1">
             {locations?.map((location) => <li key={location.location_id}>
                 <LocationNode location_id={location.location_id} />
             </li>)}