awesome ui changes and expense split restructured

src/app/_components/expense/expense-split.tsx

@@ -4,50 +4,31 @@ import FriendSelect from "../friend/friend-select";
 import { Button } from "@/components/ui/button";
 
 import type { Session } from "next-auth";
-import FriendCard from "../friend/friend-card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Icons } from "@/components/icons";
-import {
-  splitTypeKeys,
-  type ExpenseSplitHook,
-  type SplitType,
-} from "@/hooks/use-expense-split";
-import PaidByInput from "./paid-by";
-import { Separator } from "@radix-ui/react-select";
 
-export default function ExpenseSplit({
-  expenseSplitHook,
-  session,
-}: {
-  expenseSplitHook: ExpenseSplitHook;
-  session: Session;
-}) {
-  const {
-    friends,
-    splitType,
-    setSplitType,
-    friendTarget,
-    setFriendTarget,
-    addParticipant,
-    removeParticipant,
-    participants,
-    splits,
-  } = expenseSplitHook;
+import { Icons } from "@/components/icons";
+import { useExpenseStore } from "@/lib/store/expense-store";
+import PaidByInput from "./paid-by";
+import { api } from "@/trpc/react";
+import SplitTo from "./split-to";
+
+export default function ExpenseSplit({ session }: { session: Session }) {
+  const [friends] = api.friend.getAll.useSuspenseQuery();
+
+  const friendTarget = useExpenseStore((state) => state.friendTarget);
+  const setFriendTarget = useExpenseStore((state) => state.setFriendTarget);
+  const addParticipant = useExpenseStore((state) => state.addParticipant);
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <PaidByInput
-          expenseSplitHook={expenseSplitHook}
-          sessionUser={session.user}
-        />
+    <div className="space-y-4 ">
+      <div className="flex items-center justify-center gap-2">
+        <span>Paid by</span>
+        <PaidByInput sessionUser={session.user} />
       </div>
-      <Separator className=" bg-primary w-full h-px my-12" />
+      <div className="flex items-center justify-center gap-2">
+        <span>and spliited</span>
+        <SplitTo />
+      </div>
+      {/* <Separator className=" bg-primary w-full h-px my-12" />
       <Select
         value={splitType}
         onValueChange={(currentValue) =>
@@ -65,30 +46,7 @@ export default function ExpenseSplit({
           ))}
         </SelectContent>
       </Select>
-      <div className="flex gap-2 items-center w-full">
-        <FriendSelect
-          className="grow"
-          onSelect={setFriendTarget}
-          initialValue={friendTarget}
-          excludeIds={participants.map((user) => user.id!)}
-        />
-        <Button
-          variant={"outline"}
-          size={"icon"}
-          onClick={(e) => {
-            e.preventDefault();
-            if (!friendTarget) return;
-            const newUser = friends.find(
-              (friend) => friend.user.id === friendTarget
-            )!;
-
-            addParticipant(newUser.user!);
-            setFriendTarget(undefined);
-          }}
-        >
-          <Icons.add className="size-4" />
-        </Button>
-      </div>
+     
       <h4 className="text-lg">Owed to</h4>
       <ul className="space-y-2">
         {participants.map((user) => (
@@ -142,7 +100,7 @@ export default function ExpenseSplit({
             </FriendCard>
           </li>
         ))}
-      </ul>
+      </ul> */}
     </div>
   );
 }