feat: Redesign /browse (#317)

.changeset/olive-wasps-smile.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Improve design of browse page and allow previewing quests before addition

convex/quests.ts

@@ -4,8 +4,13 @@ import { DEFAULT_TIME_REQUIRED } from "./constants";
 import { userMutation } from "./helpers";
 import { category, jurisdiction, timeRequiredUnit } from "./validators";
 
-// TODO: Add `returns` value validation
-// https://docs.convex.dev/functions/validation
+export const count = query({
+  args: {},
+  handler: async (ctx) => {
+    const quests = await ctx.db.query("quests").collect();
+    return quests.length;
+  },
+});
 
 export const getAll = query({
   args: {},

convex/userQuests.ts

@@ -4,9 +4,6 @@ import { type Category, STATUS, type Status } from "./constants";
 import { userMutation, userQuery } from "./helpers";
 import { status } from "./validators";
 
-// TODO: Add `returns` value validation
-// https://docs.convex.dev/functions/validation
-
 export const getAll = userQuery({
   args: {},
   handler: async (ctx, _args) => {

convex/users.ts

@@ -8,9 +8,6 @@ import { DUPLICATE_EMAIL, INVALID_EMAIL } from "./errors";
 import { userMutation, userQuery } from "./helpers";
 import { jurisdiction } from "./validators";
 
-// TODO: Add `returns` value validation
-// https://docs.convex.dev/functions/validation
-
 export const getAll = query({
   args: {},
   handler: async (ctx) => {

src/components/browse/AddOrGoToQuestButton/AddOrGoToQuestButton.tsx

@@ -0,0 +1,70 @@
+import { Button, Link } from "@/components/common";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation, useQuery } from "convex/react";
+import { ArrowRight, LoaderCircle, Plus } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface AddOrGoToQuestButtonProps {
+  quest: Doc<"quests">;
+  size?: "small" | "medium";
+  className?: string;
+}
+
+export function AddOrGoToQuestButton({
+  quest,
+  size = "medium",
+  className,
+}: AddOrGoToQuestButtonProps) {
+  const [isAdding, setIsAdding] = useState(false);
+  const addQuest = useMutation(api.userQuests.create);
+  const userQuest = useQuery(api.userQuests.getByQuestId, {
+    questId: quest._id,
+  });
+
+  if (quest === undefined) return null;
+  if (quest === null) return null;
+
+  const handleAddQuest = () => {
+    setIsAdding(true);
+    addQuest({ questId: quest._id })
+      .then(() => {
+        toast.success(`Added ${quest.title} quest`);
+      })
+      .then(() => setIsAdding(false));
+  };
+
+  if (userQuest === undefined) return null;
+
+  if (!userQuest) {
+    return (
+      <Button
+        onPress={handleAddQuest}
+        isDisabled={isAdding}
+        aria-label={isAdding ? "Adding" : "Add quest"}
+        size={size}
+        variant={size === "small" ? "secondary" : "primary"}
+        className={className}
+      >
+        {isAdding ? (
+          <LoaderCircle size={16} className="animate-spin" />
+        ) : (
+          <Plus size={16} />
+        )}
+        Add
+      </Button>
+    );
+  }
+
+  return (
+    <Link
+      href={{ to: "/quests/$questId", params: { questId: quest._id } }}
+      button={{ variant: "secondary", size }}
+      aria-label="Go to quest"
+      className={className}
+    >
+      {size === "small" ? <ArrowRight size={16} /> : "Go to quest"}
+    </Link>
+  );
+}

src/components/browse/AddOrGoToQuestButton/index.ts

@@ -0,0 +1 @@
+export * from "./AddOrGoToQuestButton";

src/components/browse/index.ts

@@ -0,0 +1 @@
+export * from "./AddOrGoToQuestButton";

src/components/common/Nav/Nav.tsx

@@ -77,12 +77,19 @@ interface NavGroupProps {
   label: string;
   children: React.ReactNode;
   count?: number;
+  icon?: LucideIcon;
 }
 
-export const NavGroup = ({ label, children, count }: NavGroupProps) => {
+export const NavGroup = ({
+  label,
+  children,
+  count,
+  icon: Icon,
+}: NavGroupProps) => {
   return (
     <div className="flex flex-col gap-0.5 [&:not(:first-child)]:mt-4">
       <Header className="text-sm h-8 font-medium text-gray-dim border-b border-gray-4 dark:border-graydark-4 flex justify-start items-center gap-1.5">
+        {Icon && <Icon size={20} className="size-4" />}
         {label}
         {count && (
           <Badge size="xs" className="rounded-full">

src/components/quests/QuestPageHeader/QuestPageHeader.tsx

@@ -0,0 +1,31 @@
+import { PageHeader, type PageHeaderProps } from "@/components/app";
+import { Badge } from "@/components/common";
+import type { Doc } from "@convex/_generated/dataModel";
+
+interface QuestPageHeaderProps extends Omit<PageHeaderProps, "title"> {
+  quest?: Doc<"quests"> | null;
+}
+
+export function QuestPageHeader({
+  quest,
+  badge,
+  icon: Icon,
+  children,
+  className,
+}: QuestPageHeaderProps) {
+  return (
+    <PageHeader
+      title={quest === null ? "Unknown" : (quest?.title ?? "")}
+      icon={Icon}
+      badge={
+        <>
+          {quest?.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
+          {badge}
+        </>
+      }
+      className={className}
+    >
+      {children}
+    </PageHeader>
+  );
+}

src/components/quests/QuestPageHeader/index.ts

@@ -0,0 +1 @@
+export * from "./QuestPageHeader";

src/components/quests/index.ts

@@ -7,6 +7,7 @@ export * from "./QuestCosts";
 export * from "./QuestDetails";
 export * from "./QuestDocuments";
 export * from "./QuestForm";
+export * from "./QuestPageHeader";
 export * from "./QuestTimeRequired";
 export * from "./QuestUrls";
 export * from "./QuestUsageCount";