fix: minor design fixes and navigation fixes

Signed-off-by: Varun Raj <mailme@varunraj.in>

src/components/albums/potential-albums/PotentialDateItem.tsx

@@ -15,8 +15,8 @@ export default function PotentialDateItem({ record, onSelect }: IProps) {
       onClick={() => onSelect(record.date)}
       key={record.date}
       className={
-        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 hover:bg-zinc-100 px-4",
-        startDate === record.date ? "bg-zinc-100" : "")
+        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100 px-4",
+        startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
       }
     >
       <p className="font-mono text-sm">{record.date}</p>

src/components/people/PersonItem.tsx

@@ -10,28 +10,44 @@ import Link from "next/link";
 import { ENV } from "@/config/environment";
 import { ArrowUpRight } from "lucide-react";
 import { useConfig } from "@/contexts/ConfigContext";
+import { useToast } from "../ui/use-toast";
 
 interface IProps {
   person: IPerson;
 }
 export default function PersonItem({ person }: IProps) {
   const { immichURL } = useConfig();
+  const { toast } = useToast();
   const [editMode, setEditMode] = useState(false);
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState(person);
 
   const handleEdit = () => {
-    setLoading(true);
-    return updatePerson(person.id, {
-      name: formData.name,
-    })
-      .then(() => {
-        setEditMode(!editMode);
+    if (formData.name && formData.name !== person.name) {
+      setLoading(true);
+      return updatePerson(person.id, {
+        name: formData.name,
       })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-      });
+        .then(() => {
+          setEditMode(!editMode);
+          toast({
+            title: "Success",
+            description: "Person updated successfully",
+          });
+        })
+        .catch(() => {
+          toast({
+            title: "Error",
+            description: "Failed to update person",
+            variant: "destructive",
+          });
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    } else {
+      setEditMode(!editMode);
+    }
   };
 
   const handleHide = (hidden: boolean) => {
@@ -76,7 +92,7 @@ export default function PersonItem({ person }: IProps) {
 
         <div className="absolute top-2 left-2 group-hover:block hidden">
           <Link
-            className="bg-green-300 block rounded-lg px-2 py-1 text-sm"
+            className="bg-green-300 block rounded-lg px-2 py-1 text-sm dark:text-gray-900"
             href={`${immichURL}/people/${person.id}`}
             target="_blank"
           >

src/pages/_app.tsx

@@ -4,6 +4,7 @@ import type { AppProps } from "next/app";
 import { ThemeProvider } from "next-themes";
 import { ENV } from "@/config/environment";
 import ConfigContext from "@/contexts/ConfigContext";
+import { useRef } from "react";
 
 interface AppPropsWithProps extends AppProps {
   props: {
@@ -11,9 +12,10 @@ interface AppPropsWithProps extends AppProps {
   };
 }
 const App = ({ Component, pageProps, ...props }: AppPropsWithProps) => {
-  console.log("App -> pageProps", props);
+  const intialData = useRef(props.props);
+
   return (
-    <ConfigContext.Provider value={props.props}>
+    <ConfigContext.Provider value={intialData.current}>
       <ThemeProvider attribute="class" storageKey="theme">
         <RootLayout>
           <Component {...pageProps} />