التوجيه

 app/   layout.tsx   page.tsx                 → /+المضاف:   deployments/+المضاف:     page.tsx               → /deployments+المضاف:     [id]/page.tsx          → /deployments/dpl_8fK2+المضاف:   settings/+المضاف:     page.tsx               → /settings

+المضاف: import type { ReactNode } from "react";+المضاف: import { Box, Spacer, Text } from "@textjs/app";+المضاف: import Link from "@textjs/app/link";+المضاف: import { usePathname } from "@textjs/app/navigation";+المضاف: +المضاف: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };+المضاف: +المضاف: export default function RootLayout({ children }: { children?: ReactNode }) {+المضاف:   const pathname = usePathname();+المضاف:   return (+المضاف:     <Box className="flex-col grow">+المضاف:       <Box className="flex-row h-1 px-1 gap-2">+المضاف:         <Text bold>▼ Acme</Text>+المضاف:         <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>+المضاف:         <Spacer />+المضاف:       </Box>+المضاف:       <Box className="flex-row h-1 px-1 gap-3">+المضاف:         <Link href="/" shortcut="1">Overview</Link>+المضاف:         <Link href="/deployments" shortcut="2">Deployments</Link>+المضاف:         <Link href="/settings" shortcut="3">Settings</Link>+المضاف:       </Box>+المضاف:       <Box className="flex-col grow p-1">{children}</Box>+المضاف:     </Box>+المضاف:   );+المضاف: }

-المحذوف: import { Box, Spacer, Text } from "@textjs/app";+المضاف: import { Box, Spacer, Text, useInput } from "@textjs/app"; import Link from "@textjs/app/link";-المحذوف: import { usePathname } from "@textjs/app/navigation";+المضاف: import { usePathname, useRouter } from "@textjs/app/navigation";  export default function RootLayout({ children }: { children?: ReactNode }) {   const pathname = usePathname();+المضاف:   const router = useRouter();+المضاف: +المضاف:   useInput((e) => {+المضاف:     if (e.key === "backspace") router.back();+المضاف:   });