feat: Support extra context for time required (#219)

namesakefyi · Nov 26, 2024 · 401f59e · 401f59e
1 parent ef382a1
commit 401f59e
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 37 deletions.
diff --git a/.changeset/afraid-cougars-tease.md b/.changeset/afraid-cougars-tease.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Display additional context beside time required
diff --git a/convex/constants.ts b/convex/constants.ts
@@ -375,6 +375,7 @@ export type TimeRequired = {
   min: number;
   max: number;
   unit: TimeUnit;
+  description?: string;
 };
 
 export const DEFAULT_TIME_REQUIRED: TimeRequired = {

diff --git a/convex/quests.ts b/convex/quests.ts
@@ -78,6 +78,7 @@ export const updateQuest = userMutation({
         min: v.number(),
         max: v.number(),
         unit: timeRequiredUnit,
+        description: v.optional(v.string()),
       }),
     ),
     urls: v.optional(v.array(v.string())),

diff --git a/convex/schema.ts b/convex/schema.ts
@@ -41,6 +41,7 @@ const quests = defineTable({
     min: v.number(),
     max: v.number(),
     unit: timeRequiredUnit,
+    description: v.optional(v.string()),
   }),
   urls: v.optional(v.array(v.string())),
   deletionTime: v.optional(v.number()),

diff --git a/src/routes/_authenticated/_home/quests.$questId.tsx b/src/routes/_authenticated/_home/quests.$questId.tsx
@@ -111,7 +111,23 @@ const QuestTimeRequired = ({
   };
 
   const formattedTime = getFormattedTime(timeRequired);
-  return <StatGroup label="Time" value={formattedTime} />;
+  return (
+    <StatGroup label="Time" value={formattedTime}>
+      {timeRequired.description && (
+        <DialogTrigger>
+          <TooltipTrigger>
+            <Button variant="icon" size="small">
+              <CircleHelp />
+            </Button>
+            <Tooltip>See details</Tooltip>
+          </TooltipTrigger>
+          <Popover className="p-4">
+            <p className="text-sm max-w-xs">{timeRequired.description}</p>
+          </Popover>
+        </DialogTrigger>
+      )}
+    </StatGroup>
+  );
 };
 
 const QuestUrls = ({ urls }: { urls?: string[] }) => {

diff --git a/src/routes/_authenticated/admin/quests/$questId.tsx b/src/routes/_authenticated/admin/quests/$questId.tsx
@@ -156,48 +156,62 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
   if (!timeRequired) return null;
 
   return (
-    <div className="flex items-end gap-2">
-      <NumberField
-        label="Min. Req. Time"
-        className="w-28"
-        value={timeRequired?.min}
-        maxValue={Math.max(timeRequired.max, 60)}
-        onChange={(value) =>
-          onChange({
-            ...timeRequired,
-            min: value,
-          })
-        }
-      />
-      <NumberField
-        label="Max Req. Time"
-        className="w-28"
-        value={timeRequired.max}
-        minValue={Math.min(timeRequired.min, 1)}
+    <div className="flex flex-col gap-4">
+      <div className="flex items-end gap-2">
+        <NumberField
+          label="Min. Req. Time"
+          className="w-28"
+          value={timeRequired?.min}
+          maxValue={Math.max(timeRequired.max, 60)}
+          onChange={(value) =>
+            onChange({
+              ...timeRequired,
+              min: value,
+            })
+          }
+        />
+        <NumberField
+          label="Max Req. Time"
+          className="w-28"
+          value={timeRequired.max}
+          minValue={Math.min(timeRequired.min, 1)}
+          onChange={(value) =>
+            onChange({
+              ...timeRequired,
+              max: value,
+            })
+          }
+        />
+        <Select
+          label="Unit"
+          className="w-40"
+          selectedKey={timeRequired.unit}
+          onSelectionChange={(key) =>
+            onChange({
+              ...timeRequired,
+              unit: key as TimeUnit,
+            })
+          }
+        >
+          {Object.entries(TIME_UNITS).map(([key, unit]) => (
+            <SelectItem key={key} id={key}>
+              {unit.label}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>
+      <TextField
+        label="Description"
+        description="Add optional context about the time required."
+        className="w-full"
+        value={timeRequired.description ?? ""}
         onChange={(value) =>
           onChange({
             ...timeRequired,
-            max: value,
+            description: value || undefined,
           })
         }
       />
-      <Select
-        label="Unit"
-        className="w-40"
-        selectedKey={timeRequired.unit}
-        onSelectionChange={(key) =>
-          onChange({
-            ...timeRequired,
-            unit: key as TimeUnit,
-          })
-        }
-      >
-        {Object.entries(TIME_UNITS).map(([key, unit]) => (
-          <SelectItem key={key} id={key}>
-            {unit.label}
-          </SelectItem>
-        ))}
-      </Select>
     </div>
   );
 });