feat(dapp): improve names page layout (#422)

* feat: improve layout and add nft name page

* fix: cleanup debris code

* fix: move cleanup

* feat: add logic to button segment

* feat: improve filters ux

* fix: layout

* refactor: remove code duplications

* chore: drop useMemo

* chore: apply simplification

* refactor: improve displayed title in cards

* feat: simplify layour

* fix: disable subnames button when necessary

* refactor: move availability check component to correct place

* fix: build

* fix: apply suggested changes

* chore: rename function

Author: VmMad

dapp/package.json

@@ -29,6 +29,7 @@
         "next": "14.2.28",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "zustand": "^5.0.6",
         "react-hot-toast": "^2.4.1"
     },
     "devDependencies": {

dapp/src/app/(protected)/layout.tsx

@@ -9,9 +9,8 @@ import { useEffect, type PropsWithChildren } from 'react';
 
 import { CONNECT_ROUTE } from '@/lib/constants';
 
-function ProtectedLayout({ children }: PropsWithChildren): JSX.Element {
+export default function ProtectedLayout({ children }: PropsWithChildren): JSX.Element {
     const currentAccount = useCurrentAccount();
-
     useEffect(() => {
         if (!currentAccount) {
             redirect(CONNECT_ROUTE.path);
@@ -20,9 +19,9 @@ function ProtectedLayout({ children }: PropsWithChildren): JSX.Element {
 
     return (
         <main className="flex flex-col min-h-screen">
-            <div className="container w-full h-full py-12 flex">{children}</div>
+            <div className="container w-full h-full pt-20 flex flex-col flex-1">
+                <div className="flex flex-col w-full gap-y-lg py-lg flex-1">{children}</div>
+            </div>
         </main>
     );
 }
-
-export default ProtectedLayout;

dapp/src/app/(protected)/my-names/components/SubnamesPanel.tsx

@@ -0,0 +1,72 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Card, CardBody, CardType, Header, Panel } from '@iota/apps-ui-kit';
+import { useEffect, useState } from 'react';
+
+import { useNameTree } from '@/hooks/useNameTree';
+import { RegistrationNft } from '@/lib/interfaces';
+import { NameTree } from '@/lib/utils/buildNameTree';
+import { formatNameLabel, normalizeName } from '@/lib/utils/format/formatNames';
+
+interface SubnamesPanelProps {
+    selectedName: RegistrationNft;
+    onClose: () => void;
+}
+
+export function SubnamesPanel({ selectedName, onClose }: SubnamesPanelProps) {
+    const nftName = normalizeName(selectedName.name);
+    const rootTree = useNameTree(nftName);
+
+    const [navigationStack, setNavigationStack] = useState<NameTree[]>([]);
+
+    useEffect(() => {
+        if (rootTree) {
+            setNavigationStack([rootTree]);
+        }
+    }, [rootTree]);
+
+    const currentNode = navigationStack[navigationStack.length - 1];
+
+    const goBack = () => {
+        setNavigationStack((prev) => (prev.length > 1 ? prev.slice(0, -1) : prev));
+    };
+
+    const goDeeper = (childName: string) => {
+        const child = currentNode?.subnames.find((n) => n.name === childName);
+        if (child) {
+            setNavigationStack((prev) => [...prev, child]);
+        }
+    };
+
+    if (!currentNode) return null;
+
+    const headerTitle = `Subnames for ${formatNameLabel(navigationStack.length > 1 ? currentNode.name : selectedName.name)}`;
+    const isOnRoot = navigationStack.length === 1;
+
+    return (
+        <div className="max-w-[360px] w-full">
+            <Panel>
+                <div className="w-full flex flex-row items-center justify-between">
+                    <Header
+                        onBack={isOnRoot ? undefined : goBack}
+                        title={headerTitle}
+                        onClose={onClose}
+                    />
+                </div>
+
+                <div className="flex flex-col gap-lg px-md">
+                    {currentNode.subnames.map((nft) => (
+                        <Card
+                            key={nft.name}
+                            type={CardType.Filled}
+                            onClick={() => goDeeper(nft.name)}
+                        >
+                            <CardBody title={nft.name} />
+                        </Card>
+                    ))}
+                </div>
+            </Panel>
+        </div>
+    );
+}

dapp/src/app/(protected)/my-names/filters.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum GroupedNamesFilter {
+    All = 'All',
+    InAuction = 'In Auction',
+    Owned = 'Owned',
+    Subnames = 'Subnames',
+}