more ui/ux enhancements around labels and tables

src/components/MachineClientsTable.tsx

@@ -25,7 +25,6 @@ import {
     ChevronsUpDownIcon,
     CircleSlash,
     MoreHorizontal,
-    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
@@ -33,20 +32,18 @@ import { useRouter } from "next/navigation";
 import {
     startTransition,
     useMemo,
-    useOptimistic,
     useState,
     useTransition
 } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
-import { LabelBadge } from "./label-badge";
-import { LabelOverflowBadge } from "./label-overflow-badge";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { type SelectedLabel } from "./labels-selector";
+import { TableLabelsCell } from "./TableLabelsCell";
 import { Badge } from "./ui/badge";
 import { ControlledDataTable } from "./ui/controlled-data-table";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
 
 export type ClientRow = {
     id: number;
@@ -277,7 +274,7 @@ export default function MachineClientsTable({
             },
             {
                 accessorKey: "online",
-                friendlyName: t("online"),
+                friendlyName: t("status"),
                 header: () => {
                     return (
                         <ColumnFilterButton
@@ -299,7 +296,7 @@ export default function MachineClientsTable({
                             }
                             searchPlaceholder={t("searchPlaceholder")}
                             emptyMessage={t("emptySearchOptions")}
-                            label={t("online")}
+                            label={t("status")}
                             className="p-3"
                         />
                     );
@@ -617,27 +614,25 @@ function MachineClientLabelCell({
 }: MachineClientLabelCellProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const router = useRouter();
-
-    const labels = client.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    const [localLabels, setLocalLabels] = useLocalLabels(client.labels, client.id);
 
     function toggleClientLabel(
         label: SelectedLabel,
         action: "attach" | "detach"
     ) {
-        startTransition(async () => {
+        const previousLabels = localLabels;
+
+        void (async () => {
             try {
                 if (action === "attach") {
-                    setOptimisticLabels([...optimisticLabels, label]);
+                    setLocalLabels([...previousLabels, label]);
                     await api.put(
                         `/org/${orgId}/label/${label.labelId}/attach`,
                         { clientId: client.id }
                     );
                 } else {
-                    setOptimisticLabels(
-                        optimisticLabels.filter(
+                    setLocalLabels(
+                        previousLabels.filter(
                             (lb) => lb.labelId !== label.labelId
                         )
                     );
@@ -647,54 +642,21 @@ function MachineClientLabelCell({
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
-    const visibleLabels = optimisticLabels.slice(0, 3);
-    const overflowLabels = optimisticLabels.slice(3);
-
     return (
-        <div className="inline-flex w-full min-w-0 flex-nowrap items-center gap-1 overflow-hidden">
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="size-auto shrink-0 rounded-full p-1"
-                        title={t("addLabels")}
-                    >
-                        <span className="sr-only">{t("addLabels")}</span>
-                        <PlusIcon className="size-3" />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent align="center" className="p-0 w-full">
-                    <LabelsSelector
-                        orgId={orgId}
-                        selectedLabels={optimisticLabels}
-                        toggleLabel={toggleClientLabel}
-                    />
-                </PopoverContent>
-            </Popover>
-            {visibleLabels.map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    className="shrink-0"
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            <LabelOverflowBadge
-                labels={overflowLabels}
-                onClick={() => setIsPopoverOpen(true)}
-            />
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleClientLabel}
+        />
     );
 }