feat(Tasks): split task details into separate page (closes #1297)

Author: simonknittel

app/src/app/app/changelog/page.tsx

@@ -34,6 +34,19 @@ export default async function Page() {
       </div>
 
       <div className="flex flex-col gap-4 max-w-prose mt-4 lg:mt-8 mx-auto">
+        <Day heading="12. Mai 2025">
+          <DayItem heading="Tasks">
+            <p>
+              Die Details zu einem Task sind nun auf einer separaten Seiten zu
+              finden.
+            </p>
+            <p>
+              Beschreibung und Freitext-Belohnung können nun 2048 Zeichen lang
+              sein.
+            </p>
+          </DayItem>
+        </Day>
+
         <Day heading="2. Mai 2025">
           <DayItem heading="Neu: SILC-Gehälter">
             <p>

app/src/app/app/events/[id]/page.tsx

@@ -43,8 +43,7 @@ export default async function Page({ params }: Props) {
   const authentication = await authenticatePage("/app/events/[id]");
   await authentication.authorizePage("event", "read");
 
-  const eventId = (await params).id;
-  const event = await getEventById(eventId);
+  const event = await getEventById((await params).id);
   if (!event) notFound();
 
   return (

app/src/app/app/tasks/[id]/page.tsx

@@ -0,0 +1,53 @@
+import { authenticatePage } from "@/auth/server";
+import { log } from "@/logging";
+import { Overview } from "@/tasks/components/Overview";
+import { getTaskById } from "@/tasks/queries";
+import { type Metadata } from "next";
+import { notFound } from "next/navigation";
+import { serializeError } from "serialize-error";
+
+type Params = Promise<{
+  id: string;
+}>;
+
+export async function generateMetadata(props: {
+  params: Params;
+}): Promise<Metadata> {
+  try {
+    const task = await getTaskById((await props.params).id);
+    if (!task) notFound();
+
+    return {
+      title: `${task.title} - Task | S.A.M. - Sinister Incorporated`,
+    };
+  } catch (error) {
+    void log.error(
+      "Error while generating metadata for /app/tasks/[id]/page.tsx",
+      {
+        error: serializeError(error),
+      },
+    );
+
+    return {
+      title: `Error | S.A.M. - Sinister Incorporated`,
+    };
+  }
+}
+
+interface Props {
+  readonly params: Params;
+}
+
+export default async function Page({ params }: Props) {
+  const authentication = await authenticatePage("/app/tasks/[id]");
+  await authentication.authorizePage("task", "read");
+
+  const task = await getTaskById((await params).id);
+  if (!task) notFound();
+
+  return (
+    <main className="p-4 pb-20 lg:p-8">
+      <Overview task={task} />
+    </main>
+  );
+}

app/src/common/components/Accordeon.tsx

@@ -1,12 +1,12 @@
 import clsx from "clsx";
 import type { ComponentProps } from "react";
-import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { FaChevronDown, FaChevronRight, FaChevronUp } from "react-icons/fa";
 
-interface Props extends ComponentProps<"button"> {
+interface AccordeonToggleProps extends ComponentProps<"button"> {
   readonly isOpen: boolean;
 }
 
-export const AccordeonToggle = (props: Props) => {
+export const AccordeonToggle = (props: AccordeonToggleProps) => {
   const { className, isOpen, ...rest } = props;
 
   return (
@@ -27,3 +27,22 @@ export const AccordeonToggle = (props: Props) => {
     </button>
   );
 };
+
+type AccordeonLinkProps = ComponentProps<"div">;
+
+export const AccordeonLink = (props: AccordeonLinkProps) => {
+  const { className, ...rest } = props;
+
+  return (
+    <div
+      title="Details öffnen"
+      className={clsx(
+        "flex-none p-3 flex items-center justify-center border-l border-white/10",
+        className,
+      )}
+      {...rest}
+    >
+      <FaChevronRight className="text-sinister-red-500" />
+    </div>
+  );
+};

app/src/common/components/Tile.tsx

@@ -21,9 +21,9 @@ export const Tile = ({
       className={clsx("rounded-primary background-secondary", className)}
     >
       <div className="flex justify-between items-center border-b border-white/5">
-        <h2 className="font-thin text-2xl p-4 lg:px-8">{heading}</h2>
+        <h2 className="font-thin text-2xl p-4 lg:px-8 flex-1">{heading}</h2>
 
-        {cta && <div className="pr-4 lg:pr-8">{cta}</div>}
+        {cta && <div className="pr-4 lg:pr-8 flex-initial">{cta}</div>}
       </div>
 
       <div className={clsx("p-4 lg:p-8", childrenClassName)}>{children}</div>

app/src/common/components/form/EditableTextarea.tsx

@@ -106,7 +106,6 @@ export const EditableTextarea = ({
               },
             )}
             autoFocus
-            required
             ref={inputRef}
           />
 
@@ -125,7 +124,9 @@ export const EditableTextarea = ({
           className="flex gap-2 items-center group text-left"
           title="Klicken, um zu bearbeiten"
         >
-          <pre className="font-[inherit]">{value || "-"}</pre>
+          <pre className="font-[inherit] whitespace-pre-wrap">
+            {value || "-"}
+          </pre>
           <FaPen className="flex-1 text-sinister-red-500 group-hover:text-sinister-red-300 text-sm" />
         </button>
       )}

app/src/tasks/actions/createTask.ts

@@ -16,10 +16,10 @@ const schema = z.object({
   assignmentLimit: z.coerce.number().min(1).optional(),
   assignedToIds: z.array(z.string().cuid()).optional(),
   title: z.string().trim().max(64),
-  description: z.string().trim().max(512).optional(),
+  description: z.string().trim().max(2048).optional(),
   expiresAt: z.coerce.date().optional(),
   rewardType: z.nativeEnum(TaskRewardType),
-  rewardTypeTextValue: z.string().trim().max(128).optional(),
+  rewardTypeTextValue: z.string().trim().max(2048).optional(),
   rewardTypeSilcValue: z.coerce.number().min(1).optional(),
   rewardTypeNewSilcValue: z.coerce.number().min(1).optional(),
   repeatable: z.coerce.number().min(1),

app/src/tasks/actions/updateTaskDescription.ts

@@ -10,7 +10,7 @@ import { isTaskUpdatable } from "../utils/isTaskUpdatable";
 
 const schema = z.object({
   id: z.union([z.string().cuid(), z.string().cuid2()]),
-  description: z.string().trim().max(512),
+  description: z.string().trim().max(2048),
 });
 
 export const updateTaskDescription = createAuthenticatedAction(

app/src/tasks/actions/updateTaskRewardTypeTextValue.ts

@@ -10,7 +10,7 @@ import { isTaskUpdatable } from "../utils/isTaskUpdatable";
 
 const schema = z.object({
   id: z.union([z.string().cuid(), z.string().cuid2()]),
-  rewardTypeTextValue: z.string().trim().max(128),
+  rewardTypeTextValue: z.string().trim().max(2048),
 });
 
 export const updateTaskRewardTypeTextValue = createAuthenticatedAction(

app/src/tasks/components/CancelTask.tsx

@@ -35,7 +35,7 @@ export const CancelTask = ({ className, task }: Props) => {
         <AlertDialogTrigger asChild>
           <button
             disabled={isPending}
-            className="text-sinister-red-500 hover:text-sinister-red-300 flex items-center px-2"
+            className="text-sinister-red-500 hover:text-sinister-red-300 flex items-center px-2 h-full"
             title="Task abbrechen"
           >
             <TbCancel />