feat(http): render sidebar tree with folders, requests and context menus

src/main/i18n/locales/en_US/ui.json

@@ -36,7 +36,11 @@
       "label": "HTTP",
       "tooltip": "HTTP client",
       "title": "HTTP Client",
-      "untitledRequest": "Untitled request"
+      "untitledRequest": "Untitled request",
+      "empty": "No requests yet",
+      "action": {
+        "newRequest": "New request"
+      }
     },
     "tools": {
       "label": "Tools",

src/main/i18n/locales/ru_RU/ui.json

@@ -36,7 +36,11 @@
       "label": "HTTP",
       "tooltip": "HTTP-клиент",
       "title": "HTTP-клиент",
-      "untitledRequest": "Безымянный запрос"
+      "untitledRequest": "Безымянный запрос",
+      "empty": "Пока нет запросов",
+      "action": {
+        "newRequest": "Новый запрос"
+      }
     },
     "tools": {
       "label": "Инструменты",

src/renderer/components/http/HttpMethodBadge.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HttpMethod } from '~/main/types/http'
+import { cn } from '@/utils'
+import { cva } from 'class-variance-authority'
+
+interface Props {
+  method: HttpMethod
+  size?: 'xs' | 'sm'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'xs',
+})
+
+const variants = cva('font-mono font-semibold tracking-tight', {
+  variants: {
+    method: {
+      GET: 'text-emerald-600 dark:text-emerald-400',
+      POST: 'text-amber-600 dark:text-amber-400',
+      PUT: 'text-blue-600 dark:text-blue-400',
+      PATCH: 'text-violet-600 dark:text-violet-400',
+      DELETE: 'text-rose-600 dark:text-rose-400',
+      HEAD: 'text-cyan-600 dark:text-cyan-400',
+      OPTIONS: 'text-zinc-600 dark:text-zinc-400',
+    },
+    size: {
+      xs: 'text-[10px]',
+      sm: 'text-xs',
+    },
+  },
+})
+
+function shortLabel(method: HttpMethod): string {
+  return method === 'OPTIONS' ? 'OPT' : method === 'DELETE' ? 'DEL' : method
+}
+</script>
+
+<template>
+  <span
+    :class="
+      cn(variants({ method: props.method, size: props.size }), props.class)
+    "
+  >
+    {{ shortLabel(props.method) }}
+  </span>
+</template>

src/renderer/components/http/HttpSidebar.vue

@@ -1,20 +1,70 @@
 <script setup lang="ts">
+import { useHttpFolders, useHttpRequests } from '@/composables'
 import { i18n } from '@/electron'
+import { FolderPlus, Plus } from 'lucide-vue-next'
+
+const { createHttpFolderAndSelect, folderTree } = useHttpFolders()
+const { createHttpRequestAndSelect, requests } = useHttpRequests()
+
+const rootRequests = computed(() =>
+  requests.value.filter(r => r.folderId === null),
+)
+
+const isEmpty = computed(
+  () => folderTree.value.length === 0 && rootRequests.value.length === 0,
+)
+
+async function onCreateRootFolder() {
+  await createHttpFolderAndSelect()
+}
+
+async function onCreateRootRequest() {
+  await createHttpRequestAndSelect({ folderId: null })
+}
 </script>
 
 <template>
-  <div class="bg-sidebar h-full overflow-hidden">
-    <div class="flex h-full flex-col">
-      <div class="border-border flex h-9 shrink-0 items-center border-b px-3">
-        <UiText class="text-muted-foreground text-xs">
-          {{ i18n.t("spaces.http.title") }}
-        </UiText>
-      </div>
-      <div class="flex-1 overflow-auto p-2">
-        <UiText class="text-muted-foreground text-xs">
-          TODO: collections + requests
-        </UiText>
+  <div class="bg-sidebar flex h-full flex-col overflow-hidden">
+    <div
+      class="border-border flex h-9 shrink-0 items-center justify-between border-b px-3"
+    >
+      <UiText class="text-muted-foreground text-xs uppercase">
+        {{ i18n.t("spaces.http.title") }}
+      </UiText>
+      <div class="flex items-center gap-1">
+        <UiActionButton
+          :tooltip="i18n.t('spaces.http.action.newRequest')"
+          @click="onCreateRootRequest"
+        >
+          <Plus class="h-4 w-4" />
+        </UiActionButton>
+        <UiActionButton
+          :tooltip="i18n.t('action.new.folder')"
+          @click="onCreateRootFolder"
+        >
+          <FolderPlus class="h-4 w-4" />
+        </UiActionButton>
       </div>
     </div>
+    <div class="min-h-0 flex-1 overflow-y-auto py-1">
+      <UiEmptyPlaceholder
+        v-if="isEmpty"
+        :text="i18n.t('spaces.http.empty')"
+      />
+      <template v-else>
+        <HttpSidebarFolderItem
+          v-for="folder in folderTree"
+          :key="folder.id"
+          :folder="folder"
+          :depth="0"
+        />
+        <HttpSidebarRequestItem
+          v-for="request in rootRequests"
+          :key="request.id"
+          :request="request"
+          :depth="0"
+        />
+      </template>
+    </div>
   </div>
 </template>

