fix: upgrade workspaces structure

apps/nextjs/src/app/workspace/(dashboard)/[id]/_components/Sprint.tsx → apps/nextjs/src/_components/workspace/Sprint.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import React, { use, useMemo } from "react";
-import clsx from "clsx";
 import { isSameDay } from "date-fns";
 
 import type { RouterOutputs } from "@acme/api";
 import type { Session } from "@acme/auth";
+import { cn } from "@acme/ui";
+import { Avatar, AvatarFallback, AvatarImage } from "@acme/ui/avatar";
 
-import Avatar from "~/app/_components/avatar";
+import { getAvatarFallback } from "~/_utils/common";
+import { getDaysOfWeek, getWeekdays } from "~/_utils/days";
 import { api } from "~/trpc/react";
-import { getDaysOfWeek, getWeekdays } from "../_lib/days";
 import { ReportList } from "./reports";
 
 /* <Sprint />
@@ -82,11 +83,14 @@ export const Sprint = (props: {
       {sortedUsers.map((user) => (
         <section
           key={user.id}
-          className={clsx("my-4 flex items-start justify-stretch gap-3 px-3")}
+          className={cn("my-4 flex items-start justify-stretch gap-3 px-3")}
         >
           <div className="sticky bottom-4 top-36 flex h-24 w-36 flex-none flex-col items-center text-center">
-            <Avatar src={user.image} alt="" />
-            <h4 className="w-full truncate">{user.name}</h4>
+            <Avatar>
+              <AvatarImage src={user.image} />
+              <AvatarFallback>{getAvatarFallback(user.name)}</AvatarFallback>
+            </Avatar>
+            <h4 className="w-full truncate text-sm">{user.name}</h4>
           </div>
           {weekdays.slice(0, showDaysPerWeek).map((weekday) => (
             <ReportList

apps/nextjs/src/app/workspace/(dashboard)/[id]/_components/WeekList.tsx → apps/nextjs/src/_components/workspace/WeekList.tsx

@@ -2,10 +2,11 @@
 
 import { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import clsx from "clsx";
-import { isToday, isValid, parse } from "date-fns";
+import { format, isToday, isValid, parse } from "date-fns";
 
-import { getDaysOfWeek } from "../_lib/days";
+import { cn } from "@acme/ui";
+
+import { getDaysOfWeek } from "~/_utils/days";
 
 /* <WeekList />
 ============================================================================= */
