From 5adb918564a656483e007402ccf18e1a5fdfb36f Mon Sep 17 00:00:00 2001
From: Michael Schwobe <mschwobe@gmail.com>
Date: Tue, 12 Dec 2023 12:24:19 -0600
Subject: [PATCH] - Updated `/bookmarks/status` route with `defer`, `Await` and
 `Suspense` - Added `/bookmarks/status/all` route

---
 app/components/status-tr.tsx                  |  80 ++++++
 .../table-columns-bookmarks-status.tsx        | 154 -----------
 app/routes/bookmarks.status._index.tsx        | 243 ++++++++++++++++++
 app/routes/bookmarks.status.all.tsx           | 148 +++++++++++
 app/routes/bookmarks.status.tsx               | 175 -------------
 app/utils/matches-validation.ts               |   2 -
 app/utils/status.server.ts                    |  17 --
 prisma/data.db                                | Bin 417792 -> 417792 bytes
 tests/e2e/bookmarks.status.test.ts            |  15 +-
 9 files changed, 472 insertions(+), 362 deletions(-)
 create mode 100644 app/components/status-tr.tsx
 delete mode 100644 app/components/table-columns-bookmarks-status.tsx
 create mode 100644 app/routes/bookmarks.status._index.tsx
 create mode 100644 app/routes/bookmarks.status.all.tsx
 delete mode 100644 app/routes/bookmarks.status.tsx

