adjust label overflow

feat: add label filter column to sites, resource & client tables

messages/en-US.json

@@ -1164,6 +1164,9 @@
     "siteLabelsDescription": "Manage labels associated with this site.",
     "labelsNotFound": "Labels not found",
     "labelSearch": "Search labels",
+    "accessLabelFilterCount": "{count, plural, one {# label} other {# labels}}",
+    "labelOverflowCount": "+{count, plural, one {# label} other {# labels}}",
+    "accessLabelFilterClear": "Clear label filters",
     "selectColor": "Select color",
     "createNewLabel": "Create new org label \"{label}\"",
     "inviteInvalidDescription": "The invite link is invalid.",

server/routers/client/listClients.ts

@@ -118,7 +118,27 @@ const listClientsSchema = z.object({
                 description:
                     "Filter by client status. Can be a comma-separated list of values. Defaults to 'active'."
             })
-    )
+    ),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by client labels"
+        })
 });
 
 function queryClientsBase() {
@@ -210,8 +230,16 @@ export async function listClients(
                 )
             );
         }
-        const { page, pageSize, online, query, status, sort_by, order } =
-            parsedQuery.data;
+        const {
+            page,
+            pageSize,
+            online,
+            query,
+            status,
+            sort_by,
+            order,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const parsedParams = listClientsParamsSchema.safeParse(req.params);
         if (!parsedParams.success) {
@@ -298,6 +326,22 @@ export async function listClients(
             conditions.push(or(...filterAggregates));
         }
 
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    clients.clientId,
+                    db
+                        .select({ id: clientLabels.clientId })
+                        .from(clientLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, clientLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

server/routers/resource/listResources.ts

@@ -71,7 +71,7 @@ const listResourcesSchema = z.object({
         }),
     query: z.string().optional(),
     sort_by: z
-        .enum(["name"])
+        .literal("name")
         .optional()
         .catch(undefined)
         .openapi({
@@ -123,7 +123,27 @@ const listResourcesSchema = z.object({
         type: "integer",
         description:
             "When set, only resources that have at least one target on this site are returned"
-    })
+    }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by resource labels"
+        })
 });
 
 // grouped by resource with targets[])
@@ -261,7 +281,8 @@ export async function listResources(
             healthStatus,
             sort_by,
             order,
-            siteId
+            siteId,
+            labels: labelFilter
         } = parsedQuery.data;
 
         const parsedParams = listResourcesParamsSchema.safeParse(req.params);
@@ -379,6 +400,23 @@ export async function listResources(
                 .where(and(eq(sites.orgId, orgId), eq(sites.siteId, siteId)));
             conditions.push(inArray(resources.resourceId, resourcesWithSite));
         }
+
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    resources.resourceId,
+                    db
+                        .select({ id: resourceLabels.resourceId })
+                        .from(resourceLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, resourceLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

server/routers/site/listSites.ts

@@ -187,6 +187,26 @@ const listSitesSchema = z.object({
             type: "string",
             enum: ["pending", "approved"],
             description: "Filter by site status"
+        }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by site labels"
         })
 });
 
@@ -319,8 +339,16 @@ export async function listSites(
             tierMatrix.labels
         );
 
