feat: modulo de proyectos frontend (Next 16 + Bootstrap 5)

src/app/issues/page.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { api } from "@/lib/api";
+import type { Issue, IssueInput, IssueStatus } from "@/lib/types";
+import { STATUS_META, STATUS_ORDER } from "@/lib/meta";
+import { useIssues } from "@/hooks/useIssues";
+import { AppShell } from "@/components/layout/AppShell";
+import { IssueList } from "@/components/issues/IssueList";
+
+/**
+ * Página principal de issues.
+ *
+ * Agrupa por estado y permite filtrar. Acepta `?new=1` en la URL para abrir
+ * el formulario de creación directamente (usado por el botón «Nuevo issue» y
+ * por la palette de comandos).
+ */
+export default function IssuesPage() {
+  return (
+    <Suspense fallback={null}>
+      <IssuesPageInner />
+    </Suspense>
+  );
+}
+
+function IssuesPageInner() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [statusFilter, setStatusFilter] = useState<IssueStatus[]>([]);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [creating, setCreating] = useState(false);
+  const [title, setTitle] = useState("");
+
+  // Abrir el formulario cuando la URL lo indica.
+  useEffect(() => {
+    if (searchParams.get("new") === "1") {
+      setCreating(true);
+      // Quitar el parámetro para no reabrirlo al navegar dentro de la página.
+      router.replace("/issues");
+    }
+  }, [searchParams, router]);
+
+  const { issues, loading } = useIssues(
+    statusFilter.length ? { status: statusFilter } : undefined,
+    refreshKey,
+  );
+
+  function toggleStatus(status: IssueStatus) {
+    setStatusFilter((current) =>
+      current.includes(status)
+        ? current.filter((s) => s !== status)
+        : [...current, status],
+    );
+  }
+
+  async function handleCreate(event: React.FormEvent) {
+    event.preventDefault();
+    const trimmed = title.trim();
+    if (!trimmed) return;
+
+    const input: IssueInput = { title: trimmed, status: "todo" };
+    await api.createIssue(input);
+
+    setTitle("");
+    setCreating(false);
+    setRefreshKey((key) => key + 1);
+  }
+
+  const actions = (
+    <div className="d-flex align-items-center gap-2">
+      {STATUS_ORDER.map((status) => (
+        <button
+          key={status}
+          type="button"
+          className={`filter-chip${statusFilter.includes(status) ? " active" : ""}`}
+          onClick={() => toggleStatus(status)}
+        >
+          <span
+            className="label-dot"
+            style={{ background: STATUS_META[status].color }}
+          />
+          {STATUS_META[status].label}
+        </button>
+      ))}
+    </div>
+  );
+
+  return (
+    <AppShell title="Issues" actions={actions}>
+      {creating && (
+        <div className="border-bottom p-3" style={{ background: "var(--lp-bg-elevated)" }}>
+          <form onSubmit={handleCreate}>
+            <input
+              autoFocus
+              className="issue-title-input"
+              style={{ fontSize: 15 }}
+              placeholder="Issue title…"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Escape") setCreating(false);
+              }}
+            />
+            <div className="d-flex gap-2 mt-3">
+              <button type="submit" className="btn btn-accent btn-sm" disabled={!title.trim()}>
+                Crear issue
+              </button>
+              <button
+                type="button"
+                className="btn btn-lp btn-sm"
+                onClick={() => setCreating(false)}
+              >
+                Cancelar
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {!creating && (
+        <div className="filter-bar">
+          <button type="button" className="filter-chip" onClick={() => setCreating(true)}>
+            <i className="bx bx-plus" />
+            Nuevo issue
+          </button>
+
+          {statusFilter.length > 0 && (
+            <button
+              type="button"
+              className="filter-chip"
+              onClick={() => setStatusFilter([])}
+            >
+              <i className="bx bx-x" />
+              Limpiar filtros
+            </button>
+          )}
+        </div>
+      )}
+
+      <IssueList
+        issues={issues}
+        loading={loading}
+        groupBy="status"
+        emptyTitle={
+          statusFilter.length > 0 ? "Ningún issue coincide con los filtros" : "No hay issues aquí"
+        }
+        emptyDescription={
+          statusFilter.length > 0
+            ? "Prueba a ampliar la selección de estados."
+            : "Crea un nuevo issue para empezar."
+        }
+      />
+    </AppShell>
+  );
+}