Refactor UsersTable component to enhance time column rendering

This commit introduces a new renderTimeCell function to streamline the rendering of time-related cells in the UsersTable. It replaces the inline date formatting logic for the "last_seen" and "first_seen" columns with this dedicated function, improving code readability and maintainability. Additionally, constants for time column width and class are defined, and logic is added to conditionally apply styles based on column type, enhancing the overall layout and user experience.

Author: goldflag

client/src/app/[site]/users/components/UsersTable.tsx

@@ -40,6 +40,11 @@ import { OperatingSystem } from "../../components/shared/icons/OperatingSystem";
 import { DeviceIcon } from "../../components/shared/icons/Device";
 
 const columnHelper = createColumnHelper<UsersResponse>();
+const TIME_COLUMN_WIDTH = "10rem";
+const TIME_COLUMN_WIDTH_CLASS = "w-40";
+const TIME_COLUMN_IDS = new Set(["last_seen", "first_seen"]);
+
+const isTimeColumn = (columnId: string) => TIME_COLUMN_IDS.has(columnId);
 
 const handleFilterClick = (e: React.MouseEvent, parameter: FilterParameter, value: string | undefined) => {
   e.stopPropagation();
@@ -79,6 +84,21 @@ export function UsersTable() {
 
     return formatRelative(date);
   };
+
+  const renderTimeCell = (dateStr: string) => {
+    const date = DateTime.fromSQL(dateStr, {
+      zone: "utc",
+    }).setZone(getTimezone());
+    const formattedDate = formatDateTime(date, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+    const relativeTime = formatRelativeTime(dateStr);
+
+    return (
+      <div className={`grid ${TIME_COLUMN_WIDTH_CLASS} whitespace-nowrap`}>
+        <span className="col-start-1 row-start-1 group-hover:invisible">{relativeTime}</span>
+        <span className="col-start-1 row-start-1 invisible group-hover:visible">{formattedDate}</span>
+      </div>
+    );
+  };
   const { site } = useParams();
 
   const [pagination, setPagination] = useState({
@@ -245,37 +265,11 @@ export function UsersTable() {
     }),
     columnHelper.accessor("last_seen", {
       header: ({ column }) => <SortHeader column={column}>{t("Last Seen")}</SortHeader>,
-      cell: info => {
-        const date = DateTime.fromSQL(info.getValue(), {
-          zone: "utc",
-        }).setZone(getTimezone());
-        const formattedDate = formatDateTime(date, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-        const relativeTime = formatRelativeTime(info.getValue());
-
-        return (
-          <div className="whitespace-nowrap">
-            <span className="group-hover:hidden">{relativeTime}</span>
-            <span className="hidden group-hover:inline">{formattedDate}</span>
-          </div>
-        );
-      },
+      cell: info => renderTimeCell(info.getValue()),
     }),
     columnHelper.accessor("first_seen", {
       header: ({ column }) => <SortHeader column={column}>{t("First Seen")}</SortHeader>,
-      cell: info => {
-        const date = DateTime.fromSQL(info.getValue(), {
-          zone: "utc",
-        }).setZone(getTimezone());
-        const formattedDate = formatDateTime(date, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
-        const relativeTime = formatRelativeTime(info.getValue());
-
-        return (
-          <div className="whitespace-nowrap">
-            <span className="group-hover:hidden">{relativeTime}</span>
-            <span className="hidden group-hover:inline">{formattedDate}</span>
-          </div>
-        );
-      },
+      cell: info => renderTimeCell(info.getValue()),
     }),
   ];
 
@@ -362,7 +356,9 @@ export function UsersTable() {
                     scope="col"
                     className="h-8 px-2 text-left align-middle font-medium text-xs text-neutral-500 dark:text-neutral-400 whitespace-nowrap first:rounded-l-xl last:rounded-r-xl"
                     style={{
-                      minWidth: header.id === "user_id" ? "100px" : "auto",
+                      minWidth:
+                        header.id === "user_id" ? "100px" : isTimeColumn(header.id) ? TIME_COLUMN_WIDTH : "auto",
+                      width: isTimeColumn(header.id) ? TIME_COLUMN_WIDTH : undefined,
                     }}
                   >
                     {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
@@ -399,7 +395,10 @@ export function UsersTable() {
                 return (
                   <tr key={row.id} className="border-b border-neutral-100 dark:border-neutral-800 group hover:bg-neutral-50 dark:hover:bg-neutral-850">
                     {row.getVisibleCells().map(cell => (
-                      <td key={cell.id} className="p-3 relative">
+                      <td
+                        key={cell.id}
+                        className={isTimeColumn(cell.column.id) ? `p-3 relative ${TIME_COLUMN_WIDTH_CLASS}` : "p-3 relative"}
+                      >
                         {/* <Link
                             href={href}
                             className="absolute inset-0 z-10"