Merge branch 'v3-main' into add-guild-page

package.json

@@ -52,7 +52,6 @@
     "remark-gfm": "^4.0.0",
     "remark-textr": "^6.1.0",
     "server-only": "^0.0.1",
-    "slugify": "^1.6.6",
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",

src/app/(dashboard)/create-guild/components/CreateGuildButton.tsx

@@ -11,7 +11,6 @@ import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useFormContext } from "react-hook-form";
-import slugify from "slugify";
 import { toast } from "sonner";
 
 const CreateGuildButton = () => {
@@ -30,12 +29,6 @@ const CreateGuildButton = () => {
       const guild = {
         ...data,
         contact: undefined,
-        // TODO: I think we should do it on the backend
-        urlName: slugify(data.name, {
-          replacement: "-",
-          lower: true,
-          strict: true,
-        }),
       };
 
       return fetcher<Guild>(`${env.NEXT_PUBLIC_API}/guild`, {
@@ -52,7 +45,7 @@ const CreateGuildButton = () => {
       toast("An error occurred", {
         icon: <XCircle weight="fill" className="text-icon-error" />,
       });
-      console.error(error);
+      console.warn(error);
     },
     onSuccess: (res) => {
       confetti.current();

src/app/(dashboard)/create-guild/components/CreateGuildFormProvider.tsx

@@ -8,15 +8,14 @@ import { FormProvider, useForm } from "react-hook-form";
 const defaultValues = {
   name: "",
   imageUrl: "",
-  urlName: "test",
   contact: "",
   description: "",
 } satisfies CreateGuildForm;
 
 const CreateGuildFormProvider = ({ children }: PropsWithChildren) => {
   const methods = useForm<CreateGuildForm>({
     mode: "onTouched",
-    resolver: zodResolver(CreateGuildSchema),
+    resolver: zodResolver(CreateGuildSchema.omit({ urlName: true })),
     defaultValues,
   });
 

src/app/(dashboard)/explorer/components/StickyNavbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup";
-import useIsStuck from "@/hooks/useIsStuck";
-import useScrollspy from "@/hooks/useScrollSpy";
+import { useIsStuck } from "@/hooks/useIsStuck";
+import { useScrollspy } from "@/hooks/useScrollSpy";
 import { cn } from "@/lib/cssUtils";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { type PropsWithChildren, useEffect } from "react";

src/app/(dashboard)/explorer/components/StickySearch.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Input } from "@/components/ui/Input";
-import useIsStuck from "@/hooks/useIsStuck";
+import { useIsStuck } from "@/hooks/useIsStuck";
 import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
 import { useDebouncedValue } from "foxact/use-debounced-value";
 import { useSetAtom } from "jotai";

src/app/(dashboard)/explorer/page.tsx

@@ -37,7 +37,7 @@ export default async function Explorer() {
 
   return (
     <>
-      <main className="container grid gap-4 py-16">
+      <main className="container mx-auto grid gap-4 py-16">
         <section className="pt-6 pb-8">
           <h1
             className="font-black font-display text-5xl tracking-tight"

src/components/NavMenu.tsx

@@ -21,11 +21,11 @@ import {
 } from "@phosphor-icons/react/dist/ssr";
 import { useIsClient } from "foxact/use-is-client";
 import { useTheme } from "next-themes";
-import Link, { type LinkProps } from "next/link";
 import { usePathname } from "next/navigation";
-import type { AnchorHTMLAttributes, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import GuildLogo from "static/logo.svg";
-import { Button } from "./ui/Button";
+import { Anchor } from "./ui/Anchor";
+import { Button, buttonVariants } from "./ui/Button";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/Popover";
 import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup";
 
@@ -131,37 +131,32 @@ const NavGroup = ({
 const NavButton = ({
   href,
   children,
-}: { href: string; children: ReactNode }) => {
+  ...props
+}: ComponentProps<typeof Anchor>) => {
   const pathname = usePathname();
-
-  const isExternal = href.startsWith("http");
-  const wrapperProps = {
-    href,
-    ...(isExternal
-      ? ({
-          target: "_blank",
-          rel: "noopener",
-        } satisfies AnchorHTMLAttributes<HTMLAnchorElement>)
-      : ({
-          passHref: true,
-          legacyBehavior: true,
-        } satisfies Partial<LinkProps>)),
-  };
-
-  const Wrapper = isExternal ? "a" : Link;
+  const externalProps = href.toString().startsWith("/")
+    ? {}
+    : {
+        target: "_blank",
+        rel: "noopener noreferrer",
+      };
 
   return (
-    <Wrapper {...wrapperProps}>
-      <Button
-        variant={pathname === href ? "solid" : "ghost"}
-        className={cn(
+    <Anchor
+      {...props}
+      {...externalProps}
+      href={href}
+      variant="unstyled"
+      className={buttonVariants({
+        variant: pathname === href ? "solid" : "ghost",
+        className: cn(
           "h-10 w-full justify-start gap-2",
           pathname === href ? "font-semibold" : "font-normal",
-        )}
-      >
-        {children}
-      </Button>
-    </Wrapper>
+        ),
+      })}
+    >
+      {children}
+    </Anchor>
   );
 };
 

src/hooks/useIsStuck.ts

@@ -40,9 +40,9 @@ const useIsStuck = (
     );
     observer.observe(cachedRef);
     return () => observer.unobserve(cachedRef);
-  }, [ref]);
+  }, [setIsStuckActive]);
 
   return { ref, isStuck: setIsStuck ? undefined : isStuck };
 };
 
-export default useIsStuck;
+export { useIsStuck };

src/hooks/useScrollSpy.ts

@@ -1,9 +1,5 @@
 import { useLayoutEffect, useState } from "react";
 
-// Restrict value to be between the range [0, value]
-const clamp = (value: number) => Math.max(0, value);
-
-// Check if number is between two values
 const isBetween = (value: number, floor: number, ceil: number) =>
   value >= floor && value <= ceil;
 
@@ -21,8 +17,8 @@ const useScrollspy = (ids: string[], offset = 0) => {
           if (!element) return { id, top: -1, bottom: -1 };
 
           const rect = element.getBoundingClientRect();
-          const top = clamp(rect.top + scroll - offset);
-          const bottom = clamp(rect.bottom + scroll - offset);
+          const top = Math.max(0, rect.top + scroll - offset);
+          const bottom = Math.max(0, rect.bottom + scroll - offset);
 
           return { id, top, bottom };
         })
@@ -45,4 +41,4 @@ const useScrollspy = (ids: string[], offset = 0) => {
   return activeId;
 };
 
-export default useScrollspy;
+export { useScrollspy };

src/lib/schemas/guild.ts

@@ -6,7 +6,7 @@ export const CreateGuildSchema = z.object({
   urlName: z.string().max(255).optional(),
   imageUrl: ImageUrlSchema.optional(),
   description: z.string().optional(),
-  contact: z.string().email(),
+  contact: z.string().min(1, "You must specify a contact for your guild"),
 });
 
 export type CreateGuildForm = z.infer<typeof CreateGuildSchema>;