Merge pull request #3219 from Fredkiss3/refactor/standardize-clear-buttons

feat: make clear filter buttons more consistent accross tables

messages/en-US.json

@@ -1290,6 +1290,7 @@
     "accessLabelFilterCount": "{count, plural, one {# label} other {# labels}}",
     "labelOverflowCount": "+{count, plural, one {# label} other {# labels}}",
     "accessLabelFilterClear": "Clear label filters",
+    "accessFilterClear": "Clear filters",
     "selectColor": "Select color",
     "createNewLabel": "Create new org label \"{label}\"",
     "inviteInvalidDescription": "The invite link is invalid.",

src/app/[orgId]/settings/logs/access/page.tsx

@@ -11,7 +11,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { ArrowUpRight, Key, User } from "lucide-react";
 import Link from "next/link";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { build } from "@server/build";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
@@ -233,7 +233,7 @@ export default function GeneralPage() {
         {
             accessorKey: "timestamp",
             header: () => {
-                return t("timestamp");
+                return <span className="px-2">{t("timestamp")}</span>;
             },
             cell: ({ row }) => {
                 return (
@@ -249,19 +249,19 @@ export default function GeneralPage() {
             accessorKey: "action",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("action")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[
                                 { value: "true", label: "Allowed" },
                                 { value: "false", label: "Denied" }
                             ]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -276,27 +276,27 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: () => t("ip")
+            header: () => <span className="px-2">{t("ip")}</span>
         },
         {
             accessorKey: "location",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("location")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
                                     label: location
                                 })
                             )}
+                            label={t("location")}
                             selectedValue={filters.location}
                             onValueChange={(value) =>
                                 handleFilterChange("location", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -321,19 +321,19 @@ export default function GeneralPage() {
             accessorKey: "resourceName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("resource")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.resourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -359,9 +359,8 @@ export default function GeneralPage() {
             accessorKey: "type",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("type")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[
                                 { value: "password", label: "Password" },
                                 { value: "pincode", label: "Pincode" },
@@ -372,12 +371,13 @@ export default function GeneralPage() {
                                 },
                                 { value: "ssh", label: "SSH" }
                             ]}
+                            label={t("type")}
                             selectedValue={filters.type}
                             onValueChange={(value) =>
                                 handleFilterChange("type", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -395,19 +395,19 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("actor")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -433,7 +433,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: () => t("actorId"),
+            header: () => <span className="px-2">{t("actorId")}</span>,
             cell: ({ row }) => (
                 <span className="flex items-center gap-1">
                     {row.original.actorId || "-"}

src/app/[orgId]/settings/logs/action/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -219,9 +219,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: () => {
+            header: () => <span className="px-2">{t("timestamp")}</span>,
-                return t("timestamp");
-            },
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -236,16 +234,16 @@ export default function GeneralPage() {
             accessorKey: "action",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("action")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -263,19 +261,19 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("actor")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
                             }))}
+                            label={t("actor")}
                             selectedValue={filters.actor}
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -295,9 +293,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: () => {
+            header: () => <span className="px-2">{t("actorId")}</span>,
-                return t("actorId");
-            },
             cell: ({ row }) => {
                 return (
                     <span className="flex items-center gap-1">

src/app/[orgId]/settings/logs/connection/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Button } from "@app/components/ui/button";
-import { ColumnFilter } from "@app/components/ColumnFilter";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { LogDataTable } from "@app/components/LogDataTable";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -256,9 +256,7 @@ export default function ConnectionLogsPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "startedAt",
-            header: () => {
+            header: () => <span className="px-2">{t("timestamp")}</span>,
-                return t("timestamp");
-            },
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -273,21 +271,21 @@ export default function ConnectionLogsPage() {
             accessorKey: "protocol",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("protocol")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.protocols.map(
                                 (protocol) => ({
                                     label: protocol.toUpperCase(),
                                     value: protocol
                                 })
                             )}
+                            label={t("protocol")}
                             selectedValue={filters.protocol}
                             onValueChange={(value) =>
                                 handleFilterChange("protocol", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -304,19 +302,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "resourceName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("resource")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
                             }))}
+                            label={t("resource")}
                             selectedValue={filters.siteResourceId}
                             onValueChange={(value) =>
                                 handleFilterChange("siteResourceId", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -345,19 +343,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "clientName",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("client")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.clients.map((c) => ({
                                 value: c.id.toString(),
                                 label: c.name
                             }))}
+                            label={t("client")}
                             selectedValue={filters.clientId}
                             onValueChange={(value) =>
                                 handleFilterChange("clientId", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -388,19 +386,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "userEmail",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("user")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.users.map((u) => ({
                                 value: u.id,
                                 label: u.email || u.id
                             }))}
+                            label={t("user")}
                             selectedValue={filters.userId}
                             onValueChange={(value) =>
                                 handleFilterChange("userId", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -419,9 +417,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "sourceAddr",
-            header: () => {
+            header: () => <span className="px-2">{t("sourceAddress")}</span>,
-                return t("sourceAddress");
-            },
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap font-mono text-xs">
@@ -434,19 +430,19 @@ export default function ConnectionLogsPage() {
             accessorKey: "destAddr",
             header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("destinationAddress")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.destAddrs.map((addr) => ({
                                 value: addr,
                                 label: addr
                             }))}
+                            label={t("destinationAddress")}
                             selectedValue={filters.destAddr}
                             onValueChange={(value) =>
                                 handleFilterChange("destAddr", value)
                             }
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -461,9 +457,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "duration",
-            header: () => {
+            header: () => <span className="px-2">{t("duration")}</span>,
-                return t("duration");
-            },
             cell: ({ row }) => {
                 return (
                     <span className="whitespace-nowrap">

src/app/[orgId]/settings/logs/request/page.tsx

@@ -20,6 +20,7 @@ import { useMemo, useState, useTransition } from "react";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { build } from "@server/build";
 import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -284,9 +285,9 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
+            header: ({ column }) => (
-                return t("timestamp");
+                <span className="px-2">{t("timestamp")}</span>
-            },
+            ),
             cell: ({ row }) => {
                 return (
                     <div className="whitespace-nowrap">
@@ -299,22 +300,21 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("action")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[
                                 { value: "true", label: "Allowed" },
                                 { value: "false", label: "Denied" }
                             ]}
+                            label={t("action")}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
+                            searchPlaceholder={t("searchPlaceholder")}
-                            searchPlaceholder="Search..."
+                            emptyMessage={t("emptySearchOptions")}
-                            emptyMessage="None found"
                         />
                     </div>
                 );
@@ -329,17 +329,14 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => {
+            header: ({ column }) => <span className="px-2">{t("ip")}</span>
-                return t("ip");
-            }
         },
         {
             accessorKey: "location",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("location")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
@@ -351,8 +348,9 @@ export default function GeneralPage() {
                                 handleFilterChange("location", value)
                             }
                             // placeholder=""
-                            searchPlaceholder="Search..."
+                            label={t("location")}
-                            emptyMessage="None found"
+                            searchPlaceholder={t("searchPlaceholder")}
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -377,9 +375,8 @@ export default function GeneralPage() {
             accessorKey: "resourceName",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("resource")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.resources.map((res) => ({
                                 value: res.id.toString(),
                                 label: res.name || "Unnamed Resource"
@@ -388,9 +385,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            // placeholder=""
+                            label={t("resource")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -417,9 +414,8 @@ export default function GeneralPage() {
             accessorKey: "host",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("host")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.hosts.map((host) => ({
                                 value: host,
                                 label: host
@@ -428,9 +424,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("host", value)
                             }
-                            // placeholder=""
+                            label={t("host")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -452,9 +448,8 @@ export default function GeneralPage() {
             accessorKey: "path",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("path")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.paths.map((path) => ({
                                 value: path,
                                 label: path
@@ -463,9 +458,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("path", value)
                             }
-                            // placeholder=""
+                            label={t("path")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -482,9 +477,8 @@ export default function GeneralPage() {
             accessorKey: "method",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("method")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[
                                 { value: "GET", label: "GET" },
                                 { value: "POST", label: "POST" },
@@ -498,9 +492,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("method", value)
                             }
-                            // placeholder=""
+                            label={t("method")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -510,9 +504,8 @@ export default function GeneralPage() {
             accessorKey: "reason",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("reason")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={[
                                 { value: "100", label: t("allowedByRule") },
                                 { value: "101", label: t("allowedNoAuth") },
@@ -537,9 +530,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("reason", value)
                             }
-                            // placeholder=""
+                            label={t("reason")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );
@@ -556,9 +549,8 @@ export default function GeneralPage() {
             accessorKey: "actor",
             header: ({ column }) => {
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 px-2">
-                        <span>{t("actor")}</span>
+                        <ColumnFilterButton
-                        <ColumnFilter
                             options={filterAttributes.actors.map((actor) => ({
                                 value: actor,
                                 label: actor
@@ -567,9 +559,9 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
+                            label={t("actor")}
-                            searchPlaceholder="Search..."
+                            searchPlaceholder={t("searchPlaceholder")}
-                            emptyMessage="None found"
+                            emptyMessage={t("emptySearchOptions")}
                         />
                     </div>
                 );

src/components/ColumnFilterButton.tsx

@@ -17,6 +17,7 @@ import { CheckIcon, ChevronDownIcon, Funnel } from "lucide-react";
 import { cn } from "@app/lib/cn";
 import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { Badge } from "./ui/badge";
+import { useTranslations } from "next-intl";
 
 interface FilterOption {
     value: string;
@@ -27,7 +28,6 @@ interface ColumnFilterButtonProps {
     options: FilterOption[];
     selectedValue?: string;
     onValueChange: (value: string | undefined) => void;
-    placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
     className?: string;
@@ -38,7 +38,6 @@ export function ColumnFilterButton({
     options,
     selectedValue,
     onValueChange,
-    placeholder,
     searchPlaceholder = "Search...",
     emptyMessage = "No options found",
     className,
@@ -50,6 +49,8 @@ export function ColumnFilterButton({
         (option) => option.value === selectedValue
     );
 
+    const t = useTranslations();
+
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
@@ -94,7 +95,7 @@ export function ColumnFilterButton({
                                     }}
                                     className="text-muted-foreground"
                                 >
-                                    Clear filter
+                                    {t("accessFilterClear")}
                                 </CommandItem>
                             )}
                             {options.map((option) => (
@@ -109,6 +110,7 @@ export function ColumnFilterButton({
                                         );
                                         setOpen(false);
                                     }}
+                                    className="break-all"
                                 >
                                     <CheckIcon
                                         className={cn(

src/components/ColumnMultiFilterButton.tsx

@@ -120,7 +120,7 @@ export function ColumnMultiFilterButton({
                                     }}
                                     className="text-muted-foreground"
                                 >
-                                    {t("accessUsersRoleFilterClear")}
+                                    {t("accessFilterClear")}
                                 </CommandItem>
                             )}
                             {options.map((option) => (
@@ -130,6 +130,7 @@ export function ColumnMultiFilterButton({
                                     onSelect={() => {
                                         toggle(option.value);
                                     }}
+                                    className="break-all"
                                 >
                                     <Checkbox
                                         className="pointer-events-none shrink-0"

src/components/LabelColumnFilterButton.tsx

@@ -168,7 +168,7 @@ export function LabelColumnFilterButton({
                                         }}
                                         className="text-muted-foreground"
                                     >
-                                        {t("accessLabelFilterClear")}
+                                        {t("accessFilterClear")}
                                     </CommandItem>
                                 )}
                                 {labels.map((label) => (

src/components/LogDataTable.tsx

@@ -32,7 +32,7 @@ import {
     RefreshCw
 } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useState, useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
     Tooltip,
     TooltipContent,

src/components/PrivateResourcesTable.tsx

@@ -2,9 +2,17 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
+import CreatePrivateResourceDialog from "@app/components/CreatePrivateResourceDialog";
+import EditPrivateResourceDialog from "@app/components/EditPrivateResourceDialog";
+import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
+import {
+    ResourceSitesStatusCell,
+    type ResourceSiteRow
+} from "@app/components/ResourceSitesStatusCell";
+import { Selectedsite, SitesSelector } from "@app/components/site-selector";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -18,53 +26,35 @@ import {
     PopoverTrigger
 } from "@app/components/ui/popover";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
+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 { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { build } from "@server/build";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { PaginationState } from "@tanstack/react-table";
 import {
     ArrowDown01Icon,
     ArrowUp10Icon,
     ArrowUpDown,
-    ArrowUpRight,
-    ChevronDown,
     ChevronsUpDownIcon,
     Funnel,
     MoreHorizontal
 } from "lucide-react";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Selectedsite, SitesSelector } from "@app/components/site-selector";
+import { startTransition, useMemo, useState, useTransition } from "react";
-import {
-    startTransition,
-    useEffect,
-    useMemo,
-    useState,
-    useTransition
-} from "react";
-import CreatePrivateResourceDialog from "@app/components/CreatePrivateResourceDialog";
-import EditPrivateResourceDialog from "@app/components/EditPrivateResourceDialog";
-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 { ColumnFilterButton } from "./ColumnFilterButton";
-import { cn } from "@app/lib/cn";
-import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
-import { formatSiteResourceDestinationDisplay } from "@app/lib/formatSiteResourceAccess";
-import {
-    ResourceSitesStatusCell,
-    type ResourceSiteRow
-} from "@app/components/ResourceSitesStatusCell";
-import { ResourceAccessCertIndicator } from "@app/components/ResourceAccessCertIndicator";
-import { build } from "@server/build";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { type SelectedLabel } from "./labels-selector";
-import { LabelsTableCell } from "./LabelsTableCell";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
-import { useLocalLabels } from "@app/hooks/useLocalLabels";
+import { LabelsTableCell } from "./LabelsTableCell";
-import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
+import { ControlledDataTable } from "./ui/controlled-data-table";
+import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -157,7 +147,6 @@ export default function PrivateResourcesTable({
     const [editingResource, setEditingResource] =
         useState<InternalResourceRow | null>();
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-    const [siteFilterOpen, setSiteFilterOpen] = useState(false);
 
     const [isRefreshing, startRefreshTransition] = useTransition();
 
@@ -171,27 +160,6 @@ export default function PrivateResourcesTable({
     //     return () => clearInterval(interval);
     // }, [router]);
 
-    const siteIdQ = searchParams.get("siteId");
-    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-    const selectedSite: Selectedsite | null = useMemo(() => {
-        if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
-            return null;
-        }
-        if (initialFilterSite && initialFilterSite.siteId === siteIdNum) {
-            return initialFilterSite;
-        }
-        return {
-            siteId: siteIdNum,
-            name: t("standaloneHcFilterSiteIdFallback", { id: siteIdNum }),
-            type: "newt"
-        };
-    }, [initialFilterSite, siteIdQ, siteIdNum, t]);
-
-    const createInitialSites = useMemo(
-        () => (selectedSite ? [selectedSite] : undefined),
-        [selectedSite]
-    );
-
     const refreshData = () => {
         startRefreshTransition(() => {
             try {
@@ -285,58 +253,27 @@ export default function PrivateResourcesTable({
                 accessorFn: (row) =>
                     row.sites.map((s) => s.siteName).join(", "),
                 friendlyName: t("sites"),
-                header: () => (
+                header: () => {
-                    <Popover
+                    const siteIdQ = searchParams.get("siteId");
-                        open={siteFilterOpen}
+                    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-                        onOpenChange={setSiteFilterOpen}
+
-                    >
+                    const selectedSiteId =
-                        <PopoverTrigger asChild>
+                        !siteIdQ ||
-                            <Button
+                        !Number.isInteger(siteIdNum) ||
-                                type="button"
+                        siteIdNum <= 0
-                                variant="ghost"
+                            ? null
-                                role="combobox"
+                            : siteIdNum;
-                                className={cn(
+
-                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                    return (
-                                    !selectedSite && "text-muted-foreground"
+                        <SitesColumnFilterButton
-                                )}
+                            selectedSiteId={selectedSiteId}
-                            >
+                            onValueChange={(value) =>
-                                <div className="flex items-center gap-2 min-w-0">
+                                handleFilterChange("siteId", value?.toString())
-                                    {t("sites")}
+                            }
-                                    <Funnel className="size-4 flex-none" />
+                            orgId={orgId}
-                                    {selectedSite && (
+                        />
-                                        <Badge
+                    );
-                                            className="truncate max-w-[10rem]"
+                },
-                                            variant="secondary"
-                                        >
-                                            {selectedSite.name}
-                                        </Badge>
-                                    )}
-                                </div>
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            className={dataTableFilterPopoverContentClassName}
-                            align="start"
-                        >
-                            <div className="border-b p-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-8 w-full justify-start font-normal"
-                                    onClick={clearSiteFilter}
-                                >
-                                    {t("standaloneHcFilterAnySite")}
-                                </Button>
-                            </div>
-                            <SitesSelector
-                                orgId={orgId}
-                                selectedSite={selectedSite}
-                                onSelectSite={onPickSite}
-                            />
-                        </PopoverContent>
-                    </Popover>
-                ),
                 cell: ({ row }) => {
                     const resourceRow = row.original;
                     return (
@@ -586,16 +523,6 @@ export default function PrivateResourcesTable({
         });
     }
 
-    const clearSiteFilter = () => {
-        handleFilterChange("siteId", undefined);
-        setSiteFilterOpen(false);
-    };
-
-    const onPickSite = (site: Selectedsite) => {
-        handleFilterChange("siteId", String(site.siteId));
-        setSiteFilterOpen(false);
-    };
-
     function toggleSort(column: string) {
         const newSearch = getNextSortOrder(column, searchParams);
 
@@ -691,7 +618,6 @@ export default function PrivateResourcesTable({
                 open={isCreateDialogOpen}
                 setOpen={setIsCreateDialogOpen}
                 orgId={orgId}
-                initialSites={createInitialSites}
                 onSuccess={() => {
                     // Delay refresh to allow modal to close smoothly
                     setTimeout(() => {

src/components/PublicResourcesTable.tsx

@@ -76,6 +76,7 @@ import { useLocalLabels } from "@app/hooks/useLocalLabels";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
 import { refresh } from "next/cache";
+import { SitesColumnFilterButton } from "./SitesColumnFilterButton";
 
 export type TargetHealth = {
     targetId: number;
@@ -154,30 +155,6 @@ export default function PublicResourcesTable({
 
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
-    const [siteFilterOpen, setSiteFilterOpen] = useState(false);
-
-    const siteIdQ = searchParams.get("siteId");
-    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-    const selectedSite: Selectedsite | null = useMemo(() => {
-        if (!siteIdQ || !Number.isInteger(siteIdNum) || siteIdNum <= 0) {
-            return null;
-        }
-        if (initialFilterSite && initialFilterSite.siteId === siteIdNum) {
-            return initialFilterSite;
-        }
-        return {
-            siteId: siteIdNum,
-            name: t("standaloneHcFilterSiteIdFallback", { id: siteIdNum }),
-            type: "newt"
-        };
-    }, [initialFilterSite, siteIdQ, siteIdNum, t]);
-
-    // useEffect(() => {
-    //     const interval = setInterval(() => {
-    //         router.refresh();
-    //     }, 30_000);
-    //     return () => clearInterval(interval);
-    // }, [router]);
 
     const refreshData = () => {
         startTransition(() => {
@@ -227,28 +204,6 @@ export default function PublicResourcesTable({
         }
     }
 
-    const clearSiteFilter = () => {
-        handleFilterChange("siteId", undefined);
-        setSiteFilterOpen(false);
-    };
-
-    const onPickSite = (site: Selectedsite) => {
-        handleFilterChange("siteId", String(site.siteId));
-        setSiteFilterOpen(false);
-    };
-
-    const siteFilterOpenRef = useRef(siteFilterOpen);
-    siteFilterOpenRef.current = siteFilterOpen;
-
-    const selectedSiteRef = useRef(selectedSite);
-    selectedSiteRef.current = selectedSite;
-
-    const clearSiteFilterRef = useRef(clearSiteFilter);
-    clearSiteFilterRef.current = clearSiteFilter;
-
-    const onPickSiteRef = useRef(onPickSite);
-    onPickSiteRef.current = onPickSite;
-
     const proxyColumns = useMemo<ExtendedColumnDef<ResourceRow>[]>(() => {
         const cols: ExtendedColumnDef<ResourceRow>[] = [
             {
@@ -291,61 +246,27 @@ export default function PublicResourcesTable({
                 accessorFn: (row) =>
                     row.sites.map((s) => s.siteName).join(", "),
                 friendlyName: t("sites"),
-                header: () => (
+                header: () => {
-                    <Popover
+                    const siteIdQ = searchParams.get("siteId");
-                        open={siteFilterOpenRef.current}
+                    const siteIdNum = siteIdQ ? parseInt(siteIdQ, 10) : NaN;
-                        onOpenChange={setSiteFilterOpen}
+
-                    >
+                    const selectedSiteId =
-                        <PopoverTrigger asChild>
+                        !siteIdQ ||
-                            <Button
+                        !Number.isInteger(siteIdNum) ||
-                                type="button"
+                        siteIdNum <= 0
-                                variant="ghost"
+                            ? null
-                                role="combobox"
+                            : siteIdNum;
-                                className={cn(
+
-                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                    return (
-                                    !selectedSiteRef.current &&
+                        <SitesColumnFilterButton
-                                        "text-muted-foreground"
+                            selectedSiteId={selectedSiteId}
-                                )}
+                            onValueChange={(value) =>
-                            >
+                                handleFilterChange("siteId", value?.toString())
-                                <div className="flex items-center gap-2 min-w-0">
+                            }
-                                    {t("sites")}
+                            orgId={orgId}
-                                    <Funnel className="size-4 flex-none" />
+                        />
-                                    {selectedSiteRef.current && (
+                    );
-                                        <Badge
+                },
-                                            className="truncate max-w-[10rem]"
-                                            variant="secondary"
-                                        >
-                                            {selectedSiteRef.current.name}
-                                        </Badge>
-                                    )}
-                                </div>
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            className={dataTableFilterPopoverContentClassName}
-                            align="start"
-                        >
-                            <div className="border-b p-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    className="h-8 w-full justify-start font-normal"
-                                    onClick={() => clearSiteFilterRef.current()}
-                                >
-                                    {t("standaloneHcFilterAnySite")}
-                                </Button>
-                            </div>
-                            <SitesSelector
-                                orgId={orgId}
-                                selectedSite={selectedSiteRef.current}
-                                onSelectSite={(site) =>
-                                    onPickSiteRef.current(site)
-                                }
-                            />
-                        </PopoverContent>
-                    </Popover>
-                ),
                 cell: ({ row }) => (
                     <ResourceSitesStatusCell
                         orgId={row.original.orgId}

src/components/SitesColumnFilterButton.tsx

@@ -0,0 +1,160 @@
+import { useMemo, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { cn } from "@app/lib/cn";
+import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { CheckIcon, Funnel } from "lucide-react";
+import { SiteOnlineStatus, type Selectedsite } from "./site-selector";
+import { Button } from "./ui/button";
+import { useTranslations } from "next-intl";
+import { Badge } from "./ui/badge";
+import { orgQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "./ui/command";
+
+export type SitesColumnFilterButtonProps = {
+    selectedSiteId: number | null;
+    onValueChange: (value: number | undefined) => void;
+    orgId: string;
+};
+
+export function SitesColumnFilterButton({
+    selectedSiteId,
+    onValueChange,
+    orgId
+}: SitesColumnFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+
+    const t = useTranslations();
+
+    const [siteSearchQuery, setSiteSearchQuery] = useState("");
+    const [debouncedQuery] = useDebounce(siteSearchQuery, 150);
+
+    const { data: sites = [] } = useQuery(
+        orgQueries.sites({
+            orgId,
+            query: debouncedQuery,
+            perPage: 500
+        })
+    );
+
+    const selectedSite = useMemo(() => {
+        let selected = undefined;
+        if (selectedSiteId) {
+            selected = sites.find((site) => site.siteId === selectedSiteId) ?? {
+                siteId: Number(selectedSiteId),
+                name: t("standaloneHcFilterSiteIdFallback", {
+                    id: Number(selectedSiteId)
+                }),
+                type: "newt"
+            };
+        }
+
+        return selected;
+    }, [selectedSiteId, sites]);
+
+    // always include the selected site in the list of sites shown
+    const sitesShown = useMemo(() => {
+        const allSites: Array<Selectedsite> = [...sites];
+        if (
+            debouncedQuery.trim().length === 0 &&
+            selectedSite &&
+            !allSites.find((site) => site.siteId === selectedSite?.siteId)
+        ) {
+            allSites.unshift(selectedSite);
+        }
+        return allSites;
+    }, [debouncedQuery, sites, selectedSite]);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    role="combobox"
+                    className={cn(
+                        "justify-between text-sm h-8 px-2 w-full p-3",
+                        selectedSite && "text-muted-foreground"
+                    )}
+                >
+                    <div className="flex items-center gap-2 min-w-0">
+                        {t("sites")}
+                        <Funnel className="size-4 flex-none" />
+                        {selectedSite && (
+                            <Badge
+                                className="truncate max-w-40"
+                                variant="secondary"
+                            >
+                                {selectedSite.name}
+                            </Badge>
+                        )}
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent
+                className={dataTableFilterPopoverContentClassName}
+                align="start"
+            >
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder={t("siteSearch")}
+                        value={siteSearchQuery}
+                        onValueChange={(v) => setSiteSearchQuery(v)}
+                    />
+                    <CommandList>
+                        <CommandEmpty>{t("siteNotFound")}</CommandEmpty>
+                        <CommandGroup>
+                            {selectedSite && (
+                                <CommandItem
+                                    onSelect={() => {
+                                        onValueChange(undefined);
+                                    }}
+                                    className="text-muted-foreground"
+                                >
+                                    {t("accessFilterClear")}
+                                </CommandItem>
+                            )}
+                            {sitesShown.map((site) => (
+                                <CommandItem
+                                    key={site.siteId}
+                                    value={`${site.siteId}:${site.name}`}
+                                    onSelect={() => {
+                                        onValueChange(site.siteId);
+                                    }}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            site.siteId === selectedSite?.siteId
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    <div className="min-w-0 flex-1 flex items-center gap-2">
+                                        <span className="min-w-0 flex-1 truncate">
+                                            {site.name}
+                                        </span>
+                                        {site.online != null && (
+                                            <SiteOnlineStatus
+                                                type={site.type}
+                                                online={site.online}
+                                            />
+                                        )}
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/multi-site-selector.tsx

@@ -115,7 +115,6 @@ export function MultiSitesSelector({
                                     <SiteOnlineStatus
                                         type={site.type}
                                         online={site.online}
-                                        t={t}
                                     />
                                 )}
                             </div>

src/components/site-selector.tsx

@@ -26,11 +26,12 @@ export type Selectedsite = Pick<
 type SiteOnlineStatusProps = {
     type: Selectedsite["type"];
     online: Selectedsite["online"];
-    t: (key: "online" | "offline") => string;
 };
 
 /** Dot-only indicator matching `SitesTable` colors (newt/wireguard only; nothing for local or missing status). */
-export function SiteOnlineStatus({ type, online, t }: SiteOnlineStatusProps) {
+export function SiteOnlineStatus({ type, online }: SiteOnlineStatusProps) {
+    const t = useTranslations();
+
     if (type !== "newt" && type !== "wireguard") {
         return null;
     }
@@ -128,7 +129,6 @@ export function SitesSelector({
                                     <SiteOnlineStatus
                                         type={site.type}
                                         online={site.online}
-                                        t={t}
                                     />
                                 )}
                             </div>