feat: Add /browse route (#158)

.changeset/beige-bears-hide.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Add /browse route for browsing quests

convex/userQuests.ts

@@ -47,6 +47,7 @@ export const getAvailableQuestsForUser = userQuery({
 
 export const getGlobalQuestCount = query({
   args: { questId: v.id("quests") },
+  returns: v.number(),
   handler: async (ctx, args) => {
     const quests = await ctx.db
       .query("userQuests")
@@ -58,6 +59,8 @@ export const getGlobalQuestCount = query({
 });
 
 export const getCompletedQuestCount = userQuery({
+  args: {},
+  returns: v.number(),
   handler: async (ctx) => {
     const userQuests = await ctx.db
       .query("userQuests")
@@ -74,6 +77,7 @@ export const getCompletedQuestCount = userQuery({
 
 export const create = userMutation({
   args: { questId: v.id("quests") },
+  returns: v.null(),
   handler: async (ctx, args) => {
     // Check if quest already exists for user
     const existing = await ctx.db
@@ -106,6 +110,7 @@ export const getUserQuestByQuestId = userQuery({
 
 export const markComplete = userMutation({
   args: { questId: v.id("quests") },
+  returns: v.null(),
   handler: async (ctx, args) => {
     const userQuest = await getUserQuestByQuestId(ctx, {
       questId: args.questId,
@@ -117,6 +122,7 @@ export const markComplete = userMutation({
 
 export const markIncomplete = userMutation({
   args: { questId: v.id("quests") },
+  returns: v.null(),
   handler: async (ctx, args) => {
     const userQuest = await getUserQuestByQuestId(ctx, {
       questId: args.questId,
@@ -128,6 +134,7 @@ export const markIncomplete = userMutation({
 
 export const removeQuest = userMutation({
   args: { questId: v.id("quests") },
+  returns: v.null(),
   handler: async (ctx, args) => {
     const userQuest = await getUserQuestByQuestId(ctx, {
       questId: args.questId,
@@ -136,3 +143,32 @@ export const removeQuest = userMutation({
     await ctx.db.delete(userQuest._id);
   },
 });
+
+export const getUserQuestsByQuestIds = userQuery({
+  args: { questIds: v.array(v.id("quests")) },
+  handler: async (ctx, args) => {
+    const userQuests = await ctx.db
+      .query("userQuests")
+      .withIndex("userId", (q) => q.eq("userId", ctx.userId))
+      .collect();
+
+    return userQuests.filter((uq) => args.questIds.includes(uq.questId));
+  },
+});
+
+export const getQuestCounts = query({
+  args: { questIds: v.array(v.id("quests")) },
+  returns: v.array(v.object({ questId: v.id("quests"), count: v.number() })),
+  handler: async (ctx, args) => {
+    const counts = await Promise.all(
+      args.questIds.map(async (questId) => {
+        const count = await ctx.db
+          .query("userQuests")
+          .withIndex("questId", (q) => q.eq("questId", questId))
+          .collect();
+        return { questId, count: count.length };
+      }),
+    );
+    return counts;
+  },
+});

src/components/AppHeader/AppHeader.tsx

@@ -20,10 +20,11 @@ export const AppHeader = () => {
 
   return (
     <div className="flex shrink-0 gap-4 bg-gray-app items-center w-screen h-14 px-4 border-b border-gray-dim sticky top-0 z-20">
-      <Link href={{ to: "/quests" }}>
+      <Link href={{ to: "/" }}>
         <Logo className="h-[1.25rem]" />
       </Link>
       <Authenticated>
+        <Link href={{ to: "/" }}>Quests</Link>
         {isAdmin && <Link href={{ to: "/admin/quests" }}>Admin</Link>}
         <div className="ml-auto">
           <MenuTrigger>

src/components/Button/Button.tsx

@@ -16,7 +16,7 @@ export interface ButtonProps extends AriaButtonProps {
 
 export const buttonStyles = tv({
   extend: focusRing,
-  base: "py-2 text-sm font-medium transition rounded-lg flex gap-1 items-center justify-center border border-black/10 dark:border-white/10 cursor-pointer",
+  base: "py-2 text-sm font-medium whitespace-nowrap transition rounded-lg flex gap-1 items-center justify-center border border-black/10 dark:border-white/10 cursor-pointer",
   variants: {
     variant: {
       primary: "bg-purple-solid text-white",

src/components/Empty/Empty.tsx

@@ -2,6 +2,7 @@ import type { RemixiconComponentType } from "@remixicon/react";
 import type { ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 import { Button, type ButtonProps } from "../Button";
+import { Link, type LinkProps } from "../Link";
 
 interface EmptyProps {
   icon: RemixiconComponentType;
@@ -10,6 +11,7 @@ interface EmptyProps {
   className?: string;
   children?: ReactNode;
   button?: ButtonProps;
+  link?: LinkProps;
 }
 
 export function Empty({
@@ -18,6 +20,7 @@ export function Empty({
   subtitle,
   className,
   button,
+  link,
 }: EmptyProps) {
   return (
     <div
@@ -30,6 +33,7 @@ export function Empty({
       <h2 className="font-semibold text-xl">{title}</h2>
       {subtitle && <p className="text-gray-dim -mt-3">{subtitle}</p>}
       {button && <Button {...button} />}
+      {link && <Link {...link} />}
     </div>
   );
 }

src/components/Link/Link.tsx

@@ -7,7 +7,7 @@ import { tv } from "tailwind-variants";
 import { type ButtonProps, buttonStyles } from "../Button";
 import { focusRing } from "../utils";
 
-interface LinkProps extends AriaLinkProps {
+export interface LinkProps extends AriaLinkProps {
   variant?: "primary" | "secondary";
   button?: ButtonProps;
 }
@@ -36,8 +36,8 @@ export function Link({ button, ...props }: LinkProps) {
           button
             ? buttonStyles({
                 ...renderProps,
+                ...button,
                 className,
-                variant: props.variant,
               })
             : linkStyles({ ...renderProps, className, variant: props.variant }),
       )}

src/components/PageHeader/PageHeader.tsx

@@ -21,7 +21,7 @@ export const PageHeader = ({
   return (
     <header
       className={twMerge(
-        "h-12 flex items-center justify-between gap-6 text-gray-normal",
+        "h-12 flex shrink-0 items-center justify-between gap-6 text-gray-normal",
         className,
       )}
     >