diff --git a/app/components/status-tr.tsx b/app/components/status-tr.tsx
new file mode 100644
index 0000000..dcf5373
--- /dev/null
+++ b/app/components/status-tr.tsx
@@ -0,0 +1,80 @@
+import { forwardRef } from "react";
+import { ButtonDelete } from "~/components/button-delete";
+import { StatusCode } from "~/components/status-code";
+import { StatusText } from "~/components/status-text";
+import { Icon } from "~/components/ui/icon";
+import { LinkButton } from "~/components/ui/link-button";
+import { Td, Tr } from "~/components/ui/table";
+import { cn } from "~/utils/misc";
+import type { GetStatusData } from "~/utils/status.server";
+
+export const StatusTr = forwardRef<
+  React.ElementRef<"tr">,
+  Omit<React.ComponentPropsWithoutRef<"tr">, "children"> & {
+    id: string;
+    isOkHidden?: boolean;
+    statusCode: GetStatusData["status"] | null;
+    statusText: GetStatusData["statusText"] | null;
+    url: string;
+  }
+>(
+  (
+    { className, id, isOkHidden, url, statusCode, statusText, ...props },
+    ref,
+  ) => {
+    return (
+      <Tr
+        {...props}
+        className={cn(
+          isOkHidden &&
+            typeof statusCode === "number" &&
+            statusCode >= 200 &&
+            statusCode <= 299
+            ? "hidden"
+            : undefined,
+          className,
+        )}
+        ref={ref}
+      >
+        <Td>
+          <LinkButton
+            to={`/bookmarks/${id}/edit`}
+            size="sm-icon"
+            variant="ghost"
+          >
+            <Icon type="pencil" />
+            <span className="sr-only">Edit bookmark</span>
+          </LinkButton>
+        </Td>
+        <Td className="max-sm:px-0">
+          <StatusCode>{statusCode}</StatusCode>
+        </Td>
+        <Td>
+          <LinkButton
+            to={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            size="sm"
+            variant="ghost"
+            className="flex w-full max-w-[75vw] justify-start overflow-hidden sm:max-w-[45vw]"
+          >
+            <Icon type="external-link" />
+            <span className="truncate font-normal">{url}</span>
+          </LinkButton>
+        </Td>
+        <Td className="max-sm:px-0">
+          <StatusText>{statusText}</StatusText>
+        </Td>
+        <Td>
+          <ButtonDelete
+            formAction={`/bookmarks/${id}/edit`}
+            label="bookmark"
+            size="sm-icon"
+            variant="ghost-danger"
+          />
+        </Td>
+      </Tr>
+    );
+  },
+);
+StatusTr.displayName = "StatusTr";
diff --git a/app/components/table-columns-bookmarks-status.tsx b/app/components/table-columns-bookmarks-status.tsx
deleted file mode 100644
index 1261833..0000000
--- a/app/components/table-columns-bookmarks-status.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import type { ColumnDef } from "@tanstack/react-table";
-import { createColumnHelper } from "@tanstack/react-table";
-import { ButtonDelete } from "~/components/button-delete";
-import { StatusCode } from "~/components/status-code";
-import { StatusText } from "~/components/status-text";
-import { Checkbox } from "~/components/ui/checkbox";
-import { Icon } from "~/components/ui/icon";
-import { LinkButton } from "~/components/ui/link-button";
-import type { loader as loaderBookmarksStatus } from "~/routes/bookmarks.status";
-import { cn } from "~/utils/misc";
-
-type BookmarksStatusData = Awaited<
-  ReturnType<Awaited<ReturnType<typeof loaderBookmarksStatus>>["json"]>
->["data"];
-
-type BookmarksStatusItem = BookmarksStatusData[0];
-
-const columnHelper = createColumnHelper<BookmarksStatusItem>();
-
-// TODO: Remove ts-expect-error(s) once this is fixed.
-// 🤷‍♂️ Flagged as a TS error and ts-expect-error doesn't work, leaving as is.
-// See node module bug https://github.com/TanStack/table/issues/5135
-export const columnsBookmarksStatus: ColumnDef<BookmarksStatusItem>[] = [
-  columnHelper.display({
-    id: "select",
-    header: ({ table }) => (
-      <Checkbox
-        name="idsSelectedAll"
-        checked={table.getIsAllRowsSelected()}
-        indeterminate={table.getIsSomeRowsSelected()}
-        onCheckedChange={(checked) => {
-          const handler = table.getToggleAllRowsSelectedHandler();
-          return handler({ target: { checked } });
-        }}
-        aria-label="Select all rows"
-        aria-controls={table
-          .getSelectedRowModel()
-          .rows.map((row) => row.original.id)
-          .join(" ")}
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        name="idsSelected"
-        id={row.original.id}
-        value={row.original.id}
-        checked={row.getIsSelected()}
-        indeterminate={row.getIsSomeSelected()}
-        disabled={!row.getCanSelect()}
-        onCheckedChange={(checked) => {
-          const handler = row.getToggleSelectedHandler();
-          return handler({ target: { checked } });
-        }}
-        aria-label="Select row"
-        aria-controls={row.original.id}
-      />
-    ),
-    footer: ({ column }) => column.id,
-  }),
-
-  // @ts-expect-error - see comment above
-  columnHelper.accessor((row) => row._meta.status, {
-    id: "status",
-    sortingFn: "alphanumeric",
-    header: () => (
-      <>
-        <Icon type="shield" className="mx-auto" />
-        <span className="sr-only">Status</span>
-      </>
-    ),
-    cell: ({ getValue }) => <StatusCode>{getValue()}</StatusCode>,
-    footer: ({ column }) => column.id,
-  }),
-
-  // @ts-expect-error - see comment above
-  columnHelper.accessor("url", {
-    header: () => "URL",
-    cell: ({ getValue }) => (
-      <LinkButton
-        to={getValue()}
-        target="_blank"
-        rel="noopener noreferrer"
-        size="sm"
-        variant="ghost"
-        className={cn(
-          "flex w-full justify-start overflow-hidden",
-          "max-w-[75vw] sm:max-w-[45vw]",
-        )}
-      >
-        <Icon type="external-link" />
-        <span className="truncate font-normal">{getValue()}</span>
-      </LinkButton>
-    ),
-    footer: ({ column }) => column.id,
-  }),
-
-  // @ts-expect-error - see comment above
-  columnHelper.accessor((row) => row._meta.statusText, {
-    id: "statusText",
-    sortingFn: "alphanumeric",
-    header: () => (
-      <>
-        <Icon type="info" className="mx-auto" />
-        <span className="sr-only">Status Text</span>
-      </>
-    ),
-    cell: ({ getValue }) => <StatusText>{getValue()}</StatusText>,
-    footer: ({ column }) => column.id,
-  }),
-
-  // @ts-expect-error - see comment above
-  columnHelper.accessor("id", {
-    id: "edit",
-    enableSorting: false,
-    header: () => (
-      <>
-        <Icon type="pencil" className="mx-auto" />
-        <span className="sr-only">Edit</span>
-      </>
-    ),
-    cell: ({ getValue }) => (
-      <LinkButton
-        to={`/bookmarks/${getValue()}/edit`}
-        size="sm-icon"
-        variant="ghost"
-      >
-        <Icon type="pencil" />
-        <span className="sr-only">Edit bookmark</span>
-      </LinkButton>
-    ),
-    footer: ({ column }) => column.id,
-  }),
-
-  // @ts-expect-error - see comment above
-  columnHelper.accessor("id", {
-    id: "delete",
-    enableSorting: false,
-    header: () => (
-      <>
-        <Icon type="trash" className="mx-auto" />
-        <span className="sr-only">Delete</span>
-      </>
-    ),
-    cell: ({ getValue }) => (
-      <ButtonDelete
-        formAction={`/bookmarks/${getValue()}/edit`}
-        label="bookmark"
-        size="sm-icon"
-        variant="ghost-danger"
-      />
-    ),
-    footer: ({ column }) => column.id,
-  }),
-];
diff --git a/app/routes/bookmarks.status._index.tsx b/app/routes/bookmarks.status._index.tsx
new file mode 100644
index 0000000..7e980b6
--- /dev/null
+++ b/app/routes/bookmarks.status._index.tsx
@@ -0,0 +1,243 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { defer } from "@remix-run/node";
+import { Await, useLoaderData } from "@remix-run/react";
+import { Suspense } from "react";
+import { ButtonFirst } from "~/components/button-first";
+import { ButtonLast } from "~/components/button-last";
+import { ButtonNext } from "~/components/button-next";
+import { ButtonPage } from "~/components/button-page";
+import { ButtonPrev } from "~/components/button-prev";
+import { FormPaginate } from "~/components/form-paginate";
+import { Main } from "~/components/main";
+import { SearchHelp } from "~/components/search-help";
+import { StatusTr } from "~/components/status-tr";
+import { Badge } from "~/components/ui/badge";
+import { H1 } from "~/components/ui/h1";
+import { Icon } from "~/components/ui/icon";
+import { LinkButton } from "~/components/ui/link-button";
+import {
+  Table,
+  TableWrapper,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+} from "~/components/ui/table";
+import {
+  getBookmarksCount,
+  getBookmarksStatus,
+} from "~/models/bookmark.server";
+import { requireUserId } from "~/utils/auth.server";
+import type { Handle } from "~/utils/matches-validation";
+import { formatMetaTitle } from "~/utils/misc";
+import {
+  toPaginationSearchParams,
+  toPaginationValues,
+} from "~/utils/pagination";
+import { parsePaginationSearchParams } from "~/utils/pagination-validation";
+import type { GetStatusData } from "~/utils/status.server";
+import { getStatus } from "~/utils/status.server";
+
+export const handle = {
+  /**
+   * This value is used to abort the fetch request after a certain delay.
+   * Why: It takes ~8s to resolve 20 items, but the default is 5s.
+   */
+  abortDelay: 8_000,
+  /**
+   * This value disables the <Script> tag in root.tsx.
+   * Why: Solves hydration mismatch with `getStatus`, <Suspense> and <Await>.
+   */
+  isDehydrated: true,
+} satisfies Handle;
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  await requireUserId(request);
+
+  const { searchParams } = new URL(request.url);
+  const { skip, take } = parsePaginationSearchParams({ searchParams });
+
+  const [bookmarks, count] = await Promise.all([
+    getBookmarksStatus({ skip, take }),
+    getBookmarksCount(),
+  ]);
+  const data = bookmarks.map((bookmark) => ({
+    ...bookmark,
+    _meta: getStatus(bookmark.url, handle.abortDelay),
+  }));
+
+  const hasData = data.length > 0;
+  const hasPagination = count > take;
+
+  const paginationSearchParams = toPaginationSearchParams({
+    searchParams,
+    take,
+  });
+  const paginationValues = toPaginationValues({
+    pagesMax: 5,
+    skip,
+    take,
+    total: count,
+  });
+
+  return defer({
+    count,
+    data,
+    hasData,
+    hasPagination,
+    paginationSearchParams,
+    paginationValues,
+  });
+}
+
+export const meta: MetaFunction<typeof loader> = () => {
+  return [{ title: formatMetaTitle("Status") }];
+};
+
+export default function BookmarksStatusPage() {
+  const loaderData = useLoaderData<typeof loader>();
+
+  return (
+    <Main>
+      <div className="flex items-center gap-2">
+        <H1>
+          <Icon type="shield" />
+          Status <Badge aria-hidden>{loaderData.count}</Badge>
+        </H1>
+        <LinkButton to="/bookmarks/status/all" reloadDocument size="md-icon">
+          <Icon type="shield-alert" />
+          <span className="sr-only">Verify all &amp; filter</span>
+        </LinkButton>
+      </div>
+
+      <SearchHelp
+        count={loaderData.count}
+        singular="bookmark"
+        plural="bookmarks"
+      />
+
+      {loaderData.hasData ? (
+        <TableWrapper>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Icon type="pencil" className="mx-auto" />
+                  <span className="sr-only">Edit</span>
+                </Th>
+                <Th className="max-sm:px-0">
+                  <Icon type="shield" className="mx-auto" />
+                  <span className="sr-only">Status Code</span>
+                </Th>
+                <Th className="w-full">
+                  <span className="block px-3 text-left">URL</span>
+                </Th>
+                <Th className="max-sm:px-0">
+                  <Icon type="info" className="ml-3 mr-auto" />
+                  <span className="sr-only">Status Text</span>
+                </Th>
+                <Th>
+                  <Icon type="trash" className="mx-auto" />
+                  <span className="sr-only">Delete</span>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {loaderData.data.map((row) => (
+                <Suspense
+                  fallback={
+                    <StatusTr
+                      id={row.id}
+                      url={row.url}
+                      statusCode={null}
+                      statusText={null}
+                    />
+                  }
+                  key={row.id}
+                >
+                  <Await resolve={row._meta}>
+                    {(rowMeta) => (
+                      <StatusTr
+                        id={row.id}
+                        url={row.url}
+                        /* 🤷‍♂️ The only property in rowMeta is a Symbol? */
+                        statusCode={
+                          (rowMeta as unknown as GetStatusData)?.status
+                        }
+                        statusText={
+                          (rowMeta as unknown as GetStatusData)?.statusText
+                        }
+                      />
+                    )}
+                  </Await>
+                </Suspense>
+              ))}
+            </Tbody>
+          </Table>
+        </TableWrapper>
+      ) : null}
+
+      {loaderData.hasPagination ? (
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-8">
+          <div className="flex items-center gap-2.5 max-sm:h-10 max-sm:justify-center">
+            <span className="whitespace-nowrap text-sm tabular-nums">
+              Displaying {loaderData.data.length} of {loaderData.count} results.
+            </span>
+          </div>
+          <FormPaginate className="flex gap-2 max-sm:-order-1">
+            {loaderData.paginationSearchParams.map(([name, value]) => (
+              <input
+                key={name}
+                type="hidden"
+                name={name}
+                value={value}
+                hidden
+              />
+            ))}
+            <ButtonFirst
+              name="skip"
+              value={0}
+              disabled={!loaderData.paginationValues.hasPrevPage}
+              size="sm-icon"
+              className="grow"
+            />
+            <ButtonPrev
+              name="skip"
+              value={loaderData.paginationValues.prevPageValue}
+              disabled={!loaderData.paginationValues.hasPrevPage}
+              size="sm-icon"
+              className="grow"
+            />
+            {loaderData.paginationValues.skipPages.map((el) => (
+              <ButtonPage
+                key={el.number}
+                name="skip"
+                value={el.value}
+                number={el.number}
+                isCurrPage={el.isCurrPage}
+                disabled={!el.isSkipPage}
+                size="sm-icon"
+                variant={el.isCurrPage ? "ghost" : undefined}
+                className="grow"
+              />
+            ))}
+            <ButtonNext
+              name="skip"
+              value={loaderData.paginationValues.nextPageValue}
+              disabled={!loaderData.paginationValues.hasNextPage}
+              size="sm-icon"
+              className="grow"
+            />
+            <ButtonLast
+              name="skip"
+              value={loaderData.paginationValues.lastPageValue}
+              disabled={!loaderData.paginationValues.hasNextPage}
+              size="sm-icon"
+              className="grow"
+            />
+          </FormPaginate>
+        </div>
+      ) : null}
+    </Main>
+  );
+}
diff --git a/app/routes/bookmarks.status.all.tsx b/app/routes/bookmarks.status.all.tsx
new file mode 100644
index 0000000..6db996f
--- /dev/null
+++ b/app/routes/bookmarks.status.all.tsx
@@ -0,0 +1,148 @@
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { defer } from "@remix-run/node";
+import { Await, useLoaderData } from "@remix-run/react";
+import { Suspense } from "react";
+import { Main } from "~/components/main";
+import { SearchHelp } from "~/components/search-help";
+import { StatusTr } from "~/components/status-tr";
+import { Badge } from "~/components/ui/badge";
+import { H1 } from "~/components/ui/h1";
+import { Icon } from "~/components/ui/icon";
+import { LinkButton } from "~/components/ui/link-button";
+import {
+  Table,
+  TableWrapper,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+} from "~/components/ui/table";
+import { getBookmarksStatus } from "~/models/bookmark.server";
+import { requireUserId } from "~/utils/auth.server";
+import type { Handle } from "~/utils/matches-validation";
+import { formatMetaTitle } from "~/utils/misc";
+import type { GetStatusData } from "~/utils/status.server";
+import { getStatus } from "~/utils/status.server";
+
+export const handle = {
+  /**
+   * This value is used to abort the fetch request after a certain delay.
+   * Why: It takes ~2min to resolve 1000+ items, but the default is 5s.
+   */
+  abortDelay: 120_000,
+  /**
+   * This value disables the <Script> tag in root.tsx.
+   * Why: Solves hydration mismatch with `getStatus`, <Suspense> and <Await>.
+   */
+  isDehydrated: true,
+} satisfies Handle;
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  await requireUserId(request);
+
+  const bookmarks = await getBookmarksStatus();
+  const count = bookmarks.length;
+  const data = bookmarks.map((bookmark) => ({
+    ...bookmark,
+    _meta: getStatus(bookmark.url, handle.abortDelay),
+  }));
+
+  const hasData = data.length > 0;
+
+  return defer({
+    count,
+    data,
+    hasData,
+  });
+}
+
+export const meta: MetaFunction<typeof loader> = () => {
+  return [{ title: formatMetaTitle("All Status") }];
+};
+
+export default function BookmarksStatusAllPage() {
+  const loaderData = useLoaderData<typeof loader>();
+
+  return (
+    <Main>
+      <div className="flex items-center gap-2">
+        <H1>
+          <Icon type="shield-alert" />
+          All Status <Badge aria-hidden>{loaderData.count}</Badge>
+        </H1>
+        <LinkButton to="/bookmarks/status" reloadDocument size="md-icon">
+          <Icon type="shield" />
+          <span className="sr-only">Verify subset &amp; paginate</span>
+        </LinkButton>
+      </div>
+
+      <SearchHelp
+        count={loaderData.count}
+        singular="bookmark"
+        plural="bookmarks"
+      />
+
+      {loaderData.hasData ? (
+        <TableWrapper>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>
+                  <Icon type="pencil" className="mx-auto" />
+                  <span className="sr-only">Edit</span>
+                </Th>
+                <Th className="max-sm:px-0">
+                  <Icon type="shield" className="mx-auto" />
+                  <span className="sr-only">Status Code</span>
+                </Th>
+                <Th className="w-full">
+                  <span className="block px-3 text-left">URL</span>
+                </Th>
+                <Th className="max-sm:px-0">
+                  <Icon type="info" className="ml-3 mr-auto" />
+                  <span className="sr-only">Status Text</span>
+                </Th>
+                <Th>
+                  <Icon type="trash" className="mx-auto" />
+                  <span className="sr-only">Delete</span>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {loaderData.data.map((row) => (
+                <Suspense
+                  fallback={
+                    <StatusTr
+                      id={row.id}
+                      url={row.url}
+                      statusCode={null}
+                      statusText={null}
+                    />
+                  }
+                  key={row.id}
+                >
+                  <Await resolve={row._meta}>
+                    {(rowMeta) => (
+                      <StatusTr
+                        id={row.id}
+                        url={row.url}
+                        /* 🤷‍♂️ The only property in rowMeta is a Symbol? */
+                        statusCode={
+                          (rowMeta as unknown as GetStatusData)?.status
+                        }
+                        statusText={
+                          (rowMeta as unknown as GetStatusData)?.statusText
+                        }
+                        isOkHidden
+                      />
+                    )}
+                  </Await>
+                </Suspense>
+              ))}
+            </Tbody>
+          </Table>
+        </TableWrapper>
+      ) : null}
+    </Main>
+  );
+}
diff --git a/app/routes/bookmarks.status.tsx b/app/routes/bookmarks.status.tsx
deleted file mode 100644
index 8a50ded..0000000
--- a/app/routes/bookmarks.status.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { useLoaderData, useNavigation } from "@remix-run/react";
-import { ButtonCancel } from "~/components/button-cancel";
-import { ButtonFirst } from "~/components/button-first";
-import { ButtonLast } from "~/components/button-last";
-import { ButtonNext } from "~/components/button-next";
-import { ButtonPage } from "~/components/button-page";
-import { ButtonPrev } from "~/components/button-prev";
-import { FormPaginate } from "~/components/form-paginate";
-import { Main } from "~/components/main";
-import { SearchHelp } from "~/components/search-help";
-import { columnsBookmarksStatus } from "~/components/table-columns-bookmarks-status";
-import { TableSelectable } from "~/components/table-selectable";
-import { Badge } from "~/components/ui/badge";
-import { H1 } from "~/components/ui/h1";
-import { Icon } from "~/components/ui/icon";
-import {
-  getBookmarksCount,
-  getBookmarksStatus,
-} from "~/models/bookmark.server";
-import { requireUserId } from "~/utils/auth.server";
-import { cn, formatMetaTitle } from "~/utils/misc";
-import {
-  toPaginationSearchParams,
-  toPaginationValues,
-} from "~/utils/pagination";
-import { parsePaginationSearchParams } from "~/utils/pagination-validation";
-import { getStatuses } from "~/utils/status.server";
-
-export async function loader({ request }: LoaderFunctionArgs) {
-  await requireUserId(request);
-
-  const { searchParams } = new URL(request.url);
-  const { skip, take } = parsePaginationSearchParams({ searchParams });
-
-  const [bookmarks, count] = await Promise.all([
-    getBookmarksStatus({ skip, take }),
-    getBookmarksCount(),
-  ]);
-  const data = await getStatuses(bookmarks, 5_000);
-
-  const countOk = data.filter((el) => el._meta.ok).length;
-  const countNotOk = Math.abs(data.length - countOk);
-  const risk = countNotOk > 5 ? 2 : countNotOk > 0 ? 1 : 0;
-
-  const hasData = data.length > 0;
-  const hasPagination = count > take;
-
-  const paginationSearchParams = toPaginationSearchParams({
-    searchParams,
-    take,
-  });
-  const paginationValues = toPaginationValues({
-    pagesMax: 5,
-    skip,
-    take,
-    total: count,
-  });
-
-  return json({
-    count,
-    countNotOk,
-    countOk,
-    data,
-    hasData,
-    hasPagination,
-    paginationSearchParams,
-    paginationValues,
-    risk,
-  });
-}
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  let dot = "⚫️";
-  if (data) dot = "🟢";
-  if (data && data.risk > 0) dot = "🟡";
-  if (data && data.risk > 1) dot = "🔴";
-  const title = [dot, "Bookmarks Status"].join(" ");
-  return [{ title: formatMetaTitle(title) }];
-};
-
-export default function BookmarksStatusPage() {
-  const loaderData = useLoaderData<typeof loader>();
-  const navigation = useNavigation();
-  const isPending = navigation.state !== "idle";
-
-  return (
-    <Main>
-      <div className="flex items-center gap-2">
-        <H1>
-          <Icon
-            className={cn(
-              "text-green-500",
-              loaderData.risk > 0 && "text-yellow-500",
-              loaderData.risk > 1 && "text-pink-500",
-            )}
-            type={loaderData.risk > 0 ? "shield-alert" : "shield"}
-          />
-          Bookmarks Status <Badge aria-hidden>{loaderData.count}</Badge>
-        </H1>
-        <ButtonCancel to="/bookmarks" label="Bookmarks" />
-      </div>
-
-      <SearchHelp
-        count={loaderData.count}
-        singular="bookmark"
-        plural="bookmarks"
-      />
-
-      {loaderData.hasData ? (
-        <TableSelectable
-          className="[&_[data-header-id=title]]:w-1/5 [&_[data-header-id=url]]:w-full"
-          columns={columnsBookmarksStatus}
-          data={loaderData.data}
-        >
-          {loaderData.hasPagination ? (
-            <FormPaginate className="flex gap-2 max-sm:-order-1">
-              {loaderData.paginationSearchParams.map(([name, value]) => (
-                <input
-                  key={name}
-                  type="hidden"
-                  name={name}
-                  value={value}
-                  hidden
-                />
-              ))}
-              <ButtonFirst
-                name="skip"
-                value={0}
-                disabled={isPending || !loaderData.paginationValues.hasPrevPage}
-                size="sm-icon"
-                className="grow"
-              />
-              <ButtonPrev
-                name="skip"
-                value={loaderData.paginationValues.prevPageValue}
-                disabled={isPending || !loaderData.paginationValues.hasPrevPage}
-                size="sm-icon"
-                className="grow"
-              />
-              {loaderData.paginationValues.skipPages.map((el) => (
-                <ButtonPage
-                  key={el.number}
-                  name="skip"
-                  value={el.value}
-                  number={el.number}
-                  isCurrPage={el.isCurrPage}
-                  disabled={isPending || !el.isSkipPage}
-                  size="sm-icon"
-                  variant={el.isCurrPage ? "ghost" : undefined}
-                  className="grow"
-                />
-              ))}
-              <ButtonNext
-                name="skip"
-                value={loaderData.paginationValues.nextPageValue}
-                disabled={isPending || !loaderData.paginationValues.hasNextPage}
-                size="sm-icon"
-                className="grow"
-              />
-              <ButtonLast
-                name="skip"
-                value={loaderData.paginationValues.lastPageValue}
-                disabled={isPending || !loaderData.paginationValues.hasNextPage}
-                size="sm-icon"
-                className="grow"
-              />
-            </FormPaginate>
-          ) : null}
-        </TableSelectable>
-      ) : null}
-    </Main>
-  );
-}
diff --git a/app/utils/matches-validation.ts b/app/utils/matches-validation.ts
index cc7db95..5102e69 100644
--- a/app/utils/matches-validation.ts
+++ b/app/utils/matches-validation.ts
@@ -14,5 +14,3 @@ export const MatchesSchema = z.array(
     handle: HandleSchema.optional(),
   }),
 );
