Merge branch 'joincalldotco:main' into feature/ui-refactor

Author: code-env

apps/server/src/routes/auth/index.ts

@@ -37,6 +37,17 @@ authRouter.post(
   }
 );
 
+// Redirect specific Better Auth error to app
+authRouter.get("/error", async (c) => {
+  const url = new URL(c.req.url);
+  const error = url.searchParams.get("error");
+
+  if (error === "please_restart_the_process") {
+    return c.redirect("https://joincall.co/app", 302);
+  }
+  return auth.handler(c.req.raw);
+});
+
 authRouter.on(["POST", "GET"], "/*", async (c: Context) => {
   try {
     return await auth.handler(c.req.raw);

apps/web/components/app/section/_components/close-sidebar-button.tsx

@@ -2,7 +2,7 @@
 
 import { useSidebar } from "@call/ui/components/sidebar";
 import { Button } from "@call/ui/components/button";
-import { PanelRight } from "lucide-react";
+import { Icons } from "@call/ui/components/icons";
 
 export function CloseSidebarButton({ className }: { className?: string }) {
   const { toggleSidebar } = useSidebar();
@@ -14,7 +14,7 @@ export function CloseSidebarButton({ className }: { className?: string }) {
       onClick={toggleSidebar}
       className={className}
     >
-      <PanelRight className="h-4 w-4" />
+      <Icons.sidebarClose className="h-4 w-4" />
     </Button>
   );
 }

apps/web/components/app/section/_components/nav-main.tsx

@@ -8,6 +8,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarSeparator,
   useSidebar,
 } from "@call/ui/components/sidebar";
 import type { JSX } from "react";
@@ -35,17 +36,18 @@ export function NavMain({
   return (
     <SidebarGroup>
       <SidebarMenu className="flex flex-col">
-        <SidebarMenuItem className="mb-2">
+        <SidebarMenuItem className="mb-5">
           <SidebarMenuButton
             tooltip="Start Call"
             isActive={true}
             onClick={() => onOpen("start-call")}
-            className="flex items-center justify-center gap-2"
+            className="flex items-center text-sm !font-semibold !bg-primary-blue rounded-lg justify-center gap-3"
           >
-            <Icons.plus className="size-4" />
+            <Icons.plus style={{ width: 14, height: 14 }} />
             {isExpanded && <span>Start Call</span>}
           </SidebarMenuButton>
         </SidebarMenuItem>
+      
         {items.map((item) => (
           <Collapsible
             key={item.title}

apps/web/components/app/section/_components/nav-user.tsx

@@ -43,7 +43,7 @@ export function NavUser({
     avatar: string;
   };
 }) {
-  const { isMobile } = useSidebar();
+  const { isMobile, state } = useSidebar();
   const router = useRouter();
 
   function getInitials(name?: string) {
@@ -66,16 +66,21 @@ export function NavUser({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
-              size="xl"
+              size="lg"
               className="data-[state=open]:text-sidebar-accent-foreground data-[state=collapsed]:p-0"
             >
-              <UserProfile name={user.name} url={user.avatar} />
+              <UserProfile
+                className="rounded-lg"
+                name={user.name}
+                url={user.avatar}
+                size={state === "collapsed" ? "lg" : "sm"}
+              />
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate text-lg font-medium capitalize">
+                <span className="truncate text-sm font-medium capitalize">
                   {user.name}
                 </span>
               </div>
-              <ChevronsUpDown className="ml-auto size-4" />
+              <ChevronsUpDown className="ml-auto" size="sm" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent

apps/web/components/auth/login-card.tsx

@@ -48,7 +48,6 @@ export const LoginCard = ({
           onClick={handleGoogleLogin}
           className="w-full w-lg"
           disabled={isLoading}
-        
         >
           <Icons.google className="mr-2 h-4 w-4" />
           Continue with Google

packages/auth/src/auth.ts

@@ -49,6 +49,9 @@ export const auth = betterAuth({
       prompt: "consent",
     },
   },
+
+ 
+
   advanced: {
     crossSubDomainCookies: {
       enabled: process.env.NODE_ENV === "production",

packages/ui/src/components/icons.tsx

@@ -309,7 +309,7 @@ export const Icons = {
       <path
         d="M9 18C8.33663 18 7.79886 17.4622 7.79886 16.7989V1.20114C7.79886 0.537769 8.33663 0 9 0V0C9.66337 0 10.2011 0.537768 10.2011 1.20114V16.7989C10.2011 17.4622 9.66337 18 9 18V18ZM1.23237 10.2324C0.55175 10.2324 0 9.68062 0 9V9C0 8.31938 0.551749 7.76764 1.23237 7.76764H16.7676C17.4482 7.76764 18 8.31938 18 9V9C18 9.68062 17.4483 10.2324 16.7676 10.2324H8.96382H1.23237Z"
         className={cn(
-          "fill-primary-icon transition-all duration-300",
+          "fill-primary-icon fill-white transition-all duration-300",
           props.fill
         )}
       />
@@ -712,35 +712,20 @@ export const Icons = {
   //sidebar-close
   sidebarClose: (props: IconProps) => (
     <svg
-      height="20"
       width="20"
+      height="16"
+      viewBox="0 0 20 16"
       fill="none"
-      viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        d="M19 13.5714V4.42857C19 2.53503 17.6569 1 16 1H4C2.34315 1 1 2.53503 1 4.42857V13.5714C1 15.465 2.34315 17 4 17H16C17.6569 17 19 15.465 19 13.5714Z"
-        stroke="currentColor"
-        strokeLinecap="square"
-        strokeLinejoin="round"
-        strokeWidth="2"
-      />
-      <path
-        d="M5 11.7142C5.48325 11.7142 5.875 12.162 5.875 12.7142C5.875 13.2664 5.48325 13.7142 5 13.7142C4.51675 13.7142 4.125 13.2664 4.125 12.7142C4.125 12.162 4.51675 11.7142 5 11.7142ZM5 7.99993C5.48325 7.99993 5.875 8.4477 5.875 8.99993C5.875 9.55216 5.48325 9.99993 5 9.99993C4.51675 9.99993 4.125 9.55216 4.125 8.99993C4.125 8.4477 4.51675 7.99993 5 7.99993ZM5 4.28564C5.48325 4.28564 5.875 4.73336 5.875 5.28564C5.875 5.83793 5.48325 6.28564 5 6.28564C4.51675 6.28564 4.125 5.83793 4.125 5.28564C4.125 4.73336 4.51675 4.28564 5 4.28564Z"
-        className="fill-primary-icon"
-        stroke="currentColor"
-        strokeWidth="0.75"
-      />
-      <path
-        d="M9 1V17"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="2"
+        d="M16.6668 0.5H3.3335C1.95516 0.5 0.833496 1.62167 0.833496 3V13C0.833496 14.3783 1.95516 15.5 3.3335 15.5H16.6668C18.0452 15.5 19.1668 14.3783 19.1668 13V3C19.1668 1.62167 18.0452 0.5 16.6668 0.5ZM2.50016 13V3C2.50016 2.54083 2.87433 2.16667 3.3335 2.16667H12.5002V13.8333H3.3335C2.87433 13.8333 2.50016 13.4592 2.50016 13Z"
+        fill="#929292"
       />
     </svg>
   ),
+  
   //friends-Icon-for-now-lol
   friends: (props: IconProps) => (
     <svg

packages/ui/src/components/sidebar.tsx

@@ -27,7 +27,7 @@ import {
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = "20rem";
+export const SIDEBAR_WIDTH = "18rem";
 export const SIDEBAR_WIDTH_MOBILE = "18rem";
 export const SIDEBAR_WIDTH_ICON = "5rem";
 export const SIDEBAR_KEYBOARD_SHORTCUT = "b";