feat: basic mobile support (#64)

* feat: add mobile navigation with responsive layout and theme controls * feat: prevent workspace owners from removing themselves and update workspace dropdown styling * feat: add useClickOutside hook and event listener utilities for improved UI interactions * chore: improve mobile UI styling * refactor: improve UI layout and buttons in boards/members views feat: adjust /members layout * fix: standardize layout containers and improve mobile navigation styling * feat: update card view layout * feat: add responsive layout to board view * feat: readjust boards page layout * feat: enhance table view on mobile for members page * feat: extend mobile support with sliding side panels * fix: prevent two panels from being open at the same time * feat: close panels when clicking outside * fix: adjust font-sizing for import source --------- Co-authored-by: Henry <henry_ball@hotmail.co.uk>
2025-07-02 12:58:10 +02:00
parent 316f148663
commit ec1b5d5acb
17 changed files with 479 additions and 127 deletions
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -240,7 +240,7 @@ export default function BoardPage() {
      />
      <div className="relative flex h-full flex-col">
        <PatternedBackground />
-        <div className="z-10 flex w-full justify-between p-8">
+        <div className="z-10 flex w-full flex-col justify-between p-6 md:flex-row md:p-8">
          {isLoading && !boardData && (
            <div className="flex space-x-2">
              <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
@@ -249,7 +249,7 @@ export default function BoardPage() {
          {boardData && (
            <form
              onSubmit={handleSubmit(onSubmit)}
-              className="focus-visible:outline-none"
+              className="order-2 focus-visible:outline-none md:order-1"
            >
              <input
                id="name"
@@ -261,12 +261,12 @@ export default function BoardPage() {
            </form>
          )}
          {!boardData && !isLoading && (
-            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+            <p className="order-2 block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem] md:order-1">
              {t`Board not found`}
            </p>
          )}

-          <div className="flex items-center space-x-2">
+          <div className="order-1 mb-4 flex items-center justify-end space-x-2 md:order-2 md:mb-0">
            <VisibilityButton
              visibility={boardData?.visibility ?? "private"}
              boardPublicId={boardId ?? ""}
--- a/apps/web/src/views/boards/components/ImportBoardsForm.tsx
+++ b/apps/web/src/views/boards/components/ImportBoardsForm.tsx
@@ -81,7 +81,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                    <Listbox.Button className="focus-ring-light-700 block w-full rounded-md border-0 bg-dark-300 bg-white/5 px-4 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6">
                      <span className="flex items-center">
                        {integrationProviders[field.value]?.icon}
-                        <span className="ml-2 block truncate">
+                        <span className="ml-2 block truncate text-sm">
                          {integrationProviders[field.value]?.name}
                        </span>
                      </span>
@@ -113,7 +113,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                                  integrationProviders[integration.provider]
                                    ?.icon
                                }
-                                <span className="ml-2 block truncate font-normal">
+                                <span className="ml-2 block truncate text-sm font-normal">
                                  {
                                    integrationProviders[integration.provider]
                                      ?.name
@@ -125,12 +125,12 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
                        ) : (
                          <Listbox.Option
                            key="trello_placeholder"
-                            className="relative cursor-default select-none px-1"
+                            className="font-sm relative cursor-default select-none px-1"
                            value="trello"
                          >
-                            <div className="flex items-center rounded-[5px] p-1 hover:bg-light-200 dark:hover:bg-dark-400">
+                            <div className="flex items-center rounded-[5px] p-1 text-sm hover:bg-light-200 dark:hover:bg-dark-400">
                              {integrationProviders.trello?.icon}
-                              <span className="ml-2 block truncate font-normal">
+                              <span className="ml-2 block truncate text-sm">
                                {integrationProviders.trello?.name}
                              </span>
                            </div>
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -1,6 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";

+import Button from "~/components/Button";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -19,38 +20,32 @@ export default function BoardsPage() {
  return (
    <>
      <PageHead title={t`Boards | ${workspace.name ?? "Workspace"}`} />
-      <div className="h-full p-8">
-        <div className="mb-8 flex w-full justify-between">
+      <div className="m-auto h-full max-w-[1600px] px-5 py-6 md:px-8 md:py-8">
+        <div className="mb-8 flex w-full items-center justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Boards`}
          </h1>
-          <div className="flex">
-            <button
+          <div className="flex gap-2">
+            <Button
              type="button"
-              className="bg-dark-3000 mr-2 flex items-center gap-x-1.5 rounded-md border-[1px] border-light-600 px-3 py-2 text-sm text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-dark-600 dark:text-dark-1000"
+              variant="secondary"
              onClick={() => openModal("IMPORT_BOARDS")}
+              iconLeft={
+                <HiArrowDownTray aria-hidden="true" className="h-4 w-4" />
+              }
            >
-              <div className="flex h-5 w-5 items-center">
-                <HiArrowDownTray
-                  className="-mr-0.5 h-4 w-4"
-                  aria-hidden="true"
-                />
-              </div>
              {t`Import`}
-            </button>
-            <button
+            </Button>
+            <Button
              type="button"
-              className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
+              variant="primary"
              onClick={() => openModal("NEW_BOARD")}
+              iconLeft={
+                <HiOutlinePlusSmall aria-hidden="true" className="h-4 w-4" />
+              }
            >
-              <div className="h-5 w-5 items-center">
-                <HiOutlinePlusSmall
-                  className="-mr-0.5 h-5 w-5"
-                  aria-hidden="true"
-                />
-              </div>
              {t`New`}
-            </button>
+            </Button>
          </div>
        </div>

--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/apps/web/src/views/card/components/Comment.tsx
@@ -145,7 +145,7 @@ const Comment = ({
            html={watch("comment")}
            disabled={false}
            onChange={(e) => setValue("comment", e.target.value)}
-            className="block w-full max-w-[800px] border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+            className="block w-full max-w-[800px] border-0 bg-transparent py-1.5 text-sm text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
          />
          <div className="flex justify-end space-x-2">
            <Button
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -32,29 +32,18 @@ interface FormValues {
  description: string;
 }

-export default function CardPage() {
+export function CardRightPanel() {
  const router = useRouter();
-  const utils = api.useUtils();
-  const { modalContentType, entityId } = useModal();
-  const { showPopup } = usePopup();
-  const { workspace } = useWorkspace();
-
  const cardId = Array.isArray(router.query.cardId)
    ? router.query.cardId[0]
    : router.query.cardId;

-  const { data: card, isLoading } = api.card.byId.useQuery({
+  const { data: card } = api.card.byId.useQuery({
    cardPublicId: cardId ?? "",
  });

-  const refetchCard = async () => {
-    if (cardId) await utils.card.byId.refetch({ cardPublicId: cardId });
-  };
-
  const board = card?.list.board;
-  const boardId = board?.publicId;
  const labels = board?.labels;
-  const activities = card?.activities;
  const workspaceMembers = board?.workspace.members;
  const selectedLabels = card?.labels;
  const selectedMembers = card?.members;
@@ -109,6 +98,59 @@ export default function CardPage() {
      };
    }) ?? [];

+  return (
+    <div className="h-full w-[360px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
+      <div className="mb-4 flex w-full flex-row">
+        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`List`}</p>
+        <ListSelector
+          cardPublicId={cardId ?? ""}
+          lists={formattedLists}
+          isLoading={!card}
+        />
+      </div>
+      <div className="mb-4 flex w-full flex-row">
+        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Labels`}</p>
+        <LabelSelector
+          cardPublicId={cardId ?? ""}
+          labels={formattedLabels}
+          isLoading={!card}
+        />
+      </div>
+      <div className="flex w-full flex-row">
+        <p className="my-2 mb-2 w-[100px] text-sm font-medium">{t`Members`}</p>
+        <MemberSelector
+          cardPublicId={cardId ?? ""}
+          members={formattedMembers}
+          isLoading={!card}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function CardPage() {
+  const router = useRouter();
+  const utils = api.useUtils();
+  const { modalContentType, entityId } = useModal();
+  const { showPopup } = usePopup();
+  const { workspace } = useWorkspace();
+
+  const cardId = Array.isArray(router.query.cardId)
+    ? router.query.cardId[0]
+    : router.query.cardId;
+
+  const { data: card, isLoading } = api.card.byId.useQuery({
+    cardPublicId: cardId ?? "",
+  });
+
+  const refetchCard = async () => {
+    if (cardId) await utils.card.byId.refetch({ cardPublicId: cardId });
+  };
+
+  const board = card?.list.board;
+  const boardId = board?.publicId;
+  const activities = card?.activities;
+
  const updateCard = api.card.update.useMutation({
    onError: () => {
      showPopup({
@@ -138,8 +180,6 @@ export default function CardPage() {
    });
  };

-  const description = watch("description");
-
  if (!cardId) return <></>;

  return (
@@ -149,7 +189,7 @@ export default function CardPage() {
      />
      <div className="flex h-full flex-1 flex-row">
        <div className="flex h-full w-full flex-col overflow-hidden">
-          <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-8">
+          <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto p-6 md:p-8">
            <div className="mb-8 flex w-full items-center justify-between">
              {!card && isLoading && (
                <div className="flex space-x-2">
@@ -196,7 +236,7 @@ export default function CardPage() {
            </div>
            {card && (
              <>
-                <div className="mb-10 flex w-full max-w-2xl justify-between">
+                <div className="mb-10 flex w-full max-w-2xl flex-col justify-between">
                  <form
                    onSubmit={handleSubmit(onSubmit)}
                    className="w-full space-y-6"
@@ -230,32 +270,6 @@ export default function CardPage() {
            )}
          </div>
        </div>
-        <div className="w-[475px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
-          <div className="mb-4 flex w-full">
-            <p className="my-2 w-[100px] text-sm">{t`List`}</p>
-            <ListSelector
-              cardPublicId={cardId}
-              lists={formattedLists}
-              isLoading={!card}
-            />
-          </div>
-          <div className="mb-4 flex w-full">
-            <p className="my-2 w-[100px] text-sm">{t`Labels`}</p>
-            <LabelSelector
-              cardPublicId={cardId}
-              labels={formattedLabels}
-              isLoading={!card}
-            />
-          </div>
-          <div className="flex w-full">
-            <p className="my-2 w-[100px] text-sm">{t`Members`}</p>
-            <MemberSelector
-              cardPublicId={cardId}
-              members={formattedMembers}
-              isLoading={!card}
-            />
-          </div>
-        </div>

        <Modal>
          {modalContentType === "NEW_LABEL" && (
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -2,6 +2,8 @@ import { t } from "@lingui/core/macro";
 import { HiEllipsisHorizontal, HiOutlinePlusSmall } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";

+import { authClient } from "@kan/auth/client";
+
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Dropdown from "~/components/Dropdown";
@@ -26,6 +28,7 @@ export default function MembersPage() {

  const TableRow = ({
    memberPublicId,
+    memberId,
    memberName,
    memberEmail,
    memberImage,
@@ -35,6 +38,7 @@ export default function MembersPage() {
    showSkeleton,
  }: {
    memberPublicId?: string;
+    memberId?: string | null | undefined;
    memberName?: string | null | undefined;
    memberEmail?: string | null | undefined;
    memberImage?: string | null | undefined;
@@ -43,13 +47,19 @@ export default function MembersPage() {
    isLastRow?: boolean;
    showSkeleton?: boolean;
  }) => {
+    const { data: session } = authClient.useSession();
    return (
      <tr className="rounded-b-lg">
-        <td className={twMerge("w-[65%]", isLastRow ? "rounded-bl-lg" : "")}>
-          <div className="flex items-center p-4">
+        <td
+          className={twMerge(
+            "w-full sm:w-[65%]",
+            isLastRow ? "rounded-bl-lg" : "",
+          )}
+        >
+          <div className="flex items-center p-2 sm:p-4">
            <div className="flex-shrink-0">
              {showSkeleton ? (
-                <div className="h-9 w-9 animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
+                <div className="h-8 w-8 animate-pulse rounded-full bg-light-200 dark:bg-dark-200 sm:h-9 sm:w-9" />
              ) : (
                <Avatar
                  name={memberName ?? ""}
@@ -63,7 +73,7 @@ export default function MembersPage() {
                <div className="flex items-center">
                  <p
                    className={twMerge(
-                      "mr-2 text-sm font-medium text-neutral-900 dark:text-dark-1000",
+                      "mr-2 truncate text-xs font-medium text-neutral-900 dark:text-dark-1000 sm:text-sm",
                      showSkeleton &&
                        "md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
                    )}
@@ -73,7 +83,7 @@ export default function MembersPage() {
                </div>
                <p
                  className={twMerge(
-                    "truncate text-sm text-dark-900",
+                    "truncate text-xs text-dark-900 sm:text-sm",
                    showSkeleton &&
                      "h-3 w-[175px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
                  )}
@@ -86,15 +96,15 @@ export default function MembersPage() {
        </td>
        <td
          className={twMerge(
-            "w-[35%] min-w-[150px]",
+            "w-auto min-w-[120px] sm:w-[35%] sm:min-w-[150px]",
            isLastRow && "rounded-br-lg",
          )}
        >
-          <div className="flex w-full items-center justify-between px-3">
-            <div>
+          <div className="flex w-full items-center justify-between px-2 sm:px-3">
+            <div className="flex flex-col sm:flex-row sm:items-center">
              <span
                className={twMerge(
-                  "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
+                  "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20 sm:text-[11px]",
                  showSkeleton &&
                    "h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
                )}
@@ -103,7 +113,7 @@ export default function MembersPage() {
                  memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
              </span>
              {memberStatus === "invited" && (
-                <span className="ml-2 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20">
+                <span className="mt-1 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[10px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20 sm:ml-2 sm:mt-0 sm:text-[11px]">
                  {t`Pending`}
                </span>
              )}
@@ -114,24 +124,26 @@ export default function MembersPage() {
                (workspace.role !== "admin" || showSkeleton) && "hidden",
              )}
            >
-              <Dropdown
-                items={[
-                  {
-                    label: t`Remove member`,
-                    action: () =>
-                      openModal(
-                        "REMOVE_MEMBER",
-                        memberPublicId,
-                        memberEmail ?? "",
-                      ),
-                  },
-                ]}
-              >
-                <HiEllipsisHorizontal
-                  size={25}
-                  className="text-light-900 dark:text-dark-900"
-                />
-              </Dropdown>
+              {session?.user.id !== memberId && (
+                <Dropdown
+                  items={[
+                    {
+                      label: t`Remove member`,
+                      action: () =>
+                        openModal(
+                          "REMOVE_MEMBER",
+                          memberPublicId,
+                          memberEmail ?? "",
+                        ),
+                    },
+                  ]}
+                >
+                  <HiEllipsisHorizontal
+                    size={20}
+                    className="text-light-900 dark:text-dark-900 sm:size-[25px]"
+                  />
+                </Dropdown>
+              )}
            </div>
          </div>
        </td>
@@ -142,7 +154,7 @@ export default function MembersPage() {
  return (
    <>
      <PageHead title={t`Members | ${workspace.name ?? "Workspace"}`} />
-      <div className="m-auto max-w-[1600px] px-28 py-12">
+      <div className="m-auto h-full max-w-[1600px] p-6 px-5 md:px-28 md:py-12">
        <div className="mb-8 flex w-full justify-between">
          <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
            {t`Members`}
@@ -159,21 +171,21 @@ export default function MembersPage() {
        </div>

        <div className="mt-8 flow-root">
-          <div className="-mx-4 -my-2 overflow-x-visible sm:-mx-6 lg:-mx-8">
-            <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+          <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div className="inline-block min-w-full px-4 py-2 align-middle sm:px-6 lg:px-8">
              <div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
                <table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
                  <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
                    <tr>
                      <th
                        scope="col"
-                        className="w-[65%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
+                        className="w-full rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:w-[65%] sm:pl-6"
                      >
                        {t`User`}
                      </th>
                      <th
                        scope="col"
-                        className="w-[35%] rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
+                        className="w-auto whitespace-nowrap rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:w-[35%]"
                      >
                        {t`Role`}
                      </th>
@@ -185,6 +197,7 @@ export default function MembersPage() {
                        <TableRow
                          key={member.publicId}
                          memberPublicId={member.publicId}
+                          memberId={member.user?.id}
                          memberName={member.user?.name}
                          memberEmail={member.user?.email ?? member.email}
                          memberImage={member.user?.image}
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -106,7 +106,7 @@ export default function SettingsPage() {
      <div className="flex h-full w-full flex-col overflow-hidden">
        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
-          <div className="px-28 py-12">
+          <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
            <div className="mb-8 flex w-full justify-between">
              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
                {t`Settings`}