Can access family tree from member page

geneit_app/src/api/FamilyApi.ts

@@ -64,6 +64,15 @@ export class Family implements FamilyAPI {
     );
   }
 
+  /**
+   * Get family tree URL for member
+   */
+  familyTreeURL(member: Member | number): string {
+    return `/family/${this.family_id}/tree/${
+      typeof member === "number" ? member : member.id
+    }`;
+  }
+
   /**
    * Get application URL for couple page
    */

geneit_app/src/routes/family/FamilyMemberRoute.tsx

@@ -37,6 +37,8 @@ import { PropSelect } from "../../widgets/forms/PropSelect";
 import { SexSelection } from "../../widgets/forms/SexSelection";
 import { UploadPhotoButton } from "../../widgets/forms/UploadPhotoButton";
 import { useQuery } from "../../hooks/useQuery";
+import { mdiFamilyTree } from "@mdi/js";
+import Icon from "@mdi/react";
 
 /**
  * Create a new member route
@@ -150,6 +152,7 @@ export function FamilyMemberRoute(): React.ReactElement {
           couples={family.couples.getAllOf(member!)}
           creating={false}
           editing={false}
+          onrequestOpenTree={() => n(family.family.familyTreeURL(member!))}
           onRequestDelete={deleteMember}
           onRequestEdit={() =>
             n(family.family.URL(`member/${member!.id}/edit`))
@@ -234,6 +237,7 @@ export function MemberPage(p: {
   onRequestEdit?: () => void;
   onRequestDelete?: () => void;
   onForceReload?: () => void;
+  onrequestOpenTree?: () => void;
 }): React.ReactElement {
   const confirm = useConfirm();
   const snackbar = useSnackbar();
@@ -308,6 +312,17 @@ export function MemberPage(p: {
           }
         />
         <Stack direction="row" spacing={1}>
+          {/* Family tree button */}
+          {p.onrequestOpenTree && (
+            <Button
+              variant="outlined"
+              startIcon={<Icon path={mdiFamilyTree} size={1} />}
+              onClick={p.onrequestOpenTree}
+              size="large"
+            >
+              Arbre
+            </Button>
+          )}
           {/* Edit button */}
           {p.onRequestEdit && (
             <Button

geneit_app/src/routes/family/FamilyTreeRoute.tsx

@@ -8,7 +8,7 @@ export function FamilyTreeRoute(): React.ReactElement {
   const family = useFamily();
 
   const onMemberSelected = (id: number | undefined) => {
-    if (id) n(family.family.URL(`tree/${id}`));
+    if (id) n(family.family.familyTreeURL(id));
   };
 
   return (