feat: clean up code

Author: AbdelilahOu

.cursorrules

@@ -2,7 +2,7 @@ Code Style and Structure:
 - Write concise, technical TypeScript code with accurate examples
 - Use functional and declarative programming patterns; avoid classes
 - Prefer iteration and modularization over code duplication
-- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
+- Use descriptive variable names with auxiliary verbs (e.g., isPending, hasError)
 - Structure files: exported component, subcomponents, helpers, static content, types
 
 Naming Conventions:

apps/mobile/env.ts

@@ -1 +1,2 @@
 export const SERVER_URL = "https://dorf-api-staging.abdelilah4dev.workers.dev";
+// export const SERVER_URL = import.meta.env.VITE_SERVER_URL;

apps/mobile/src/components/auth/AUTH_CODES.ts

@@ -15,9 +15,12 @@ import { useNavigate } from "@tanstack/react-router";
 import type React from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
-import { useSystemTray } from "../../context";
-import { authClient } from "../../lib/auth-client";
-import { type AuthError, AuthErrorCodes } from "./AUTH_CODES";
+import { useTauriApis } from "../../context";
+import {
+  type AuthError,
+  AuthErrorCodes,
+  authClient,
+} from "../../lib/auth-client";
 
 const signInSchema = z.object({
   email: z.string().email({ message: "Invalid email address" }),
@@ -30,7 +33,7 @@ type SignInSchema = z.infer<typeof signInSchema>;
 
 const SignInForm: React.FC = () => {
   const { toast } = useToast();
-  const { store } = useSystemTray();
+  const { store } = useTauriApis();
 
   const navigate = useNavigate({ from: "/auth/signin" });
 
@@ -79,7 +82,6 @@ const SignInForm: React.FC = () => {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <h2 className="mb-6 font-semibold text-2xl">Sign In</h2>
         <FormField
           control={form.control}
           name="email"

apps/mobile/src/components/auth/sign-in-form.tsx

@@ -15,9 +15,12 @@ import { useNavigate } from "@tanstack/react-router";
 import type React from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
-import { useSystemTray } from "../../context";
-import { authClient } from "../../lib/auth-client";
-import { type AuthError, AuthErrorCodes } from "./AUTH_CODES";
+import { useTauriApis } from "../../context";
+import {
+  type AuthError,
+  AuthErrorCodes,
+  authClient,
+} from "../../lib/auth-client";
 
 const signUpSchema = z.object({
   name: z
@@ -33,7 +36,7 @@ type SignUpSchema = z.infer<typeof signUpSchema>;
 
 const SignUpForm: React.FC = () => {
   const { toast } = useToast();
-  const { store } = useSystemTray();
+  const { store } = useTauriApis();
 
   const form = useForm<SignUpSchema>({
     resolver: zodResolver(signUpSchema),
@@ -84,7 +87,6 @@ const SignUpForm: React.FC = () => {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <h2 className="mb-6 font-semibold text-2xl">Sign Up</h2>
         <FormField
           control={form.control}
           name="name"

apps/mobile/src/components/auth/sign-up-form.tsx

@@ -0,0 +1,57 @@
+import { buttonVariants } from "@dorf/ui/button";
+import { Icons } from "@dorf/ui/icons";
+import { Link } from "@tanstack/react-router";
+
+function BottomNavigation() {
+  return (
+    <div className="flex min-h-10 items-center justify-between px-8 py-1">
+      <Link
+        className={buttonVariants({
+          size: "icon",
+          variant: "ghost",
+        })}
+        to="/"
+      >
+        <Icons.Home />
+      </Link>
+      <Link
+        className={buttonVariants({
+          size: "icon",
+          variant: "ghost",
+        })}
+        to="/homes" // Assuming your homes page route is "/homes"
+      >
+        <Icons.Homes />
+      </Link>
+      <Link
+        className={buttonVariants({
+          size: "icon",
+          variant: "ghost",
+        })}
+        to="/readings"
+      >
+        <Icons.MeterReadings />
+      </Link>
+      <Link
+        className={buttonVariants({
+          size: "icon",
+          variant: "ghost",
+        })}
+        to="/"
+      >
+        <Icons.Profile />
+      </Link>
+      <Link
+        className={buttonVariants({
+          size: "icon",
+          variant: "ghost",
+        })}
+        to="/"
+      >
+        <Icons.Settings />
+      </Link>
+    </div>
+  );
+}
+
+export default BottomNavigation;

apps/mobile/src/components/bottom-navigation.tsx

@@ -1,10 +1,35 @@
+import { buttonVariants } from "@dorf/ui/button";
 import { Link } from "@tanstack/react-router";
 
 export function DefaultErrorComponent({ error }: { error: Error }) {
   return (
-    <div className="flex w-full flex-col space-y-2">
-      <div>{error.message}</div>
-      <Link to="/">Go back home</Link>
+    <div className="flex h-screen flex-col items-center justify-center">
+      <div className="rounded-lg p-8 text-center">
+        <h2 className="mb-4 font-bold text-3xl text-red-600">
+          Oops! Something went wrong.
+        </h2>
+        <p className="mb-6 text-gray-700">
+          We've encountered an unexpected issue. Please try again or contact
+          support if the problem persists.
+        </p>
+
+        {/* Optional: Show a more detailed message if available, but avoid revealing sensitive info */}
+        {error.message && (
+          <div className="mb-4 rounded border border-red-200 bg-red-100 p-2 text-red-500 ">
+            <p className="font-medium">Error Details:</p>
+            <p className="text-sm">{error.message}</p>
+          </div>
+        )}
+
+        <Link
+          to="/"
+          className={buttonVariants({
+            variant: "link",
+          })}
+        >
+          Go back home
+        </Link>
+      </div>
     </div>
   );
 }