feat: add new company creation route (#84)

* feat: add create company page

* feat: add company switcher

* fix: requested changes

Author: G3root

src/app/(authenticated)/(dashboard)/company/new/page.tsx

@@ -0,0 +1,11 @@
+import OnboardingCompany from "@/components/onboarding/company";
+import { withServerSession } from "@/server/auth";
+
+const OnboardingPage = async () => {
+  const session = await withServerSession();
+  const user = session.user;
+
+  return <OnboardingCompany formType="create-company" currentUser={user} />;
+};
+
+export default OnboardingPage;

src/components/dashboard/sidebar/company-switcher.tsx

@@ -6,18 +6,25 @@ import {
   SelectContent,
   SelectItem,
   SelectValue,
+  SelectSeparator,
+  SelectItemStyle,
 } from "@/components/ui/select";
+
 import { type TGetCompanyList } from "@/server/company";
 import { api } from "@/trpc/react";
 import { useSession } from "next-auth/react";
 import { useRouter, useSelectedLayoutSegment } from "next/navigation";
 import { useState } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { RiAddCircleLine } from "@remixicon/react";
 
 interface CompanySwitcherProps {
   companies: TGetCompanyList;
   publicId: string;
 }
 
+const createCompanyValue = "cap-co-create-company";
+
 export function CompanySwitcher({ companies, publicId }: CompanySwitcherProps) {
   const value = useState(() => publicId)[0];
   const { update } = useSession();
@@ -30,6 +37,10 @@ export function CompanySwitcher({ companies, publicId }: CompanySwitcherProps) {
     <Select
       value={value}
       onValueChange={async (newValue) => {
+        if (newValue === createCompanyValue) {
+          router.push("/company/new");
+        }
+
         if (newValue !== value) {
           const membership = companies.find(
             (item) => item.company.publicId === newValue,
@@ -52,6 +63,18 @@ export function CompanySwitcher({ companies, publicId }: CompanySwitcherProps) {
             {item.company.name}
           </SelectItem>
         ))}
+
+        <SelectSeparator />
+        <SelectPrimitive.Item
+          value={createCompanyValue}
+          className={SelectItemStyle}
+        >
+          <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <RiAddCircleLine className="h-4 w-4" aria-hidden />
+          </span>
+
+          <SelectPrimitive.ItemText>Create Company</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
       </SelectContent>
     </Select>
   );

src/components/onboarding/company.tsx

@@ -38,9 +38,13 @@ import type { User } from "next-auth";
 
 type OnboardingCompanyProps = {
   currentUser: User;
+  formType?: "onboarding" | "create-company";
 };
 
-const OnboardingCompany = ({ currentUser }: OnboardingCompanyProps) => {
+const OnboardingCompany = ({
+  currentUser,
+  formType = "onboarding",
+}: OnboardingCompanyProps) => {
   const { update } = useSession();
   const router = useRouter();
 
@@ -100,35 +104,37 @@ const OnboardingCompany = ({ currentUser }: OnboardingCompanyProps) => {
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             <div className="grid gap-2">
               <div className="grid gap-5">
-                <div className="grid grid-cols-2 gap-4">
-                  <FormField
-                    control={form.control}
-                    name="user.name"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Your full name</FormLabel>
-                        <FormControl>
-                          <Input {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+                {formType === "onboarding" && (
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="user.name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Your full name</FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-                  <FormField
-                    control={form.control}
-                    name="user.email"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Your work email</FormLabel>
-                        <FormControl>
-                          <Input type="email" {...field} />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
+                    <FormField
+                      control={form.control}
+                      name="user.email"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Your work email</FormLabel>
+                          <FormControl>
+                            <Input type="email" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
 
                 <div className="grid grid-cols-2 gap-4">
                   <FormField

src/components/ui/select.tsx

@@ -115,16 +115,16 @@ const SelectLabel = React.forwardRef<
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
+export const SelectItemStyle =
+  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
+    className={cn(SelectItemStyle, className)}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">