From 510de963937f8460f2abf7c7f9dd20541b05331d Mon Sep 17 00:00:00 2001
From: zhom <2717306+zhom@users.noreply.github.com>
Date: Fri, 8 Aug 2025 15:08:56 +0400
Subject: [PATCH] style: consistent flow for no proxies and no groups

---
 src/components/camoufox-config-dialog.tsx  |   2 +-
 src/components/create-profile-dialog.tsx   | 339 +++++++++++----------
 src/components/group-assignment-dialog.tsx |  24 +-
 src/components/home-header.tsx             |   3 +-
 src/components/ui/combobox.tsx             |   5 +-
 5 files changed, 214 insertions(+), 159 deletions(-)

diff --git a/src/components/camoufox-config-dialog.tsx b/src/components/camoufox-config-dialog.tsx
index 436f1ea..4b9dd20 100644
--- a/src/components/camoufox-config-dialog.tsx
+++ b/src/components/camoufox-config-dialog.tsx
@@ -107,7 +107,7 @@ export function CamoufoxConfigDialog({
           </DialogTitle>
         </DialogHeader>
 
-        <ScrollArea className="flex-1 pr-6 h-[400px]">
+        <ScrollArea className="flex-1 h-[400px]">
           <div className="py-4">
             <SharedCamoufoxConfigForm
               config={config}
diff --git a/src/components/create-profile-dialog.tsx b/src/components/create-profile-dialog.tsx
index b53acd9..8167e2d 100644
--- a/src/components/create-profile-dialog.tsx
+++ b/src/components/create-profile-dialog.tsx
@@ -2,7 +2,9 @@
 
 import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { GoPlus } from "react-icons/go";
 import { LoadingButton } from "@/components/loading-button";
+import { ProxyFormDialog } from "@/components/proxy-form-dialog";
 import { SharedCamoufoxConfigForm } from "@/components/shared-camoufox-config-form";
 import { Combobox } from "@/components/ui/combobox";
 import {
@@ -132,6 +134,7 @@ export function CreateProfileDialog({
     useState<BrowserReleaseTypes>({});
   const [supportedBrowsers, setSupportedBrowsers] = useState<string[]>([]);
   const [storedProxies, setStoredProxies] = useState<StoredProxy[]>([]);
+  const [showProxyForm, setShowProxyForm] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const loadingBrowserRef = useRef<string | null>(null);
 
@@ -334,7 +337,7 @@ export function CreateProfileDialog({
     setCamoufoxConfig({
       geoip: true, // Reset to automatic geoip
     });
-    setActiveTab("regular");
+    setActiveTab("anti-detect");
     onClose();
   };
 
@@ -375,7 +378,7 @@ export function CreateProfileDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
+      <DialogContent className="w-full max-h-[90vh] flex flex-col">
         <DialogHeader className="flex-shrink-0">
           <DialogTitle>Create New Profile</DialogTitle>
         </DialogHeader>
@@ -385,197 +388,219 @@ export function CreateProfileDialog({
           onValueChange={handleTabChange}
           className="flex flex-col flex-1 w-full min-h-0"
         >
-          <TabsList className="grid flex-shrink-0 grid-cols-2 w-full">
-            <TabsTrigger value="regular">Regular Browsers</TabsTrigger>
+          <TabsList
+            className="grid flex-shrink-0 grid-cols-2 w-full"
+            defaultValue="anti-detect"
+          >
             <TabsTrigger value="anti-detect">Anti-Detect</TabsTrigger>
+            <TabsTrigger value="regular">Regular</TabsTrigger>
           </TabsList>
 
-          <ScrollArea className="flex-1 pr-6 h-[320px]">
-            <div className="py-4 space-y-6">
-              {/* Profile Name - Common to both tabs */}
-              <div className="space-y-2">
-                <Label htmlFor="profile-name">Profile Name</Label>
-                <Input
-                  id="profile-name"
-                  value={profileName}
-                  onChange={(e) => setProfileName(e.target.value)}
-                  placeholder="Enter profile name"
-                />
-              </div>
+          <ScrollArea className="flex-1 h-[330px] overflow-y-hidden">
+            <div className="flex flex-col justify-center items-center w-full">
+              <div className="py-4 space-y-6 w-full max-w-md">
+                {/* Profile Name - Common to both tabs */}
+                <div className="space-y-2">
+                  <Label htmlFor="profile-name">Profile Name</Label>
+                  <Input
+                    id="profile-name"
+                    value={profileName}
+                    onChange={(e) => setProfileName(e.target.value)}
+                    placeholder="Enter profile name"
+                  />
+                </div>
 
-              <TabsContent value="regular" className="mt-0 space-y-6">
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Label>Browser</Label>
-                    <Combobox
-                      options={browserOptions
-                        .filter((browser) =>
-                          supportedBrowsers.includes(browser.value),
-                        )
-                        .map((browser) => {
-                          const IconComponent = getBrowserIcon(browser.value);
-                          return {
-                            value: browser.value,
-                            label: browser.label,
-                            icon: IconComponent,
-                          };
-                        })}
-                      value={selectedBrowser || ""}
-                      onValueChange={(value) =>
-                        setSelectedBrowser(value as BrowserTypeString)
-                      }
-                      placeholder="Select a browser..."
-                      searchPlaceholder="Search browsers..."
-                    />
-                  </div>
+                <TabsContent value="regular" className="mt-0 space-y-6">
+                  <div className="space-y-4">
+                    <div className="space-y-2">
+                      <Label>Browser</Label>
+                      <Combobox
+                        options={browserOptions
+                          .filter((browser) =>
+                            supportedBrowsers.includes(browser.value),
+                          )
+                          .map((browser) => {
+                            const IconComponent = getBrowserIcon(browser.value);
+                            return {
+                              value: browser.value,
+                              label: browser.label,
+                              icon: IconComponent,
+                            };
+                          })}
+                        value={selectedBrowser || ""}
+                        onValueChange={(value) =>
+                          setSelectedBrowser(value as BrowserTypeString)
+                        }
+                        placeholder="Select a browser..."
+                        searchPlaceholder="Search browsers..."
+                      />
+                    </div>
 
-                  {selectedBrowser && (
-                    <div className="space-y-3">
-                      {!isBrowserCurrentlyDownloading(selectedBrowser) &&
-                        !isBrowserVersionAvailable(selectedBrowser) &&
-                        getBestAvailableVersion(
-                          availableReleaseTypes,
-                          selectedBrowser,
-                        ) && (
-                          <div className="flex gap-3 items-center">
-                            <p className="text-sm text-muted-foreground">
+                    {selectedBrowser && (
+                      <div className="space-y-3">
+                        {!isBrowserCurrentlyDownloading(selectedBrowser) &&
+                          !isBrowserVersionAvailable(selectedBrowser) &&
+                          getBestAvailableVersion(
+                            availableReleaseTypes,
+                            selectedBrowser,
+                          ) && (
+                            <div className="flex gap-3 items-center">
+                              <p className="text-sm text-muted-foreground">
+                                {(() => {
+                                  const bestVersion = getBestAvailableVersion(
+                                    availableReleaseTypes,
+                                    selectedBrowser,
+                                  );
+                                  return `${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) needs to be downloaded`;
+                                })()}
+                              </p>
+                              <LoadingButton
+                                onClick={() => handleDownload(selectedBrowser)}
+                                isLoading={isBrowserCurrentlyDownloading(
+                                  selectedBrowser,
+                                )}
+                                size="sm"
+                                disabled={isBrowserCurrentlyDownloading(
+                                  selectedBrowser,
+                                )}
+                              >
+                                Download
+                              </LoadingButton>
+                            </div>
+                          )}
+                        {!isBrowserCurrentlyDownloading(selectedBrowser) &&
+                          isBrowserVersionAvailable(selectedBrowser) && (
+                            <div className="text-sm text-muted-foreground">
                               {(() => {
                                 const bestVersion = getBestAvailableVersion(
                                   availableReleaseTypes,
                                   selectedBrowser,
                                 );
-                                return `${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) needs to be downloaded`;
+                                return `✓ ${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) is available`;
                               })()}
-                            </p>
-                            <LoadingButton
-                              onClick={() => handleDownload(selectedBrowser)}
-                              isLoading={isBrowserCurrentlyDownloading(
-                                selectedBrowser,
-                              )}
-                              size="sm"
-                              disabled={isBrowserCurrentlyDownloading(
-                                selectedBrowser,
-                              )}
-                            >
-                              Download
-                            </LoadingButton>
-                          </div>
-                        )}
-                      {!isBrowserCurrentlyDownloading(selectedBrowser) &&
-                        isBrowserVersionAvailable(selectedBrowser) && (
+                            </div>
+                          )}
+                        {isBrowserCurrentlyDownloading(selectedBrowser) && (
                           <div className="text-sm text-muted-foreground">
                             {(() => {
                               const bestVersion = getBestAvailableVersion(
                                 availableReleaseTypes,
                                 selectedBrowser,
                               );
-                              return `✓ ${bestVersion?.releaseType === "stable" ? "Latest stable" : "Latest nightly"} version (${bestVersion?.version}) is available`;
+                              return `Downloading ${bestVersion?.releaseType === "stable" ? "stable" : "nightly"} version (${bestVersion?.version})...`;
                             })()}
                           </div>
                         )}
-                      {isBrowserCurrentlyDownloading(selectedBrowser) && (
-                        <div className="text-sm text-muted-foreground">
-                          {(() => {
-                            const bestVersion = getBestAvailableVersion(
-                              availableReleaseTypes,
-                              selectedBrowser,
-                            );
-                            return `Downloading ${bestVersion?.releaseType === "stable" ? "stable" : "nightly"} version (${bestVersion?.version})...`;
-                          })()}
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="anti-detect" className="mt-0 space-y-6">
+                  <div className="space-y-6">
+                    {/* Camoufox Download Status */}
+                    {!isBrowserCurrentlyDownloading("camoufox") &&
+                      !isBrowserVersionAvailable("camoufox") &&
+                      getBestAvailableVersion(
+                        camoufoxReleaseTypes,
+                        "camoufox",
+                      ) && (
+                        <div className="flex gap-3 items-center p-3 rounded-md border">
+                          <p className="text-sm text-muted-foreground">
+                            {(() => {
+                              const bestVersion = getBestAvailableVersion(
+                                camoufoxReleaseTypes,
+                                "camoufox",
+                              );
+                              return `Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) needs to be downloaded`;
+                            })()}
+                          </p>
+                          <LoadingButton
+                            onClick={() => handleDownload("camoufox")}
+                            isLoading={isBrowserCurrentlyDownloading(
+                              "camoufox",
+                            )}
+                            size="sm"
+                            disabled={isBrowserCurrentlyDownloading("camoufox")}
+                          >
+                            {isBrowserCurrentlyDownloading("camoufox")
+                              ? "Downloading..."
+                              : "Download"}
+                          </LoadingButton>
                         </div>
                       )}
-                    </div>
-                  )}
-                </div>
-              </TabsContent>
-
-              <TabsContent value="anti-detect" className="mt-0 space-y-6">
-                <div className="space-y-6">
-                  {/* Camoufox Download Status */}
-                  {!isBrowserCurrentlyDownloading("camoufox") &&
-                    !isBrowserVersionAvailable("camoufox") &&
-                    getBestAvailableVersion(
-                      camoufoxReleaseTypes,
-                      "camoufox",
-                    ) && (
-                      <div className="flex gap-3 items-center p-3 rounded-md border">
-                        <p className="text-sm text-muted-foreground">
+                    {!isBrowserCurrentlyDownloading("camoufox") &&
+                      isBrowserVersionAvailable("camoufox") && (
+                        <div className="p-3 text-sm rounded-md border text-muted-foreground">
                           {(() => {
                             const bestVersion = getBestAvailableVersion(
                               camoufoxReleaseTypes,
                               "camoufox",
                             );
-                            return `Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) needs to be downloaded`;
+                            return `✓ Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) is available`;
                           })()}
-                        </p>
-                        <LoadingButton
-                          onClick={() => handleDownload("camoufox")}
-                          isLoading={isBrowserCurrentlyDownloading("camoufox")}
-                          size="sm"
-                          disabled={isBrowserCurrentlyDownloading("camoufox")}
-                        >
-                          {isBrowserCurrentlyDownloading("camoufox")
-                            ? "Downloading..."
-                            : "Download"}
-                        </LoadingButton>
-                      </div>
-                    )}
-                  {!isBrowserCurrentlyDownloading("camoufox") &&
-                    isBrowserVersionAvailable("camoufox") && (
+                        </div>
+                      )}
+                    {isBrowserCurrentlyDownloading("camoufox") && (
                       <div className="p-3 text-sm rounded-md border text-muted-foreground">
                         {(() => {
                           const bestVersion = getBestAvailableVersion(
                             camoufoxReleaseTypes,
                             "camoufox",
                           );
-                          return `✓ Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version}) is available`;
+                          return `Downloading Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version})...`;
                         })()}
                       </div>
                     )}
-                  {isBrowserCurrentlyDownloading("camoufox") && (
-                    <div className="p-3 text-sm text-muted-foreground rounded-md border">
-                      {(() => {
-                        const bestVersion = getBestAvailableVersion(
-                          camoufoxReleaseTypes,
-                          "camoufox",
-                        );
-                        return `Downloading Camoufox ${bestVersion?.releaseType} version (${bestVersion?.version})...`;
-                      })()}
+
+                    <SharedCamoufoxConfigForm
+                      config={camoufoxConfig}
+                      onConfigChange={updateCamoufoxConfig}
+                      isCreating
+                    />
+                  </div>
+                </TabsContent>
+
+                {/* Proxy Selection - Common to both tabs - Always visible */}
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <Label>Proxy</Label>
+                    <RippleButton
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setShowProxyForm(true)}
+                      className="px-2 h-7 text-xs"
+                    >
+                      <GoPlus className="mr-1 w-3 h-3" /> Add Proxy
+                    </RippleButton>
+                  </div>
+                  {storedProxies.length > 0 ? (
+                    <Select
+                      value={selectedProxyId || "none"}
+                      onValueChange={(value) =>
+                        setSelectedProxyId(value === "none" ? undefined : value)
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="No proxy" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">No proxy</SelectItem>
+                        {storedProxies.map((proxy) => (
+                          <SelectItem key={proxy.id} value={proxy.id}>
+                            {proxy.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <div className="flex gap-3 items-center p-3 text-sm rounded-md border text-muted-foreground">
+                      No proxies available. Add one to route this profile's
+                      traffic.
                     </div>
                   )}
-
-                  <SharedCamoufoxConfigForm
-                    config={camoufoxConfig}
-                    onConfigChange={updateCamoufoxConfig}
-                    isCreating
-                  />
                 </div>
-              </TabsContent>
-
-              {/* Proxy Selection - Common to both tabs - Compact without card */}
-              {storedProxies.length > 0 && (
-                <div className="space-y-3">
-                  <Label>Proxy</Label>
-                  <Select
-                    value={selectedProxyId || "none"}
-                    onValueChange={(value) =>
-                      setSelectedProxyId(value === "none" ? undefined : value)
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="No proxy" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No proxy</SelectItem>
-                      {storedProxies.map((proxy) => (
-                        <SelectItem key={proxy.id} value={proxy.id}>
-                          {proxy.name}{" "}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              )}
+              </div>
             </div>
           </ScrollArea>
 
@@ -593,6 +618,14 @@ export function CreateProfileDialog({
           </DialogFooter>
         </Tabs>
       </DialogContent>
+      <ProxyFormDialog
+        isOpen={showProxyForm}
+        onClose={() => setShowProxyForm(false)}
+        onSave={(proxy) => {
+          setStoredProxies((prev) => [...prev, proxy]);
+          setSelectedProxyId(proxy.id);
+        }}
+      />
     </Dialog>
   );
 }
diff --git a/src/components/group-assignment-dialog.tsx b/src/components/group-assignment-dialog.tsx
index 7fca1ea..28fe5e9 100644
--- a/src/components/group-assignment-dialog.tsx
+++ b/src/components/group-assignment-dialog.tsx
@@ -2,7 +2,9 @@
 
 import { invoke } from "@tauri-apps/api/core";
 import { useCallback, useEffect, useState } from "react";
+import { GoPlus } from "react-icons/go";
 import { toast } from "sonner";
+import { CreateGroupDialog } from "@/components/create-group-dialog";
 import { LoadingButton } from "@/components/loading-button";
 import {
   Dialog,
@@ -41,6 +43,7 @@ export function GroupAssignmentDialog({
   const [isLoading, setIsLoading] = useState(false);
   const [isAssigning, setIsAssigning] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
 
   const loadGroups = useCallback(async () => {
     setIsLoading(true);
@@ -126,7 +129,17 @@ export function GroupAssignmentDialog({
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="group-select">Assign to Group:</Label>
+            <div className="flex justify-between items-center">
+              <Label htmlFor="group-select">Assign to Group:</Label>
+              <RippleButton
+                size="sm"
+                variant="outline"
+                className="h-7 px-2 text-xs"
+                onClick={() => setCreateDialogOpen(true)}
+              >
+                <GoPlus className="mr-1 w-3 h-3" /> Create Group
+              </RippleButton>
+            </div>
             {isLoading ? (
               <div className="text-sm text-muted-foreground">
                 Loading groups...
@@ -177,6 +190,15 @@ export function GroupAssignmentDialog({
           </LoadingButton>
         </DialogFooter>
       </DialogContent>
+      <CreateGroupDialog
+        isOpen={createDialogOpen}
+        onClose={() => setCreateDialogOpen(false)}
+        onGroupCreated={(group) => {
+          setGroups((prev) => [...prev, group]);
+          setSelectedGroupId(group.id);
+          setCreateDialogOpen(false);
+        }}
+      />
     </Dialog>
   );
 }
diff --git a/src/components/home-header.tsx b/src/components/home-header.tsx
index 445388b..a5e6254 100644
--- a/src/components/home-header.tsx
+++ b/src/components/home-header.tsx
@@ -49,8 +49,9 @@ const HomeHeader = ({
           type="button"
           className="p-1 cursor-pointer"
           title="Open donutbrowser.com"
+          onClick={_handleLogoClick}
         >
-          <Logo className="w-10 h-10" />
+          <Logo className="w-10 h-10 transition-transform duration-300 ease-out will-change-transform hover:scale-110" />
         </button>
         {selectedProfiles.length > 0 ? (
           <div className="flex items-center gap-3">
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
index 18bf624..14e57a1 100644
--- a/src/components/ui/combobox.tsx
+++ b/src/components/ui/combobox.tsx
@@ -18,7 +18,6 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
-import { RippleButton } from "./ripple";
 
 interface ComboboxOption {
   value: string;
@@ -48,7 +47,7 @@ export function Combobox({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <RippleButton
+        <Button
           variant="outline"
           role="combobox"
           aria-expanded={open}
@@ -58,7 +57,7 @@ export function Combobox({
             ? options.find((option) => option.value === value)?.label
             : placeholder}
           <LuChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </RippleButton>
+        </Button>
       </PopoverTrigger>
       <PopoverContent className="w-full p-0">
         <Command>