Add folder model

src-web/components/Sidebar.tsx

@@ -154,11 +154,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
 
   return (
     <div aria-hidden={hidden} className="h-full">
-      <VStack
-        as="ul"
-        role="menu"
-        aria-orientation="vertical"
-        dir="ltr"
+      <aside
         ref={sidebarRef}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -175,7 +171,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
           onSelect={handleSelect}
           onClearSelected={handleClearSelected}
         />
-      </VStack>
+      </aside>
     </div>
   );
 });
@@ -242,7 +238,7 @@ function SidebarItems({
   );
 
   return (
-    <>
+    <VStack as="ul" role="menu" aria-orientation="vertical" dir="ltr">
       {requests.map((r, i) => (
         <Fragment key={r.id}>
           {hoveredIndex === i && <DropMarker />}
@@ -259,7 +255,25 @@ function SidebarItems({
         </Fragment>
       ))}
       {hoveredIndex === requests.length && <DropMarker />}
-    </>
+      <VStack as="ul" role="menu" aria-orientation="vertical" dir="ltr" className="pl-3">
+        {requests.slice(0, 1).map((r, i) => (
+          <Fragment key={r.id}>
+            {hoveredIndex === i && <DropMarker />}
+            <DraggableSidebarItem
+              key={r.id}
+              selected={selectedIndex === i}
+              requestId={r.id}
+              requestName={r.name}
+              onMove={handleMove}
+              onEnd={handleEnd}
+              useProminentStyles={focused}
+              onSelect={onSelect}
+            />
+          </Fragment>
+        ))}
+        {hoveredIndex === requests.length && <DropMarker />}
+      </VStack>
+    </VStack>
   );
 }
 

src-web/hooks/useFolders.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { Folder, HttpRequest } from '../lib/models';
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+
+export function foldersQueryKey({ workspaceId }: { workspaceId: string }) {
+  return ['folders', { workspaceId }];
+}
+
+export function useFolders() {
+  const workspaceId = useActiveWorkspaceId();
+  return (
+    useQuery({
+      enabled: workspaceId != null,
+      queryKey: foldersQueryKey({ workspaceId: workspaceId ?? 'n/a' }),
+      queryFn: async () => {
+        if (workspaceId == null) return [];
+        return (await invoke('list_folders', { workspaceId })) as Folder[];
+      },
+    }).data ?? []
+  );
+}

src-web/lib/models.ts

@@ -29,6 +29,14 @@ export interface EnvironmentVariable {
   enabled?: boolean;
 }
 
+export interface Folder extends BaseModel {
+  readonly workspaceId: string;
+  readonly model: 'folder';
+  folderId: string | null;
+  sortPriority: number;
+  name: string;
+}
+
 export interface Environment extends BaseModel {
   readonly workspaceId: string;
   readonly model: 'environment';
@@ -45,6 +53,7 @@ export interface HttpHeader {
 export interface HttpRequest extends BaseModel {
   readonly workspaceId: string;
   readonly model: 'http_request';
+  folderId: string | null;
   sortPriority: number;
   name: string;
   url: string;