✨ Add labels column to private resources table

src/app/[orgId]/settings/resources/client/page.tsx

@@ -127,7 +127,8 @@ export default async function ClientResourcesPage(
                 authDaemonPort: siteResource.authDaemonPort ?? null,
                 subdomain: siteResource.subdomain ?? null,
                 domainId: siteResource.domainId ?? null,
-                fullDomain: siteResource.fullDomain ?? null
+                fullDomain: siteResource.fullDomain ?? null,
+                labels: siteResource.labels ?? []
             };
         }
     );

src/components/ClientResourcesTable.tsx

@@ -2,7 +2,6 @@
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { DataTable } from "@app/components/ui/data-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { Badge } from "@app/components/ui/badge";
 import { Button } from "@app/components/ui/button";
@@ -30,13 +29,21 @@ import {
     ChevronDown,
     ChevronsUpDownIcon,
     Funnel,
-    MoreHorizontal
+    MoreHorizontal,
+    PlusIcon
 } 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 { useEffect, useMemo, useState, useTransition } from "react";
+import {
+    startTransition,
+    useEffect,
+    useMemo,
+    useOptimistic,
+    useState,
+    useTransition
+} from "react";
 import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog";
 import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
 import type { PaginationState } from "@tanstack/react-table";
@@ -53,6 +60,10 @@ import {
 } 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 { LabelBadge } from "./label-badge";
+import { LabelsSelector, type SelectedLabel } from "./labels-selector";
 
 export type InternalResourceSiteRow = ResourceSiteRow;
 