-
-export type Matches = z.infer<typeof MatchesSchema>;
diff --git a/app/utils/status.server.ts b/app/utils/status.server.ts
index dd36614..f5cacd4 100644
--- a/app/utils/status.server.ts
+++ b/app/utils/status.server.ts
@@ -1,5 +1,3 @@
-import { promiseAllSettledUnion } from "~/utils/misc";
-
 export async function getStatus(input: string, timeout: number) {
   try {
     const { ok, status, statusText } = await fetch(input, {
@@ -23,18 +21,3 @@ export async function getStatus(input: string, timeout: number) {
 }
 
 export type GetStatusData = Awaited<ReturnType<typeof getStatus>>;
-
-export async function getStatuses<TData extends { url: string }>(
-  items: TData[],
-  timeout: number,
-): Promise<
-  ReadonlyArray<TData & { _meta: Awaited<ReturnType<typeof getStatus>> }>
-> {
-  const [fulfilled] = await promiseAllSettledUnion(
-    items.map(async (item) => ({
-      ...item,
-      _meta: await getStatus(item.url, timeout),
-    })),
-  );
-  return fulfilled;
-}
diff --git a/prisma/data.db b/prisma/data.db
index dd2ceadbeea2d7091b555f1193f12c4cdc956757..4b1510db04778bfa7eaeb893cc2e3de4e82de878 100644
GIT binary patch
delta 1464
zcmZoTAlYz0a)J~S6Wc@?Cm^{oq10Zx&?rAKt2ogB2rBZkt1Q#Aj4~>V6N~e6Q%j3e
zix_+2-43mSkeeJ{@{8k8zbRmoyq}qqpMjfKMzV#uf2l`tp0A}*cw}0trMX{usdGk#
zUuLqtzE6R(iKkCRaj2_PfU$*JN=agJ4h|zH6^OIz@&4pJ!rM1lp+Ii4O+gTEy$Ls)
zs5mRDeMx4DWl3VXp#fukfsw>Mumd;XG|HHZO;i-3%M7T?oU#4Qi6<WkY2t)yG68Bb
zW$ao%LwWH60=i;3CQqoftna93+qZ*&Qe$?w1r|UHEE#L|*xiaFq=^l#$sDN3f-$%J
z%8YI3n(EP_)0h>m%NVH3gt6*;$Hi&ry3jSTz%`iyHJLG%JiWX&gODa>kfwTY3>g7+
z88a5&zM1xzkS->;Rfa%KMvOI|WX^CC(!>bYWB}A;$XIFNXUqxKWPv*^a4|42aP!Y)
z;Qzt@o_`1bGyW_5>-q2UFXKPWe~5qXX1RuX{y+|9QASV-<AyTKxS$LZPEKZVkd&bT
z2UN&{9m+6ggEEX+p$t<ND8p#;yZ+z)IP=bfm-ePOGQohjcKSPgMrqLrzz`|{h7l-)
z+JPZd2MVF-3I>cx+ZzlRzwjx5g94NXA;AR9SCC)=<`qsu=5)r%7tZSHLV^jHx*@>?
zOtFw)0wzL8FaZ-5B$$9{W&1mO#u91uj^5Xt=fLr}A7_?s3}l_Yzm{>WN@ITGQAke1
zt$2D=4C8Y3tUD(qoe3D*B+Wd%vzqa{dY=5cxZ8vji!x1LUc>lNrSRUgmaPO7Pmhjg
dY*cCBRexYWKxJD3V_O1KTLN=i0!v#0D*(S1;=2F<

delta 1460
zcmZoTAlYz0a)J~S<L8MoPC#;FLaDuWL1k&VVM&<*5R_Y%Sy*J{6jYTPRut#wrj{0`
z7BTh&wz@k*$W0C}`NeUl-xRP(-p?{5BV5lY*(co3$yC3@BP8G7Ga#xo%+<NVz%3v-
zD?BvOHBiqbGAKCH&>+~i!Ym}!(;_oD2Zxc93dGsN`ILCy^7c(uD3IH1QxL?<6w5u?
zpw6;BKX>1+1z=Zs;?!@<#U?7s%4%PdnPOU!m~O_{!8P5AlaMA(xF$28CUeH76WbZo
z(KXehg_a2io2WR%Doda)Lj%UlJ+)@a=-SY98MDLfG6w20VXRoZ@ZK{*n%IDv>LGSn
z0Cib1X1sBE{eX}zR=8E>Kus2mb<Wq~zZ25L0@q{&)MU(<_xe({21rxAJDy-?hU+o`
z>M~`l^p@NmL&z#7xF$oOCL_jb8<)jXaB7N#BvNBWxGn>rE<?s{<2`CdICViZaWOD3
zaP!Y);Qzt@o_{X?UH(J-&-j<~Z{WYef0}>iX1RuX{y<J<aYkUWF*M-jU={_jOu3*8
zGfpVOk^{;xW`{B?*q{t^Rw%=W1<Ekl{I37EKhC`K;HAAOj!ZBhuATl)pHW)01Q<d)
zfMEm)p=JE*K_N6<!GJModxHVv7ryBe>=_L`At40JUXTz1W*JU!=z($pB#3}18xlmo
z#0m)_U;=~$5in6ff(V#Sw!gDyERj~vY-1F(07qd2&YayC$U1$0E#q31;xg`|<^&W^
zkBVVjuHKPtXU9T7Ws@}X^v-I=@9KG}hr&V$DHdg#zPyI<qe^Mnr^AF4PmhjgY*eXv
Zth-&3fU#`}jBN=_Z3)b62`p_1tN<`l%}W3P

diff --git a/tests/e2e/bookmarks.status.test.ts b/tests/e2e/bookmarks.status.test.ts
index c13df3a..9d54744 100644
--- a/tests/e2e/bookmarks.status.test.ts
+++ b/tests/e2e/bookmarks.status.test.ts
@@ -8,21 +8,8 @@ test("User can NOT view the page", async ({ page }) => {
   );
 });
 
-test("[AUTH] User can cancel viewing the form/page", async ({
-  page,
-  login,
-}) => {
-  // Login from a different page so we have a history to redirect back to.
-  await login();
-  await page.goto("/bookmarks/status");
-
-  await page.getByRole("button", { name: "Bookmarks" }).click();
-
-  await expect(page).toHaveURL("/bookmarks");
-});
-
 test("[AUTH] User can view the page title", async ({ page, login }) => {
   await login("/bookmarks/status");
 
-  await expect(page).toHaveTitle(/ Bookmarks Status \|/);
+  await expect(page).toHaveTitle(/^Status \|/);
 });