From 37df86ab976c7f8acc5c527f9a4c8ee37e71ca5d Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Wed, 22 Jan 2025 13:54:50 +0900
Subject: [PATCH 1/2] Add bottom tabs

---
 .../src/components/achievements/index.tsx     | 10 ++-
 packages/profile/src/components/activity.tsx  |  5 +-
 .../src/components/inventory/index.tsx        |  5 +-
 .../profile/src/components/layout/index.tsx   | 61 ++++++++++++++++-
 .../profile/src/components/navigation.tsx     | 68 -------------------
 .../src/components/icons/state/clock.tsx      |  2 +-
 6 files changed, 71 insertions(+), 80 deletions(-)
 delete mode 100644 packages/profile/src/components/navigation.tsx

diff --git a/packages/profile/src/components/achievements/index.tsx b/packages/profile/src/components/achievements/index.tsx
index bc2b9ff6f..1535f8620 100644
--- a/packages/profile/src/components/achievements/index.tsx
+++ b/packages/profile/src/components/achievements/index.tsx
@@ -1,4 +1,5 @@
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutHeader,
@@ -8,7 +9,6 @@ import { ScrollArea, Button, ArrowIcon, Spinner } from "@cartridge/ui-next";
 import { TrophiesTab, LeaderboardTab, Scoreboard } from "./tab";
 import { useAccount, useUsername } from "@/hooks/account";
 import { CopyAddress } from "@cartridge/ui-next";
-import { Navigation } from "../navigation";
 import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Trophies } from "./trophies";
@@ -92,11 +92,7 @@ export function Achievements() {
         }
         description={<CopyAddress address={address || self} size="sm" />}
         right={
-          isSelf ? (
-            <Navigation />
-          ) : (
-            <Scoreboard rank={rank} earnings={earnings} />
-          )
+          !isSelf ? <Scoreboard rank={rank} earnings={earnings} /> : undefined
         }
       />
 
@@ -154,6 +150,8 @@ export function Achievements() {
           </div>
         </LayoutContent>
       )}
+
+      {isSelf && <LayoutBottomTabs />}
     </LayoutContainer>
   );
 }
diff --git a/packages/profile/src/components/activity.tsx b/packages/profile/src/components/activity.tsx
index c97eea19d..287d7d54e 100644
--- a/packages/profile/src/components/activity.tsx
+++ b/packages/profile/src/components/activity.tsx
@@ -10,13 +10,13 @@ import {
 } from "@cartridge/ui-next";
 import { useInfiniteTokenTransfersQuery } from "@cartridge/utils/api/indexer";
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutContentError,
   LayoutContentLoader,
   LayoutHeader,
 } from "@/components/layout";
-import { Navigation } from "@/components/navigation";
 import { useAccount } from "@/hooks/account";
 import { Link } from "react-router-dom";
 import { StarkscanUrl, useIndexerAPI } from "@cartridge/utils";
@@ -45,7 +45,6 @@ export function Activity() {
       <LayoutHeader
         title={username}
         description={<CopyAddress address={address} size="sm" />}
-        right={<Navigation />}
       />
 
       {(() => {
@@ -124,6 +123,8 @@ export function Activity() {
           }
         }
       })()}
+
+      <LayoutBottomTabs />
     </LayoutContainer>
   );
 }
diff --git a/packages/profile/src/components/inventory/index.tsx b/packages/profile/src/components/inventory/index.tsx
index c241c745a..8c8e57e44 100644
--- a/packages/profile/src/components/inventory/index.tsx
+++ b/packages/profile/src/components/inventory/index.tsx
@@ -4,11 +4,11 @@ export { SendToken } from "./token/send/index";
 
 import { CopyAddress, ScrollArea } from "@cartridge/ui-next";
 import {
+  LayoutBottomTabs,
   LayoutContainer,
   LayoutContent,
   LayoutHeader,
 } from "@/components/layout";
-import { Navigation } from "../navigation";
 import { Tokens } from "./token";
 import { useAccount } from "@/hooks/account";
 import { Outlet, useParams } from "react-router-dom";
@@ -30,7 +30,6 @@ export function Inventory() {
       <LayoutHeader
         title={username}
         description={<CopyAddress address={address} size="sm" />}
-        right={project ? <Navigation /> : undefined}
       />
 
       <LayoutContent className="pb-4">
@@ -41,6 +40,8 @@ export function Inventory() {
           </div>
         </ScrollArea>
       </LayoutContent>
+
+      {project && <LayoutBottomTabs />}
     </LayoutContainer>
   );
 }
diff --git a/packages/profile/src/components/layout/index.tsx b/packages/profile/src/components/layout/index.tsx
index a021aefb4..ebf4b8ba3 100644
--- a/packages/profile/src/components/layout/index.tsx
+++ b/packages/profile/src/components/layout/index.tsx
@@ -1,3 +1,4 @@
+import { ProfileContextTypeVariant } from "@cartridge/controller";
 import {
   Button,
   cn,
@@ -6,9 +7,13 @@ import {
   DotsIcon,
   Spinner,
   ErrorImage,
+  ChestIcon,
+  TrophyIcon,
+  ClockIcon,
 } from "@cartridge/ui-next";
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren, useCallback, useMemo } from "react";
 import { useConnection } from "@/hooks/context";
