fix: button links not responding when touched on a mobile device (#217)

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;

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
+              <NextUiLink isExternal href={link.href} showAnchorIcon>
-                isExternal
-                href={link.href}
-                showAnchorIcon
-                anchorIcon={<MoveUpRight size={12} className="ms-1" />}
-              >
                 {link.label}
               </NextUiLink>
             </NavbarItem>

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 as={ClientLink} href={`/projects/`} locale={locale} color="primary" radius="full" className="px-0">
-          <Button color="primary" radius="full" className="px-0">
+          {t('demo')}
-            {t('demo')}
+        </Button>
-          </Button>
-        </Link>
 
-        <NextUiLink isExternal href="https://kimatata.github.io/unittcms/docs/getstarted/selfhost" aria-label="docs">
+        <Button
-          <Button
+          showAnchorIcon
-            color="primary"
+          as={NextUiLink}
-            variant="bordered"
+          isExternal
-            radius="full"
+          href="https://kimatata.github.io/unittcms/docs/getstarted/selfhost"
-            className="ms-2"
+          aria-label="docs"
-            endContent={<MoveUpRight size={12} />}
+          color="primary"
-          >
+          variant="bordered"
-            {t('get_started')}
+          radius="full"
-          </Button>
+          className="ms-2"
-        </NextUiLink>
+        >
+          {t('get_started')}
+        </Button>
 
-        <NextUiLink size="sm" isExternal href="https://github.com/kimatata/unittcms" aria-label="Github">
+        <Button
-          <Button
+          showAnchorIcon
-            color="primary"
+          as={NextUiLink}
-            variant="bordered"
+          isExternal
-            radius="full"
+          href="https://github.com/kimatata/unittcms"
-            className="ms-2"
+          aria-label="Github"
-            endContent={<MoveUpRight size={12} />}
+          color="primary"
-          >
+          variant="bordered"
-            GitHub
+          radius="full"
-          </Button>
+          className="ms-2"
-        </NextUiLink>
+        >
+          GitHub
+        </Button>
       </div>
     </div>
   );

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
-                  <Button variant="flat" size="sm" endContent={<ArrowRight size={12} />}>
+                  as={Link}
-                    {messages.findProjects}
+                  href={`/projects/`}
-                  </Button>
+                  locale={locale}
-                </Link>
+                  variant="flat"
+                  size="sm"
+                  endContent={<ArrowRight size={12} />}
+                >
+                  {messages.findProjects}
+                </Button>
               </>
             )}
           </div>

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
-          <Button color="primary" variant="light" endContent={<ChevronRight size={16} />}>
+          as={Link}
-            {messages.linkTitle}
+          href={isSignup ? '/account/signin' : '/account/signup'}
-          </Button>
+          locale={locale}
-        </Link>
+          color="primary"
+          variant="light"
+          endContent={<ChevronRight size={16} />}
+        >
+          {messages.linkTitle}
+        </Button>
       </CardHeader>
       <CardBody className="overflow-visible px-4 pt-0 pb-4">
         <form>

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">
+          <Button
-            <Link
+            size="sm"
-              href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
+            as={Link}
-              locale={locale}
+            href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
-              className={NextUiLinkClasses}
+            locale={locale}
-            >
+            variant="light"
-              {cellValue as string}
+            className="data-[hover=true]:bg-transparent"
-            </Link>
+          >
+            {cellValue as string}
           </Button>
         );
       case 'priority':