Enhance bookmarks status call flexibility:

- Added `getBookmarksCount` function
- Added optional `skip` and `take` params to the `getBookmarksStatus` function
- Updated loader to use `Promise.all`
- Updated `getStatus` with better error responses
- Updated `StatusText` with truncation styles

app/components/status-text.tsx

@@ -6,7 +6,14 @@ export const StatusText = forwardRef<
   React.ComponentPropsWithoutRef<"span">
 >(({ children, className, ...props }, ref) => {
   return (
-    <span {...props} className={cn("text-xs", className)} ref={ref}>
+    <span
+      {...props}
+      className={cn(
+        "block max-w-[180px] truncate px-3 text-left text-xs",
+        className,
+      )}
+      ref={ref}
+    >
       {typeof children === "string" ? children : "Pending"}
     </span>
   );

app/components/table-columns-bookmarks-status.tsx

@@ -80,8 +80,8 @@ export const columnsBookmarksStatus: ColumnDef<BookmarksStatusItem>[] = [
         to={getValue()}
         target="_blank"
         rel="noopener noreferrer"
-        variant="ghost"
         size="sm"
+        variant="ghost"
         className={cn(
           "flex w-full justify-start overflow-hidden",
           "max-w-[75vw] sm:max-w-[45vw]",
@@ -101,13 +101,36 @@ export const columnsBookmarksStatus: ColumnDef<BookmarksStatusItem>[] = [
     header: () => (
       <>
         <Icon type="info" className="mx-auto" />
-        <span className="sr-only">Cause</span>
+        <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",
@@ -122,8 +145,8 @@ export const columnsBookmarksStatus: ColumnDef<BookmarksStatusItem>[] = [
       <ButtonDelete
         formAction={`/bookmarks/${getValue()}/edit`}
         label="bookmark"
-        variant="ghost-danger"
         size="sm-icon"
+        variant="ghost-danger"
       />
     ),
     footer: ({ column }) => column.id,

app/models/bookmark.server.ts

@@ -69,6 +69,14 @@ export async function getBookmarks({
   });
 }
 
+/**
+ * If changing this, also double-check the same value in:
+ * - `/app/routes/bookmarks.status.tsx`
+ */
+export async function getBookmarksCount() {
+  return await prisma.bookmark.count();
+}
+
 /**
  * If changing this, also double-check the same value in:
  * - `/app/utils/bookmark-exports.server.ts`
@@ -96,10 +104,18 @@ export async function getBookmarksLatest({ take = 3 }: { take?: number } = {}) {
  * If changing this, also double-check the same value in:
  * - `/app/routes/bookmarks.status.tsx`
  */
-export async function getBookmarksStatus() {
+export async function getBookmarksStatus({
+  skip,
+  take,
+}: {
+  skip?: number | null;
+  take?: number | null;
+} = {}) {
   return await prisma.bookmark.findMany({
     select: { id: true, url: true },
     orderBy: [{ createdAt: "desc" }, { url: "asc" }],
+    ...(take ? { take } : {}),
+    ...(skip ? { skip } : {}),
   });
 }
 

app/routes/bookmarks._index.tsx

@@ -48,6 +48,9 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const count = bookmarks.length;
   const data = await getFavicons(bookmarks.slice(skip, skip + take));
 
+  const hasData = data.length > 0;
+  const hasPagination = count > take;
+
   const paginationSearchParams = toPaginationSearchParams({
     searchParams,
     take,
@@ -58,8 +61,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
     take,
     total: count,
   });
-  const hasData = data.length > 0;
-  const hasPagination = count > take;
 
   return json({
     count,
@@ -109,6 +110,7 @@ export default function BookmarksIndexPage() {
         <LinkButton
           to={`${USER_LOGIN_ROUTE}?redirectTo=/bookmarks/status`}
           size="md-icon"
+          reloadDocument
         >
           <Icon type="shield" />
           <span className="sr-only">Bookmarks status</span>

app/routes/bookmarks.status.tsx

@@ -15,7 +15,10 @@ 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 { getBookmarksStatus } from "~/models/bookmark.server";
+import {
+  getBookmarksCount,
+  getBookmarksStatus,
+} from "~/models/bookmark.server";
 import { requireUserId } from "~/utils/auth.server";
 import { cn, formatMetaTitle } from "~/utils/misc";
 import {
@@ -31,14 +34,19 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const { searchParams } = new URL(request.url);
   const { skip, take } = parsePaginationSearchParams({ searchParams });
 
-  const bookmarks = await getBookmarksStatus();
-  const count = bookmarks.length;
-  const data = await getStatuses(bookmarks.slice(skip, skip + take), 60000 * 2);
+  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,
@@ -49,8 +57,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
     take,
     total: count,
   });
-  const hasData = data.length > 0;
-  const hasPagination = count > take;
 
   return json({
     count,

app/utils/status.server.ts

@@ -6,17 +6,18 @@ export async function getStatus(input: string, timeout: number) {
       method: "HEAD",
       signal: AbortSignal.timeout(timeout),
     });
-    return { ok, status, statusText };
+    const message = statusText.length > 0 ? statusText : undefined;
+    return { ok, status, statusText: message ?? "Unknown" };
   } catch (error) {
     if (error instanceof Error) {
       const name = error.name.length > 0 ? error.name : undefined;
       const message = error.message.length > 0 ? error.message : undefined;
       const status =
         name === "TimeoutError" ? 408 : name === "AbortError" ? 504 : 500;
-      const statusText = name ?? message ?? "Unknown Error";
+      const statusText = name ?? message ?? "Unknown";
       return { ok: false, status, statusText };
     } else {
-      return { ok: false, status: 500, statusText: "Uncaught Error" };
+      return { ok: false, status: 500, statusText: "Uncaught" };
     }
   }
 }