@@ -84,6 +95,11 @@ export type InternalResourceRow = {
     subdomain?: string | null;
     domainId?: string | null;
     fullDomain?: string | null;
+    labels?: Array<{
+        labelId: number;
+        name: string;
+        color: string;
+    }>;
 };
 
 function formatDestinationDisplay(row: InternalResourceRow): string {
@@ -141,7 +157,10 @@ export default function ClientResourcesTable({
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
     const [siteFilterOpen, setSiteFilterOpen] = useState(false);
 
-    const [isRefreshing, startTransition] = useTransition();
+    const [isRefreshing, startRefreshTransition] = useTransition();
+
+    const { isPaidUser } = usePaidStatus();
+    const isLabelFeatureEnabled = isPaidUser(tierMatrix.labels);
 
     useEffect(() => {
         const interval = setInterval(() => {
@@ -167,7 +186,7 @@ export default function ClientResourcesTable({
     }, [initialFilterSite, siteIdQ, siteIdNum, t]);
 
     const refreshData = () => {
-        startTransition(() => {
+        startRefreshTransition(() => {
             try {
                 router.refresh();
             } catch (error) {
@@ -254,296 +273,333 @@ export default function ClientResourcesTable({
         );
     }
 
-    const internalColumns: ExtendedColumnDef<InternalResourceRow>[] = [
+    const internalColumns = useMemo<
-        {
+        ExtendedColumnDef<InternalResourceRow>[]
-            accessorKey: "name",
+    >(() => {
-            enableHiding: false,
+        const cols: ExtendedColumnDef<InternalResourceRow>[] = [
-            friendlyName: t("name"),
+            {
-            header: () => {
+                accessorKey: "name",
-                const nameOrder = getSortDirection("name", searchParams);
+                enableHiding: false,
-                const Icon =
+                friendlyName: t("name"),
-                    nameOrder === "asc"
+                header: () => {
-                        ? ArrowDown01Icon
+                    const nameOrder = getSortDirection("name", searchParams);
-                        : nameOrder === "desc"
+                    const Icon =
-                          ? ArrowUp10Icon
+                        nameOrder === "asc"
-                          : ChevronsUpDownIcon;
+                            ? ArrowDown01Icon
+                            : nameOrder === "desc"
+                              ? ArrowUp10Icon
+                              : ChevronsUpDownIcon;
 
-                return (
+                    return (
-                    <Button
-                        variant="ghost"
-                        className="p-3"
-                        onClick={() => toggleSort("name")}
-                    >
-                        {t("name")}
-                        <Icon className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            id: "niceId",
-            accessorKey: "niceId",
-            friendlyName: t("identifier"),
-            enableHiding: true,
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("identifier")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            },
-            cell: ({ row }) => {
-                return <span>{row.original.niceId || "-"}</span>;
-            }
-        },
-        {
-            id: "sites",
-            accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "),
-            friendlyName: t("sites"),
-            header: () => (
-                <Popover open={siteFilterOpen} onOpenChange={setSiteFilterOpen}>
-                    <PopoverTrigger asChild>
                         <Button
-                            type="button"
                             variant="ghost"
-                            role="combobox"
+                            className="p-3"
-                            className={cn(
+                            onClick={() => toggleSort("name")}
-                                "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("name")}
-                                {t("sites")}
+                            <Icon className="ml-2 h-4 w-4" />
-                                <Funnel className="size-4 flex-none" />
-                                {selectedSite && (
-                                    <Badge
-                                        className="truncate max-w-[10rem]"
-                                        variant="secondary"
-                                    >
-                                        {selectedSite.name}
-                                    </Badge>
-                                )}
-                            </div>
                         </Button>
-                    </PopoverTrigger>
+                    );
-                    <PopoverContent
+                }
-                        className={dataTableFilterPopoverContentClassName}
+            },
-                        align="start"
+            {
+                id: "niceId",
+                accessorKey: "niceId",
+                friendlyName: t("identifier"),
+                enableHiding: true,
+                header: ({ column }) => {
+                    return (
+                        <Button
+                            variant="ghost"
+                            onClick={() =>
+                                column.toggleSorting(
+                                    column.getIsSorted() === "asc"
+                                )
+                            }
+                        >
+                            {t("identifier")}
+                            <ArrowUpDown className="ml-2 h-4 w-4" />
+                        </Button>
+                    );
+                },
+                cell: ({ row }) => {
+                    return <span>{row.original.niceId || "-"}</span>;
+                }
+            },
+            {
+                id: "sites",
+                accessorFn: (row) =>
+                    row.sites.map((s) => s.siteName).join(", "),
+                friendlyName: t("sites"),
+                header: () => (
+                    <Popover
+                        open={siteFilterOpen}
+                        onOpenChange={setSiteFilterOpen}
                     >
-                        <div className="border-b p-1">
+                        <PopoverTrigger asChild>
                             <Button
                                 type="button"
                                 variant="ghost"
-                                size="sm"
+                                role="combobox"
-                                className="h-8 w-full justify-start font-normal"
+                                className={cn(
-                                onClick={clearSiteFilter}
+                                    "justify-between text-sm h-8 px-2 w-full p-3",
+                                    !selectedSite && "text-muted-foreground"
+                                )}
                             >
-                                {t("standaloneHcFilterAnySite")}
+                                <div className="flex items-center gap-2 min-w-0">
+                                    {t("sites")}
+                                    <Funnel className="size-4 flex-none" />
+                                    {selectedSite && (
+                                        <Badge
+                                            className="truncate max-w-[10rem]"
+                                            variant="secondary"
+                                        >
+                                            {selectedSite.name}
+                                        </Badge>
+                                    )}
+                                </div>
                             </Button>
-                        </div>
+                        </PopoverTrigger>
-                        <SitesSelector
+                        <PopoverContent
-                            orgId={orgId}
+                            className={dataTableFilterPopoverContentClassName}
-                            selectedSite={selectedSite}
+                            align="start"
-                            onSelectSite={onPickSite}
+                        >
+                            <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 (
+                        <ResourceSitesStatusCell
+                            orgId={resourceRow.orgId}
+                            resourceSites={resourceRow.sites}
                         />
-                    </PopoverContent>
+                    );
-                </Popover>
+                }
-            ),
+            },
-            cell: ({ row }) => {
+            {
-                const resourceRow = row.original;
+                accessorKey: "mode",
-                return (
+                friendlyName: t("editInternalResourceDialogMode"),
-                    <ResourceSitesStatusCell
+                header: () => (
-                        orgId={resourceRow.orgId}
+                    <ColumnFilterButton
-                        resourceSites={resourceRow.sites}
+                        options={[
-                    />
+                            {
-                );
+                                value: "host",
-            }
+                                label: t("editInternalResourceDialogModeHost")
-        },
+                            },
-        {
+                            {
-            accessorKey: "mode",
+                                value: "cidr",
-            friendlyName: t("editInternalResourceDialogMode"),
+                                label: t("editInternalResourceDialogModeCidr")
-            header: () => (
+                            },
-                <ColumnFilterButton
+                            {
-                    options={[
+                                value: "http",
-                        {
+                                label: t("editInternalResourceDialogModeHttp")
-                            value: "host",
+                            }
-                            label: t("editInternalResourceDialogModeHost")
+                        ]}
-                        },
+                        selectedValue={searchParams.get("mode") ?? undefined}
-                        {
+                        onValueChange={(value) =>
-                            value: "cidr",
+                            handleFilterChange("mode", value)
-                            label: t("editInternalResourceDialogModeCidr")
-                        },
-                        {
-                            value: "http",
-                            label: t("editInternalResourceDialogModeHttp")
                         }
-                    ]}
+                        searchPlaceholder={t("searchPlaceholder")}
-                    selectedValue={searchParams.get("mode") ?? undefined}
+                        emptyMessage={t("emptySearchOptions")}
-                    onValueChange={(value) => handleFilterChange("mode", value)}
+                        label={t("editInternalResourceDialogMode")}
-                    searchPlaceholder={t("searchPlaceholder")}
+                        className="p-3"
-                    emptyMessage={t("emptySearchOptions")}
-                    label={t("editInternalResourceDialogMode")}
-                    className="p-3"
-                />
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                const modeLabels: Record<
-                    "host" | "cidr" | "port" | "http",
-                    string
-                > = {
-                    host: t("editInternalResourceDialogModeHost"),
-                    cidr: t("editInternalResourceDialogModeCidr"),
-                    port: t("editInternalResourceDialogModePort"),
-                    http: t("editInternalResourceDialogModeHttp")
-                };
-                return <span>{modeLabels[resourceRow.mode]}</span>;
-            }
-        },
-        {
-            accessorKey: "destination",
-            friendlyName: t("resourcesTableDestination"),
-            header: () => (
-                <span className="p-3">{t("resourcesTableDestination")}</span>
-            ),
-            cell: ({ row }) => {
-                const resourceRow = row.original;
-                const display = formatDestinationDisplay(resourceRow);
-                return (
-                    <CopyToClipboard
-                        text={display}
-                        isLink={false}
-                        displayText={display}
                     />
-                );
+                ),
-            }
+                cell: ({ row }) => {
-        },
+                    const resourceRow = row.original;
-        {
+                    const modeLabels: Record<
-            accessorKey: "alias",
+                        "host" | "cidr" | "port" | "http",
-            friendlyName: t("resourcesTableAlias"),
+                        string
-            header: () => (
+                    > = {
-                <span className="p-3">{t("resourcesTableAlias")}</span>
+                        host: t("editInternalResourceDialogModeHost"),
-            ),
+                        cidr: t("editInternalResourceDialogModeCidr"),
-            cell: ({ row }) => {
+                        port: t("editInternalResourceDialogModePort"),
-                const resourceRow = row.original;
+                        http: t("editInternalResourceDialogModeHttp")
-                if (resourceRow.mode === "host" && resourceRow.alias) {
+                    };
+                    return <span>{modeLabels[resourceRow.mode]}</span>;
+                }
+            },
+            {
+                accessorKey: "destination",
+                friendlyName: t("resourcesTableDestination"),
+                header: () => (
+                    <span className="p-3">
+                        {t("resourcesTableDestination")}
+                    </span>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    const display = formatDestinationDisplay(resourceRow);
                     return (
                         <CopyToClipboard
-                            text={resourceRow.alias}
+                            text={display}
                             isLink={false}
-                            displayText={resourceRow.alias}
+                            displayText={display}
                         />
                     );
                 }
-                if (resourceRow.mode === "http") {
+            },
-                    const domainId = resourceRow.domainId;
+            {
-                    const fullDomain = resourceRow.fullDomain;
+                accessorKey: "alias",
-                    const url = `${resourceRow.ssl ? "https" : "http"}://${fullDomain}`;
+                friendlyName: t("resourcesTableAlias"),
-                    const did =
+                header: () => (
-                        build !== "oss" &&
+                    <span className="p-3">{t("resourcesTableAlias")}</span>
-                        resourceRow.ssl &&
+                ),
-                        domainId != null &&
+                cell: ({ row }) => {
-                        domainId !== "" &&
+                    const resourceRow = row.original;
-                        fullDomain != null &&
+                    if (resourceRow.mode === "host" && resourceRow.alias) {
-                        fullDomain !== "";
+                        return (
+                            <CopyToClipboard
+                                text={resourceRow.alias}
+                                isLink={false}
+                                displayText={resourceRow.alias}
+                            />
+                        );
+                    }
+                    if (resourceRow.mode === "http") {
+                        const domainId = resourceRow.domainId;
+                        const fullDomain = resourceRow.fullDomain;
+                        const url = `${resourceRow.ssl ? "https" : "http"}://${fullDomain}`;
+                        const did =
+                            build !== "oss" &&
+                            resourceRow.ssl &&
+                            domainId != null &&
+                            domainId !== "" &&
+                            fullDomain != null &&
+                            fullDomain !== "";
 
-                    return (
+                        return (
-                        <div className="flex items-center gap-2 min-w-0">
+                            <div className="flex items-center gap-2 min-w-0">
-                            {did ? (
+                                {did ? (
-                                <ResourceAccessCertIndicator
+                                    <ResourceAccessCertIndicator
-                                    orgId={resourceRow.orgId}
+                                        orgId={resourceRow.orgId}
-                                    domainId={domainId}
+                                        domainId={domainId}
-                                    fullDomain={fullDomain}
+                                        fullDomain={fullDomain}
-                                />
+                                    />
-                            ) : null}
+                                ) : null}
-                            <div className="">
+                                <div className="">
-                                <CopyToClipboard
+                                    <CopyToClipboard
-                                    text={url}
+                                        text={url}
-                                    isLink={isSafeUrlForLink(url)}
+                                        isLink={isSafeUrlForLink(url)}
-                                    displayText={url}
+                                        displayText={url}
-                                />
+                                    />
+                                </div>
                             </div>
+                        );
+                    }
+                    return <span>-</span>;
+                }
+            },
+            {
+                accessorKey: "aliasAddress",
+                friendlyName: t("resourcesTableAliasAddress"),
+                enableHiding: true,
+                header: () => (
+                    <div className="flex items-center gap-2 p-3">
+                        <span>{t("resourcesTableAliasAddress")}</span>
+                        <InfoPopup info={t("resourcesTableAliasAddressInfo")} />
+                    </div>
+                ),
+                cell: ({ row }) => {
+                    const resourceRow = row.original;
+                    return resourceRow.aliasAddress ? (
+                        <CopyToClipboard
+                            text={resourceRow.aliasAddress}
+                            isLink={false}
+                            displayText={resourceRow.aliasAddress}
+                        />
+                    ) : (
+                        <span>-</span>
+                    );
+                }
+            },
+            {
+                id: "actions",
+                enableHiding: false,
+                header: () => <span className="p-3"></span>,
+                cell: ({ row }) => {
+                    const resourceRow = 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">
+                                            {t("openMenu")}
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelectedInternalResource(
+                                                resourceRow
+                                            );
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        <span className="text-red-500">
+                                            {t("delete")}
+                                        </span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Button
+                                variant={"outline"}
+                                onClick={() => {
+                                    setEditingResource(resourceRow);
+                                    setIsEditDialogOpen(true);
+                                }}
+                            >
+                                {t("edit")}
+                            </Button>
                         </div>
                     );
                 }
-                return <span>-</span>;
             }
-        },
+        ];
-        {
+
-            accessorKey: "aliasAddress",
+        if (isLabelFeatureEnabled) {
-            friendlyName: t("resourcesTableAliasAddress"),
+            cols.splice(cols.length - 1, 0, {
-            enableHiding: true,
+                id: "labels",
-            header: () => (
+                accessorKey: "labels",
-                <div className="flex items-center gap-2 p-3">
+                header: () => (
-                    <span>{t("resourcesTableAliasAddress")}</span>
+                    <span className="p-3 text-end w-full inline-block">
-                    <InfoPopup info={t("resourcesTableAliasAddressInfo")} />
+                        {t("labels")}
-                </div>
+                    </span>
-            ),
+                ),
-            cell: ({ row }) => {
+                cell: ({ row }: { row: { original: InternalResourceRow } }) => (
-                const resourceRow = row.original;
+                    <ClientResourceLabelCell
-                return resourceRow.aliasAddress ? (
+                        resource={row.original}
-                    <CopyToClipboard
+                        orgId={orgId}
-                        text={resourceRow.aliasAddress}
-                        isLink={false}
-                        displayText={resourceRow.aliasAddress}
                     />
-                ) : (
+                )
-                    <span>-</span>
+            });
-                );
-            }
-        },
-        {
-            id: "actions",
-            enableHiding: false,
-            header: () => <span className="p-3"></span>,
-            cell: ({ row }) => {
-                const resourceRow = 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">
-                                        {t("openMenu")}
-                                    </span>
-                                    <MoreHorizontal className="h-4 w-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuItem
-                                    onClick={() => {
-                                        setSelectedInternalResource(
-                                            resourceRow
-                                        );
-                                        setIsDeleteModalOpen(true);
-                                    }}
-                                >
-                                    <span className="text-red-500">
-                                        {t("delete")}
-                                    </span>
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                        <Button
-                            variant={"outline"}
-                            onClick={() => {
-                                setEditingResource(resourceRow);
-                                setIsEditDialogOpen(true);
-                            }}
-                        >
-                            {t("edit")}
-                        </Button>
-                    </div>
-                );
-            }
         }
-    ];
+
+        return cols;
+    }, [isLabelFeatureEnabled, orgId, t, searchParams]);
 
     function handleFilterChange(
         column: string,
@@ -638,7 +694,8 @@ export default function ClientResourcesTable({
                 enableColumnVisibility
                 columnVisibility={{
                     niceId: false,
-                    aliasAddress: false
+                    aliasAddress: false,
+                    labels: false
                 }}
                 stickyLeftColumn="name"
                 stickyRightColumn="actions"
@@ -674,3 +731,101 @@ export default function ClientResourcesTable({
         </>
     );
 }
+
+type ClientResourceLabelCellProps = {
+    resource: InternalResourceRow;
+    orgId: string;
+};
+
+function ClientResourceLabelCell({
+    resource,
+    orgId
+}: 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);
+
+    function toggleResourceLabel(
+        label: SelectedLabel,
+        action: "attach" | "detach"
+    ) {
+        startTransition(async () => {
+            try {
+                if (action === "attach") {
+                    setOptimisticLabels([...optimisticLabels, label]);
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/attach`,
+                        { siteResourceId: resource.id }
+                    );
+                } else {
+                    setOptimisticLabels(
+                        optimisticLabels.filter(
+                            (lb) => lb.labelId !== label.labelId
+                        )
+                    );
+                    await api.put(
+                        `/org/${orgId}/label/${label.labelId}/detach`,
+                        { siteResourceId: resource.id }
+                    );
+                }
+            } catch (e) {
+                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>
+    );
+}