fix: improved ux for renaming and merging

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

src/components/people/PersonHideCell.tsx

@@ -37,7 +37,7 @@ export default function PersonHideCell({ person, onUpdate }: IProps) {
   return (
     <button
       onClick={() => handleEdit(!hidden)}
-      className="bg-gray-200 rounded-lg px-2 py-1 text-sm border"
+      className="bg-gray-200 rounded-lg px-2 py-1 text-sm border-0"
     >
       {hidden ? "Show" : "Hide"}
     </button>

src/components/people/PersonItem.tsx

@@ -6,6 +6,8 @@ import { PersonMergeDropdown } from "./PersonMergeDropdown";
 import PersonBirthdayCell from "./PersonBirthdayCell";
 import PersonHideCell from "./PersonHideCell";
 import clsx from "clsx";
+import Link from "next/link";
+import { ENV } from "@/config/environment";
 
 interface IProps {
   person: IPerson;
@@ -42,7 +44,12 @@ export default function PersonItem({ person }: IProps) {
           src={person.thumbnailPath}
           alt={person.name}
         />
-        <div className="absolute top-2 right-2">
+        <div className="absolute top-2 left-2 ">
+        <Link className="bg-green-300 rounded-lg px-2 py-1 text-sm" href={`${ENV.IMMICH_URL}/people/${person.id}`} target="_blank">
+          View
+          </Link>
+        </div>
+        <div className="absolute top-2 right-2 ">
           <PersonHideCell
             person={person}
             onUpdate={(newData) => {
@@ -50,6 +57,7 @@ export default function PersonItem({ person }: IProps) {
             }}
           />
         </div>
+
       </div>
       {!editMode ? (
         <h2
@@ -73,6 +81,11 @@ export default function PersonItem({ person }: IProps) {
           onChange={(e) => {
             setFormData({ ...formData, name: e.target.value });
           }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              handleEdit();
+            }
+          }}
           disabled={loading}
           onBlur={handleEdit}
         />

src/components/people/PersonMergeDropdown.tsx

@@ -84,9 +84,10 @@ export function PersonMergeDropdown(
   };
 
   const handleSelect = (value: IPerson) => {
+    setOpen(false);
     return mergePerson(person.id, value.id)
     .then(() => {
-      setOpen(false);
+      
     })
   };
 

src/types/person.d.ts

@@ -5,6 +5,7 @@ export interface IPerson {
   thumbnailPath: string;
   isHidden:      boolean;
   updatedAt:     Date;
+  
 }
 
 interface IPeopleListResponse extends IListData{