init

2026-02-02 23:00:03 +03:00
commit be8ea42808
27 changed files with 3598 additions and 0 deletions
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>web</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000 --host",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.90.20",
+    "dayjs": "^1.11.19",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -0,0 +1,19 @@
+import { useItemsQuery } from "./api/useItemsQuery";
+import { CreateItemForm } from "./components/CreateItemForm";
+import { Item } from "./components/Item";
+
+export default function App() {
+  const { data: items } = useItemsQuery();
+
+  return (
+    <div className="max-w-[1440px] mx-auto w-full py-2">
+      <h1 className="text-2xl font-semibold my-2">torrent queue</h1>
+      <CreateItemForm />
+      <div className="mt-4 flex flex-col gap-3">
+        {items?.map((item) => (
+          <Item key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/web/src/api/useCreateItemMutation.ts
+++ b/web/src/api/useCreateItemMutation.ts
@@ -0,0 +1,22 @@
+import { useMutation } from "@tanstack/react-query";
+
+export type CreateItemData = {
+  query: string;
+  category: number;
+};
+
+export const useCreateItemMutation = () => {
+  return useMutation({
+    mutationFn: async (data: CreateItemData) => {
+      const resp = await fetch("/api/items", {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const rData = await resp.json();
+      return rData;
+    },
+  });
+};
--- a/web/src/api/useDeleteItemMutation.ts
+++ b/web/src/api/useDeleteItemMutation.ts
@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+
+export const useDeleteItemMutation = () => {
+  return useMutation({
+    mutationFn: async ({ torrentId }: { torrentId: number }) => {
+      const resp = await fetch(`/api/items/${torrentId}`, {
+        method: "DELETE",
+      });
+      const data = await resp.json();
+      return data;
+    },
+  });
+};
--- a/web/src/api/useDownloadTorrentMutation.ts
+++ b/web/src/api/useDownloadTorrentMutation.ts
@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+
+export const useDownloadTorrentMutation = () => {
+  return useMutation({
+    mutationFn: async ({ torrentId }: { torrentId: number }) => {
+      const resp = await fetch(`/api/torrents/${torrentId}/download`, {
+        method: "POST",
+      });
+      const data = await resp.json();
+      return data;
+    },
+  });
+};
--- a/web/src/api/useItemTorrentsQuery.ts
+++ b/web/src/api/useItemTorrentsQuery.ts
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+
+export type ItemTorrent = {
+  id: number;
+  title: string;
+  guid: string;
+  indexer: string;
+  pubdate: string;
+  size: number;
+  downloadUrl: string;
+  seeders: number;
+  peers: number;
+  category: number;
+  hash: string | null;
+  downloaded: boolean;
+  createdAt: string;
+};
+
+export const useItemTorrentsQuery = (itemId: number, enabled = true) => {
+  return useQuery({
+    queryKey: ["items", itemId, "torrents"],
+    enabled,
+    queryFn: async () => {
+      const resp = await fetch(`/api/items/${itemId}/torrents`);
+      const data = await resp.json();
+      return data as ItemTorrent[];
+    },
+  });
+};
--- a/web/src/api/useItemsQuery.ts
+++ b/web/src/api/useItemsQuery.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+
+export type ItemDetails = {
+  id: number;
+  query: string;
+  createdAt: string;
+};
+
+export const useItemsQuery = () => {
+  return useQuery({
+    queryKey: ["items"],
+    queryFn: async () => {
+      const resp = await fetch("/api/items");
+      const data = await resp.json();
+      return data as ItemDetails[];
+    },
+  });
+};
--- a/web/src/components/CreateItemForm.tsx
+++ b/web/src/components/CreateItemForm.tsx
@@ -0,0 +1,60 @@
+import { Controller, useForm } from "react-hook-form";
+import {
+  type CreateItemData,
+  useCreateItemMutation,
+} from "../api/useCreateItemMutation";
+import { useQueryClient } from "@tanstack/react-query";
+import { categories } from "../lib/categories";
+
+export const CreateItemForm = () => {
+  const queryClient = useQueryClient();
+  const createItemMutation = useCreateItemMutation();
+
+  const form = useForm<CreateItemData>({
+    defaultValues: {
+      query: "",
+      category: 5000,
+    },
+  });
+
+  const onSubmit = form.handleSubmit((data) => {
+    createItemMutation.mutate(data, {
+      onSuccess() {
+        queryClient.invalidateQueries({ queryKey: ["items"] });
+      },
+      onSettled() {
+        form.reset();
+      },
+    });
+  });
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        type="text"
+        placeholder="query"
+        className="w-full"
+        {...form.register("query", {
+          required: true,
+        })}
+      />
+      <Controller
+        control={form.control}
+        name="category"
+        render={({ field }) => (
+          <select
+            {...field}
+            onChange={(e) => field.onChange(parseInt(e.target.value))}
+          >
+            {Object.entries(categories).map(([id, label]) => (
+              <option key={id} value={id}>
+                {label}
+              </option>
+            ))}
+          </select>
+        )}
+      />
+      <button type="submit">Add Item</button>
+    </form>
+  );
+};
--- a/web/src/components/Item.tsx
+++ b/web/src/components/Item.tsx
@@ -0,0 +1,141 @@
+import { useState } from "react";
+import type { ItemDetails } from "../api/useItemsQuery";
+import { useItemTorrentsQuery } from "../api/useItemTorrentsQuery";
+import {
+  CaretDownIcon,
+  CaretUpIcon,
+  CheckCircleIcon,
+  DownloadSimpleIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import { useDownloadTorrentMutation } from "../api/useDownloadTorrentMutation";
+import { useDeleteItemMutation } from "../api/useDeleteItemMutation";
+import { useQueryClient } from "@tanstack/react-query";
+import dayjs from "dayjs";
+
+export type ItemProps = {
+  item: ItemDetails;
+};
+
+export const Item = ({ item }: ItemProps) => {
+  const queryClient = useQueryClient();
+
+  const [open, setOpen] = useState(false);
+
+  const { data: torrents } = useItemTorrentsQuery(item.id, open);
+
+  const deleteMutation = useDeleteItemMutation();
+  const downloadMutation = useDownloadTorrentMutation();
+
+  const Icon = open ? CaretUpIcon : CaretDownIcon;
+
+  const handleDownloadTorrent = (torrentId: number) => {
+    downloadMutation.mutate({ torrentId });
+  };
+
+  const handleDelete = () => {
+    if (!confirm("Do you want to delete this item?")) return;
+
+    deleteMutation.mutate(
+      {
+        torrentId: item.id,
+      },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries({ queryKey: ["items"] });
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="border-t border-b border-neutral-900">
+      <div
+        className="flex justify-between items-center py-1 group cursor-pointer"
+        tabIndex={0}
+        role="button"
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span className="group-hover:text-neutral-500">{item.query}</span>
+        <Icon size={24} />
+      </div>
+      {open && (
+        <div>
+          <div className="flex mb-2">
+            <button
+              className="cursor-pointer flex items-center gap-1 text-[#b00420]"
+              onClick={handleDelete}
+            >
+              <TrashIcon size={20} /> Delete item
+            </button>
+          </div>
+          {torrents && torrents.length > 0 ? (
+            torrents?.map((torrent) => (
+              <div
+                key={torrent.id}
+                className="flex justify-between items-center hover:bg-neutral-200"
+              >
+                <div className="flex items-center gap-2">
+                  <span>
+                    <a
+                      href={torrent.guid}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {torrent.title}
+                    </a>{" "}
+                    [{formatCategory(torrent.category)}] [{torrent.indexer}]
+                  </span>
+                  {torrent.downloaded && (
+                    <span title="Torrent files downloaded">
+                      <CheckCircleIcon size={20} color="green" />
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-1">
+                  <span>Seeds: {torrent.seeders}</span>
+                  <span>Peers: {torrent.peers}</span>
+                  <span>
+                    PubDate: {dayjs(torrent.pubdate).format("DD.MM.YYYY")} at{" "}
+                    {dayjs(torrent.pubdate).format("HH:mm")}
+                  </span>
+                  <button
+                    className="cursor-pointer"
+                    onClick={() => handleDownloadTorrent(torrent.id)}
+                  >
+                    <DownloadSimpleIcon size={24} />
+                  </button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <span>No torrents yet</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const formatCategory = (category: number): string => {
+  switch (category) {
+    case 1000:
+      return "Console";
+    case 2000:
+      return "Movies";
+    case 3000:
+      return "Audio";
+    case 4000:
+      return "PC";
+    case 5000:
+      return "TV";
+    case 6000:
+      return "XXX";
+    case 7000:
+      return "Books";
+    case 8000:
+      return "Other";
+    default:
+      return "";
+  }
+};
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
--- a/web/src/lib/categories.ts
+++ b/web/src/lib/categories.ts
@@ -0,0 +1,10 @@
+export const categories = {
+  1000: "Console",
+  2000: "Movies",
+  3000: "Audio",
+  4000: "PC",
+  5000: "TV",
+  6000: "XXX",
+  7000: "Books",
+  8000: "Other",
+};
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);
--- a/web/tsconfig.app.json
+++ b/web/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler']],
+      },
+    }),
+  ],
+})