feat: plans page styling, change plan id from number to uuid

src/components/Plan.tsx

@@ -1,34 +1,87 @@
 import { useAtom } from "jotai";
+import { Pencil } from "lucide-react";
 import Link from "next/link";
+import router from "next/router";
 import React from "react";
 
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 import { planFamily } from "@/pages/createplan/[id]";
 import { plansIds } from "@/pages/plans";
 
-export const Plan = ({ id, name }: { id: number; name: string }) => {
+import { buttonVariants } from "./ui/button";
+
+export const Plan = ({ id, name }: { id: string; name: string }) => {
+  const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
+  const [plan] = useAtom(planFamily({ id }));
+  const [planToCopy, setPlanToCopy] = useAtom(planFamily({ id: uuid }));
+
+  const copyPlan = () => {
+    const newPlan = {
+      id: uuid,
+    };
+
+    void window.umami?.track("Create plan", {
+      numberOfPlans: plans.length,
+    });
 
+    setPlans([...plans, newPlan]);
+    setPlanToCopy({
+      ...planToCopy,
+      courses: plan.courses,
+      groups: plan.groups,
+    });
+
+    setTimeout(() => {
+      void router.push(`/createplan/${newPlan.id}`);
+    }, 200);
+  };
   const deletePlan = () => {
     planFamily.remove({ id });
     setPlans(plans.filter((p) => p.id !== id));
   };
-  // return (
-  //   <Link
-  //     href={`/createplan/${id}`}
-  //     className="flex h-[200px] w-[200px] flex-col items-center justify-center rounded-lg border-2 border-gray-400 bg-white p-4 text-center shadow-lg"
-  //   >
-  //     <div className="text-xl font-semibold">{name}</div>
-  //     <div className="mt-2 text-gray-600">
-  //       Kliknij w plan, aby wyświetlić szczegóły
-  //     </div>
-  //   </Link>
-  // );
+  const groupCount = plan.groups.filter((group) => group.isChecked).length;
   return (
-    <div className="flex justify-between bg-slate-600 text-white">
-      <Link href={`/app/createplan/${id}`}>{name}</Link>
-      <button onClick={deletePlan} className="cursor-pointer">
-        Delete
-      </button>
+    <div className="flex h-[200px] w-[200px] flex-col items-center justify-between rounded-lg border-gray-400 bg-white p-4 text-center shadow-[0_0_5px_5px_rgba(0,0,0,0.10)]">
+      <div className="flex w-full justify-between">
+        <div className="text-xl font-semibold">{name}</div>
+        <Popover>
+          <PopoverTrigger>...</PopoverTrigger>
+          <PopoverContent className="w-44 p-0">
+            <div className="flex flex-col items-start">
+              <button
+                onClick={copyPlan}
+                className="w-full rounded-md rounded-b-none p-2 text-left hover:bg-slate-200"
+              >
+                Kopiuj
+              </button>
+              <button
+                onClick={deletePlan}
+                className="w-full rounded-md rounded-t-none p-2 text-left hover:bg-slate-200"
+              >
+                Usuń
+              </button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className="mt-2 text-gray-600">Wybrane grupy: {groupCount}</div>
+      <Link
+        href={`/app/createplan/${id}`}
+        className={buttonVariants({
+          className: cn(
+            "flex items-center gap-2 text-nowrap rounded-md text-lg",
+          ),
+        })}
+      >
+        Edytuj
+        <Pencil className="h-4 w-4" />
+      </Link>
     </div>
   );
 };

src/pages/app/plans.tsx

@@ -14,18 +14,17 @@ export const plansIds = atomWithStorage<Array<{ id: number }>>("plansIds", []);
 
 const plansAtom = atom(
   (get) => get(plansIds).map((id) => get(planFamily(id))),
-  (get, set, values: Array<{ id: number }>) => {
+  (get, set, values: Array<{ id: string }>) => {
     set(plansIds, values);
   },
 );
-
 const Plans = () => {
   const [plans, setPlans] = useAtom(plansAtom);
   const router = useRouter();
-
+  const uuid = crypto.randomUUID();
   const addNewPlan = () => {
     const newPlan = {
-      id: plans.length + 1,
+      id: uuid,
     };
 
     void window.umami?.track("Create plan", {
@@ -61,15 +60,13 @@ const Plans = () => {
         </div>
 
         <div className="container mx-auto max-h-full flex-1 flex-grow overflow-y-auto p-4">
-          <div className="flex flex-col gap-4">
-            {/* <div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start"> */}
-            {/* <button
+          <div className="flex flex-wrap items-center justify-center gap-4 sm:justify-start">
+            <button
               onClick={addNewPlan}
               className="flex h-[200px] w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-400 p-4 shadow-xl"
             >
               <span>Dodaj nowy plan</span>
-            </button> */}
-            <button onClick={addNewPlan}>Add new plan</button>
+            </button>
             {plans.map((plan) => (
               <Plan key={plan.id} id={plan.id} name={plan.name} />
             ))}

src/pages/app/preview/[id].tsx

@@ -2,6 +2,7 @@ import { useAtom } from "jotai";
 import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import * as React from "react";
 import { LuDownloadCloud } from "react-icons/lu";
 
 import { planFamily } from "@/atoms/planFamily";
@@ -28,6 +29,7 @@ export const getServerSideProps = (async (context) => {
 const SharePlan = ({
   id,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
+  const uuid = React.useMemo(() => crypto.randomUUID(), []);
   const [plans, setPlans] = useAtom(plansIds);
   const plan = usePlan({ planId: id });
   const [planToCopy, setPlanToCopy] = useAtom(