Updated Layout

src/components/config/OrganizationStrategy.tsx

@@ -4,7 +4,8 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Badge } from "@/components/ui/badge";
-import { Info, GitBranch, FolderTree, Package, Star, Building2, User, ChevronDown, ChevronUp } from "lucide-react";
+import { Info, GitBranch, FolderTree, Package, Star, Building2, User, ChevronDown, ChevronUp, Globe, Lock, Shield } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
 import {
   Tooltip,
   TooltipContent,
@@ -22,6 +23,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import type { GiteaOrgVisibility } from "@/types/config";
 
 export type MirrorStrategy = "preserve" | "single-org" | "flat-user";
 
@@ -29,9 +31,11 @@ interface OrganizationStrategyProps {
   strategy: MirrorStrategy;
   destinationOrg?: string;
   starredReposOrg?: string;
+  visibility: GiteaOrgVisibility;
   onStrategyChange: (strategy: MirrorStrategy) => void;
   onDestinationOrgChange: (org: string) => void;
   onStarredReposOrgChange: (org: string) => void;
+  onVisibilityChange: (visibility: GiteaOrgVisibility) => void;
   githubUsername?: string;
   giteaUsername?: string;
 }
@@ -223,7 +227,7 @@ const StrategyVisualizer: React.FC<{
   );
 
   return (
-    <div className="mt-4">
+    <div className="mt-3">
       <Collapsible open={isOpen} onOpenChange={setIsOpen}>
         <Card className="overflow-hidden">
           <CollapsibleTrigger className="w-full">
@@ -256,17 +260,24 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
   strategy,
   destinationOrg,
   starredReposOrg,
+  visibility,
   onStrategyChange,
   onDestinationOrgChange,
   onStarredReposOrgChange,
+  onVisibilityChange,
   githubUsername,
   giteaUsername,
 }) => {
+  const visibilityOptions = [
+    { value: "public" as GiteaOrgVisibility, label: "Public", icon: Globe, description: "Visible to everyone" },
+    { value: "private" as GiteaOrgVisibility, label: "Private", icon: Lock, description: "Visible to members only" },
+    { value: "limited" as GiteaOrgVisibility, label: "Limited", icon: Shield, description: "Visible to logged-in users" },
+  ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       <div>
-        <h3 className="text-lg font-semibold mb-1">Organization Strategy</h3>
+        <h3 className="text-base font-semibold mb-1">Organization Strategy</h3>
         <p className="text-sm text-muted-foreground">
           Choose how your repositories will be organized in Gitea
         </p>
@@ -354,67 +365,112 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
         </div>
       </RadioGroup>
 
-      {strategy === "single-org" && (
-        <div className="space-y-4">
-          <Card className="p-4 border-purple-200 dark:border-purple-900 bg-purple-50/50 dark:bg-purple-950/20">
-            <div className="space-y-3">
-              <div>
-                <Label htmlFor="destinationOrg" className="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="mt-1.5"
-                />
-              </div>
-            </div>
-          </Card>
-        </div>
-      )}
+      <Separator className="my-4" />
 
-      <Card className="p-4 border-orange-200 dark:border-orange-900 bg-orange-50/50 dark:bg-orange-950/20">
-        <div className="space-y-3">
-          <div>
-            <Label htmlFor="starredReposOrg" className="flex items-center gap-2">
-              <Star className="h-4 w-4 text-orange-600 dark:text-orange-400" />
-              Starred Repositories Organization
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
+            <Building2 className="h-4 w-4" />
+            Organization Configuration
+          </h4>
+        </div>
+
+        {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>Starred repositories will be organized separately in this organization</p>
+                    <p>All repositories will be mirrored to this organization</p>
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             </Label>
             <Input
-              id="starredReposOrg"
-              value={starredReposOrg || ""}
-              onChange={(e) => onStarredReposOrgChange(e.target.value)}
-              placeholder="starred"
-              className="mt-1.5"
+              id="destinationOrg"
+              value={destinationOrg || ""}
+              onChange={(e) => onDestinationOrgChange(e.target.value)}
+              placeholder="github-mirrors"
+              className=""
             />
-            <p className="text-xs text-muted-foreground dark:text-muted-foreground/70 mt-1">
-              Keep starred repos organized separately from your own repositories
+            <p className="text-xs text-muted-foreground mt-1">
+              Organization for consolidated repositories
             </p>
           </div>
+        )}
+
+        <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 from your own repositories
+          </p>
         </div>
-      </Card>
+
+        <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",
+                    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>
+
+      <Separator className="my-4" />
 
       <StrategyVisualizer 
         strategy={strategy}