-
- Queue pressure
-
-
-
- Kind
- Topic
- Priority
-
-
-
- {demoTickets.map((ticket) => (
-
-
- {ticket.kind}
-
- {ticket.topic}
- {ticket.priority}
-
- ))}
-
-
-
-
-
- Organizer rhythm
-
-
-
-
-
-
Every 15 minutes
-
- Clear escalated mentor/tech tickets before they age into
- event-wide blockers.
-
-
-
Live
-
-
-
-
-
-
Before judging
-
- Export teams and verify every group has a demo queue status.
-
-
-
Ready
-
+
+
+
+
+
+ {session
+ ? `Connected as ${session.user.globalName ?? session.user.username}`
+ : "Discord is not connected"}
+
+
+ Only servers you own or can manage are shown. Permissions are
+ checked again before every change.
+
+
+
+
+
Servers you manage
+ {session?.guilds.length ?? 0}
-
-
+
PipHackLup installed
+
+ {botApiReady && !installationStatusError ? installedCount : "—"}
+
+
+
+
Bot management
+ {authReady && botApiReady ? "Available" : "Needs setup"}
+
+
+
+
+
);
}
diff --git a/apps/web/app/dev-fixtures/control-room/page.tsx b/apps/web/app/dev-fixtures/control-room/page.tsx
new file mode 100644
index 0000000..4b17411
--- /dev/null
+++ b/apps/web/app/dev-fixtures/control-room/page.tsx
@@ -0,0 +1,102 @@
+import { CheckCircle2 } from "lucide-react";
+import { notFound } from "next/navigation";
+import { AppShell } from "@/components/AppShell";
+import { PageHeader } from "@/components/PageHeader";
+import {
+ ServerManager,
+ type ManagedServerView,
+} from "@/components/ServerManager";
+import type { DiscordSession } from "@/lib/discord-auth";
+
+const session: DiscordSession = {
+ user: {
+ id: "1512918151313231983",
+ username: "eventorganizer",
+ globalName: "Event Organizer",
+ },
+ guilds: [
+ {
+ id: "1512918151313231984",
+ name: "North Star Hackathon",
+ isOwner: true,
+ permissions: "32",
+ canManage: true,
+ },
+ {
+ id: "1512918151313231985",
+ name: "Weekend Builders",
+ isOwner: false,
+ permissions: "32",
+ canManage: true,
+ },
+ {
+ id: "1512918151313231986",
+ name: "Campus Demo Day",
+ isOwner: true,
+ permissions: "32",
+ canManage: true,
+ },
+ ],
+ issuedAt: Date.now(),
+};
+
+const servers: ManagedServerView[] = session.guilds.map((guild, index) => ({
+ ...guild,
+ installed: index === 0 ? true : index === 1 ? false : null,
+ installUrl:
+ "https://discord.com/oauth2/authorize?client_id=1512918151313231983&scope=bot+applications.commands",
+}));
+
+export default function ControlRoomFixture() {
+ assertDevelopmentFixture();
+ return (
+
+
+
+
+
+ Connected as Event Organizer
+
+ Only servers you own or can manage are shown. Permissions are
+ checked again before every change.
+
+
+
+
+
Servers you manage
+ 3
+
+
+
PipHackLup installed
+ 1
+
+
+
Bot management
+ Available
+
+
+
+
+
+ );
+}
+
+function assertDevelopmentFixture(): void {
+ if (
+ process.env.NODE_ENV !== "development" ||
+ process.env.PIPHACKLUP_UI_TEST_MODE !== "1"
+ ) {
+ notFound();
+ }
+}
diff --git a/apps/web/app/dev-fixtures/training/page.tsx b/apps/web/app/dev-fixtures/training/page.tsx
new file mode 100644
index 0000000..430b5fa
--- /dev/null
+++ b/apps/web/app/dev-fixtures/training/page.tsx
@@ -0,0 +1,98 @@
+import { BookOpenCheck } from "lucide-react";
+import { notFound } from "next/navigation";
+import type {
+ HackathonKnowledgeEntry,
+ KnowledgeAssistantSettings,
+} from "@piphacklup/core";
+import { AppShell } from "@/components/AppShell";
+import { PageHeader } from "@/components/PageHeader";
+import { TrainingConsole } from "@/app/training/TrainingConsole";
+import type { DiscordSession, ManagedDiscordGuild } from "@/lib/discord-auth";
+
+const guild: ManagedDiscordGuild = {
+ id: "1512918151313231984",
+ name: "North Star Hackathon",
+ isOwner: true,
+ permissions: "32",
+ canManage: true,
+};
+
+const session: DiscordSession = {
+ user: {
+ id: "1512918151313231983",
+ username: "eventorganizer",
+ globalName: "Event Organizer",
+ },
+ guilds: [guild],
+ issuedAt: Date.now(),
+};
+
+const entries: HackathonKnowledgeEntry[] = [
+ {
+ id: "know_fixture01",
+ guildId: guild.id,
+ title: "Where is participant check-in?",
+ answer: "Participant check-in is beside the main auditorium from 8:00 AM.",
+ tags: ["check-in", "registration"],
+ escalationTarget: "none",
+ createdBy: session.user.id,
+ createdAt: "2026-08-09T12:00:00.000Z",
+ updatedAt: "2026-08-09T12:00:00.000Z",
+ },
+];
+
+const settings: KnowledgeAssistantSettings = {
+ minConfidence: 45,
+ publicAnswers: true,
+};
+
+export default async function TrainingFixture({
+ searchParams,
+}: Readonly<{
+ searchParams: Promise<{ installation?: string }>;
+}>) {
+ assertDevelopmentFixture();
+ const { installation } = await searchParams;
+ const botInstallation = installation === "unknown" ? null : false;
+ return (
+
+
+
+ 1 saved answer
+
+ Changes apply only to North Star Hackathon. PipHackLup filters
+ instruction-override attempts before saving them.
+
+
+
+ {botInstallation === null
+ ? "Install status unavailable"
+ : "Bot not installed"}
+
+
+
+ );
+}
+
+function assertDevelopmentFixture(): void {
+ if (
+ process.env.NODE_ENV !== "development" ||
+ process.env.PIPHACKLUP_UI_TEST_MODE !== "1"
+ ) {
+ notFound();
+ }
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index a9fee06..0e64c6c 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -10,8 +10,8 @@
--button-text: #334155;
--button-hover-bg: #eef6fb;
--nav-text: #475569;
- --nav-bg: rgba(255, 255, 255, 0.72);
- --nav-border: rgba(47, 143, 216, 0.12);
+ --nav-bg: transparent;
+ --nav-border: transparent;
--nav-hover-bg: #eef6fb;
--nav-active-bg: #e0f2fe;
--nav-active-border: #8bd3ec;
@@ -49,6 +49,18 @@ html[data-dashboard-theme="dark"] .theme-label-light {
box-sizing: border-box;
}
+.visually-hidden {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
html,
body {
margin: 0;
@@ -89,8 +101,8 @@ textarea {
--button-text: #334155;
--button-hover-bg: #eef6fb;
--nav-text: #475569;
- --nav-bg: rgba(255, 255, 255, 0.72);
- --nav-border: rgba(47, 143, 216, 0.12);
+ --nav-bg: transparent;
+ --nav-border: transparent;
--nav-hover-bg: #eef6fb;
--nav-active-bg: #e0f2fe;
--nav-active-border: #8bd3ec;
@@ -120,10 +132,10 @@ html[data-dashboard-theme="dark"] .shell {
--button-text: #d9f7ff;
--button-hover-bg: #123651;
--nav-text: #b7d6e4;
- --nav-bg: rgba(13, 42, 66, 0.58);
- --nav-border: rgba(142, 231, 255, 0.11);
+ --nav-bg: transparent;
+ --nav-border: transparent;
--nav-hover-bg: #102f49;
- --nav-active-bg: linear-gradient(135deg, #153f5c, #0d2a42);
+ --nav-active-bg: #102f49;
--nav-active-border: #2f8fd8;
--nav-active-text: #f8f4df;
--field-bg: #071a2b;
@@ -135,6 +147,8 @@ html[data-dashboard-theme="dark"] .shell {
}
.sidebar {
+ display: flex;
+ flex-direction: column;
min-width: 0;
border-right: 1px solid var(--line);
background: var(--sidebar);
@@ -153,6 +167,7 @@ html[data-dashboard-theme="dark"] .shell {
display: flex;
align-items: center;
gap: 10px;
+ min-height: 44px;
font-weight: 800;
color: var(--ink);
}
@@ -162,11 +177,12 @@ html[data-dashboard-theme="dark"] .shell {
width: 36px;
height: 36px;
place-items: center;
- border: 1px solid #a8dcf0;
- border-radius: 8px;
- background: linear-gradient(135deg, #dff7ff, #2f8fd8 58%, #14213d);
+ border: 2px solid #8bd3ec;
+ border-radius: 7px;
+ background: #1e78b5;
color: white;
font-weight: 900;
+ box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.nav {
@@ -176,74 +192,77 @@ html[data-dashboard-theme="dark"] .shell {
margin-top: 26px;
}
-.nav a {
- position: relative;
+.nav a,
+.nav-more summary {
display: flex;
align-items: center;
gap: 10px;
- min-height: 42px;
+ min-height: 44px;
border: 1px solid var(--nav-border);
border-radius: 8px;
background: var(--nav-bg);
padding: 0 12px;
color: var(--nav-text);
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
- overflow: hidden;
- transform: translate3d(0, 0, 0);
+ box-shadow: none;
+ list-style: none;
+ cursor: pointer;
transition:
background 180ms ease,
border-color 180ms ease,
- box-shadow 180ms ease,
- color 180ms ease,
- transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.nav a::before {
- position: absolute;
- inset: 0;
- content: "";
- background: radial-gradient(
- circle at 18% 20%,
- rgba(255, 255, 255, 0.46),
- transparent 34%
- );
- opacity: 0;
- transition: opacity 180ms ease;
+ color 180ms ease;
}
-.nav a svg,
-.nav a span {
- position: relative;
- z-index: 1;
+.nav-more summary::-webkit-details-marker {
+ display: none;
}
-.nav a:hover {
+.nav a:hover,
+.nav-more summary:hover {
background: var(--nav-hover-bg);
color: var(--ink);
- box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
- transform: translateY(-2px) scale(1.012);
-}
-
-.nav a:hover::before,
-.nav a.active::before {
- opacity: 1;
}
-.nav a:active {
- transform: translateY(0) scale(0.985);
+.nav a:active,
+.nav-more summary:active {
+ background: var(--soft-panel);
}
.nav a.active {
border-color: var(--nav-active-border);
background: var(--nav-active-bg);
color: var(--nav-active-text);
- box-shadow:
- 0 14px 28px rgba(47, 143, 216, 0.2),
- inset 0 1px 0 rgba(255, 255, 255, 0.24);
+ box-shadow: inset 3px 0 0 var(--blue);
}
.nav a.active svg {
- filter: drop-shadow(0 0 8px rgba(87, 199, 212, 0.45));
+ color: var(--blue);
+}
+
+.nav-more {
+ position: relative;
+}
+
+.nav-more-menu {
+ position: absolute;
+ z-index: 30;
+ right: 0;
+ bottom: calc(100% + 6px);
+ display: grid;
+ gap: 5px;
+ width: 210px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--panel);
+ padding: 7px;
+ box-shadow: 0 16px 44px rgba(2, 6, 23, 0.2);
+}
+
+.nav-more:not([open]) .nav-more-menu {
+ display: none;
+}
+
+.mobile-nav-only {
+ display: none !important;
}
.main {
@@ -253,7 +272,7 @@ html[data-dashboard-theme="dark"] .shell {
.page-surface {
min-width: 0;
- animation: page-settle 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+ animation: page-settle 160ms ease-out;
transform-origin: 50% 18px;
}
@@ -299,7 +318,7 @@ html[data-dashboard-theme="dark"] .shell {
justify-content: center;
gap: 8px;
min-width: 0;
- min-height: 38px;
+ min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--button-bg);
@@ -320,12 +339,46 @@ html[data-dashboard-theme="dark"] .shell {
.button:hover {
background: var(--button-hover-bg);
color: var(--ink);
- box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
- transform: translateY(-1px);
+ box-shadow: none;
}
.button:active {
- transform: translateY(0) scale(0.98);
+ transform: translateY(1px);
+}
+
+.button:disabled {
+ opacity: 0.56;
+ cursor: not-allowed;
+ box-shadow: none;
+ transform: none;
+}
+
+.button.danger {
+ border-color: #be123c;
+ background: #be123c;
+ color: white;
+}
+
+.button.danger:hover {
+ border-color: #e11d48;
+ background: #e11d48;
+ color: white;
+}
+
+.button.danger-ghost {
+ border-color: color-mix(in srgb, var(--rose) 38%, var(--line));
+ color: var(--rose);
+}
+
+.button.danger-ghost:hover {
+ border-color: var(--rose);
+ background: color-mix(in srgb, var(--rose) 10%, var(--panel));
+ color: var(--rose);
+}
+
+:where(a, button, input, select, textarea):focus-visible {
+ outline: 3px solid color-mix(in srgb, var(--blue) 70%, white);
+ outline-offset: 3px;
}
.button.primary {
@@ -335,52 +388,44 @@ html[data-dashboard-theme="dark"] .shell {
}
.button.primary:hover {
- border-color: #2f8fd8;
- background: #2f8fd8;
+ border-color: #176a9f;
+ background: #176a9f;
color: white;
}
+.shell[data-theme="dark"] .button.danger-ghost,
+html[data-dashboard-theme="dark"] .button.danger-ghost {
+ color: #ff9db2;
+}
+
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
- min-height: 38px;
+ min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
- background:
- radial-gradient(
- circle at 18% 20%,
- rgba(255, 255, 255, 0.3),
- transparent 34%
- ),
- var(--button-bg);
+ background: var(--button-bg);
color: var(--button-text);
- box-shadow:
- 0 10px 22px rgba(47, 143, 216, 0.12),
- inset 0 1px 0 rgba(255, 255, 255, 0.18);
+ box-shadow: none;
font-weight: 800;
cursor: pointer;
transition:
background 180ms ease,
border-color 180ms ease,
- box-shadow 180ms ease,
- color 180ms ease,
- transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+ color 180ms ease;
}
.theme-toggle:hover {
background: var(--button-hover-bg);
color: var(--ink);
- box-shadow:
- 0 14px 26px rgba(47, 143, 216, 0.18),
- inset 0 1px 0 rgba(255, 255, 255, 0.24);
- transform: translateY(-1px) scale(1.01);
+ box-shadow: none;
}
.theme-toggle:active {
- transform: translateY(0) scale(0.985);
+ transform: translateY(1px);
}
.grid {
@@ -434,6 +479,7 @@ html[data-dashboard-theme="dark"] .shell {
.table {
width: 100%;
+ min-width: 680px;
border-collapse: collapse;
table-layout: fixed;
font-size: 14px;
@@ -547,6 +593,139 @@ html[data-dashboard-theme="dark"] .shell {
margin-top: 16px;
}
+.training-context {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ gap: 12px;
+ align-items: center;
+ border-block: 1px solid var(--line);
+ padding: 14px 0;
+}
+
+.training-context > svg {
+ color: var(--green);
+}
+
+.training-context > div {
+ display: grid;
+ gap: 3px;
+}
+
+.training-context strong {
+ color: var(--ink);
+}
+
+.training-context span:not(.badge) {
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.45;
+}
+
+.training-notice {
+ grid-column: 1 / -1;
+ border-left: 3px solid var(--blue);
+ border-radius: 4px;
+ background: var(--status-bg);
+ padding: 10px 12px;
+ color: var(--foreground);
+ font-size: 13px;
+ font-weight: 700;
+}
+
+.training-notice.error {
+ border-color: var(--rose);
+ background: color-mix(in srgb, var(--rose) 9%, var(--panel));
+}
+
+.training-help,
+.field-help {
+ margin: -5px 0 2px;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.5;
+}
+
+.field-help {
+ margin: 0;
+ border-left: 2px solid var(--amber);
+ padding-left: 9px;
+}
+
+.training-library {
+ display: grid;
+ gap: 10px;
+}
+
+.training-library article {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 14px;
+ align-items: start;
+ border-top: 1px solid var(--line);
+ padding-top: 13px;
+}
+
+.training-library article:first-child {
+ border-top: 0;
+ padding-top: 0;
+}
+
+.training-library h3,
+.training-library p {
+ margin: 0;
+}
+
+.training-library h3 {
+ color: var(--ink);
+ font-size: 15px;
+}
+
+.training-library p {
+ margin-top: 4px;
+ color: var(--answer-text);
+ line-height: 1.5;
+}
+
+.training-delete-confirm {
+ display: grid;
+ gap: 9px;
+ width: min(320px, 100%);
+ border: 1px solid color-mix(in srgb, var(--rose) 36%, var(--line));
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--rose) 7%, var(--panel));
+ padding: 11px;
+}
+
+.training-delete-confirm > p {
+ margin: 0;
+ color: var(--foreground);
+ font-size: 12px;
+ line-height: 1.45;
+}
+
+.training-delete-confirm > div {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 7px;
+}
+
+.training-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ margin-top: 9px;
+}
+
+.training-tags span {
+ border: 1px solid var(--line);
+ border-radius: 999px;
+ background: var(--soft-panel);
+ padding: 3px 8px;
+ color: var(--muted);
+ font-size: 11px;
+ font-weight: 700;
+}
+
.training-panel {
display: grid;
align-content: start;
@@ -571,6 +750,7 @@ html[data-dashboard-theme="dark"] .shell {
.field select,
.field textarea {
width: 100%;
+ min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--field-bg);
@@ -643,9 +823,11 @@ html[data-dashboard-theme="dark"] .shell {
}
.toggle-row {
+ min-height: 44px;
color: var(--button-text);
font-size: 14px;
font-weight: 700;
+ cursor: pointer;
}
.toggle-row input {
@@ -667,109 +849,1082 @@ html[data-dashboard-theme="dark"] .shell {
line-height: 1.5;
}
-.button.full {
- width: 100%;
+.skip-link {
+ position: fixed;
+ z-index: 100;
+ top: 10px;
+ left: 10px;
+ display: flex;
+ align-items: center;
+ min-height: 44px;
+ border-radius: 8px;
+ background: var(--ink);
+ padding: 10px 14px;
+ color: var(--panel);
+ font-weight: 800;
+ transform: translateY(-160%);
}
-@media (max-width: 900px) {
- .shell {
- grid-template-columns: 1fr;
- }
-
- .sidebar {
- position: sticky;
- top: 0;
- z-index: 10;
- width: 100%;
- overflow: hidden;
- border-right: 0;
- border-bottom: 1px solid var(--line);
- }
-
- .sidebar-head {
- grid-template-columns: minmax(0, 1fr) auto;
- align-items: center;
- }
-
- .theme-toggle {
- width: auto;
- padding-inline: 12px;
- }
-
- .nav {
- grid-auto-flow: column;
- grid-auto-columns: max-content;
- width: 100%;
- max-width: 100%;
- overflow-x: auto;
- margin-top: 14px;
- padding-bottom: 2px;
- }
-
- .nav a {
- min-height: 38px;
- white-space: nowrap;
- }
+.skip-link:focus {
+ transform: translateY(0);
+}
- .topbar {
- display: grid;
- }
+.server-switcher {
+ display: grid;
+ gap: 7px;
+ margin-top: 18px;
+}
- .grid.metrics,
- .grid.two,
- .training-grid,
- .status-cards,
- .form-grid {
- grid-template-columns: 1fr;
- }
+.server-switcher > span {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 800;
+ text-transform: uppercase;
+}
- .training-panel.wide {
- grid-column: auto;
- }
+.server-switcher select {
+ width: 100%;
+ min-height: 44px;
+ border: 1px solid var(--nav-active-border);
+ border-radius: 8px;
+ background: var(--field-bg);
+ padding: 0 34px 0 11px;
+ color: var(--ink);
+ font-weight: 800;
}
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 1ms !important;
- scroll-behavior: auto !important;
- transition-duration: 1ms !important;
- }
+.account-dock {
+ display: grid;
+ gap: 10px;
+ margin-top: auto;
+ padding-top: 20px;
}
-@keyframes page-settle {
- from {
- opacity: 0;
- transform: translateY(8px) scale(0.992);
- }
+.account-identity {
+ display: grid;
+ grid-template-columns: 36px minmax(0, 1fr);
+ gap: 10px;
+ align-items: center;
+ border-top: 1px solid var(--line);
+ padding-top: 16px;
+}
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
+.account-identity.signed-out {
+ color: var(--muted);
}
-.site {
- min-height: 100vh;
- background: #061423;
- color: white;
+.account-identity > span:last-child {
+ display: grid;
+ min-width: 0;
}
-.hero {
- position: relative;
- min-height: 88vh;
+.account-identity strong,
+.account-identity small {
overflow: hidden;
- background: #061423;
- color: white;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
-.hero-bg {
- position: absolute;
- inset: 0;
- background:
- linear-gradient(90deg, rgba(6, 20, 35, 0.92), rgba(6, 20, 35, 0.28)),
- url("/piphacklup-site-hero.png") center / cover no-repeat;
+.account-identity strong {
+ color: var(--ink);
+ font-size: 13px;
+}
+
+.account-identity small {
+ margin-top: 2px;
+ color: var(--muted);
+ font-size: 11px;
+}
+
+.account-action,
+.account-dock form {
+ width: 100%;
+}
+
+.auth-gate {
+ display: grid;
+ justify-items: start;
+ align-content: center;
+ max-width: 720px;
+ min-height: calc(100vh - 48px);
+ margin: 0 auto;
+ padding: 48px 24px;
+}
+
+.auth-gate-mark,
+.danger-mark {
+ display: grid;
+ width: 54px;
+ height: 54px;
+ place-items: center;
+ border: 1px solid var(--nav-active-border);
+ border-radius: 12px;
+ background: var(--nav-active-bg);
+ color: var(--nav-active-text);
+}
+
+.auth-gate h1 {
+ max-width: 620px;
+ margin: 4px 0 12px;
+ color: var(--ink);
+ font-size: clamp(32px, 5vw, 52px);
+ line-height: 1.05;
+}
+
+.auth-gate > p:not(.eyebrow, .auth-alert) {
+ max-width: 620px;
+ margin: 0 0 22px;
+ color: var(--muted);
+ font-size: 17px;
+ line-height: 1.6;
+}
+
+.auth-gate > small {
+ max-width: 560px;
+ margin-top: 16px;
+ color: var(--muted);
+ line-height: 1.5;
+}
+
+.auth-alert,
+.dependency-alert {
+ width: 100%;
+ max-width: 620px;
+ border: 1px solid color-mix(in srgb, var(--amber) 46%, var(--line));
+ border-radius: 8px;
+ background: color-mix(in srgb, var(--amber) 9%, var(--panel));
+ padding: 12px 14px;
+ color: var(--foreground);
+}
+
+.dependency-alert {
+ display: grid;
+ gap: 4px;
+}
+
+.dependency-alert span {
+ color: var(--muted);
+ font-size: 13px;
+}
+
+.mini-status {
+ display: flex;
+ align-items: flex-start;
+ gap: 9px;
+ line-height: 1.45;
+}
+
+.mini-status svg {
+ flex: 0 0 auto;
+ color: var(--blue);
+}
+
+.server-manager-section {
+ margin-top: 24px;
+}
+
+.server-manager-filters {
+ display: grid;
+ grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px);
+ gap: 10px;
+ margin-bottom: 14px;
+}
+
+.server-search,
+.server-filter {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-height: 44px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--field-bg);
+ padding: 0 11px;
+ color: var(--muted);
+}
+
+.server-search input,
+.server-filter select {
+ width: 100%;
+ min-width: 0;
+ min-height: 42px;
+ border: 0;
+ outline: 0;
+ background: transparent;
+ color: var(--ink);
+}
+
+.server-search:focus-within,
+.server-filter:focus-within {
+ border-color: var(--blue);
+ outline: 3px solid color-mix(in srgb, var(--blue) 70%, white);
+ outline-offset: 3px;
+}
+
+.server-filter > span {
+ flex: 0 0 auto;
+ font-size: 12px;
+ font-weight: 800;
+}
+
+.filtered-empty {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ border: 1px dashed var(--line);
+ border-radius: 8px;
+ margin-top: 14px;
+ padding: 16px;
+ color: var(--muted);
+}
+
+.workspace-state,
+.workspace-restoring,
+.friendly-empty,
+.setup-command-card {
+ display: flex;
+ align-items: flex-start;
+ gap: 14px;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--panel);
+ padding: 22px;
+ box-shadow: var(--shadow-soft);
+}
+
+.workspace-state > svg,
+.workspace-restoring > svg,
+.friendly-empty > svg,
+.setup-command-card > svg {
+ flex: 0 0 auto;
+ color: var(--blue);
+}
+
+.workspace-state > div,
+.workspace-restoring > div,
+.friendly-empty > div,
+.setup-command-card > div {
+ flex: 1;
+ min-width: 0;
+}
+
+.workspace-state h2,
+.workspace-state p,
+.workspace-restoring h1,
+.workspace-restoring p,
+.friendly-empty h2,
+.friendly-empty p,
+.setup-command-card h2,
+.setup-command-card p {
+ margin: 0;
+}
+
+.workspace-state h2,
+.workspace-restoring h1,
+.friendly-empty h2,
+.setup-command-card h2 {
+ color: var(--ink);
+ font-size: 19px;
+}
+
+.workspace-state p,
+.workspace-restoring p,
+.friendly-empty p,
+.setup-command-card p {
+ margin-top: 5px;
+ color: var(--muted);
+ line-height: 1.55;
+}
+
+.workspace-restoring {
+ max-width: 680px;
+}
+
+.setup-command-card {
+ border-color: var(--nav-active-border);
+ background: var(--status-bg);
+}
+
+.setup-command-card .eyebrow {
+ margin-bottom: 2px;
+}
+
+.setup-command-card h2 {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 24px;
+}
+
+.setup-checklist,
+.setup-details {
+ margin-top: 16px;
+}
+
+.section-heading,
+.record-card-heading {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 14px;
+ margin-bottom: 14px;
+}
+
+.section-heading h2,
+.section-heading p,
+.record-card-heading h2 {
+ margin: 0;
+}
+
+.section-heading p {
+ margin-top: 3px;
+}
+
+.detail-list,
+.record-meta {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 14px;
+ margin: 0;
+}
+
+.detail-list > div,
+.record-meta > div {
+ display: grid;
+ gap: 4px;
+ min-width: 0;
+}
+
+.detail-list dt,
+.record-meta dt,
+.compact-records dt {
+ color: var(--muted);
+ font-size: 11px;
+ font-weight: 800;
+ text-transform: uppercase;
+}
+
+.detail-list dd,
+.record-meta dd,
+.compact-records dd {
+ margin: 0;
+ color: var(--ink);
+ font-weight: 700;
+ overflow-wrap: anywhere;
+}
+
+.record-list {
+ display: grid;
+ gap: 12px;
+}
+
+.record-card {
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--panel);
+ padding: 17px;
+ box-shadow: var(--shadow-soft);
+}
+
+.record-card-heading h2 {
+ margin-top: 4px;
+ color: var(--ink);
+ font-size: 18px;
+}
+
+.record-card > p {
+ margin: 0 0 16px;
+ color: var(--foreground);
+ line-height: 1.55;
+}
+
+.record-id {
+ color: var(--muted);
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+ font-size: 11px;
+}
+
+.empty-hint {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.compact-records {
+ display: grid;
+ gap: 10px;
+}
+
+.compact-records article {
+ display: grid;
+ gap: 12px;
+ border-top: 1px solid var(--line);
+ padding-top: 12px;
+}
+
+.compact-records article:first-child {
+ border-top: 0;
+ padding-top: 0;
+}
+
+.compact-records h3,
+.compact-records p,
+.compact-records dl,
+.compact-records dt,
+.compact-records dd {
+ margin: 0;
+}
+
+.compact-records h3 {
+ color: var(--ink);
+ font-size: 15px;
+}
+
+.compact-records p {
+ margin-top: 3px;
+ color: var(--muted);
+ font-size: 13px;
+ line-height: 1.45;
+}
+
+.compact-records dl {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 10px;
+}
+
+.compact-records dl > div {
+ display: grid;
+ gap: 3px;
+}
+
+.inline-empty {
+ margin: 0;
+ border: 1px dashed var(--line);
+ border-radius: 8px;
+ padding: 14px;
+ color: var(--muted);
+ line-height: 1.5;
+}
+
+.inline-empty.with-icon {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+}
+
+.inline-empty.with-icon svg {
+ flex: 0 0 auto;
+ color: var(--green);
+}
+
+.inline-empty.with-icon p {
+ margin: 0;
+}
+
+.workspace-summary {
+ display: grid;
+ grid-template-columns: minmax(260px, 1.25fr) minmax(360px, 1fr);
+ gap: 22px;
+ align-items: center;
+ border-block: 1px solid var(--line);
+ padding: 18px 0;
+}
+
+.workspace-summary-intro {
+ display: flex;
+ gap: 11px;
+ align-items: flex-start;
+}
+
+.workspace-summary-intro > svg {
+ flex: 0 0 auto;
+ margin-top: 1px;
+ color: var(--green);
+}
+
+.workspace-summary-intro > div {
+ display: grid;
+ gap: 4px;
+}
+
+.workspace-summary-intro strong {
+ color: var(--ink);
+}
+
+.workspace-summary-intro span,
+.workspace-summary dt {
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.45;
+}
+
+.workspace-summary dl {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 16px;
+ margin: 0;
+}
+
+.workspace-summary dl > div {
+ display: grid;
+ gap: 3px;
+ min-width: 0;
+}
+
+.workspace-summary dt,
+.workspace-summary dd {
+ margin: 0;
+}
+
+.workspace-summary dd {
+ color: var(--ink);
+ font-size: 17px;
+ font-weight: 850;
+ overflow-wrap: anywhere;
+}
+
+.server-manager-toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 18px;
+ margin-bottom: 12px;
+}
+
+.server-manager-toolbar h2,
+.server-manager-toolbar p {
+ margin: 0;
+}
+
+.server-manager-toolbar h2 {
+ color: var(--ink);
+ font-size: 20px;
+}
+
+.server-manager-toolbar p {
+ margin-top: 4px;
+}
+
+.sr-status {
+ border-left: 3px solid var(--blue);
+ margin: 0 0 14px;
+ background: var(--status-bg);
+ padding: 9px 12px;
+ color: var(--muted);
+ font-size: 13px;
+}
+
+.server-card-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+}
+
+.server-card {
+ display: grid;
+ gap: 16px;
+ min-width: 0;
+ border: 1px solid var(--line);
+ border-radius: 10px;
+ background: var(--panel);
+ padding: 17px;
+ box-shadow: var(--shadow-soft);
+}
+
+.server-card-head {
+ display: grid;
+ grid-template-columns: 48px minmax(0, 1fr) auto;
+ gap: 12px;
+ align-items: center;
+}
+
+.server-card-head h3,
+.server-card-head p {
+ margin: 0;
+}
+
+.server-card-head h3 {
+ color: var(--ink);
+ font-size: 16px;
+ overflow-wrap: anywhere;
+}
+
+.server-card-head p {
+ margin-top: 3px;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.server-avatar {
+ display: grid;
+ width: 48px;
+ height: 48px;
+ place-items: center;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ background: var(--soft-panel);
+ color: var(--blue);
+ object-fit: cover;
+ font-weight: 900;
+}
+
+.server-permission-note {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--muted);
+ font-size: 12px;
+}
+
+.server-permission-note svg {
+ color: var(--green);
+}
+
+.server-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+}
+
+.server-actions .button {
+ flex: 1 1 150px;
+}
+
+.server-action-note {
+ flex: 1 0 100%;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.4;
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+}
+
+.badge.gray {
+ background: var(--soft-panel);
+ color: var(--nav-text);
+}
+
+.empty-state {
+ display: grid;
+ justify-items: start;
+ gap: 8px;
+ max-width: 720px;
+ padding: 28px;
+}
+
+.empty-state h2,
+.empty-state p {
+ margin: 0;
+}
+
+.empty-state p {
+ max-width: 620px;
+ color: var(--muted);
+ line-height: 1.55;
+}
+
+.empty-state .button-row {
+ margin-top: 8px;
+}
+
+.confirm-dialog {
+ width: min(520px, calc(100% - 32px));
+ max-height: calc(100dvh - 32px);
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ background: var(--panel);
+ padding: 0;
+ color: var(--foreground);
+ box-shadow: 0 24px 80px rgba(2, 6, 23, 0.38);
+}
+
+.confirm-dialog::backdrop {
+ background: rgba(2, 6, 23, 0.62);
+ backdrop-filter: blur(2px);
+}
+
+.confirm-dialog-body {
+ position: relative;
+ display: grid;
+ gap: 15px;
+ padding: 24px;
+}
+
+.confirm-dialog-body h2,
+.confirm-dialog-body p {
+ margin: 0;
+}
+
+.confirm-dialog-body h2 {
+ padding-right: 36px;
+ color: var(--ink);
+ font-size: 22px;
+}
+
+.confirm-dialog-body p {
+ color: var(--muted);
+ line-height: 1.55;
+}
+
+.confirm-dialog-body .dialog-error {
+ border-left: 3px solid var(--rose);
+ border-radius: 4px;
+ background: color-mix(in srgb, var(--rose) 9%, var(--panel));
+ padding: 10px 12px;
+ color: var(--foreground);
+ font-weight: 700;
+}
+
+.danger-mark {
+ border-color: color-mix(in srgb, var(--rose) 35%, var(--line));
+ background: color-mix(in srgb, var(--rose) 10%, var(--panel));
+ color: var(--rose);
+}
+
+.dialog-close {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ display: grid;
+ width: 44px;
+ height: 44px;
+ place-items: center;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--muted);
+ cursor: pointer;
+}
+
+.dialog-close:hover {
+ background: var(--soft-panel);
+ color: var(--ink);
+}
+
+.dialog-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+}
+
+.button.full {
+ width: 100%;
+}
+
+@media (max-width: 900px) {
+ .shell {
+ grid-template-columns: 1fr;
+ }
+
+ .sidebar {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ width: 100%;
+ overflow: visible;
+ border-right: 0;
+ border-bottom: 1px solid var(--line);
+ }
+
+ .sidebar-head {
+ grid-template-columns: minmax(0, 1fr) auto;
+ align-items: center;
+ }
+
+ .theme-toggle {
+ width: auto;
+ padding-inline: 12px;
+ }
+
+ .nav {
+ display: flex;
+ overflow-x: auto;
+ overscroll-behavior-inline: contain;
+ width: 100%;
+ max-width: 100%;
+ margin-top: 14px;
+ padding-bottom: 2px;
+ }
+
+ .nav a {
+ flex: 0 0 auto;
+ justify-content: center;
+ min-height: 44px;
+ padding: 0 8px;
+ font-size: 12px;
+ }
+
+ .nav-more {
+ flex: 0 0 auto;
+ }
+
+ .nav-more summary {
+ min-height: 44px;
+ padding: 0 10px;
+ font-size: 12px;
+ }
+
+ .nav-more-menu {
+ position: fixed;
+ top: 138px;
+ right: 12px;
+ bottom: auto;
+ }
+
+ .server-switcher {
+ max-width: 480px;
+ }
+
+ .account-dock {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding-top: 12px;
+ }
+
+ .account-identity {
+ flex: 1;
+ border-top: 0;
+ padding-top: 0;
+ }
+
+ .account-dock form,
+ .account-action {
+ width: auto;
+ }
+
+ .main {
+ padding: 18px 16px;
+ }
+
+ .topbar {
+ display: grid;
+ }
+
+ .grid.metrics,
+ .grid.two,
+ .training-grid,
+ .status-cards,
+ .form-grid,
+ .workspace-summary,
+ .server-card-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .training-context {
+ grid-template-columns: auto minmax(0, 1fr);
+ }
+
+ .training-context > .badge {
+ grid-column: 2;
+ justify-self: start;
+ }
+
+ .server-manager-filters {
+ grid-template-columns: 1fr;
+ }
+
+ .detail-list,
+ .record-meta {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .server-manager-toolbar {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .training-panel.wide {
+ grid-column: auto;
+ }
+}
+
+@media (max-width: 560px) {
+ .sidebar {
+ padding: 14px 12px;
+ }
+
+ .nav {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ gap: 6px;
+ overflow: visible;
+ }
+
+ .nav a,
+ .nav-more summary {
+ flex-direction: column;
+ gap: 3px;
+ width: 100%;
+ padding: 5px 2px;
+ font-size: 11px;
+ line-height: 1.1;
+ }
+
+ .nav > .mobile-overflow {
+ display: none;
+ }
+
+ .nav-more-menu {
+ position: absolute;
+ top: calc(100% + 6px);
+ right: 0;
+ bottom: auto;
+ width: min(240px, calc(100vw - 24px));
+ }
+
+ .nav-more-menu a,
+ .nav-more-menu a.mobile-nav-only {
+ display: flex !important;
+ flex-direction: row;
+ justify-content: flex-start;
+ gap: 10px;
+ padding: 0 12px;
+ font-size: 13px;
+ }
+
+ .account-identity small {
+ display: none;
+ }
+
+ .topbar .button-row,
+ .topbar .button-row > *,
+ .topbar .button-row .button {
+ width: 100%;
+ }
+
+ .server-card-head {
+ grid-template-columns: 44px minmax(0, 1fr);
+ }
+
+ .workspace-summary dl {
+ grid-template-columns: 1fr;
+ gap: 10px;
+ }
+
+ .server-card-head .badge {
+ grid-column: 1 / -1;
+ justify-self: start;
+ }
+
+ .dialog-actions {
+ align-items: stretch;
+ flex-direction: column-reverse;
+ }
+
+ .field input,
+ .field select,
+ .field textarea,
+ .server-search input,
+ .server-filter select {
+ font-size: 16px;
+ }
+
+ .filtered-empty {
+ align-items: stretch;
+ flex-direction: column;
+ }
+
+ .workspace-state,
+ .workspace-restoring,
+ .friendly-empty,
+ .setup-command-card {
+ display: grid;
+ }
+
+ .training-library article {
+ grid-template-columns: 1fr;
+ }
+
+ .training-library .button {
+ width: 100%;
+ }
+
+ .workspace-state > .button {
+ width: 100%;
+ }
+
+ .detail-list,
+ .record-meta,
+ .compact-records dl {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 900px) and (max-height: 600px) {
+ .sidebar {
+ position: static;
+ }
+
+ .confirm-dialog-body {
+ gap: 10px;
+ padding: 16px;
+ }
+
+ .confirm-dialog .danger-mark {
+ display: none;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 1ms !important;
+ scroll-behavior: auto !important;
+ transition-duration: 1ms !important;
+ }
+}
+
+@keyframes page-settle {
+ from {
+ opacity: 0;
+ transform: translateY(8px) scale(0.992);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+}
+
+.site {
+ min-height: 100vh;
+ background: #061423;
+ color: white;
+}
+
+.site .eyebrow {
+ color: #9eeaff;
+}
+
+.hero {
+ position: relative;
+ min-height: 88vh;
+ overflow: hidden;
+ background: #061423;
+ color: white;
+}
+
+.hero-bg {
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(90deg, rgba(6, 20, 35, 0.92), rgba(6, 20, 35, 0.28)),
+ url("/piphacklup-site-hero.png") center / cover no-repeat;
}
.hero-bg::after {
@@ -874,6 +2029,7 @@ html[data-dashboard-theme="dark"] .shell {
margin: 0 auto;
padding: 54px 0 60px;
color: white;
+ scroll-margin-top: 24px;
}
.ops-intro {
@@ -1019,9 +2175,42 @@ html[data-dashboard-theme="dark"] .shell {
max-width: 720px;
}
+.site-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 20px;
+ border-top: 1px solid rgba(176, 230, 255, 0.18);
+ width: min(1120px, calc(100% - 32px));
+ margin: 0 auto;
+ padding: 22px 0 28px;
+ color: #8fb6c8;
+ font-size: 13px;
+}
+
+.site-footer nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+}
+
+.site-footer a {
+ display: inline-flex;
+ align-items: center;
+ min-height: 44px;
+ color: #d9f7ff;
+ font-weight: 700;
+}
+
+.site-footer a:hover {
+ text-decoration: underline;
+ text-underline-offset: 3px;
+}
+
@media (max-width: 900px) {
.site-nav,
- .public-band {
+ .public-band,
+ .site-footer {
align-items: flex-start;
flex-direction: column;
}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 2059ae4..014b338 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -20,7 +20,7 @@ export const metadata: Metadata = {
"Discord moderation bot",
"Discord onboarding bot",
"hackathon organizer dashboard",
- "hackathon AI assistant",
+ "hackathon Q&A assistant",
"hackathon FAQ bot",
],
authors: [{ name: "Rupayon Haldar", url: "https://github.com/rupayon123" }],
@@ -77,16 +77,14 @@ export default function RootLayout({
diff --git a/apps/web/app/moderation/page.tsx b/apps/web/app/moderation/page.tsx
index 23e8ee4..b89c950 100644
--- a/apps/web/app/moderation/page.tsx
+++ b/apps/web/app/moderation/page.tsx
@@ -1,62 +1,135 @@
-import { defaultAutoModTemplates } from "@piphacklup/core";
+import { ShieldCheck } from "lucide-react";
+import { defaultAutoModTemplates, type ModerationCase } from "@piphacklup/core";
+import { listModerationCasesFromDb } from "@piphacklup/db";
import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/PageHeader";
-import { demoCases } from "@/lib/demo-data";
+import { WorkspaceState } from "@/components/WorkspaceState";
+import { loadGuildWorkspace } from "@/lib/guild-workspace";
+
+interface ModerationPageProps {
+ searchParams: Promise<{ guildId?: string }>;
+}
+
+export default async function ModerationPage({
+ searchParams,
+}: ModerationPageProps) {
+ const { guildId } = await searchParams;
+ const workspace = await loadGuildWorkspace(guildId);
+ let cases: ModerationCase[] = [];
+ let dataUnavailable = false;
+
+ if (workspace.guild) {
+ try {
+ cases = await listModerationCasesFromDb(workspace.guild.id);
+ } catch {
+ dataUnavailable = true;
+ console.error("PipHackLup could not load moderation cases.");
+ }
+ }
+
+ const openCases = cases.filter(
+ (moderationCase) => moderationCase.status === "open",
+ );
-export default function ModerationPage() {
return (
-
+
-
- Open cases
-
-
-
- Case
- Action
- Reason
- Status
-
-
-
- {demoCases.map((moderationCase) => (
-
-
- {moderationCase.id}
-
-
- {moderationCase.action}
-
- {moderationCase.reason}
- {moderationCase.status}
-
- ))}
-
-
-
-
-
- AutoMod templates
-
- {defaultAutoModTemplates().map((rule) => (
-
-
A
-
-
{rule.name}
-
{rule.goal}
-
-
{rule.trigger}
+ {workspace.requestedGuildUnavailable ? (
+
+ ) : !workspace.guild ? (
+
+ ) : dataUnavailable ? (
+
+ ) : (
+
+
+
+
+
Open cases
+
{openCases.length} need staff review
- ))}
-
-
+
+ {openCases.length ? "Review needed" : "Clear"}
+
+
+ {openCases.length ? (
+
+ {openCases.map((moderationCase) => (
+
+
+
{moderationCase.id}
+
{moderationCase.action}
+
{moderationCase.reason}
+
+
+
Discord member
+ {moderationCase.targetUserId}
+
+
+
Opened
+ {formatDate(moderationCase.createdAt)}
+
+
+
+ ))}
+
+ ) : (
+
+
+
+ No open cases. Reports created with{" "}
+ /mod report
+ will appear here for staff.
+
+
+ )}
+
+
+
+
+
+
Recommended Discord protections
+
+ Review these templates before applying them in Discord.
+
+
+
+ {defaultAutoModTemplates().map((rule) => (
+
+
A
+
+
{rule.name}
+
{rule.goal}
+
+
Template
+
+ ))}
+
+
- P
+
+ P
+
PipHackLup
@@ -111,40 +105,43 @@ export default function HomePage() {
repeat traffic and calls staff when a human needs the wheel.
-
100-500
- person events
+ 4
+ help lines
-
4
- queue types
+ 1
+ guided setup
-
0
- secret tokens in repo
+ Human
+ fallback built in
+
Event-day dispatch board
-
Built for the moments organizers dread
+
Built for the busiest parts of event day
- PipHackLup is not a shiny dashboard costume. It is a Discord
- operator that helps staff absorb the first wave of confusion,
- route the important stuff, and keep receipts.
+ PipHackLup gives staff a calm place to handle the first wave of
+ questions, route the important requests, and see what still needs
+ a person.
@@ -221,8 +218,8 @@ export default function HomePage() {
+
+
);
diff --git a/apps/web/app/privacy/page.tsx b/apps/web/app/privacy/page.tsx
index 1911626..5037702 100644
--- a/apps/web/app/privacy/page.tsx
+++ b/apps/web/app/privacy/page.tsx
@@ -3,7 +3,7 @@ import { PageHeader } from "@/components/PageHeader";
export default function PrivacyPage() {
return (
-
+
Data We Process
- PipHackLup may process Discord server IDs, user IDs, display names, roles, team profiles, queue tickets, moderation
- case details, audit events, and organizer settings needed to run hackathon workflows.
+ PipHackLup may process Discord server IDs, user IDs, display names,
+ roles, team profiles, queue tickets, moderation case details, audit
+ events, and organizer settings needed to run hackathon workflows.
How Data Is Used
- Data is used to provide onboarding, team formation, help queues, moderation workflows, dashboards, exports, and
- bot diagnostics. PipHackLup does not sell personal data.
+ Data is used to provide onboarding, team formation, help queues,
+ moderation workflows, dashboards, exports, and bot diagnostics.
+ PipHackLup does not sell personal data.
Message Content
- PipHackLup is designed to work without Discord's Message Content intent for the first public release. Reports and
- moderation cases may include details submitted by users or staff, such as message links or written reasons.
+ PipHackLup is designed to work without Discord's Message Content
+ intent for the first public release. Reports and moderation cases may
+ include details submitted by users or staff, such as message links or
+ written reasons. A question that needs human follow-up may be shared
+ with authorized event staff in a staff-only channel. Choosing a
+ private reply keeps the response out of the participant channel; it
+ does not hide an escalated question from the staff handling it.
Retention and Removal
- Event data is retained until an organizer exports, deletes, or requests removal. To request data removal or report
- a privacy concern, open an issue at
- {" "}
- github.com/rupayon123/PipHackLup .
+ Removing PipHackLup from a Discord server does not delete that
+ server's saved event data; the data is retained so an organizer
+ can reinstall the bot later. To request deletion or report a privacy
+ concern, use the repository's{" "}
+
+ private reporting page
+
+ . Do not post Discord user or server IDs, moderation-case details, or
+ other personal data in a public GitHub issue.
diff --git a/apps/web/app/queues/page.tsx b/apps/web/app/queues/page.tsx
index bc19f29..41e4e56 100644
--- a/apps/web/app/queues/page.tsx
+++ b/apps/web/app/queues/page.tsx
@@ -1,49 +1,117 @@
+import { Clock3, TicketCheck } from "lucide-react";
+import type { QueueTicket } from "@piphacklup/core";
+import { listQueueTicketsFromDb } from "@piphacklup/db";
import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/PageHeader";
-import { demoTickets } from "@/lib/demo-data";
+import { WorkspaceState } from "@/components/WorkspaceState";
+import { loadGuildWorkspace } from "@/lib/guild-workspace";
+
+interface QueuesPageProps {
+ searchParams: Promise<{ guildId?: string }>;
+}
+
+export default async function QueuesPage({ searchParams }: QueuesPageProps) {
+ const { guildId } = await searchParams;
+ const workspace = await loadGuildWorkspace(guildId);
+ let tickets: QueueTicket[] = [];
+ let dataUnavailable = false;
+
+ if (workspace.guild) {
+ try {
+ tickets = await listQueueTicketsFromDb(workspace.guild.id);
+ } catch {
+ dataUnavailable = true;
+ console.error("PipHackLup could not load queue tickets.");
+ }
+ }
-export default function QueuesPage() {
return (
-
+
-
-
-
- Ticket
- Kind
- Topic
- Status
- Priority
- Created
-
-
-
- {demoTickets.map((ticket) => (
-
-
- {ticket.id}
-
-
- {ticket.kind}
-
-
- {ticket.topic}
- {ticket.description}
-
- {ticket.status}
- {ticket.priority}
- {new Date(ticket.createdAt).toLocaleTimeString()}
-
- ))}
-
-
-
+ {workspace.requestedGuildUnavailable ? (
+
+ {tickets.map((ticket) => (
+
+
+
+ {ticket.id}
+
{ticket.topic}
+
+
+ {ticket.status}
+
+
{ticket.description}
+
+
+
Queue
+ {ticket.kind}
+
+
+
Priority
+ {ticket.priority}
+
+
+
Opened
+ {formatTimestamp(ticket.createdAt)}
+
+
+
Assigned to
+ {ticket.assignedTo ?? "Waiting for staff"}
+
+
+
+ ))}
+
+ ) : (
+
+
+
No help requests yet
+
+ When someone uses /queue open in{" "}
+ {workspace.guild.name}, their request will appear here.
+
+
+
+
+ )}
);
}
+
+function ticketBadge(status: string): "green" | "amber" | "blue" {
+ if (status === "closed" || status === "canceled") return "green";
+ if (status === "escalated") return "amber";
+ return "blue";
+}
+
+function formatTimestamp(value: string): string {
+ return new Intl.DateTimeFormat("en-CA", {
+ dateStyle: "medium",
+ timeStyle: "short",
+ timeZone: "America/Toronto",
+ }).format(new Date(value));
+}
diff --git a/apps/web/app/robots.ts b/apps/web/app/robots.ts
index ae18373..b9ecf56 100644
--- a/apps/web/app/robots.ts
+++ b/apps/web/app/robots.ts
@@ -4,9 +4,9 @@ export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
- allow: "/"
+ allow: "/",
},
sitemap: "https://piphacklup.vercel.app/sitemap.xml",
- host: "https://piphacklup.vercel.app"
+ host: "https://piphacklup.vercel.app",
};
}
diff --git a/apps/web/app/setup/page.tsx b/apps/web/app/setup/page.tsx
index 6836dce..04389e5 100644
--- a/apps/web/app/setup/page.tsx
+++ b/apps/web/app/setup/page.tsx
@@ -1,53 +1,188 @@
-import { CheckCircle2, Circle, ExternalLink } from "lucide-react";
+import { CheckCircle2, Circle, ServerCog } from "lucide-react";
+import { getGuildConfigFromDb, type GuildIdentity } from "@piphacklup/db";
import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/PageHeader";
-import { setupSteps } from "@/lib/demo-data";
+import { WorkspaceState } from "@/components/WorkspaceState";
+import { loadGuildWorkspace } from "@/lib/guild-workspace";
+
+interface SetupPageProps {
+ searchParams: Promise<{ guildId?: string }>;
+}
+
+export default async function SetupPage({ searchParams }: SetupPageProps) {
+ const { guildId } = await searchParams;
+ const workspace = await loadGuildWorkspace(guildId);
+ let config = null;
+ let dataUnavailable = false;
+
+ if (workspace.guild) {
+ try {
+ config = await getGuildConfigFromDb(workspace.guild.id);
+ } catch {
+ dataUnavailable = true;
+ console.error("PipHackLup could not load server setup.");
+ }
+ }
+
+ const roleCount = config ? Object.keys(config.roles).length : 0;
+ const channelCount = config ? Object.keys(config.channels).length : 0;
+ const resourceCount = config?.resources
+ ? Object.values(config.resources).filter(Boolean).length
+ : 0;
+ const setupStarted = Boolean(roleCount || channelCount || resourceCount);
+ const steps = [
+ {
+ label: "Server configuration saved",
+ detail:
+ setupStarted && config
+ ? `${config.eventName} is connected to PipHackLup.`
+ : "Run /setup in Discord to create this server's event workspace.",
+ done: setupStarted,
+ },
+ {
+ label: "Event roles ready",
+ detail: roleCount
+ ? `${roleCount} role${roleCount === 1 ? "" : "s"} recorded for onboarding and staff access.`
+ : "No PipHackLup event roles have been recorded yet.",
+ done: roleCount > 0,
+ },
+ {
+ label: "Event channels ready",
+ detail: channelCount
+ ? `${channelCount} channel${channelCount === 1 ? "" : "s"} recorded for help, teams, and logs.`
+ : "No PipHackLup event channels have been recorded yet.",
+ done: channelCount > 0,
+ },
+ {
+ label: "Onboarding mode chosen",
+ detail:
+ setupStarted && config
+ ? `${config.onboardingMode === "gated" ? "Gated" : "Guided"} onboarding is active.`
+ : "Choose guided or gated onboarding when you run /setup.",
+ done: setupStarted,
+ },
+ ];
-export default function SetupPage() {
return (
-
+
-
+ Back to servers
+
+ ) : undefined
}
/>
-
- Launch checklist
-
- {setupSteps.map((step) => {
- const done = step.status === "done";
- const Icon = done ? CheckCircle2 : Circle;
- return (
-
-
-
-
-
{step.label}
-
{step.detail}
-
-
{done ? "Done" : "Todo"}
+ {workspace.requestedGuildUnavailable ? (
+
+ ) : !workspace.guild ? (
+
+ ) : dataUnavailable ? (
+
+ ) : (
+ <>
+
+
+
Run this in {workspace.guild.name}
+
/setup
+
+ Only someone with Manage Server can run it. PipHackLup will
+ reuse anything it already created, so setup is safe to run again
+ after an interrupted attempt.
+
+
+
+
+
+
+
Setup checklist
+
+ These checks come from this server's saved configuration—not
+ sample data.
+
- );
- })}
-
-
-
- Invite permissions
-
- Use scopes bot and applications.commands . Grant View Channels, Send Messages, Embed Links,
- Attach Files, Read Message History, Manage Roles, Manage Nicknames, Manage Channels, Manage Threads, Moderate Members,
- Manage Guild, and optional Kick/Ban.
-
-
+
+ {setupStarted ? "Started" : "Not started"}
+
+
+
+ {steps.map((step) => {
+ const Icon = step.done ? CheckCircle2 : Circle;
+ return (
+
+
+
+
+
{step.label}
+
{step.detail}
+
+
+ {step.done ? "Ready" : "Needed"}
+
+
+ );
+ })}
+
+
+
+ {config && setupStarted ? (
+
+ ) : null}
+
+ )}
);
}
+
+function SetupDetails({
+ guild,
+ config,
+}: Readonly<{
+ guild: GuildIdentity;
+ config: NonNullable
>>;
+}>) {
+ return (
+
+ Saved event settings
+
+
+
Discord server
+ {guild.name}
+
+
+
Event name
+ {config.eventName}
+
+
+
Onboarding
+ {config.onboardingMode}
+
+
+
Team size
+
+ {config.teamSizeMin}–{config.teamSizeMax} people
+
+
+
+
+ );
+}
diff --git a/apps/web/app/sitemap.ts b/apps/web/app/sitemap.ts
index 94c1976..96702e4 100644
--- a/apps/web/app/sitemap.ts
+++ b/apps/web/app/sitemap.ts
@@ -6,12 +6,47 @@ export default function sitemap(): MetadataRoute.Sitemap {
const now = new Date();
return [
{ url: baseUrl, lastModified: now, changeFrequency: "weekly", priority: 1 },
- { url: `${baseUrl}/dashboard`, lastModified: now, changeFrequency: "weekly", priority: 0.8 },
- { url: `${baseUrl}/setup`, lastModified: now, changeFrequency: "monthly", priority: 0.7 },
- { url: `${baseUrl}/queues`, lastModified: now, changeFrequency: "monthly", priority: 0.7 },
- { url: `${baseUrl}/teams`, lastModified: now, changeFrequency: "monthly", priority: 0.7 },
- { url: `${baseUrl}/moderation`, lastModified: now, changeFrequency: "monthly", priority: 0.7 },
- { url: `${baseUrl}/terms`, lastModified: now, changeFrequency: "yearly", priority: 0.3 },
- { url: `${baseUrl}/privacy`, lastModified: now, changeFrequency: "yearly", priority: 0.3 }
+ {
+ url: `${baseUrl}/dashboard`,
+ lastModified: now,
+ changeFrequency: "weekly",
+ priority: 0.8,
+ },
+ {
+ url: `${baseUrl}/setup`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.7,
+ },
+ {
+ url: `${baseUrl}/queues`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.7,
+ },
+ {
+ url: `${baseUrl}/teams`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.7,
+ },
+ {
+ url: `${baseUrl}/moderation`,
+ lastModified: now,
+ changeFrequency: "monthly",
+ priority: 0.7,
+ },
+ {
+ url: `${baseUrl}/terms`,
+ lastModified: now,
+ changeFrequency: "yearly",
+ priority: 0.3,
+ },
+ {
+ url: `${baseUrl}/privacy`,
+ lastModified: now,
+ changeFrequency: "yearly",
+ priority: 0.3,
+ },
];
}
diff --git a/apps/web/app/teams/page.tsx b/apps/web/app/teams/page.tsx
index 1fa386c..03c4a47 100644
--- a/apps/web/app/teams/page.tsx
+++ b/apps/web/app/teams/page.tsx
@@ -1,63 +1,153 @@
-import { suggestTeamMatches } from "@piphacklup/core";
+import { Sparkles, Users } from "lucide-react";
+import {
+ suggestTeamMatches,
+ type MatchResult,
+ type MemberProfile,
+ type TeamProfile,
+} from "@piphacklup/core";
+import { listMemberProfilesFromDb, listTeamsFromDb } from "@piphacklup/db";
import { AppShell } from "@/components/AppShell";
import { PageHeader } from "@/components/PageHeader";
-import { demoMembers, demoTeams } from "@/lib/demo-data";
+import { WorkspaceState } from "@/components/WorkspaceState";
+import { loadGuildWorkspace } from "@/lib/guild-workspace";
-export default function TeamsPage() {
- const matches = suggestTeamMatches(demoMembers, demoTeams);
+interface TeamsPageProps {
+ searchParams: Promise<{ guildId?: string }>;
+}
+
+export default async function TeamsPage({ searchParams }: TeamsPageProps) {
+ const { guildId } = await searchParams;
+ const workspace = await loadGuildWorkspace(guildId);
+ let profiles: MemberProfile[] = [];
+ let teams: TeamProfile[] = [];
+ let matches: MatchResult[] = [];
+ let dataUnavailable = false;
+
+ if (workspace.guild) {
+ try {
+ [profiles, teams] = await Promise.all([
+ listMemberProfilesFromDb(workspace.guild.id),
+ listTeamsFromDb(workspace.guild.id),
+ ]);
+ matches = suggestTeamMatches(profiles, teams);
+ } catch {
+ dataUnavailable = true;
+ console.error("PipHackLup could not load team formation data.");
+ }
+ }
return (
-
+
-
- Recruiting teams
-
-
-
- Team
- Members
- Needs
-
-
-
- {demoTeams.map((team) => (
-
-
- {team.name}
- {team.projectIdea}
-
-
- {team.memberIds.length}/{team.maxSize}
-
- {team.desiredSkills.join(", ")}
-
- ))}
-
-
-
+ {workspace.requestedGuildUnavailable ? (
+
+ ) : !workspace.guild ? (
+
+ ) : dataUnavailable ? (
+
+ ) : teams.length || profiles.length ? (
+
+
+
+
+
Recruiting teams
+
{teams.length} saved in this server
+
+
+ {teams.map((team) => (
+
+
+
{team.name}
+
{team.projectIdea ?? "No project idea shared yet."}
+
+
+
Members
+
+ {team.memberIds.length}/{team.maxSize}
+
+
+
+
Looking for
+
+ {team.desiredSkills.join(", ") || "Open to ideas"}
+
+
+
+
+ ))}
+
No teams are recruiting yet.
+ )}
+
-
- Match suggestions
-
- {matches.map((match) => (
-
-
{match.score}
-
-
{match.teamId}
-
Add users {match.addedMemberIds.join(", ")}
-
-
Suggested
+
+
+
+
Match suggestions
+
+ Suggestions only—people decide where they join.
+
+
+
+
+ {matches.map((match) => {
+ const team = teams.find((item) => item.id === match.teamId);
+ return (
+
+
{match.score}
+
+
{team?.name ?? match.teamId}
+
+ {match.addedMemberIds.length} possible teammate
+ {match.addedMemberIds.length === 1 ? "" : "s"}
+
+
+
Review
+
+ );
+ })}
+ No match is ready yet. Participants can use{" "}
+ /team profile to join the pool, then an
+ organizer can run /team match .
+
+ )}
+
+
+ ) : (
+
+
+
No team activity yet
+
+ Participants can create a profile or recruiting team in
+ {` ${workspace.guild.name}`} with the /team {" "}
+ command.
+
-
+
Use of PipHackLup
- PipHackLup is provided to help Discord communities run hackathons with onboarding, role setup, queues, team formation,
- moderation cases, and organizer dashboards. You are responsible for using the bot in a way that follows Discord's
- Terms of Service, Discord's Developer Policy, and the rules of your event.
+ PipHackLup is provided to help Discord communities run hackathons with
+ onboarding, role setup, queues, team formation, moderation cases, and
+ organizer dashboards. You are responsible for using the bot in a way
+ that follows Discord's Terms of Service, Discord's Developer Policy,
+ and the rules of your event.
Organizer Responsibilities
- Server owners and organizers control how PipHackLup is installed, configured, and used in their Discord servers.
- Organizers are responsible for notifying participants about event rules, moderation expectations, and any exports
- or records they choose to keep.
+ Server owners and organizers control how PipHackLup is installed,
+ configured, and used in their Discord servers. Organizers are
+ responsible for notifying participants about event rules, moderation
+ expectations, and any exports or records they choose to keep.
Availability
- PipHackLup is an early-stage open-source project and is provided as-is. We try to keep the service reliable, but
- do not guarantee uninterrupted operation, especially on free hosting tiers or during active development.
+ PipHackLup is an open-source service provided as-is. We work to keep
+ it reliable, but do not guarantee uninterrupted operation during
+ maintenance, provider outages, or active development.
Contact
- For issues, feature requests, or removal requests, use the public GitHub repository at
- {" "}
- github.com/rupayon123/PipHackLup .
+ For bugs and feature requests that contain no private data, use the
+ public GitHub repository at{" "}
+
+ github.com/rupayon123/PipHackLup
+
+ . For data deletion or privacy concerns, use the repository's{" "}
+
+ private reporting page
+
+ . Never put Discord IDs, moderation-case details, or personal data in
+ a public issue.
diff --git a/apps/web/app/training/TrainingConsole.tsx b/apps/web/app/training/TrainingConsole.tsx
index 4f3b1c1..bf23524 100644
--- a/apps/web/app/training/TrainingConsole.tsx
+++ b/apps/web/app/training/TrainingConsole.tsx
@@ -1,70 +1,52 @@
"use client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Save, Sparkles, Trash2, Upload } from "lucide-react";
import {
answerHackathonQuestion,
- createKnowledgeEntry,
- defaultKnowledgeSettings,
- parseKnowledgeImportText,
type HackathonKnowledgeEntry,
type KnowledgeAssistantSettings,
type KnowledgeEscalationTarget,
} from "@piphacklup/core";
-import type { DiscordSession, ManagedDiscordGuild } from "@/lib/discord-auth";
+import type { ManagedDiscordGuild } from "@/lib/discord-auth";
interface TrainingConsoleProps {
- session: DiscordSession | null;
- databaseReady: boolean;
- installUrl: string;
+ guild: ManagedDiscordGuild;
+ initialEntries: HackathonKnowledgeEntry[];
+ initialSettings: KnowledgeAssistantSettings;
+ botInstallation: boolean | null;
}
-const previewGuild: ManagedDiscordGuild = {
- id: "preview-guild",
- name: "Preview Hackathon Server",
- isOwner: true,
- permissions: "32",
- canManage: true,
-};
+interface DiscordOption {
+ id: string;
+ name: string;
+}
+
+interface DiscordGuildOptions {
+ roles: DiscordOption[];
+ channels: DiscordOption[];
+}
-const previewEntries: HackathonKnowledgeEntry[] = [
- createKnowledgeEntry({
- guildId: previewGuild.id,
- title: "Check-in location",
- answer:
- "Check-in is at the main registration desk. Staff can update this from the website trainer or `/train add`.",
- tags: ["check-in", "registration", "badge"],
- createdBy: "preview",
- }),
- createKnowledgeEntry({
- guildId: previewGuild.id,
- title: "Submission deadline",
- answer:
- "Project submissions close at 10:00 AM on demo day. Ask staff to change this for the real event.",
- tags: ["deadline", "submit", "demo"],
- escalationTarget: "staff",
- createdBy: "preview",
- }),
-];
+type BusyAction = "add" | "import" | "settings" | `delete:${string}`;
+type Notice = { kind: "status" | "error"; message: string };
+type DiscordOptionsStatus = "not-needed" | "loading" | "ready" | "error";
export function TrainingConsole({
- session,
- databaseReady,
- installUrl,
-}: TrainingConsoleProps) {
- const guilds = session?.guilds.length ? session.guilds : [previewGuild];
- const [selectedGuildId, setSelectedGuildId] = useState(
- guilds[0]?.id ?? previewGuild.id,
- );
- const selectedGuild =
- guilds.find((guild) => guild.id === selectedGuildId) ??
- guilds[0] ??
- previewGuild;
- const liveMode = Boolean(session && databaseReady);
+ guild,
+ initialEntries,
+ initialSettings,
+ botInstallation,
+}: Readonly
) {
const [entries, setEntries] =
- useState(previewEntries);
- const [settings, setSettings] = useState({
- ...defaultKnowledgeSettings,
- });
+ useState(initialEntries);
+ const [settings, setSettings] =
+ useState(initialSettings);
+ const [discordOptions, setDiscordOptions] =
+ useState(null);
+ const [discordOptionsStatus, setDiscordOptionsStatus] =
+ useState(
+ botInstallation === true ? "loading" : "not-needed",
+ );
const [title, setTitle] = useState("");
const [answer, setAnswer] = useState("");
const [tags, setTags] = useState("");
@@ -72,188 +54,218 @@ export function TrainingConsole({
useState("none");
const [importText, setImportText] = useState("");
const [question, setQuestion] = useState("Where do I check in?");
- const [status, setStatus] = useState(
- liveMode
- ? "Connected to Discord and database."
- : "Preview mode: connect Discord and DATABASE_URL for live training.",
- );
-
- useEffect(() => {
- setSelectedGuildId(guilds[0]?.id ?? previewGuild.id);
- }, [session?.user.id]);
+ const [busyAction, setBusyAction] = useState(null);
+ const [removeConfirmationId, setRemoveConfirmationId] = useState<
+ string | null
+ >(null);
+ const deleteConfirmRef = useRef(null);
+ const returnDeleteFocusIdRef = useRef(null);
+ const [notice, setNotice] = useState({
+ kind: "status",
+ message: `Ready to edit answers for ${guild.name}.`,
+ });
useEffect(() => {
- if (!liveMode) {
- setEntries(
- previewEntries.map((entry) => ({
- ...entry,
- guildId: selectedGuild.id,
- })),
- );
- setSettings({ ...defaultKnowledgeSettings });
+ if (botInstallation !== true) {
+ setDiscordOptions(null);
+ setDiscordOptionsStatus("not-needed");
return;
}
- let canceled = false;
- async function loadTraining() {
- setStatus("Loading server training...");
- const query = `guildId=${encodeURIComponent(selectedGuild.id)}`;
- const [entriesResponse, settingsResponse] = await Promise.all([
- fetch(`/api/training/entries?${query}`),
- fetch(`/api/training/settings?${query}`),
- ]);
- if (canceled) return;
- if (!entriesResponse.ok || !settingsResponse.ok) {
- setStatus("Could not load live training for this server.");
- return;
+ const controller = new AbortController();
+ setDiscordOptions(null);
+ setDiscordOptionsStatus("loading");
+ async function loadDiscordOptions() {
+ try {
+ const response = await fetch(
+ `/api/discord/guilds/${encodeURIComponent(guild.id)}/options`,
+ { signal: controller.signal },
+ );
+ if (!response.ok) throw new Error("options_unavailable");
+ const body = (await response.json()) as DiscordGuildOptions;
+ if (!controller.signal.aborted) {
+ setDiscordOptions(body);
+ setDiscordOptionsStatus("ready");
+ }
+ } catch {
+ if (controller.signal.aborted) return;
+ console.error("PipHackLup could not load Discord roles and channels.");
+ setDiscordOptions(null);
+ setDiscordOptionsStatus("error");
+ setNotice({
+ kind: "error",
+ message:
+ "Discord roles and channels could not be loaded. Your saved answers are still available.",
+ });
}
- const entriesJson = (await entriesResponse.json()) as {
- entries: HackathonKnowledgeEntry[];
- };
- const settingsJson = (await settingsResponse.json()) as {
- settings: KnowledgeAssistantSettings;
- };
- setEntries(entriesJson.entries);
- setSettings(settingsJson.settings);
- setStatus(`Live training loaded for ${selectedGuild.name}.`);
+ }
+ void loadDiscordOptions();
+ return () => controller.abort();
+ }, [botInstallation, guild.id]);
+
+ useEffect(() => {
+ if (removeConfirmationId !== null) {
+ if (busyAction !== null) return;
+ const frame = window.requestAnimationFrame(() => {
+ deleteConfirmRef.current?.focus();
+ });
+ return () => window.cancelAnimationFrame(frame);
}
- void loadTraining();
- return () => {
- canceled = true;
- };
- }, [liveMode, selectedGuild.id, selectedGuild.name]);
+ if (!returnDeleteFocusIdRef.current) return;
+ const entryId = returnDeleteFocusIdRef.current;
+ returnDeleteFocusIdRef.current = null;
+ const frame = window.requestAnimationFrame(() => {
+ document
+ .querySelector(
+ `[data-remove-entry-id="${CSS.escape(entryId)}"]`,
+ )
+ ?.focus();
+ });
+ return () => window.cancelAnimationFrame(frame);
+ }, [busyAction, removeConfirmationId]);
const previewAnswer = useMemo(
() => answerHackathonQuestion(question, entries, settings),
[entries, question, settings],
);
+ const busy = busyAction !== null;
async function addEntry() {
if (!title.trim() || !answer.trim()) {
- setStatus("Add a title and answer first.");
+ setNotice({
+ kind: "error",
+ message:
+ "Add both a participant question and the answer they should receive.",
+ });
return;
}
- if (liveMode) {
- const guildQuery = encodeURIComponent(selectedGuild.id);
- const response = await fetch(
- `/api/training/entries?guildId=${guildQuery}`,
- {
- method: "POST",
- headers: { "content-type": "application/json" },
- body: JSON.stringify({ title, answer, tags, escalationTarget }),
- },
- );
- if (!response.ok) {
- setStatus("Live training save failed.");
- return;
- }
- const json = (await response.json()) as {
+ setBusyAction("add");
+ setNotice({ kind: "status", message: "Saving this answer…" });
+ try {
+ const response = await trainingFetch("/api/training/entries", guild.id, {
+ method: "POST",
+ body: JSON.stringify({ title, answer, tags, escalationTarget }),
+ });
+ const body = (await response.json()) as {
entry: HackathonKnowledgeEntry;
+ warning?: string | null;
};
- setEntries((current) => [json.entry, ...current]);
- setStatus(`Saved live training entry: ${json.entry.title}.`);
- } else {
- const entry = createKnowledgeEntry({
- guildId: selectedGuild.id,
- title,
- answer,
- tags: tags.split(","),
- escalationTarget,
- createdBy: session?.user.id ?? "preview",
+ setEntries((current) => [body.entry, ...current]);
+ setTitle("");
+ setAnswer("");
+ setTags("");
+ setEscalationTarget("none");
+ setNotice({
+ kind: body.warning ? "error" : "status",
+ message: body.warning
+ ? `Saved “${body.entry.title}” for ${guild.name}, but its activity-log entry could not be recorded. The answer itself is safe.`
+ : `Saved “${body.entry.title}” for ${guild.name}.`,
});
- setEntries((current) => [entry, ...current]);
- setStatus(`Preview entry added: ${entry.title}.`);
+ } catch (error) {
+ setNotice({ kind: "error", message: trainingErrorMessage(error) });
+ } finally {
+ setBusyAction(null);
}
-
- setTitle("");
- setAnswer("");
- setTags("");
- setEscalationTarget("none");
}
async function importEntries() {
if (!importText.trim()) {
- setStatus("Paste training lines first.");
+ setNotice({
+ kind: "error",
+ message: "Paste at least one event detail before importing.",
+ });
return;
}
- if (liveMode) {
- const guildQuery = encodeURIComponent(selectedGuild.id);
- const response = await fetch(
- `/api/training/entries?guildId=${guildQuery}`,
- {
- method: "POST",
- headers: { "content-type": "application/json" },
- body: JSON.stringify({ importText, escalationTarget }),
- },
- );
- if (!response.ok) {
- setStatus("Live import failed.");
- return;
- }
- const json = (await response.json()) as {
+ setBusyAction("import");
+ setNotice({ kind: "status", message: "Checking and importing details…" });
+ try {
+ const response = await trainingFetch("/api/training/entries", guild.id, {
+ method: "POST",
+ body: JSON.stringify({ importText, escalationTarget }),
+ });
+ const body = (await response.json()) as {
entries: HackathonKnowledgeEntry[];
+ warning?: string | null;
};
- setEntries((current) => [...json.entries, ...current]);
- setStatus(`Imported ${json.entries.length} live training entries.`);
- } else {
- const imported = parseKnowledgeImportText(
- importText,
- escalationTarget,
- ).map((entry) =>
- createKnowledgeEntry({
- guildId: selectedGuild.id,
- title: entry.title,
- answer: entry.answer,
- tags: entry.tags,
- escalationTarget: entry.escalationTarget,
- createdBy: session?.user.id ?? "preview",
- }),
- );
- setEntries((current) => [...imported, ...current]);
- setStatus(`Preview imported ${imported.length} entries.`);
+ setEntries((current) => [...body.entries, ...current]);
+ setImportText("");
+ setNotice({
+ kind: body.warning ? "error" : "status",
+ message: body.warning
+ ? `Imported ${body.entries.length} answer${body.entries.length === 1 ? "" : "s"}, but the activity-log entry could not be recorded. The answers themselves are safe.`
+ : `Imported ${body.entries.length} answer${body.entries.length === 1 ? "" : "s"}.`,
+ });
+ } catch (error) {
+ setNotice({ kind: "error", message: trainingErrorMessage(error) });
+ } finally {
+ setBusyAction(null);
}
- setImportText("");
}
async function saveSettings() {
- if (liveMode) {
- const guildQuery = encodeURIComponent(selectedGuild.id);
- const response = await fetch(
- `/api/training/settings?guildId=${guildQuery}`,
- {
- method: "POST",
- headers: { "content-type": "application/json" },
- body: JSON.stringify(settings),
- },
- );
- if (!response.ok) {
- setStatus("Live settings save failed.");
- return;
- }
- setStatus("Live escalation settings saved.");
- return;
+ setBusyAction("settings");
+ setNotice({ kind: "status", message: "Saving answer settings…" });
+ try {
+ const response = await trainingFetch("/api/training/settings", guild.id, {
+ method: "POST",
+ body: JSON.stringify({
+ ...settings,
+ staffRoleId: settings.staffRoleId ?? null,
+ mentorRoleId: settings.mentorRoleId ?? null,
+ helpChannelId: settings.helpChannelId ?? null,
+ }),
+ });
+ const body = (await response.json()) as { warning?: string | null };
+ setNotice({
+ kind: body.warning ? "error" : "status",
+ message: body.warning
+ ? `Settings were saved for ${guild.name}, but the activity-log entry could not be recorded.`
+ : `Answer and follow-up settings saved for ${guild.name}.`,
+ });
+ } catch (error) {
+ setNotice({ kind: "error", message: trainingErrorMessage(error) });
+ } finally {
+ setBusyAction(null);
}
- setStatus("Preview settings updated.");
}
- async function removeEntry(entryId: string) {
- if (liveMode) {
- const guildQuery = encodeURIComponent(selectedGuild.id);
- const entryQuery = encodeURIComponent(entryId);
- const response = await fetch(
- `/api/training/entries?guildId=${guildQuery}&entryId=${entryQuery}`,
+ async function removeEntry(entry: HackathonKnowledgeEntry) {
+ setBusyAction(`delete:${entry.id}`);
+ setNotice({ kind: "status", message: `Removing “${entry.title}”…` });
+ try {
+ const response = await trainingFetch(
+ "/api/training/entries",
+ guild.id,
{ method: "DELETE" },
+ { entryId: entry.id },
);
- if (!response.ok) {
- setStatus("Could not delete live training entry.");
- return;
- }
+ const body = (await response.json()) as { warning?: string | null };
+ setEntries((current) => current.filter((item) => item.id !== entry.id));
+ setRemoveConfirmationId(null);
+ returnDeleteFocusIdRef.current = null;
+ setNotice({
+ kind: body.warning ? "error" : "status",
+ message: body.warning
+ ? `Removed “${entry.title}” from ${guild.name}, but the activity-log entry could not be recorded.`
+ : `Removed “${entry.title}” from ${guild.name}.`,
+ });
+ } catch (error) {
+ setNotice({ kind: "error", message: trainingErrorMessage(error) });
+ } finally {
+ setBusyAction(null);
}
- setEntries((current) => current.filter((entry) => entry.id !== entryId));
- setStatus("Training entry removed.");
+ }
+
+ function askToRemoveEntry(entryId: string): void {
+ setRemoveConfirmationId(entryId);
+ }
+
+ function cancelEntryRemoval(): void {
+ returnDeleteFocusIdRef.current = removeConfirmationId;
+ setRemoveConfirmationId(null);
}
function updateOptionalSetting(
@@ -262,110 +274,63 @@ export function TrainingConsole({
) {
setSettings((current) => {
const next = { ...current };
- if (value) {
- next[key] = value;
- } else {
- delete next[key];
- }
+ if (value) next[key] = value;
+ else delete next[key];
return next;
});
}
return (
-
+
+
+ {notice.message}
+
+
- Linked Discord Account
- {session ? (
-
- {session.user.avatarUrl ? (
-
- ) : (
-
- {session.user.username.slice(0, 1).toUpperCase()}
-
- )}
-
-
- {session.user.globalName ?? session.user.username}
-
-
Discord ID {session.user.id}
-
-
- Sign out
-
-
-
-
1
-
-
Connect Discord
-
- The dashboard will show servers where your account has Manage
- Server.
-
-
-
- Connect
-
-
+
+
+
Add an answer
+
+ Use the words participants are likely to use.
+
- )}
-
-
- Server deployment
- setSelectedGuildId(event.target.value)}
- >
- {guilds.map((guild) => (
-
- {guild.name}
-
- ))}
-
-
-
-
- {liveMode ? "Live" : "Preview"}
-
- {status}
+
-
- Add PipHackLup to this Discord server
-
-
-
-