@@ -22,8 +23,8 @@ export const WeekList = (props: { weekend: boolean; weekdays: number }) => {
   }, [searchParams]);
 
   return (
-    <header className="sticky top-0 z-10 mb-8 border-y border-white px-4 backdrop-blur">
-      <div className={clsx("my-4 flex items-stretch gap-2")}>
+    <header className="sticky top-0 z-10 mb-8 border-y px-4 shadow-sm backdrop-blur dark:border-white">
+      <div className={cn("my-2 flex items-stretch gap-2")}>
         <span className="block w-36">&nbsp;</span>
         {daysOfWeek.slice(0, props.weekdays).map(({ day, date }) => (
           <Day key={day} day={day} date={date} />
@@ -45,14 +46,15 @@ interface DayProps {
 export const Day: React.FC<DayProps> = ({ day, date }) => {
   return (
     <span
-      className={clsx(
-        "m-auto flex h-24 w-24 items-center justify-center self-center rounded-full p-3 text-6xl font-thin",
+      className={cn(
+        "m-auto flex size-16 flex-col items-center justify-center self-center rounded-md p-3 text-2xl",
         {
           "bg-white text-purple-500": isToday(date),
         },
       )}
     >
       {day}
+      <span className="text-xs">{format(date, "EEE")}</span>
     </span>
   );
 };

apps/nextjs/src/_components/workspace/WorkspaceHeader.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useId } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Cookies from "js-cookie";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@acme/ui/form";
+import { Switch } from "@acme/ui/switch";
+
+const FormSchema = z.object({
+  weekend: z.boolean(),
+});
+
+/* <WorkspaceHeader />
+============================================================================= */
+const WorkspaceHeader = () => {
+  const id = useId();
+  const form = useForm<{ weekend: boolean }>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      weekend: false,
+    },
+  });
+
+  useEffect(() => {
+    const weekendCookie = JSON.parse(Cookies.get("weekend") ?? null);
+
+    form.setValue("weekend", weekendCookie);
+  }, [form]);
+
+  useEffect(() => {
+    const subscription = form.watch((value) =>
+      Cookies.set("weekend", value.weekend!.toString(), {
+        expires: 365,
+      }),
+    );
+
+    return () => subscription.unsubscribe();
+  });
+  return (
+    <div className="inline-flex items-center gap-2">
+      <Form {...form}>
+        <FormLabel className="text-md uppercase">Weekends: </FormLabel>
+        <FormField
+          control={form.control}
+          name="weekend"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Switch
+                  id={`switch-${id}`}
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </Form>
+    </div>
+  );
+};
+
+export default WorkspaceHeader;

apps/nextjs/src/app/workspace/(dashboard)/[id]/_components/ManageWeek.tsx → apps/nextjs/src/_components/workspace/manage-week.tsx

@@ -4,10 +4,10 @@ import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { addWeeks, format, isValid, parse, subWeeks } from "date-fns";
-import { FaRegCalendarPlus } from "react-icons/fa6";
-import { HiArrowSmLeft, HiArrowSmRight } from "react-icons/hi";
 
-import { getDaysOfWeek } from "../_lib/days";
+import { Icons } from "@acme/ui/icons";
+
+import { getDaysOfWeek } from "~/_utils/days";
 import WorkspaceHeader from "./WorkspaceHeader";
 
 export function ManageWeek() {
@@ -47,7 +47,7 @@ export function ManageWeek() {
             createQueryString("today", format(subWeeks(today, 1), "yyyy-MM-dd"))
           }
         >
-          <HiArrowSmLeft />
+          <Icons.MoveLeft />
         </Link>
         <Link
           className="inline-flex items-center gap-2"
@@ -58,7 +58,7 @@ export function ManageWeek() {
             createQueryString("today", format(new Date(), "yyyy-MM-dd"))
           }
         >
-          <FaRegCalendarPlus />
+          <Icons.CalendarDays className="size-4" />
           {startWeek}-{endWeek}
         </Link>
         <Link
@@ -68,7 +68,7 @@ export function ManageWeek() {
             createQueryString("today", format(addWeeks(today, 1), "yyyy-MM-dd"))
           }
         >
-          <HiArrowSmRight />
+          <Icons.MoveRight />
         </Link>
       </div>
 

apps/nextjs/src/app/workspace/(dashboard)/[id]/_components/reactions.tsx → apps/nextjs/src/_components/workspace/reactions.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import clsx from "clsx";
 import EmojiPicker, { Emoji } from "emoji-picker-react";
-import { MdOutlineEmojiEmotions } from "react-icons/md";
 
+import { cn } from "@acme/ui";
+import { Button } from "@acme/ui/button";
+import { Icons } from "@acme/ui/icons";
 import { toast } from "@acme/ui/toast";
 
-import Button from "~/app/_components/button";
-import useOutsideClick from "~/app/_hooks/useOutsideClick";
+import useOutsideClick from "~/_hooks/useOutsideClick";
 import { api } from "~/trpc/react";
 
 interface Props {
@@ -101,8 +101,8 @@ export const ReactionRow: React.FC<Props> = ({ sprintId, userId }) => {
       <div className="flex flex-wrap gap-1">
         {uniqueReactions.map((unified) => (
           <Button
-            variant="base"
-            className={clsx(
+            variant="outline"
+            className={cn(
               "text-md rounded-full border border-white px-2 py-1 text-xs",
               {
                 "bg-blue-500 hover:bg-blue-300": reactions.find(
@@ -120,10 +120,10 @@ export const ReactionRow: React.FC<Props> = ({ sprintId, userId }) => {
         ))}
         <Button
           className="text-md rounded-full border border-white px-2 py-1"
-          variant="base"
+          variant="outline"
           onClick={() => setOpen((prevState) => !prevState)}
         >
-          <MdOutlineEmojiEmotions />
+          <Icons.Smile />
         </Button>
       </div>