From de9e26a241a096052bc44c8b7389d873f6ef0c57 Mon Sep 17 00:00:00 2001
From: kimatata <117462761+kimatata@users.noreply.github.com>
Date: Tue, 29 Apr 2025 18:38:09 +0900
Subject: [PATCH] fix: button links not responding when touched on a mobile
 device (#217)

---
 frontend/components/ClientLink.tsx            | 10 ++++
 .../src/app/[locale]/HeaderNavbarMenu.tsx     |  7 +--
 frontend/src/app/[locale]/PaneMainTitle.tsx   | 60 ++++++++++---------
 .../src/app/[locale]/account/AccountPage.tsx  | 15 +++--
 .../src/app/[locale]/account/authPage.tsx     | 15 +++--
 .../[folderId]/cases/TestCaseTable.tsx        | 19 +++---
 6 files changed, 72 insertions(+), 54 deletions(-)
 create mode 100644 frontend/components/ClientLink.tsx

diff --git a/frontend/components/ClientLink.tsx b/frontend/components/ClientLink.tsx
new file mode 100644
index 0000000..83db74d
--- /dev/null
+++ b/frontend/components/ClientLink.tsx
@@ -0,0 +1,10 @@
+'use client';
+import { forwardRef } from 'react';
+import { Link } from '@/src/i18n/routing';
+type Props = React.ComponentPropsWithoutRef<typeof Link>;
+const ClientLink = forwardRef<HTMLAnchorElement, Props>(({ href, ...props }, ref) => (
+  <Link ref={ref} href={href} {...props} />
+));
+ClientLink.displayName = 'ClientLink';
+
+export default ClientLink;
diff --git a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
index 40e7bb2..1091d9e 100644
--- a/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
+++ b/frontend/src/app/[locale]/HeaderNavbarMenu.tsx
@@ -101,12 +101,7 @@ export default function HeaderNavbarMenu({ messages, locale }: Props) {
         {commonLinks.map((link) =>
           link.isExternal ? (
             <NavbarItem key={link.uid} className="hidden md:block">
-              <NextUiLink
-                isExternal
-                href={link.href}
-                showAnchorIcon
-                anchorIcon={<MoveUpRight size={12} className="ms-1" />}
-              >
+              <NextUiLink isExternal href={link.href} showAnchorIcon>
                 {link.label}
               </NextUiLink>
             </NavbarItem>
diff --git a/frontend/src/app/[locale]/PaneMainTitle.tsx b/frontend/src/app/[locale]/PaneMainTitle.tsx
index c2865b8..ec1e178 100644
--- a/frontend/src/app/[locale]/PaneMainTitle.tsx
+++ b/frontend/src/app/[locale]/PaneMainTitle.tsx
@@ -1,9 +1,9 @@
-import { title, subtitle } from '@/components/primitives';
 import { Button, Link as NextUiLink } from '@heroui/react';
 import { MoveUpRight } from 'lucide-react';
-import { Link } from '@/src/i18n/routing';
 import { useTranslations } from 'next-intl';
+import { title, subtitle } from '@/components/primitives';
 import { LocaleCodeType } from '@/types/locale';
+import ClientLink from '@/components/ClientLink';
 
 type Props = {
   locale: LocaleCodeType;
@@ -34,35 +34,37 @@ export default function MainTitle({ locale }: Props) {
       <h4 className={subtitle({ class: 'mt-4' })}>{t('integrate_and_manage')}</h4>
 
       <div className="mt-5">
-        <Link href={`/projects/`} locale={locale}>
-          <Button color="primary" radius="full" className="px-0">
-            {t('demo')}
-          </Button>
-        </Link>
+        <Button as={ClientLink} href={`/projects/`} locale={locale} color="primary" radius="full" className="px-0">
+          {t('demo')}
+        </Button>
 
-        <NextUiLink isExternal href="https://kimatata.github.io/unittcms/docs/getstarted/selfhost" aria-label="docs">
-          <Button
-            color="primary"
-            variant="bordered"
-            radius="full"
-            className="ms-2"
-            endContent={<MoveUpRight size={12} />}
-          >
-            {t('get_started')}
-          </Button>
-        </NextUiLink>
+        <Button
+          showAnchorIcon
+          as={NextUiLink}
+          isExternal
+          href="https://kimatata.github.io/unittcms/docs/getstarted/selfhost"
+          aria-label="docs"
+          color="primary"
+          variant="bordered"
+          radius="full"
+          className="ms-2"
+        >
+          {t('get_started')}
+        </Button>
 
-        <NextUiLink size="sm" isExternal href="https://github.com/kimatata/unittcms" aria-label="Github">
-          <Button
-            color="primary"
-            variant="bordered"
-            radius="full"
-            className="ms-2"
-            endContent={<MoveUpRight size={12} />}
-          >
-            GitHub
-          </Button>
-        </NextUiLink>
+        <Button
+          showAnchorIcon
+          as={NextUiLink}
+          isExternal
+          href="https://github.com/kimatata/unittcms"
+          aria-label="Github"
+          color="primary"
+          variant="bordered"
+          radius="full"
+          className="ms-2"
+        >
+          GitHub
+        </Button>
       </div>
     </div>
   );
diff --git a/frontend/src/app/[locale]/account/AccountPage.tsx b/frontend/src/app/[locale]/account/AccountPage.tsx
index dd9a580..06e7d35 100644
--- a/frontend/src/app/[locale]/account/AccountPage.tsx
+++ b/frontend/src/app/[locale]/account/AccountPage.tsx
@@ -86,11 +86,16 @@ export default function AccountPage({ messages, locale }: Props) {
             ) : (
               <>
                 <span className="text-default-500 me-2">{messages.notOwnAnyProjects}</span>
-                <Link href={`/projects/`} locale={locale} className={NextUiLinkClasses}>
-                  <Button variant="flat" size="sm" endContent={<ArrowRight size={12} />}>
-                    {messages.findProjects}
-                  </Button>
-                </Link>
+                <Button
+                  as={Link}
+                  href={`/projects/`}
+                  locale={locale}
+                  variant="flat"
+                  size="sm"
+                  endContent={<ArrowRight size={12} />}
+                >
+                  {messages.findProjects}
+                </Button>
               </>
             )}
           </div>
diff --git a/frontend/src/app/[locale]/account/authPage.tsx b/frontend/src/app/[locale]/account/authPage.tsx
index 6ff9cec..34a8df5 100644
--- a/frontend/src/app/[locale]/account/authPage.tsx
+++ b/frontend/src/app/[locale]/account/authPage.tsx
@@ -97,11 +97,16 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
     <Card className="w-[480px] mt-16">
       <CardHeader className="px-4 pt-4 pb-0 flex justify-between">
         <h4 className="font-bold text-large">{messages.title}</h4>
-        <Link href={isSignup ? '/account/signin' : '/account/signup'} locale={locale}>
-          <Button color="primary" variant="light" endContent={<ChevronRight size={16} />}>
-            {messages.linkTitle}
-          </Button>
-        </Link>
+        <Button
+          as={Link}
+          href={isSignup ? '/account/signin' : '/account/signup'}
+          locale={locale}
+          color="primary"
+          variant="light"
+          endContent={<ChevronRight size={16} />}
+        >
+          {messages.linkTitle}
+        </Button>
       </CardHeader>
       <CardBody className="overflow-visible px-4 pt-0 pb-4">
         <form>
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
index e22040e..d776422 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -14,8 +14,8 @@ import {
   Selection,
   SortDescriptor,
 } from '@heroui/react';
-import { Link, NextUiLinkClasses } from '@/src/i18n/routing';
 import { Plus, MoreVertical, Trash } from 'lucide-react';
+import { Link } from '@/src/i18n/routing';
 import { CaseType, CasesMessages } from '@/types/case';
 import { PriorityMessages } from '@/types/priority';
 import TestCasePriority from '@/components/TestCasePriority';
@@ -82,14 +82,15 @@ export default function TestCaseTable({
         return <span>{cellValue as number}</span>;
       case 'title':
         return (
-          <Button size="sm" variant="light" className="data-[hover=true]:bg-transparent">
-            <Link
-              href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
-              locale={locale}
-              className={NextUiLinkClasses}
-            >
-              {cellValue as string}
-            </Link>
+          <Button
+            size="sm"
+            as={Link}
+            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+            locale={locale}
+            variant="light"
+            className="data-[hover=true]:bg-transparent"
+          >
+            {cellValue as string}
           </Button>
         );
       case 'priority':