From 2ac933b599428c3b1ee9f36ff4bff0232a9e090a Mon Sep 17 00:00:00 2001
From: Arunavo Ray <developer@arunavoray.dev>
Date: Tue, 17 Jun 2025 14:26:52 +0530
Subject: [PATCH] refactor: streamline layout and improve tooltip descriptions
 in OrganizationConfiguration component

---
 .../config/OrganizationConfiguration.tsx      | 263 +++++++-----------
 1 file changed, 102 insertions(+), 161 deletions(-)

diff --git a/src/components/config/OrganizationConfiguration.tsx b/src/components/config/OrganizationConfiguration.tsx
index 38d9f32..eabf12d 100644
--- a/src/components/config/OrganizationConfiguration.tsx
+++ b/src/components/config/OrganizationConfiguration.tsx
@@ -45,178 +45,119 @@ export const OrganizationConfiguration: React.FC<OrganizationConfigurationProps>
         </h4>
       </div>
 
+      {/* First row - Organization inputs with consistent layout */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {strategy === "single-org" ? (
-          <>
-            {/* Destination Organization - Left Column */}
-            <div className="space-y-1">
-              <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
-                Destination Organization
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>All repositories will be mirrored to this organization</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </Label>
-              <Input
-                id="destinationOrg"
-                value={destinationOrg || ""}
-                onChange={(e) => onDestinationOrgChange(e.target.value)}
-                placeholder="github-mirrors"
-                className=""
-              />
-              <p className="text-xs text-muted-foreground mt-1">
-                Organization for consolidated repositories
-              </p>
-            </div>
-
-            {/* Starred Repositories Organization - Right Column */}
-            <div className="space-y-1">
-              <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
-                <Star className="h-3.5 w-3.5" />
-                Starred Repositories Organization
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Starred repositories will be organized separately in this organization</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </Label>
-              <Input
-                id="starredReposOrg"
-                value={starredReposOrg || ""}
-                onChange={(e) => onStarredReposOrgChange(e.target.value)}
-                placeholder="starred"
-                className=""
-              />
-              <p className="text-xs text-muted-foreground mt-1">
-                Keep starred repos organized separately
-              </p>
-            </div>
-          </>
-        ) : (
-          <>
-            {/* Starred Repositories Organization - Left Column */}
-            <div className="space-y-1">
-              <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
-                <Star className="h-3.5 w-3.5" />
-                Starred Repositories Organization
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Starred repositories will be organized separately in this organization</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </Label>
-              <Input
-                id="starredReposOrg"
-                value={starredReposOrg || ""}
-                onChange={(e) => onStarredReposOrgChange(e.target.value)}
-                placeholder="starred"
-                className=""
-              />
-              <p className="text-xs text-muted-foreground mt-1">
-                Keep starred repos organized separately
-              </p>
-            </div>
-
-            {/* Organization Visibility - Right Column */}
-            <div className="space-y-2">
-              <Label className="text-sm font-normal flex items-center gap-2">
-                Organization Visibility
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <Info className="h-3.5 w-3.5 text-muted-foreground" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p>Visibility for newly created organizations</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </Label>
-              <div className="flex gap-2">
-                {visibilityOptions.map((option) => {
-                  const Icon = option.icon;
-                  const isSelected = visibility === option.value;
-                  return (
-                    <button
-                      key={option.value}
-                      type="button"
-                      onClick={() => onVisibilityChange(option.value)}
-                      className={cn(
-                        "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all",
-                        "border flex-1",
-                        isSelected
-                          ? "bg-accent border-accent-foreground/20"
-                          : "bg-background hover:bg-accent/50 border-input"
-                      )}
-                    >
-                      <Icon className="h-3.5 w-3.5" />
-                      <span>{option.label}</span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Organization Visibility - Full width when single-org is selected */}
-      {strategy === "single-org" && (
-        <div className="space-y-2">
-          <Label className="text-sm font-normal flex items-center gap-2">
-            Organization Visibility
+        {/* Left column - always shows starred repos org */}
+        <div className="space-y-1">
+          <Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
+            <Star className="h-3.5 w-3.5" />
+            Starred Repositories Organization
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger>
                   <Info className="h-3.5 w-3.5 text-muted-foreground" />
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>Visibility for newly created organizations</p>
+                  <p>Starred repositories will be organized separately in this organization</p>
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
           </Label>
-          <div className="flex gap-2">
-            {visibilityOptions.map((option) => {
-              const Icon = option.icon;
-              const isSelected = visibility === option.value;
-              return (
-                <button
-                  key={option.value}
-                  type="button"
-                  onClick={() => onVisibilityChange(option.value)}
-                  className={cn(
-                    "flex items-center gap-1.5 px-4 py-1.5 rounded-md text-sm transition-all",
-                    "border",
-                    isSelected
-                      ? "bg-accent border-accent-foreground/20"
-                      : "bg-background hover:bg-accent/50 border-input"
-                  )}
-                >
-                  <Icon className="h-3.5 w-3.5" />
-                  <span>{option.label}</span>
-                </button>
-              );
-            })}
-          </div>
+          <Input
+            id="starredReposOrg"
+            value={starredReposOrg || ""}
+            onChange={(e) => onStarredReposOrgChange(e.target.value)}
+            placeholder="starred"
+            className=""
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            Keep starred repos organized separately
+          </p>
         </div>
-      )}
+
+        {/* Right column - shows destination org for single-org, empty div for others */}
+        {strategy === "single-org" ? (
+          <div className="space-y-1">
+            <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
+              Destination Organization
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>All repositories will be mirrored to this organization</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </Label>
+            <Input
+              id="destinationOrg"
+              value={destinationOrg || ""}
+              onChange={(e) => onDestinationOrgChange(e.target.value)}
+              placeholder="github-mirrors"
+              className=""
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Organization for consolidated repositories
+            </p>
+          </div>
+        ) : (
+          <div className="hidden md:block" /> 
+        )}
+      </div>
+
+      {/* Second row - Organization Visibility (always shown) */}
+      <div className="space-y-2">
+        <Label className="text-sm font-normal flex items-center gap-2">
+          Organization Visibility
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <Info className="h-3.5 w-3.5 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Default visibility for newly created organizations</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </Label>
+        <div className="grid grid-cols-3 gap-2">
+          {visibilityOptions.map((option) => {
+            const Icon = option.icon;
+            const isSelected = visibility === option.value;
+            return (
+              <TooltipProvider key={option.value}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() => onVisibilityChange(option.value)}
+                      className={cn(
+                        "flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all",
+                        "border group",
+                        isSelected
+                          ? "bg-accent border-accent-foreground/20"
+                          : "bg-background hover:bg-accent/50 border-input"
+                      )}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Icon className="h-3.5 w-3.5" />
+                        <span>{option.label}</span>
+                      </div>
+                      <Info className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="text-xs">{option.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          })}
+        </div>
+      </div>
     </div>
   );
-};
\ No newline at end of file
+};
+