+import { Link, useLocation } from "react-router-dom";
 import { isIframe } from "@cartridge/utils";
 
 export function LayoutContainer({
@@ -176,3 +181,57 @@ export function LayoutFooter({
     </div>
   );
 }
+
+export function LayoutBottomTabs() {
+  const { pathname } = useLocation();
+  const active = useMemo<ProfileContextTypeVariant>(() => {
+    if (pathname.includes("inventory")) return "inventory";
+    if (pathname.includes("achievements")) return "achievements";
+    if (pathname.includes("activity")) return "activity";
+
+    return "inventory";
+  }, [pathname]);
+
+  return (
+    <div className="h-16 bg-background flex items-stretch absolute left-0 bottom-0 right-0 px-4 pb-2">
+      <Link
+        to="../inventory"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "inventory" && "border-t border-primary",
+        )}
+      >
+        <ChestIcon
+          size="lg"
+          className={active === "inventory" ? "text-primary" : undefined}
+        />
+      </Link>
+      <Link
+        to="../achievements"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "achievements" && "border-t border-primary",
+        )}
+      >
+        <TrophyIcon
+          size="lg"
+          variant={active === "achievements" ? "solid" : "line"}
+          className={active === "achievements" ? "text-primary" : undefined}
+        />
+      </Link>
+      <Link
+        to="../activity"
+        className={cn(
+          "flex-1 flex items-center justify-center text-muted-foreground",
+          active === "activity" && "border-t border-primary",
+        )}
+      >
+        <ClockIcon
+          size="lg"
+          variant={active === "activity" ? "solid" : "line"}
+          className={active === "activity" ? "text-primary" : undefined}
+        />
+      </Link>
+    </div>
+  );
+}
diff --git a/packages/profile/src/components/navigation.tsx b/packages/profile/src/components/navigation.tsx
deleted file mode 100644
index 98cbb20e4..000000000
--- a/packages/profile/src/components/navigation.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import {
-  ClockIcon,
-  cn,
-  CoinsIcon,
-  StateIconProps,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-  TrophyIcon,
-} from "@cartridge/ui-next";
-import { ProfileContextTypeVariant } from "@cartridge/controller";
-import { Link, useMatch, useParams } from "react-router-dom";
-import { useAccount } from "@/hooks/account";
-import { useConnection } from "@/hooks/context";
-
-export function Navigation() {
-  const { project } = useParams<{ project?: string }>();
-  const { namespace } = useConnection();
-  return (
-    <div className="flex rounded border border-1 border-secondary overflow-hidden shrink-0 gap-px bg-secondary">
-      <Item Icon={CoinsIcon} variant="inventory" />
-      {project && namespace && (
-        <Item Icon={TrophyIcon} variant="achievements" />
-      )}
-      {project && <Item Icon={ClockIcon} variant="activity" />}
-    </div>
-  );
-}
-
-function Item({
-  Icon,
-  variant,
-}: {
-  Icon: React.ComponentType<StateIconProps>;
-  variant: ProfileContextTypeVariant;
-}) {
-  const { project } = useParams<{ project?: string }>();
-  const { username } = useAccount();
-  const isPublic = useMatch(`/account/:username/${variant}`);
-  const isSlot = useMatch(`/account/:username/slot/:project/${variant}`);
-  const isActive = project ? isSlot : isPublic;
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Link
-            className={cn(
-              "px-4 py-3 cursor-pointer hover:opacity-[0.8]",
-              isActive ? "bg-secondary" : "bg-background",
-            )}
-            to={
-              project
-                ? `/account/${username}/slot/${project}/${variant}`
-                : `/account/${username}/${variant}`
-            }
-          >
-            <Icon size="sm" variant={isActive ? "solid" : "line"} />
-          </Link>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p className="capitalize">{variant}</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
diff --git a/packages/ui-next/src/components/icons/state/clock.tsx b/packages/ui-next/src/components/icons/state/clock.tsx
index b52ea0f19..aa0081ee7 100644
--- a/packages/ui-next/src/components/icons/state/clock.tsx
+++ b/packages/ui-next/src/components/icons/state/clock.tsx
@@ -6,7 +6,7 @@ export const ClockIcon = memo(
   forwardRef<SVGSVGElement, StateIconProps>(
     ({ className, size, variant, ...props }, forwardedRef) => (
       <svg
-        viewBox="0 0 20 20"
+        viewBox="0 0 24 24"
         className={iconVariants({ size, className })}
         ref={forwardedRef}
         {...props}

From f695d871f08258752d6f2a55bcd0a4d8c1c8aa2a Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Wed, 22 Jan 2025 13:55:03 +0900
Subject: [PATCH 2/2] Prevent content to overwrap with footer

---
 packages/profile/src/components/layout/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/profile/src/components/layout/index.tsx b/packages/profile/src/components/layout/index.tsx
index ebf4b8ba3..381be2c06 100644
--- a/packages/profile/src/components/layout/index.tsx
+++ b/packages/profile/src/components/layout/index.tsx
@@ -139,6 +139,7 @@ export function LayoutContent({
     <div
       className={cn(
         "flex flex-col h-full flex-1 overflow-y-auto px-4 gap-y-4",
+        isIframe() && "max-h-[380px]",
         className,
       )}
     >