src/renderer/components/http/HttpSidebarFolderItem.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { HttpFolderTreeItem } from '@/composables/spaces/http/useHttpFolders'
+import type { HttpRequestListItem } from '@/composables/spaces/http/useHttpRequests'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import { useHttpFolders, useHttpRequests } from '@/composables'
+import { i18n } from '@/electron'
+import { cn } from '@/utils'
+import { ChevronRight, Folder } from 'lucide-vue-next'
+
+interface Props {
+  folder: HttpFolderTreeItem
+  depth: number
+}
+
+const props = defineProps<Props>()
+
+const {
+  createHttpFolderAndSelect,
+  deleteHttpFolder,
+  renameFolderId,
+  updateHttpFolder,
+} = useHttpFolders()
+const { createHttpRequestAndSelect, requests } = useHttpRequests()
+
+const isOpen = computed(() => Boolean(props.folder.isOpen))
+const isRenaming = computed(() => renameFolderId.value === props.folder.id)
+
+const renameValue = ref(props.folder.name)
+
+watch(isRenaming, (renaming) => {
+  if (renaming) {
+    renameValue.value = props.folder.name
+  }
+})
+
+const childRequests = computed<HttpRequestListItem[]>(() =>
+  requests.value.filter(r => r.folderId === props.folder.id),
+)
+
+async function toggleOpen() {
+  await updateHttpFolder(props.folder.id, { isOpen: isOpen.value ? 0 : 1 })
+}
+
+async function commitRename() {
+  const trimmed = renameValue.value.trim()
+  renameFolderId.value = null
+  if (trimmed && trimmed !== props.folder.name) {
+    await updateHttpFolder(props.folder.id, { name: trimmed })
+  }
+}
+
+function cancelRename() {
+  renameFolderId.value = null
+}
+
+function startRename() {
+  renameFolderId.value = props.folder.id
+}
+
+async function onCreateChildFolder() {
+  await createHttpFolderAndSelect(props.folder.id)
+}
+
+async function onCreateChildRequest() {
+  await createHttpRequestAndSelect({ folderId: props.folder.id })
+  if (!isOpen.value) {
+    await updateHttpFolder(props.folder.id, { isOpen: 1 })
+  }
+}
+
+async function onDelete() {
+  await deleteHttpFolder(props.folder.id)
+}
+</script>
+
+<template>
+  <div>
+    <ContextMenu.ContextMenu>
+      <ContextMenu.ContextMenuTrigger as-child>
+        <div
+          :class="
+            cn(
+              'group flex h-7 cursor-pointer items-center gap-1 rounded px-2 text-sm',
+              'hover:bg-accent/60',
+            )
+          "
+          :style="{ paddingLeft: `${props.depth * 12 + 4}px` }"
+          @click="toggleOpen"
+          @dblclick="startRename"
+        >
+          <ChevronRight
+            class="h-3.5 w-3.5 shrink-0 transition-transform"
+            :class="{ 'rotate-90': isOpen }"
+          />
+          <Folder class="h-4 w-4 shrink-0" />
+          <input
+            v-if="isRenaming"
+            v-model="renameValue"
+            class="bg-background ml-1 flex-1 rounded border px-1 text-sm outline-none"
+            autofocus
+            @click.stop
+            @blur="commitRename"
+            @keydown.enter.prevent="commitRename"
+            @keydown.esc.prevent="cancelRename"
+          >
+          <UiText
+            v-else
+            class="ml-1 flex-1 truncate text-sm"
+          >
+            {{ props.folder.name }}
+          </UiText>
+        </div>
+      </ContextMenu.ContextMenuTrigger>
+      <ContextMenu.ContextMenuContent>
+        <ContextMenu.ContextMenuItem @click="onCreateChildRequest">
+          {{ i18n.t("spaces.http.action.newRequest") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuItem @click="onCreateChildFolder">
+          {{ i18n.t("action.new.folder") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem @click="startRename">
+          {{ i18n.t("action.rename") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem @click="onDelete">
+          {{ i18n.t("action.delete.common") }}
+        </ContextMenu.ContextMenuItem>
+      </ContextMenu.ContextMenuContent>
+    </ContextMenu.ContextMenu>
+    <div v-if="isOpen">
+      <HttpSidebarFolderItem
+        v-for="child in props.folder.children"
+        :key="child.id"
+        :folder="child"
+        :depth="props.depth + 1"
+      />
+      <HttpSidebarRequestItem
+        v-for="request in childRequests"
+        :key="request.id"
+        :request="request"
+        :depth="props.depth + 1"
+      />
+    </div>
+  </div>
+</template>