-        const { pageSize, page, query, sort_by, order, online, status } =
-            parsedQuery.data;
+        const {
+            pageSize,
+            page,
+            query,
+            sort_by,
+            order,
+            online,
+            status,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const accessibleSiteIds = accessibleSites.map((site) => site.siteId);
 
@@ -337,6 +365,23 @@ export async function listSites(
         if (typeof status !== "undefined") {
             conditions.push(eq(sites.status, status));
         }
+
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    sites.siteId,
+                    db
+                        .select({ id: siteLabels.siteId })
+                        .from(siteLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, siteLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [
@@ -366,7 +411,9 @@ export async function listSites(
 
         // we need to add `as` so that drizzle filters the result as a subquery
         const countQuery = db.$count(
-            querySitesBase().where(and(...conditions)).as("filtered_sites")
+            querySitesBase()
+                .where(and(...conditions))
+                .as("filtered_sites")
         );
 
         const siteListQuery = baseQuery

server/routers/siteResource/listAllSiteResourcesByOrg.ts

@@ -85,7 +85,27 @@ const listAllSiteResourcesByOrgQuerySchema = z.object({
         type: "integer",
         description:
             "When set, only site resources associated with this site (via network) are returned"
-    })
+    }),
+    labels: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by resource labels"
+        })
 });
 
 export type ListAllSiteResourcesByOrgResponse = PaginatedResponse<{
@@ -239,8 +259,16 @@ export async function listAllSiteResourcesByOrg(
         }
 
         const { orgId } = parsedParams.data;
-        const { page, pageSize, query, mode, sort_by, order, siteId } =
-            parsedQuery.data;
+        const {
+            page,
+            pageSize,
+            query,
+            mode,
+            sort_by,
+            order,
+            siteId,
+            labels: labelFilter
+        } = parsedQuery.data;
 
         const isLabelFeatureEnabled = await isLicensedOrSubscribed(
             orgId,
@@ -276,6 +304,22 @@ export async function listAllSiteResourcesByOrg(
             conditions.push(eq(siteResources.mode, mode));
         }
 
+        if (isLabelFeatureEnabled && labelFilter && labelFilter.length > 0) {
+            conditions.push(
+                inArray(
+                    siteResources.siteResourceId,
+                    db
+                        .select({ id: siteResourceLabels.siteResourceId })
+                        .from(siteResourceLabels)
+                        .innerJoin(
+                            labels,
+                            eq(labels.labelId, siteResourceLabels.labelId)
+                        )
+                        .where(inArray(labels.name, labelFilter))
+                )
+            );
+        }
+
         if (query) {
             const q = "%" + query.toLowerCase() + "%";
             const queryList = [

src/components/ClientInfoCard.tsx

@@ -27,20 +27,18 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
     return (
         <Alert>
             <AlertDescription>
-                <InfoSections cols={3}>
+                <InfoSections cols={userDisplayName ? 3 : 2}>
                     <InfoSection>
                         <InfoSectionTitle>{t("name")}</InfoSectionTitle>
                         <InfoSectionContent>{client.name}</InfoSectionContent>
                     </InfoSection>
-                    <InfoSection>
-                        <InfoSectionTitle>
-                            {userDisplayName ? t("user") : t("identifier")}
-                        </InfoSectionTitle>
-                        <InfoSectionContent>
-                            <div className="flex flex-wrap items-center gap-2">
-                                <span>{userDisplayName || client.niceId}</span>
-                                {userDisplayName &&
-                                    (client.userType ?? "internal") !==
+                    {userDisplayName ? (
+                        <InfoSection>
+                            <InfoSectionTitle>{t("user")}</InfoSectionTitle>
+                            <InfoSectionContent>
+                                <div className="flex flex-wrap items-center gap-2">
+                                    <span>{userDisplayName}</span>
+                                    {(client.userType ?? "internal") !==
                                         "internal" && (
                                         <IdpTypeBadge
                                             type={client.userType ?? "oidc"}
@@ -54,9 +52,10 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
                                             }
                                         />
                                     )}
-                            </div>
-                        </InfoSectionContent>
-                    </InfoSection>
+                                </div>
+                            </InfoSectionContent>
+                        </InfoSection>
+                    ) : null}
                     <InfoSection>
                         <InfoSectionTitle>{t("status")}</InfoSectionTitle>
                         <InfoSectionContent>

src/components/ClientResourcesTable.tsx

@@ -29,8 +29,7 @@ import {
     ChevronDown,
     ChevronsUpDownIcon,
     Funnel,
-    MoreHorizontal,
-    PlusIcon
+    MoreHorizontal
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
@@ -40,7 +39,6 @@ import {
     startTransition,
     useEffect,
     useMemo,
-    useOptimistic,
     useState,
     useTransition
 } from "react";
@@ -62,8 +60,10 @@ import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertI
 import { build } from "@server/build";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { LabelBadge } from "./label-badge";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { type SelectedLabel } from "./labels-selector";
+import { TableLabelsCell } from "./TableLabelsCell";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -162,12 +162,12 @@ export default function ClientResourcesTable({
     const { isPaidUser } = usePaidStatus();
     const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            router.refresh();
-        }, 30_000);
-        return () => clearInterval(interval);
-    }, [router]);
+    // useEffect(() => {
+    //     const interval = setInterval(() => {
+    //         router.refresh();
+    //     }, 30_000);
+    //     return () => clearInterval(interval);
+    // }, [router]);
 
     const siteIdQ = searchParams.get("siteId");
     const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
@@ -220,59 +220,6 @@ export default function ClientResourcesTable({
         }
     };
 
-    function SiteCell({ resourceRow }: { resourceRow: InternalResourceRow }) {
-        const { siteNames, siteNiceIds, orgId } = resourceRow;
-
-        if (!siteNames || siteNames.length === 0) {
-            return (
-                <span className="text-muted-foreground">
-                    {t("noSites", { defaultValue: "No sites" })}
-                </span>
-            );
-        }
-
-        if (siteNames.length === 1) {
-            return (
-                <Link href={`/${orgId}/settings/sites/${siteNiceIds[0]}`}>
-                    <Button variant="outline">
-                        {siteNames[0]}
-                        <ArrowUpRight className="ml-2 h-4 w-4" />
-                    </Button>
-                </Link>
-            );
-        }
-
-        return (
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        className="flex items-center gap-2"
-                    >
-                        <span>
-                            {siteNames.length} {t("sites")}
-                        </span>
-                        <ChevronDown className="h-3 w-3" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                    {siteNames.map((siteName, idx) => (
-                        <DropdownMenuItem key={siteNiceIds[idx]} asChild>
-                            <Link
-                                href={`/${orgId}/settings/sites/${siteNiceIds[idx]}`}
-                                className="flex items-center gap-2 cursor-pointer"
-                            >
-                                {siteName}
-                                <ArrowUpRight className="h-3 w-3" />
-                            </Link>
-                        </DropdownMenuItem>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        );
-    }
-
     const internalColumns = useMemo<
         ExtendedColumnDef<InternalResourceRow>[]
     >(() => {
@@ -585,9 +532,15 @@ export default function ClientResourcesTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
-                        {t("labels")}
-                    </span>
+                    <LabelColumnFilterButton
+                        orgId={orgId}
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: InternalResourceRow } }) => (
                     <ClientResourceLabelCell
@@ -603,13 +556,15 @@ export default function ClientResourcesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         searchParams.delete(column);
         searchParams.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             searchParams.set(column, value);
+        } else if (value) {
+            value.forEach((val) => searchParams.append(column, val));
         }
         filter({
             searchParams
@@ -682,7 +637,7 @@ export default function ClientResourcesTable({
                 rows={internalResources}
                 tableId="internal-resources"
                 searchPlaceholder={t("resourcesSearch")}
-                searchQuery={searchParams.get("query") ?? ""}
+                searchQuery={searchParams.get("query")?.toString()}
                 onAdd={() => setIsCreateDialogOpen(true)}
                 addButtonText={t("resourceAdd")}
                 onSearch={handleSearchChange}
@@ -743,27 +698,28 @@ function ClientResourceLabelCell({
 }: ClientResourceLabelCellProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const router = useRouter();
-
-    const labels = resource.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    const [localLabels, setLocalLabels] = useLocalLabels(
+        resource.labels,
+        resource.id
+    );
 
     function toggleResourceLabel(
         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`,
                         { siteResourceId: resource.id }
                     );
                 } else {
-                    setOptimisticLabels(
-                        optimisticLabels.filter(
+                    setLocalLabels(
+                        previousLabels.filter(
                             (lb) => lb.labelId !== label.labelId
                         )
                     );
@@ -773,59 +729,21 @@ function ClientResourceLabelCell({
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
     return (
-        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.slice(0, 3).map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            {optimisticLabels.length > 3 && (
-                <Button
-                    variant="outline"
-                    className={cn(
-                        "inline-flex gap-1 items-center",
-                        "rounded-full text-sm cursor-pointer",
-                        "px-1.5 py-0 h-auto"
-                    )}
-                    onClick={() => setIsPopoverOpen(true)}
-                >
-                    +{optimisticLabels.length - 3}
-                </Button>
-            )}
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="p-1 size-auto rounded-full"
-                        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={toggleResourceLabel}
-                    />
-                </PopoverContent>
-            </Popover>
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleResourceLabel}
+        />
     );
 }

src/components/CreateBlueprintForm.tsx

@@ -109,7 +109,7 @@ export default function CreateBlueprintForm({
         if (res && res.status === 201) {
             const createdBlueprint = res.data.data;
             toast({
-                variant: "warning",
+                variant: createdBlueprint.succeeded ? "default" : "warning",
                 title: createdBlueprint.succeeded ? "Success" : "Warning",
                 description: createdBlueprint.message
             });

src/components/ExitNodesTable.tsx

@@ -122,7 +122,7 @@ export default function ExitNodesTable({
         },
         {
             accessorKey: "online",
-            friendlyName: t("online"),
+            friendlyName: t("status"),
             header: ({ column }) => {
                 return (
                     <Button
@@ -131,7 +131,7 @@ export default function ExitNodesTable({
                             column.toggleSorting(column.getIsSorted() === "asc")
                         }
                     >
-                        {t("online")}
+                        {t("status")}
                         <ArrowUpDown className="ml-2 h-4 w-4" />
                     </Button>
                 );

src/components/HealthChecksTable.tsx

@@ -109,7 +109,6 @@ export default function HealthChecksTable({
     const [siteFilterOpen, setSiteFilterOpen] = useState(false);
     const [resourceFilterOpen, setResourceFilterOpen] = useState(false);
 
-    const pageSize = pagination.pageSize;
     const query = searchParams.get("query") ?? undefined;
 
     const siteIdQ = searchParams.get("siteId");
@@ -164,12 +163,12 @@ export default function HealthChecksTable({
         });
     }
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            router.refresh();
-        }, 30_000);
-        return () => clearInterval(interval);
-    }, [router]);
+    // useEffect(() => {
+    //     const interval = setInterval(() => {
+    //         router.refresh();
+    //     }, 30_000);
+    //     return () => clearInterval(interval);
+    // }, [router]);
 
     const handlePaginationChange = (newState: PaginationState) => {
         searchParams.set("page", (newState.pageIndex + 1).toString());
@@ -586,7 +585,9 @@ export default function HealthChecksTable({
                     <Switch
                         checked={r.hcEnabled}
                         disabled={
-                            !isPaid || togglingId === r.targetHealthCheckId || !!r.resourceId
+                            !isPaid ||
+                            togglingId === r.targetHealthCheckId ||
+                            !!r.resourceId
                         }
                         onCheckedChange={(v) => handleToggleEnabled(r, v)}
                     />

src/components/LabelColumnFilterButton.tsx

@@ -0,0 +1,207 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { CheckIcon, Funnel } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo, useState } from "react";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import { LabelBadge } from "./label-badge";
+import { LabelOverflowBadge } from "./label-overflow-badge";
+import { LABEL_COLORS } from "./labels-selector";
+
+function areSelectionsEqual(a: string[], b: string[]) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const setB = new Set(b);
+    return a.every((value) => setB.has(value));
+}
+
+type LabelColumnFilterButtonProps = {
+    selectedValues: string[];
+    onSelectedValuesChange: (values: string[]) => void;
+    className?: string;
+    label: string;
+    orgId: string;
+};
+
+export function LabelColumnFilterButton({
+    selectedValues,
+    onSelectedValuesChange,
+    className,
+    label,
+    orgId
+}: LabelColumnFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+    const [draftValues, setDraftValues] = useState<string[]>(selectedValues);
+    const t = useTranslations();
+
+    const [labelSearchQuery, setlabelsSearchQuery] = useState("");
+    const [debouncedQuery] = useDebounce(labelSearchQuery, 150);
+
+    const { data: labels = [] } = useQuery(
+        orgQueries.labels({
+            orgId,
+            query: debouncedQuery,
+            perPage: 500
+        })
+    );
+
+    const draftSet = useMemo(() => new Set(draftValues), [draftValues]);
+
+    const selectedLabels = useMemo(
+        () =>
+            selectedValues.map((name) => {
+                const foundLabel = labels.find((label) => label.name === name);
+                return {
+                    name,
+                    color: foundLabel?.color ?? LABEL_COLORS.gray
+                };
+            }),
+        [selectedValues, labels]
+    );
+
+    const summary = useMemo(() => {
+        if (selectedLabels.length === 0) {
+            return null;
+        }
+
+        if (selectedLabels.length === 1) {
+            const label = selectedLabels[0];
+            return (
+                <LabelBadge
+                    displayOnly
+                    name={label.name}
+                    color={label.color}
+                    className="shrink-0"
+                />
+            );
+        }
+
+        return (
+            <LabelOverflowBadge
+                labels={selectedLabels}
+                displayOnly
+                className="shrink-0"
+            />
+        );
+    }, [selectedLabels]);
+
+    function toggle(value: string) {
+        setDraftValues((current) =>
+            current.includes(value)
+                ? current.filter((v) => v !== value)
+                : [...current, value]
+        );
+    }
+
+    function handleOpenChange(nextOpen: boolean) {
+        if (nextOpen) {
+            setDraftValues(selectedValues);
+            setOpen(true);
+            return;
+        }
+
+        setOpen(false);
+        if (!areSelectionsEqual(draftValues, selectedValues)) {
+            onSelectedValuesChange(draftValues);
+        }
+    }
+
+    return (
+        <div className="flex items-center">
+            <Popover open={open} onOpenChange={handleOpenChange}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="ghost"
+                        role="combobox"
+                        aria-expanded={open}
+                        className={cn(
+                            "justify-between text-sm h-8 px-2",
+                            selectedValues.length === 0 &&
+                                "text-muted-foreground",
+                            className
+                        )}
+                    >
+                        <div className="flex items-center gap-2 min-w-0">
+                            <span className="shrink-0">{label}</span>
+                            <Funnel className="size-4 flex-none shrink-0" />
+                            {summary}
+                        </div>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className={dataTableFilterPopoverContentClassName}
+                    align="start"
+                >
+                    <Command shouldFilter={false}>
+                        <CommandInput
+                            placeholder={t("labelSearch")}
+                            value={labelSearchQuery}
+                            onValueChange={setlabelsSearchQuery}
+                        />
+                        <CommandList>
+                            <CommandEmpty>{t("labelsNotFound")}</CommandEmpty>
+                            <CommandGroup>
+                                {draftValues.length > 0 && (
+                                    <CommandItem
+                                        onSelect={() => {
+                                            setDraftValues([]);
+                                        }}
+                                        className="text-muted-foreground"
+                                    >
+                                        {t("accessLabelFilterClear")}
+                                    </CommandItem>
+                                )}
+                                {labels.map((label) => (
+                                    <CommandItem
+                                        key={label.name}
+                                        value={label.name}
+                                        onSelect={() => {
+                                            toggle(label.name);
+                                        }}
+                                        className="flex items-center gap-2"
+                                    >
+                                        <CheckIcon
+                                            className={cn(
+                                                "mr-2 h-4 w-4",
+                                                draftSet.has(label.name)
+                                                    ? "opacity-100"
+                                                    : "opacity-0"
+                                            )}
+                                        />
+                                        <div
+                                            className="size-2 rounded-full bg-(--color) flex-none"
+                                            style={{
+                                                // @ts-expect-error css color
+                                                "--color": label.color
+                                            }}
+                                        />
+                                        {label.name}
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}

src/components/MachineClientsTable.tsx

@@ -2,7 +2,7 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { Button } from "@app/components/ui/button";
-import { DataTable, ExtendedColumnDef } from "@app/components/ui/data-table";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -10,20 +10,21 @@ import {
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { PaginationState } from "@tanstack/react-table";
 import {
-    ArrowRight,
-    ArrowUpDown,
-    MoreHorizontal,
-    CircleSlash,
     ArrowDown01Icon,
+    ArrowRight,
     ArrowUp10Icon,
     ChevronsUpDownIcon,
-    PlusIcon
+    CircleSlash,
+    MoreHorizontal,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
@@ -31,25 +32,18 @@ import { useRouter } from "next/navigation";
 import {
     startTransition,
     useMemo,
-    useOptimistic,
     useState,
     useTransition
 } from "react";
-import { LabelBadge } from "./label-badge";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "./ui/popover";
-import { Badge } from "./ui/badge";
-import type { PaginationState } from "@tanstack/react-table";
-import { ControlledDataTable } from "./ui/controlled-data-table";
-import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
-import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { ColumnFilterButton } from "./ColumnFilterButton";
+import { type SelectedLabel } from "./labels-selector";
+import { TableLabelsCell } from "./TableLabelsCell";
+import { Badge } from "./ui/badge";
+import { ControlledDataTable } from "./ui/controlled-data-table";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
 
 export type ClientRow = {
     id: number;
@@ -280,7 +274,7 @@ export default function MachineClientsTable({
             },
             {
                 accessorKey: "online",
-                friendlyName: t("online"),
+                friendlyName: t("status"),
                 header: () => {
                     return (
                         <ColumnFilterButton
@@ -302,7 +296,7 @@ export default function MachineClientsTable({
                             }
                             searchPlaceholder={t("searchPlaceholder")}
                             emptyMessage={t("emptySearchOptions")}
-                            label={t("online")}
+                            label={t("status")}
                             className="p-3"
                         />
                     );
@@ -415,9 +409,15 @@ export default function MachineClientsTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
-                        {t("labels")}
-                    </span>
+                    <LabelColumnFilterButton
+                        orgId={orgId}
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: ClientRow } }) => (
                     <MachineClientLabelCell
@@ -510,11 +510,6 @@ export default function MachineClientsTable({
         return baseColumns;
     }, [hasRowsWithoutUserId, isLabelFeatureEnabled, orgId, t, searchParams]);
 
-    const booleanSearchFilterSchema = z
-        .enum(["true", "false"])
-        .optional()
-        .catch(undefined);
-
     function handleFilterChange(
         column: string,
         value: string | null | undefined | string[]
@@ -585,6 +580,7 @@ export default function MachineClientsTable({
                 rows={machineClients}
                 tableId="machine-clients"
                 searchPlaceholder={t("machinesSearch")}
+                searchQuery={searchParams.get("query")?.toString()}
                 onAdd={() =>
                     startNavigation(() =>
                         router.push(`/${orgId}/settings/clients/machine/create`)
@@ -602,35 +598,6 @@ export default function MachineClientsTable({
                 columnVisibility={defaultMachineColumnVisibility}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
-                filters={[
-                    {
-                        id: "status",
-                        label: t("status") || "Status",
-                        multiSelect: true,
-                        displayMode: "calculated",
-                        options: [
-                            {
-                                id: "active",
-                                label: t("active") || "Active",
-                                value: "active"
-                            },
-                            {
-                                id: "archived",
-                                label: t("archived") || "Archived",
-                                value: "archived"
-                            },
-                            {
-                                id: "blocked",
-                                label: t("blocked") || "Blocked",
-                                value: "blocked"
-                            }
-                        ],
-                        onValueChange(selectedValues: string[]) {
-                            handleFilterChange("status", selectedValues);
-                        },
-                        values: searchParams.getAll("status")
-                    }
-                ]}
             />
         </>
     );
@@ -641,27 +608,31 @@ type MachineClientLabelCellProps = {
     orgId: string;
 };
 
-function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps) {
+function MachineClientLabelCell({
+    client,
+    orgId
+}: MachineClientLabelCellProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-    const router = useRouter();
+    const [localLabels, setLocalLabels] = useLocalLabels(client.labels, client.id);
 
-    const labels = client.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    function toggleClientLabel(
+        label: SelectedLabel,
+        action: "attach" | "detach"
+    ) {
+        const previousLabels = localLabels;
 
-    function toggleClientLabel(label: SelectedLabel, action: "attach" | "detach") {
-        startTransition(async () => {
+        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
                         )
                     );
@@ -671,59 +642,21 @@ function MachineClientLabelCell({ client, orgId }: MachineClientLabelCellProps)
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
     return (
-        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.slice(0, 3).map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            {optimisticLabels.length > 3 && (
-                <Button
-                    variant="outline"
-                    className={cn(
-                        "inline-flex gap-1 items-center",
-                        "rounded-full text-sm cursor-pointer",
-                        "px-1.5 py-0 h-auto"
-                    )}
-                    onClick={() => setIsPopoverOpen(true)}
-                >
-                    +{optimisticLabels.length - 3}
-                </Button>
-            )}
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="p-1 size-auto rounded-full"
-                        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>
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleClientLabel}
+        />
     );
 }

src/components/OrgLabelForm.tsx

@@ -72,7 +72,6 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                             <FormControl>
                                 <Input
                                     {...field}
-                                    placeholder={t("labelPlaceholder")}
                                 />
                             </FormControl>
                             <FormMessage />
@@ -104,13 +103,16 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                                                 className="flex items-center gap-2"
                                             >
                                                 <div
-                                                    className="size-4 rounded-full bg-(--color) flex-none"
+                                                    className="size-2 rounded-full bg-(--color) flex-none"
                                                     style={{
                                                         // @ts-expect-error css color
                                                         "--color": value
                                                     }}
                                                 />
-                                                <span data-name>{color}</span>
+                                                <span data-name>
+                                                    {color.charAt(0).toUpperCase() +
+                                                        color.slice(1)}
+                                                </span>
                                             </SelectItem>
                                         )
                                     )}

src/components/OrgLabelsTable.tsx

@@ -121,11 +121,9 @@ export default function OrgLabelsTable({
                 )
             },
             {
-                accessorKey: "actions",
+                id: "actions",
                 enableHiding: false,
-                header: () => {
-                    return <span className="p-3">{t("actions")}</span>;
-                },
+                header: () => <span className="p-3"></span>,
                 cell: ({ row }) => (
                     <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -234,6 +232,7 @@ export default function OrgLabelsTable({
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing || isFiltering}
                 rowCount={rowCount}
+                stickyRightColumn="actions"
             />
         </>
     );

src/components/ProxyResourcesTable.tsx

@@ -70,8 +70,10 @@ import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { ControlledDataTable } from "./ui/controlled-data-table";
 import UptimeMiniBar from "./UptimeMiniBar";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
-import { LabelBadge } from "./label-badge";
+import { type SelectedLabel } from "./labels-selector";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
+import { TableLabelsCell } from "./TableLabelsCell";
 
 export type TargetHealth = {
     targetId: number;
@@ -169,12 +171,12 @@ export default function ProxyResourcesTable({
         };
     }, [initialFilterSite, siteIdQ, siteIdNum, t]);
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            router.refresh();
-        }, 30_000);
-        return () => clearInterval(interval);
-    }, [router]);
+    // useEffect(() => {
+    //     const interval = setInterval(() => {
+    //         router.refresh();
+    //     }, 30_000);
+    //     return () => clearInterval(interval);
+    // }, [router]);
 
     const refreshData = () => {
         startTransition(() => {
@@ -640,9 +642,15 @@ export default function ProxyResourcesTable({
                 id: "labels",
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
-                        {t("labels")}
-                    </span>
+                    <LabelColumnFilterButton
+                        orgId={orgId}
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: ResourceRow } }) => (
                     <ResourceLabelCell resource={row.original} orgId={orgId} />
@@ -655,13 +663,15 @@ export default function ProxyResourcesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         searchParams.delete(column);
         searchParams.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             searchParams.set(column, value);
+        } else if (value) {
+            value.forEach((val) => searchParams.append(column, val));
         }
         filter({
             searchParams
@@ -721,6 +731,7 @@ export default function ProxyResourcesTable({
                 searchPlaceholder={t("resourcesSearch")}
                 pagination={pagination}
                 rowCount={rowCount}
+                searchQuery={searchParams.get("query")?.toString()}
                 onSearch={handleSearchChange}
                 onPaginationChange={handlePaginationChange}
                 onAdd={() =>
@@ -755,29 +766,29 @@ function ResourceLabelCell({ resource, orgId }: ResourceLabelCellProps) {
 
     const api = createApiClient(useEnvContext());
 
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-    const router = useRouter();
-
-    const labels = resource.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    const [localLabels, setLocalLabels] = useLocalLabels(
+        resource.labels,
+        resource.id
+    );
 
     function toggleSiteLabel(
         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`,
                         { resourceId: resource.id }
                     );
                 } else {
-                    setOptimisticLabels(
-                        optimisticLabels.filter(
+                    setLocalLabels(
+                        previousLabels.filter(
                             (lb) => lb.labelId !== label.labelId
                         )
                     );
@@ -787,60 +798,22 @@ function ResourceLabelCell({ resource, orgId }: ResourceLabelCellProps) {
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
     return (
-        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.slice(0, 3).map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            {optimisticLabels.length > 3 && (
-                <Button
-                    variant="outline"
-                    className={cn(
-                        "inline-flex gap-1 items-center",
-                        "rounded-full text-sm cursor-pointer",
-                        "px-1.5 py-0 h-auto"
-                    )}
-                    onClick={() => setIsPopoverOpen(true)}
-                >
-                    +{optimisticLabels.length - 3}
-                </Button>
-            )}
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="p-1 size-auto rounded-full"
-                        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={toggleSiteLabel}
-                    />
-                </PopoverContent>
-            </Popover>
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleSiteLabel}
+        />
     );
 }
 

src/components/ResourceInfoBox.tsx

@@ -36,15 +36,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
         <Alert>
             <AlertDescription>
                 {/* 4 cols because of the certs */}
-                <InfoSections cols={resource.http && build != "oss" ? 6 : 5}>
-                    <InfoSection>
-                        <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
-                        <InfoSectionContent>
-                            <span className="inline-flex items-center">
-                                {resource.niceId}
-                            </span>
-                        </InfoSectionContent>
-                    </InfoSection>
+                <InfoSections cols={resource.http && build != "oss" ? 5 : 4}>
                     {resource.http ? (
                         <>
                             <InfoSection>

src/components/SiteInfoCard.tsx

@@ -61,8 +61,7 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
         return (
             <Alert>
                 <AlertDescription>
-                    <InfoSections cols={site.endpoint ? 5 : 4}>
-                        {identifierSection}
+                    <InfoSections cols={site.endpoint ? 4 : 3}>
                         {statusSection}
                         <InfoSection>
                             <InfoSectionTitle>

src/components/SitesTable.tsx

@@ -37,7 +37,6 @@ import {
     ChevronDown,
     ChevronsUpDownIcon,
     MoreHorizontal,
-    PlusIcon
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
@@ -46,7 +45,6 @@ import {
     startTransition,
     useEffect,
     useMemo,
-    useOptimistic,
     useState,
     useTransition
 } from "react";
@@ -61,9 +59,10 @@ import {
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { cn } from "@app/lib/cn";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { LabelBadge } from "./label-badge";
-import { LabelsSelector, type SelectedLabel } from "./labels-selector";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { type SelectedLabel } from "./labels-selector";
+import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
+import { useLocalLabels } from "@app/hooks/useLocalLabels";
+import { TableLabelsCell } from "./TableLabelsCell";
 
 export type SiteRow = {
     id: number;
@@ -122,12 +121,12 @@ export default function SitesTable({
     const api = createApiClient(useEnvContext());
     const t = useTranslations();
 
-    useEffect(() => {
-        const interval = setInterval(() => {
-            router.refresh();
-        }, 30_000);
-        return () => clearInterval(interval);
-    }, []);
+    // useEffect(() => {
+    //     const interval = setInterval(() => {
+    //         router.refresh();
+    //     }, 30_000);
+    //     return () => clearInterval(interval);
+    // }, []);
 
     const booleanSearchFilterSchema = z
         .enum(["true", "false"])
@@ -136,14 +135,16 @@ export default function SitesTable({
 
     function handleFilterChange(
         column: string,
-        value: string | undefined | null
+        value: string | undefined | null | string[]
     ) {
         const sp = new URLSearchParams(searchParams);
         sp.delete(column);
         sp.delete("page");
 
-        if (value) {
+        if (typeof value === "string") {
             sp.set(column, value);
+        } else if (value) {
+            value.forEach((val) => sp.append(column, val));
         }
         startTransition(() => router.push(`${pathname}?${sp.toString()}`));
     }
@@ -183,358 +184,373 @@ export default function SitesTable({
 
     const columns = useMemo<ExtendedColumnDef<SiteRow>[]>(() => {
         const cols: ExtendedColumnDef<SiteRow>[] = [
-        {
-            accessorKey: "name",
-            enableHiding: false,
-            header: () => {
-                const nameOrder = getSortDirection("name", searchParams);
-                const Icon =
-                    nameOrder === "asc"
-                        ? ArrowDown01Icon
-                        : nameOrder === "desc"
-                          ? ArrowUp10Icon
-                          : ChevronsUpDownIcon;
+            {
+                accessorKey: "name",
+                enableHiding: false,
+                header: () => {
+                    const nameOrder = getSortDirection("name", searchParams);
+                    const Icon =
+                        nameOrder === "asc"
+                            ? ArrowDown01Icon
+                            : nameOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
 
-                return (
-                    <Button
-                        variant="ghost"
-                        className="p-3"
-                        onClick={() => toggleSort("name")}
-                    >
-                        {t("name")}
-                        <Icon className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            id: "niceId",
-            accessorKey: "nice",
-            friendlyName: t("identifier"),
-            enableHiding: true,
-            header: () => {
-                return <span className="p-3">{t("identifier")}</span>;
+                    return (
+                        <Button
+                            variant="ghost"
+                            className="p-3"
+                            onClick={() => toggleSort("name")}
+                        >
+                            {t("name")}
+                            <Icon className="ml-2 h-4 w-4" />
+                        </Button>
+                    );
+                }
             },
-            cell: ({ row }) => {
-                return <span>{row.original.nice || "-"}</span>;
-            }
-        },
-        {
-            accessorKey: "online",
-            friendlyName: t("online"),
-            header: () => {
-                return (
-                    <ColumnFilterButton
-                        options={[
-                            { value: "true", label: t("online") },
-                            { value: "false", label: t("offline") }
-                        ]}
-                        selectedValue={booleanSearchFilterSchema.parse(
-                            searchParams.get("online")
-                        )}
-                        onValueChange={(value) =>
-                            handleFilterChange("online", value)
+            {
+                id: "niceId",
+                accessorKey: "nice",
+                friendlyName: t("identifier"),
+                enableHiding: true,
+                header: () => {
+                    return <span className="p-3">{t("identifier")}</span>;
+                },
+                cell: ({ row }) => {
+                    return <span>{row.original.nice || "-"}</span>;
+                }
+            },
+            {
+                accessorKey: "online",
+                friendlyName: t("status"),
+                header: () => {
+                    return (
+                        <ColumnFilterButton
+                            options={[
+                                { value: "true", label: t("online") },
+                                { value: "false", label: t("offline") }
+                            ]}
+                            selectedValue={booleanSearchFilterSchema.parse(
+                                searchParams.get("online")
+                            )}
+                            onValueChange={(value) =>
+                                handleFilterChange("online", value)
+                            }
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
+                            label={t("status")}
+                            className="p-3"
+                        />
+                    );
+                },
+                cell: ({ row }) => {
+                    const originalRow = row.original;
+                    if (
+                        originalRow.type == "newt" ||
+                        originalRow.type == "wireguard"
+                    ) {
+                        if (originalRow.online) {
+                            return (
+                                <span className="flex items-center space-x-2">
+                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <span>{t("online")}</span>
+                                </span>
+                            );
+                        } else {
+                            return (
+                                <span className="flex items-center space-x-2">
+                                    <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
+                                    <span>{t("offline")}</span>
+                                </span>
+                            );
                         }
-                        searchPlaceholder={t("searchPlaceholder")}
-                        emptyMessage={t("emptySearchOptions")}
-                        label={t("online")}
-                        className="p-3"
-                    />
-                );
-            },
-            cell: ({ row }) => {
-                const originalRow = row.original;
-                if (
-                    originalRow.type == "newt" ||
-                    originalRow.type == "wireguard"
-                ) {
-                    if (originalRow.online) {
-                        return (
-                            <span className="flex items-center space-x-2">
-                                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                <span>{t("online")}</span>
-                            </span>
-                        );
                     } else {
+                        return <span>-</span>;
+                    }
+                }
+            },
+            {
+                id: "uptime",
+                friendlyName: "Uptime",
+                header: () => <span className="p-3">{t("uptime30d")}</span>,
+                cell: ({ row }) => {
+                    const originalRow = row.original;
+                    if (originalRow.type == "local") {
+                        return <span>-</span>;
+                    }
+                    return <UptimeMiniBar siteId={originalRow.id} days={30} />;
+                }
+            },
+            {
+                accessorKey: "mbIn",
+                friendlyName: t("dataIn"),
+                header: () => {
+                    const dataInOrder = getSortDirection(
+                        "megabytesIn",
+                        searchParams
+                    );
+                    const Icon =
+                        dataInOrder === "asc"
+                            ? ArrowDown01Icon
+                            : dataInOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
+                    return (
+                        <Button
+                            variant="ghost"
+                            onClick={() => toggleSort("megabytesIn")}
+                        >
+                            {t("dataIn")}
+                            <Icon className="ml-2 h-4 w-4" />
+                        </Button>
+                    );
+                }
+            },
+            {
+                accessorKey: "mbOut",
+                friendlyName: t("dataOut"),
+                header: () => {
+                    const dataOutOrder = getSortDirection(
+                        "megabytesOut",
+                        searchParams
+                    );
+
+                    const Icon =
+                        dataOutOrder === "asc"
+                            ? ArrowDown01Icon
+                            : dataOutOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
+                    return (
+                        <Button
+                            variant="ghost"
+                            onClick={() => toggleSort("megabytesOut")}
+                        >
+                            {t("dataOut")}
+                            <Icon className="ml-2 h-4 w-4" />
+                        </Button>
+                    );
+                }
+            },
+            {
+                accessorKey: "type",
+                friendlyName: t("type"),
+                header: () => {
+                    return <span className="p-3">{t("type")}</span>;
+                },
+                cell: ({ row }) => {
+                    const originalRow = row.original;
+
+                    if (originalRow.type === "newt") {
                         return (
-                            <span className="flex items-center space-x-2">
-                                <div className="w-2 h-2 bg-neutral-500 rounded-full"></div>
-                                <span>{t("offline")}</span>
-                            </span>
+                            <div className="flex items-center space-x-1">
+                                <Badge variant="secondary">
+                                    <div className="flex items-center space-x-1">
+                                        <span>Newt</span>
+                                        {originalRow.newtVersion && (
+                                            <span>
+                                                v{originalRow.newtVersion}
+                                            </span>
+                                        )}
+                                    </div>
+                                </Badge>
+                                {originalRow.newtUpdateAvailable && (
+                                    <InfoPopup
+                                        info={t("newtUpdateAvailableInfo")}
+                                    />
+                                )}
+                            </div>
                         );
                     }
-                } else {
-                    return <span>-</span>;
-                }
-            }
-        },
-        {
-            id: "uptime",
-            friendlyName: "Uptime",
-            header: () => <span className="p-3">{t("uptime30d")}</span>,
-            cell: ({ row }) => {
-                const originalRow = row.original;
-                if (originalRow.type == "local") {
-                    return <span>-</span>;
-                }
-                return <UptimeMiniBar siteId={originalRow.id} days={30} />;
-            }
-        },
-        {
-            accessorKey: "mbIn",
-            friendlyName: t("dataIn"),
-            header: () => {
-                const dataInOrder = getSortDirection(
-                    "megabytesIn",
-                    searchParams
-                );
-                const Icon =
-                    dataInOrder === "asc"
-                        ? ArrowDown01Icon
-                        : dataInOrder === "desc"
-                          ? ArrowUp10Icon
-                          : ChevronsUpDownIcon;
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() => toggleSort("megabytesIn")}
-                    >
-                        {t("dataIn")}
-                        <Icon className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "mbOut",
-            friendlyName: t("dataOut"),
-            header: () => {
-                const dataOutOrder = getSortDirection(
-                    "megabytesOut",
-                    searchParams
-                );
 
-                const Icon =
-                    dataOutOrder === "asc"
-                        ? ArrowDown01Icon
-                        : dataOutOrder === "desc"
-                          ? ArrowUp10Icon
-                          : ChevronsUpDownIcon;
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() => toggleSort("megabytesOut")}
-                    >
-                        {t("dataOut")}
-                        <Icon className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "type",
-            friendlyName: t("type"),
-            header: () => {
-                return <span className="p-3">{t("type")}</span>;
+                    if (originalRow.type === "wireguard") {
+                        return (
+                            <div className="flex items-center space-x-2">
+                                <Badge variant="secondary">WireGuard</Badge>
+                            </div>
+                        );
+                    }
+
+                    if (originalRow.type === "local") {
+                        return (
+                            <div className="flex items-center space-x-2">
+                                <Badge variant="secondary">Local</Badge>
+                            </div>
+                        );
+                    }
+                }
             },
-            cell: ({ row }) => {
-                const originalRow = row.original;
-
-                if (originalRow.type === "newt") {
+            {
+                id: "resources",
+                accessorKey: "resourceCount",
+                friendlyName: t("resources"),
+                header: () => <span className="p-3">{t("resources")}</span>,
+                cell: ({ row }) => {
+                    const siteRow = row.original;
                     return (
-                        <div className="flex items-center space-x-1">
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setResourcesDialogSite(siteRow)}
+                            className="flex h-8 items-center gap-2 px-0 font-normal"
+                        >
+                            <span className="text-sm tabular-nums">
+                                {siteRow.resourceCount} {t("resources")}
+                            </span>
+                            <ChevronDown className="h-3 w-3 shrink-0" />
+                        </Button>
+                    );
+                }
+            },
+            {
+                accessorKey: "exitNode",
+                friendlyName: t("exitNode"),
+                header: () => {
+                    return <span className="p-3">{t("exitNode")}</span>;
+                },
+                cell: ({ row }) => {
+                    const originalRow = row.original;
+                    if (!originalRow.exitNodeName) {
+                        return "-";
+                    }
+
+                    const isCloudNode =
+                        build == "saas" &&
+                        originalRow.exitNodeName &&
+                        [
+                            "mercury",
+                            "venus",
+                            "earth",
+                            "mars",
+                            "jupiter",
+                            "saturn",
+                            "uranus",
+                            "neptune",
+                            "pluto"
+                        ].includes(originalRow.exitNodeName.toLowerCase());
+
+                    if (isCloudNode) {
+                        const capitalizedName =
+                            originalRow.exitNodeName.charAt(0).toUpperCase() +
+                            originalRow.exitNodeName.slice(1).toLowerCase();
+                        return (
                             <Badge variant="secondary">
-                                <div className="flex items-center space-x-1">
-                                    <span>Newt</span>
-                                    {originalRow.newtVersion && (
-                                        <span>v{originalRow.newtVersion}</span>
-                                    )}
-                                </div>
+                                Pangolin {capitalizedName}
                             </Badge>
-                            {originalRow.newtUpdateAvailable && (
-                                <InfoPopup
-                                    info={t("newtUpdateAvailableInfo")}
-                                />
-                            )}
-                        </div>
-                    );
-                }
+                        );
+                    }
 
-                if (originalRow.type === "wireguard") {
-                    return (
-                        <div className="flex items-center space-x-2">
-                            <Badge variant="secondary">WireGuard</Badge>
-                        </div>
-                    );
-                }
-
-                if (originalRow.type === "local") {
-                    return (
-                        <div className="flex items-center space-x-2">
-                            <Badge variant="secondary">Local</Badge>
-                        </div>
-                    );
-                }
-            }
-        },
-        {
-            id: "resources",
-            accessorKey: "resourceCount",
-            friendlyName: t("resources"),
-            header: () => <span className="p-3">{t("resources")}</span>,
-            cell: ({ row }) => {
-                const siteRow = row.original;
-                return (
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setResourcesDialogSite(siteRow)}
-                        className="flex h-8 items-center gap-2 px-2 font-normal"
-                    >
-                        <span className="text-sm tabular-nums">
-                            {siteRow.resourceCount} {t("resources")}
-                        </span>
-                        <ChevronDown className="h-3 w-3 shrink-0" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "exitNode",
-            friendlyName: t("exitNode"),
-            header: () => {
-                return <span className="p-3">{t("exitNode")}</span>;
-            },
-            cell: ({ row }) => {
-                const originalRow = row.original;
-                if (!originalRow.exitNodeName) {
-                    return "-";
-                }
-
-                const isCloudNode =
-                    build == "saas" &&
-                    originalRow.exitNodeName &&
-                    [
-                        "mercury",
-                        "venus",
-                        "earth",
-                        "mars",
-                        "jupiter",
-                        "saturn",
-                        "uranus",
-                        "neptune",
-                        "pluto"
-                    ].includes(originalRow.exitNodeName.toLowerCase());
-
-                if (isCloudNode) {
-                    const capitalizedName =
-                        originalRow.exitNodeName.charAt(0).toUpperCase() +
-                        originalRow.exitNodeName.slice(1).toLowerCase();
-                    return (
-                        <Badge variant="secondary">
-                            Pangolin {capitalizedName}
-                        </Badge>
-                    );
-                }
-
-                // Self-hosted node
-                if (originalRow.remoteExitNodeId) {
-                    return (
-                        <Link
-                            href={`/${originalRow.orgId}/settings/remote-exit-nodes/${originalRow.remoteExitNodeId}`}
-                        >
-                            <Button variant="outline" size="sm">
-                                {originalRow.exitNodeName}
-                                <ArrowUpRight className="ml-2 h-3 w-3" />
-                            </Button>
-                        </Link>
-                    );
-                }
-
-                // Fallback if no remoteExitNodeId
-                return <span>{originalRow.exitNodeName}</span>;
-            }
-        },
-        {
-            accessorKey: "address",
-            header: () => {
-                return <span className="p-3">{t("address")}</span>;
-            },
-            cell: ({ row }) => {
-                const originalRow = row.original;
-                return originalRow.address ? (
-                    <div className="flex items-center space-x-2">
-                        <span>{originalRow.address}</span>
-                    </div>
-                ) : (
-                    "-"
-                );
-            }
-        },
-        {
-            id: "actions",
-            enableHiding: false,
-            header: () => <span className="p-3"></span>,
-            cell: ({ row }) => {
-                const siteRow = row.original;
-                return (
-                    <div className="flex items-center gap-2 justify-end">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="h-8 w-8 p-0">
-                                    <span className="sr-only">Open menu</span>
-                                    <MoreHorizontal className="h-4 w-4" />
+                    // Self-hosted node
+                    if (originalRow.remoteExitNodeId) {
+                        return (
+                            <Link
+                                href={`/${originalRow.orgId}/settings/remote-exit-nodes/${originalRow.remoteExitNodeId}`}
+                            >
+                                <Button variant="outline" size="sm">
+                                    {originalRow.exitNodeName}
+                                    <ArrowUpRight className="ml-2 h-3 w-3" />
                                 </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <Link
-                                    className="block w-full"
-                                    href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
-                                >
-                                    <DropdownMenuItem>
-                                        {t("viewSettings")}
-                                    </DropdownMenuItem>
-                                </Link>
-                                <Link
-                                    className="block w-full"
-                                    href={`/${siteRow.orgId}/settings/resources/proxy?siteId=${siteRow.id}`}
-                                >
-                                    <DropdownMenuItem>
-                                        {t("sitesTableViewPublicResources")}
-                                    </DropdownMenuItem>
-                                </Link>
-                                <Link
-                                    className="block w-full"
-                                    href={`/${siteRow.orgId}/settings/resources/client?siteId=${siteRow.id}`}
-                                >
-                                    <DropdownMenuItem>
-                                        {t("sitesTableViewPrivateResources")}
-                                    </DropdownMenuItem>
-                                </Link>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                        <Link
-                            href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
-                        >
-                            <Button variant={"outline"}>
-                                {t("edit")}
-                                <ArrowRight className="ml-2 w-4 h-4" />
-                            </Button>
-                        </Link>
-                    </div>
-                );
+                            </Link>
+                        );
+                    }
+
+                    // Fallback if no remoteExitNodeId
+                    return <span>{originalRow.exitNodeName}</span>;
+                }
+            },
+            {
+                accessorKey: "address",
+                header: () => {
+                    return <span className="p-3">{t("address")}</span>;
+                },
+                cell: ({ row }) => {
+                    const originalRow = row.original;
+                    return originalRow.address ? (
+                        <div className="flex items-center space-x-2">
+                            <span>{originalRow.address}</span>
+                        </div>
+                    ) : (
+                        "-"
+                    );
+                }
+            },
+            {
+                id: "actions",
+                enableHiding: false,
+                header: () => <span className="p-3"></span>,
+                cell: ({ row }) => {
+                    const siteRow = row.original;
+                    return (
+                        <div className="flex items-center gap-2 justify-end">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <Link
+                                        className="block w-full"
+                                        href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
+                                    >
+                                        <DropdownMenuItem>
+                                            {t("viewSettings")}
+                                        </DropdownMenuItem>
+                                    </Link>
+                                    <Link
+                                        className="block w-full"
+                                        href={`/${siteRow.orgId}/settings/resources/proxy?siteId=${siteRow.id}`}
+                                    >
+                                        <DropdownMenuItem>
+                                            {t("sitesTableViewPublicResources")}
+                                        </DropdownMenuItem>
+                                    </Link>
+                                    <Link
+                                        className="block w-full"
+                                        href={`/${siteRow.orgId}/settings/resources/client?siteId=${siteRow.id}`}
+                                    >
+                                        <DropdownMenuItem>
+                                            {t(
+                                                "sitesTableViewPrivateResources"
+                                            )}
+                                        </DropdownMenuItem>
+                                    </Link>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Link
+                                href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
+                            >
+                                <Button variant={"outline"}>
+                                    {t("edit")}
+                                    <ArrowRight className="ml-2 w-4 h-4" />
+                                </Button>
+                            </Link>
+                        </div>
+                    );
+                }
             }
-        }
         ];
 
         if (isLabelFeatureEnabled) {
             cols.splice(cols.length - 1, 0, {
                 accessorKey: "labels",
                 header: () => (
-                    <span className="p-3 text-end w-full inline-block">
-                        {t("labels")}
-                    </span>
+                    <LabelColumnFilterButton
+                        orgId={orgId}
+                        selectedValues={searchParams.getAll("labels")}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("labels", value)
+                        }
+                        label={t("labels")}
+                        className="p-3"
+                    />
                 ),
                 cell: ({ row }: { row: { original: SiteRow } }) => (
                     <SiteLabelCell site={row.original} orgId={orgId} />
@@ -674,29 +690,26 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
 
     const api = createApiClient(useEnvContext());
 
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-    const router = useRouter();
-
-    const labels = site.labels ?? [];
-    const [optimisticLabels, setOptimisticLabels] = useOptimistic(labels);
+    const [localLabels, setLocalLabels] = useLocalLabels(site.labels, site.id);
 
     function toggleSiteLabel(
         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`,
                         { siteId: site.id }
                     );
                 } else {
-                    setOptimisticLabels(
-                        optimisticLabels.filter(
+                    setLocalLabels(
+                        previousLabels.filter(
                             (lb) => lb.labelId !== label.labelId
                         )
                     );
@@ -706,59 +719,21 @@ function SiteLabelCell({ site, orgId }: SiteLabelCellProps) {
                     );
                 }
             } catch (e) {
+                setLocalLabels(previousLabels);
                 toast({
                     title: t("error"),
                     description: formatAxiosError(e, t("errorOccurred")),
                     variant: "destructive"
                 });
-            } finally {
-                router.refresh();
             }
-        });
+        })();
     }
 
     return (
-        <div className="inline-flex flex-wrap items-center justify-end w-full gap-1">
-            {optimisticLabels.slice(0, 3).map((label) => (
-                <LabelBadge
-                    key={label.labelId}
-                    onClick={() => setIsPopoverOpen(true)}
-                    {...label}
-                />
-            ))}
-            {optimisticLabels.length > 3 && (
-                <Button
-                    variant="outline"
-                    className={cn(
-                        "inline-flex gap-1 items-center",
-                        "rounded-full text-sm cursor-pointer",
-                        "px-1.5 py-0 h-auto"
-                    )}
-                    onClick={() => setIsPopoverOpen(true)}
-                >
-                    +{optimisticLabels.length - 3}
-                </Button>
-            )}
-            <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        size="icon"
-                        variant="outline"
-                        className="p-1 size-auto rounded-full"
-                        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={toggleSiteLabel}
-                    />
-                </PopoverContent>
-            </Popover>
-        </div>
+        <TableLabelsCell
+            orgId={orgId}
+            localLabels={localLabels}
+            toggleLabel={toggleSiteLabel}
+        />
     );
 }

src/components/TableLabelsCell.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import type { Measurable } from "@radix-ui/rect";
+import { PlusIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+import { LabelBadge } from "./label-badge";
+import { LabelOverflowBadge } from "./label-overflow-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
+import { Button } from "./ui/button";
+import {
+    Popover,
+    PopoverAnchor,
+    PopoverContent,
+    PopoverTrigger
+} from "./ui/popover";
+
+const MAX_VISIBLE_LABELS = 4;
+const MAX_VISIBLE_BEFORE_OVERFLOW = MAX_VISIBLE_LABELS - 1;
+
+type TableLabelsCellProps = {
+    orgId: string;
+    localLabels: SelectedLabel[];
+    toggleLabel: (label: SelectedLabel, action: "attach" | "detach") => void;
+};
+
+export function TableLabelsCell({
+    orgId,
+    localLabels,
+    toggleLabel
+}: TableLabelsCellProps) {
+    const t = useTranslations();
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const frozenAnchorRef = useRef<Measurable>({
+        getBoundingClientRect: () => new DOMRect()
+    });
+
+    const hasOverflow = localLabels.length > MAX_VISIBLE_LABELS;
+    const visibleLabels = localLabels.slice(
+        0,
+        hasOverflow ? MAX_VISIBLE_BEFORE_OVERFLOW : MAX_VISIBLE_LABELS
+    );
+    const overflowLabels = hasOverflow
+        ? localLabels.slice(MAX_VISIBLE_BEFORE_OVERFLOW)
+        : [];
+
+    function handleOpenChange(open: boolean) {
+        if (open && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            frozenAnchorRef.current = {
+                getBoundingClientRect: () => rect
+            };
+        }
+        setIsPopoverOpen(open);
+    }
+
+    return (
+        <div className="grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-1">
+            <Popover open={isPopoverOpen} onOpenChange={handleOpenChange}>
+                <PopoverAnchor virtualRef={frozenAnchorRef} />
+                <PopoverTrigger asChild>
+                    <Button
+                        ref={triggerRef}
+                        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="start"
+                    side="bottom"
+                    className={`${dataTableFilterPopoverContentClassName} p-0`}
+                    updatePositionStrategy="optimized"
+                >
+                    <LabelsSelector
+                        orgId={orgId}
+                        selectedLabels={localLabels}
+                        toggleLabel={toggleLabel}
+                        onClose={() => handleOpenChange(false)}
+                    />
+                </PopoverContent>
+            </Popover>
+            <div className="flex min-w-0 flex-nowrap items-center justify-start gap-1 overflow-hidden">
+                {visibleLabels.map((label) => (
+                    <LabelBadge
+                        key={label.labelId}
+                        className="shrink-0"
+                        onClick={() => handleOpenChange(true)}
+                        {...label}
+                    />
+                ))}
+                {overflowLabels.length > 0 && (
+                    <LabelOverflowBadge
+                        labels={overflowLabels}
+                        onClick={() => handleOpenChange(true)}
+                    />
+                )}
+            </div>
+        </div>
+    );
+}

src/components/UserDevicesTable.tsx

@@ -405,7 +405,7 @@ export default function UserDevicesTable({
             },
             {
                 accessorKey: "online",
-                friendlyName: t("connected"),
+                friendlyName: t("status"),
                 header: () => {
                     return (
                         <ColumnFilterButton
@@ -427,7 +427,7 @@ export default function UserDevicesTable({
                             }
                             searchPlaceholder={t("searchPlaceholder")}
                             emptyMessage={t("emptySearchOptions")}
-                            label={t("connected")}
+                            label={t("status")}
                             className="p-3"
                         />
                     );
@@ -794,6 +794,7 @@ export default function UserDevicesTable({
                 columnVisibility={defaultUserColumnVisibility}
                 onSearch={handleSearchChange}
                 onPaginationChange={handlePaginationChange}
+                searchQuery={searchParams.get("query")?.toString()}
                 pagination={pagination}
                 rowCount={rowCount}
                 stickyLeftColumn="name"

src/components/label-badge.tsx

@@ -1,40 +1,62 @@
 import { cn } from "@app/lib/cn";
 import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+const labelBadgeClassName =
+    "inline-flex h-auto items-center gap-1 rounded-full border border-input bg-background py-0 pl-1.5 pr-2 text-sm shadow-xs";
 
 export type LabelBadgeProps = {
     name: string;
     color: string;
     onClick?: () => void;
     className?: string;
+    displayOnly?: boolean;
 };
 
 export function LabelBadge({
     onClick,
     name,
     color,
-    className
+    className,
+    displayOnly = false
 }: LabelBadgeProps) {
-    return (
-        <Button
-            variant="outline"
-            onClick={onClick}
-            className={cn(
-                "inline-flex gap-1 items-center",
-                "rounded-full text-sm cursor-pointer",
-                "pl-1.5 pr-2 py-0 h-auto",
-                className
-            )}
-        >
+    const content = (
+        <>
             <div
-                className="size-3 rounded-full bg-(--color) flex-none"
+                className="size-2 flex-none rounded-full bg-(--color)"
                 style={{
                     // @ts-expect-error css color
                     "--color": color
                 }}
             />
-            <span className="whitespace-nowrap text-ellipsis max-w-16 overflow-hidden relative">
+            <span className="relative max-w-24 overflow-hidden text-ellipsis whitespace-nowrap">
                 {name}
             </span>
-        </Button>
+        </>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                {displayOnly ? (
+                    <span className={cn(labelBadgeClassName, className)}>
+                        {content}
+                    </span>
+                ) : (
+                    <Button
+                        variant="outline"
+                        onClick={onClick}
+                        className={cn(
+                            labelBadgeClassName,
+                            "cursor-pointer",
+                            className
+                        )}
+                    >
+                        {content}
+                    </Button>
+                )}
+            </TooltipTrigger>
+            <TooltipContent>{name}</TooltipContent>
+        </Tooltip>
     );
 }

src/components/label-overflow-badge.tsx

@@ -0,0 +1,97 @@
+import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export type LabelOverflowItem = {
+    color: string;
+    name?: string;
+};
+
+const labelOverflowBadgeClassName =
+    "inline-flex h-auto shrink-0 items-center gap-1.5 rounded-full border border-input bg-background py-0 pl-1.5 pr-2 text-sm shadow-xs";
+
+export type LabelOverflowBadgeProps = {
+    labels: LabelOverflowItem[];
+    onClick?: () => void;
+    className?: string;
+    displayOnly?: boolean;
+};
+
+const MAX_OVERFLOW_COLORS = 3;
+
+export function LabelOverflowBadge({
+    labels,
+    onClick,
+    className,
+    displayOnly = false
+}: LabelOverflowBadgeProps) {
+    const t = useTranslations();
+
+    if (labels.length === 0) {
+        return null;
+    }
+
+    const displayColors = labels
+        .slice(0, MAX_OVERFLOW_COLORS)
+        .map((label) => label.color);
+
+    const overflowNames = labels
+        .map((label) => label.name)
+        .filter((name): name is string => Boolean(name));
+
+    const tooltipContent =
+        overflowNames.length > 0
+            ? overflowNames.join(", ")
+            : t("labelOverflowCount", { count: labels.length });
+
+    const content = (
+        <>
+            <span className="inline-flex items-center">
+                {displayColors.map((color, index) => (
+                    <span
+                        key={index}
+                        className={cn(
+                            "size-2 flex-none rounded-full bg-(--color) ring-1 ring-background",
+                            index > 0 && "-ml-1"
+                        )}
+                        style={{
+                            // @ts-expect-error css color
+                            "--color": color
+                        }}
+                    />
+                ))}
+            </span>
+            <span className="whitespace-nowrap text-muted-foreground">
+                {t("labelOverflowCount", { count: labels.length })}
+            </span>
+        </>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                {displayOnly ? (
+                    <span
+                        className={cn(labelOverflowBadgeClassName, className)}
+                    >
+                        {content}
+                    </span>
+                ) : (
+                    <Button
+                        variant="outline"
+                        onClick={onClick}
+                        className={cn(
+                            labelOverflowBadgeClassName,
+                            "cursor-pointer",
+                            className
+                        )}
+                    >
+                        {content}
+                    </Button>
+                )}
+            </TooltipTrigger>
+            <TooltipContent>{tooltipContent}</TooltipContent>
+        </Tooltip>
+    );
+}

src/components/labels-selector.tsx

@@ -36,6 +36,7 @@ export type LabelsSelectorProps = {
     orgId: string;
     selectedLabels: SelectedLabel[];
     toggleLabel: (newlabel: SelectedLabel, action: "detach" | "attach") => void;
+    onClose?: () => void;
 };
 
 export const LABEL_COLORS = {
@@ -51,7 +52,8 @@ export const LABEL_COLORS = {
 export function LabelsSelector({
     orgId,
     selectedLabels,
-    toggleLabel
+    toggleLabel,
+    onClose
 }: LabelsSelectorProps) {
     const t = useTranslations();
     const [labelSearchQuery, setlabelsSearchQuery] = useState("");
@@ -200,24 +202,30 @@ export function LabelsSelector({
                                         ? "detach"
                                         : "attach"
                                 );
-                                // } else {
-                                //     onSelectionChange([
-                                //         ...selectedLabels,
-                                //         label
-                                //     ]);
-                                // }
+                                onClose?.();
                             }}
                         >
                             <Checkbox
-                                className="pointer-events-none shrink-0"
+                                className="shrink-0"
                                 checked={selectedIds.has(label.labelId)}
-                                onCheckedChange={() => {}}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onPointerDown={(e) => {
+                                    e.stopPropagation();
+                                }}
+                                onCheckedChange={(checked) => {
+                                    toggleLabel(
+                                        label,
+                                        checked ? "attach" : "detach"
+                                    );
+                                }}
                                 aria-hidden
                                 tabIndex={-1}
                             />
-                            <div className="min-w-0 flex-1 flex items-center gap-2">
+                            <div className="flex min-w-0 flex-1 items-center gap-2">
                                 <span
-                                    className="inline-block size-3 flex-none rounded-full bg-(--label-color)"
+                                    className="inline-block size-2 flex-none rounded-full bg-(--label-color)"
                                     style={{
                                         // @ts-expect-error CSS variable
                                         "--label-color": label.color

src/hooks/useLocalLabels.ts

@@ -0,0 +1,21 @@
+import type { SelectedLabel } from "@app/components/labels-selector";
+import { useEffect, useState } from "react";
+
+export function useLocalLabels(
+    serverLabels: SelectedLabel[] | undefined,
+    entityId: number
+) {
+    const labels = serverLabels ?? [];
+    const [localLabels, setLocalLabels] = useState(labels);
+
+    const serverLabelIds = labels
+        .map((label) => label.labelId)
+        .sort((a, b) => a - b)
+        .join(",");
+
+    useEffect(() => {
+        setLocalLabels(serverLabels ?? []);
+    }, [entityId, serverLabelIds]);
+
+    return [localLabels, setLocalLabels] as const;
+}

src/lib/queries.ts

@@ -759,7 +759,13 @@ export const logQueries = {
             }
         }),
 
-    access: ({ orgId, filters }: { orgId: string; filters: AccessLogFilters }) =>
+    access: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: AccessLogFilters;
+    }) =>
         queryOptions({
             queryKey: ["ACCESS_LOGS", orgId, "ALL", filters] as const,
             queryFn: async ({ signal, meta }) => {