fix toast dismiss causing components to rerender and clean up rules text

src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx

@@ -10,7 +10,7 @@ import {
     FormMessage,
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AxiosResponse } from "axios";
 import { useState } from "react";
@@ -48,7 +48,6 @@ export default function CreateRoleForm({
     setOpen,
     afterCreate,
 }: CreateRoleFormProps) {
-    const { toast } = useToast();
     const { org } = useOrgContext();
 
     const [loading, setLoading] = useState(false);

src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx

@@ -9,7 +9,7 @@ import {
     FormLabel,
     FormMessage,
 } from "@app/components/ui/form";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AxiosResponse } from "axios";
 import { useEffect, useState } from "react";
@@ -56,7 +56,6 @@ export default function DeleteRoleForm({
     setOpen,
     afterDelete,
 }: CreateRoleFormProps) {
-    const { toast } = useToast();
     const { org } = useOrgContext();
 
     const [loading, setLoading] = useState(false);

src/app/[orgId]/settings/access/roles/RolesTable.tsx

@@ -12,7 +12,7 @@ import { ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useOrgContext } from "@app/hooks/useOrgContext";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { RolesDataTable } from "./RolesDataTable";
 import { Role } from "@server/db/schema";
 import CreateRoleForm from "./CreateRoleForm";
@@ -37,7 +37,6 @@ export default function UsersTable({ roles: r }: RolesTableProps) {
     const api = createApiClient(useEnvContext());
 
     const { org } = useOrgContext();
-    const { toast } = useToast();
 
     const columns: ColumnDef<RoleRow>[] = [
         {

src/app/[orgId]/settings/access/users/InviteUserForm.tsx

@@ -17,7 +17,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InviteUserBody, InviteUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
@@ -54,7 +54,6 @@ const formSchema = z.object({
 });
 
 export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) {
-    const { toast } = useToast();
     const { org } = useOrgContext();
 
     const { env } = useEnvContext();

src/app/[orgId]/settings/access/users/UsersTable.tsx

@@ -14,7 +14,7 @@ import { useState } from "react";
 import InviteUserForm from "./InviteUserForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useOrgContext } from "@app/hooks/useOrgContext";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";
@@ -47,7 +47,6 @@ export default function UsersTable({ users: u }: UsersTableProps) {
 
     const { user, updateUser } = useUserContext();
     const { org } = useOrgContext();
-    const { toast } = useToast();
 
     const columns: ColumnDef<UserRow>[] = [
         {

src/app/[orgId]/settings/access/users/[userId]/access-controls/page.tsx

@@ -16,7 +16,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InviteUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
@@ -47,7 +47,6 @@ const formSchema = z.object({
 });
 
 export default function AccessControlsPage() {
-    const { toast } = useToast();
     const { orgUser: user } = userOrgUserContext();
 
     const api = createApiClient(useEnvContext());

src/app/[orgId]/settings/general/page.tsx

@@ -4,7 +4,7 @@ import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { Button } from "@app/components/ui/button";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useState } from "react";
 import {
     Form,
@@ -56,7 +56,6 @@ export default function GeneralPage() {
     const { orgUser } = userOrgUserContext();
     const router = useRouter();
     const { org } = useOrgContext();
-    const { toast } = useToast();
     const api = createApiClient(useEnvContext());
 
     const [loadingDelete, setLoadingDelete] = useState(false);

src/app/[orgId]/settings/resources/CreateResourceForm.tsx

@@ -11,7 +11,7 @@ import {
     FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -117,8 +117,6 @@ export default function CreateResourceForm({
     open,
     setOpen
 }: CreateResourceFormProps) {
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const [loading, setLoading] = useState(false);

src/app/[orgId]/settings/resources/ResourcesTable.tsx

@@ -26,7 +26,7 @@ import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { set } from "zod";
 import { formatAxiosError } from "@app/lib/api";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import CopyToClipboard from "@app/components/CopyToClipboard";
@@ -52,8 +52,6 @@ type ResourcesTableProps = {
 export default function SitesTable({ resources, orgId }: ResourcesTableProps) {
     const router = useRouter();
 
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx

@@ -11,7 +11,7 @@ import {
     FormMessage,
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -55,8 +55,6 @@ export default function SetResourcePasswordForm({
     resourceId,
     onSetPassword,
 }: SetPasswordFormProps) {
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const [loading, setLoading] = useState(false);

src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx

@@ -11,7 +11,7 @@ import {
     FormMessage,
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -60,8 +60,6 @@ export default function SetResourcePincodeForm({
     resourceId,
     onSetPincode,
 }: SetPincodeFormProps) {
-    const { toast } = useToast();
-
     const [loading, setLoading] = useState(false);
 
     const api = createApiClient(useEnvContext());

src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { ListRolesResponse } from "@server/routers/role";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { AxiosResponse } from "axios";
@@ -75,7 +75,6 @@ const whitelistSchema = z.object({
 });
 
 export default function ResourceAuthenticationPage() {
-    const { toast } = useToast();
     const { org } = useOrgContext();
     const { resource, updateResource, authInfo, updateAuthInfo } =
         useResourceContext();

src/app/[orgId]/settings/resources/[resourceId]/connectivity/page.tsx

@@ -45,7 +45,7 @@ import {
     TableHeader,
     TableRow
 } from "@app/components/ui/table";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { ArrayElement } from "@server/types/ArrayElement";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
@@ -113,7 +113,6 @@ export default function ReverseProxyTargets(props: {
 }) {
     const params = use(props.params);
 
-    const { toast } = useToast();
     const { resource, updateResource } = useResourceContext();
 
     const api = createApiClient(useEnvContext());

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -34,7 +34,7 @@ import { AxiosResponse } from "axios";
 import { useParams, useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { GetResourceAuthInfoResponse } from "@server/routers/resource";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import {
     SettingsContainer,
     SettingsSection,
@@ -102,7 +102,6 @@ type TransferFormValues = z.infer<typeof TransferFormSchema>;
 
 export default function GeneralForm() {
     const params = useParams();
-    const { toast } = useToast();
     const { resource, updateResource } = useResourceContext();
     const { org } = useOrgContext();
     const router = useRouter();

src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx

@@ -16,7 +16,6 @@ import { z } from "zod";
 import {
     Form,
     FormControl,
-    FormDescription,
     FormField,
     FormItem,
     FormLabel,
@@ -40,7 +39,7 @@ import {
     TableHeader,
     TableRow
 } from "@app/components/ui/table";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useResourceContext } from "@app/hooks/useResourceContext";
 import { ArrayElement } from "@server/types/ArrayElement";
 import { formatAxiosError } from "@app/lib/api/formatAxiosError";
@@ -58,7 +57,7 @@ import {
 import { ListResourceRulesResponse } from "@server/routers/resource/listResourceRules";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
-import { Check, Info, InfoIcon, X } from "lucide-react";
+import { Check, InfoIcon, X } from "lucide-react";
 import {
     InfoSection,
     InfoSections,
@@ -84,11 +83,16 @@ enum RuleAction {
     DROP = "Always Deny"
 }
 
+enum RuleMatch {
+    IP = "IP",
+    CIDR = "IP Range",
+    PATH = "Path"
+}
+
 export default function ResourceRules(props: {
     params: Promise<{ resourceId: number }>;
 }) {
     const params = use(props.params);
-    const { toast } = useToast();
     const { resource, updateResource } = useResourceContext();
     const api = createApiClient(useEnvContext());
     const [rules, setRules] = useState<LocalRule[]>([]);
@@ -233,6 +237,17 @@ export default function ResourceRules(props: {
         }
     }
 
+    function getValueHelpText(type: string) {
+        switch (type) {
+            case "CIDR":
+                return "Enter an address in CIDR format (e.g., 103.21.244.0/22)";
+            case "IP":
+                return "Enter an IP address (e.g., 103.21.244.12)";
+            case "PATH":
+                return "Enter a URL path or pattern (e.g., /api/v1/todos or /api/v1/*)";
+        }
+    }
+
     async function saveRules() {
         try {
             setLoading(true);
@@ -275,7 +290,10 @@ export default function ResourceRules(props: {
                 }
 
                 if (rule.new) {
-                    const res = await api.put(`/resource/${params.resourceId}/rule`, data);
+                    const res = await api.put(
+                        `/resource/${params.resourceId}/rule`,
+                        data
+                    );
                     rule.ruleId = res.data.data.ruleId;
                 } else if (rule.updated) {
                     await api.post(
@@ -300,9 +318,7 @@ export default function ResourceRules(props: {
                 await api.delete(
                     `/resource/${params.resourceId}/rule/${ruleId}`
                 );
-                setRules(
-                    rules.filter((r) => r.ruleId !== ruleId)
-                );
+                setRules(rules.filter((r) => r.ruleId !== ruleId));
             }
 
             toast({
@@ -337,7 +353,9 @@ export default function ResourceRules(props: {
                     }
                 >
                     <SelectTrigger className="min-w-[100px]">
-                        {row.original.action}
+                        {row.original.action === "ACCEPT"
+                            ? RuleAction.ACCEPT
+                            : RuleAction.DROP}
                     </SelectTrigger>
                     <SelectContent>
                         <SelectItem value="ACCEPT">
@@ -359,12 +377,16 @@ export default function ResourceRules(props: {
                     }
                 >
                     <SelectTrigger className="min-w-[100px]">
-                        {row.original.match}
+                        {row.original.match === "IP"
+                            ? RuleMatch.IP
+                            : row.original.match === "CIDR"
+                              ? RuleMatch.CIDR
+                              : RuleMatch.PATH}
                     </SelectTrigger>
                     <SelectContent>
-                        <SelectItem value="IP">IP</SelectItem>
-                        <SelectItem value="CIDR">IP Range</SelectItem>
-                        <SelectItem value="PATH">PATH</SelectItem>
+                        <SelectItem value="IP">{RuleMatch.IP}</SelectItem>
+                        <SelectItem value="CIDR">{RuleMatch.CIDR}</SelectItem>
+                        <SelectItem value="PATH">{RuleMatch.PATH}</SelectItem>
                     </SelectContent>
                 </Select>
             )
@@ -547,14 +569,14 @@ export default function ResourceRules(props: {
                                                     </SelectTrigger>
                                                     <SelectContent>
                                                         <SelectItem value="IP">
-                                                           IP 
+                                                            {RuleMatch.IP}
                                                         </SelectItem>
                                                         <SelectItem value="CIDR">
-                                                           IP Range 
+                                                            {RuleMatch.CIDR}
                                                         </SelectItem>
                                                         {resource.http && (
                                                             <SelectItem value="PATH">
-                                                                PATH
+                                                                {RuleMatch.PATH}
                                                             </SelectItem>
                                                         )}
                                                     </SelectContent>
@@ -572,11 +594,11 @@ export default function ResourceRules(props: {
                                             <InfoPopup
                                                 text="Value"
                                                 info={
-                                                    addRuleForm.watch(
-                                                        "match"
-                                                    ) === "CIDR"
-                                                        ? "Enter an address in CIDR format (e.g., 103.21.244.0/22)"
-                                                        : "Enter a URL path or pattern (e.g., /api/v1/todos or /api/v1/*)"
+                                                    getValueHelpText(
+                                                        addRuleForm.watch(
+                                                            "match"
+                                                        )
+                                                    ) || ""
                                                 }
                                             />
                                             <FormControl>
@@ -590,7 +612,7 @@ export default function ResourceRules(props: {
                             <Button
                                 type="submit"
                                 variant="outline"
-                                disabled={loading || !rulesEnabled}
+                                disabled={!rulesEnabled}
                             >
                                 Add Rule
                             </Button>

src/app/[orgId]/settings/share-links/CreateShareLinkForm.tsx

@@ -18,7 +18,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InviteUserBody, InviteUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
@@ -94,7 +94,6 @@ export default function CreateShareLinkForm({
     setOpen,
     onCreated
 }: FormProps) {
-    const { toast } = useToast();
     const { org } = useOrgContext();
 
     const { env } = useEnvContext();

src/app/[orgId]/settings/share-links/ShareLinksTable.tsx

@@ -25,7 +25,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { formatAxiosError } from "@app/lib/api";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { ArrayElement } from "@server/types/ArrayElement";
@@ -54,8 +54,6 @@ export default function ShareLinksTable({
 }: ShareLinksTableProps) {
     const router = useRouter();
 
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -10,7 +10,7 @@ import {
     FormMessage
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -72,8 +72,6 @@ export default function CreateSiteForm({
     setChecked,
     orgId
 }: CreateSiteFormProps) {
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
     const { env } = useEnvContext();
 

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -22,7 +22,7 @@ import { AxiosResponse } from "axios";
 import { useState } from "react";
 import CreateSiteForm from "./CreateSiteForm";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
@@ -47,8 +47,6 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
-    const { toast } = useToast();
-
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedSite, setSelectedSite] = useState<SiteRow | null>(null);

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -15,7 +15,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { useSiteContext } from "@app/hooks/useSiteContext";
 import { useForm } from "react-hook-form";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import {
     SettingsContainer,
@@ -40,7 +40,6 @@ type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
 export default function GeneralPage() {
     const { site, updateSite } = useSiteContext();
-    const { toast } = useToast();
 
     const api = createApiClient(useEnvContext());
 

src/app/auth/reset-password/ResetPasswordForm.tsx

@@ -36,7 +36,7 @@ import {
 } from "@server/routers/auth";
 import { Loader2 } from "lucide-react";
 import { Alert, AlertDescription } from "../../../components/ui/alert";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";;
 import { createApiClient } from "@app/lib/api";
@@ -96,8 +96,6 @@ export default function ResetPasswordForm({
 
     const [state, setState] = useState<"request" | "reset" | "mfa">(getState());
 
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const form = useForm<z.infer<typeof formSchema>>({

src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx

@@ -48,7 +48,7 @@ import {
 import ResourceAccessDenied from "./ResourceAccessDenied";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import Link from "next/link";
 
 const pinSchema = z.object({
@@ -91,7 +91,6 @@ type ResourceAuthPortalProps = {
 
 export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
     const router = useRouter();
-    const { toast } = useToast();
 
     const getNumMethods = () => {
         let colLength = 0;

src/app/auth/verify-email/VerifyEmailForm.tsx

@@ -31,7 +31,7 @@ import { AxiosResponse } from "axios";
 import { VerifyEmailResponse } from "@server/routers/auth";
 import { Loader2 } from "lucide-react";
 import { Alert, AlertDescription } from "../../../components/ui/alert";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";;
 import { createApiClient } from "@app/lib/api";
@@ -61,8 +61,6 @@ export default function VerifyEmailForm({
     const [isResending, setIsResending] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const { toast } = useToast();
-
     const api = createApiClient(useEnvContext());
 
     const form = useForm<z.infer<typeof FormSchema>>({

src/components/Disable2FaForm.tsx

@@ -28,7 +28,7 @@ import {
     CredenzaHeader,
     CredenzaTitle
 } from "@app/components/Credenza";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";;
 import { useUserContext } from "@app/hooks/useUserContext";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";
@@ -50,8 +50,6 @@ export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
 
     const [step, setStep] = useState<"password" | "success">("password");
 
-    const { toast } = useToast();
-
     const { user, updateUser } = useUserContext();
 
     const api = createApiClient(useEnvContext());

src/components/Enable2FaForm.tsx

@@ -35,7 +35,7 @@ import {
     CredenzaHeader,
     CredenzaTitle
 } from "@app/components/Credenza";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";;
 import CopyTextBox from "@app/components/CopyTextBox";
 import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
@@ -64,8 +64,6 @@ export default function Enable2FaForm({ open, setOpen }: Enable2FaProps) {
     const [loading, setLoading] = useState(false);
     const [backupCodes, setBackupCodes] = useState<string[]>([]);
 
-    const { toast } = useToast();
-
     const { user, updateUser } = useUserContext();
 
     const api = createApiClient(useEnvContext());

src/components/ProfileIcon.tsx

@@ -12,7 +12,7 @@ import {
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useToast } from "@app/hooks/useToast";
+import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";;
 import { Laptop, LogOut, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -23,7 +23,6 @@ import Disable2FaForm from "./Disable2FaForm";
 import Enable2FaForm from "./Enable2FaForm";
 
 export default function ProfileIcon() {
-    const { toast } = useToast();
     const { setTheme, theme } = useTheme();
     const { env } = useEnvContext();
     const api = createApiClient({ env });