Added some basic options

src/components/config/ConfigTabs.tsx

@@ -5,7 +5,6 @@ import { ScheduleConfigForm } from './ScheduleConfigForm';
 import { DatabaseCleanupConfigForm } from './DatabaseCleanupConfigForm';
 import { MirrorOptionsForm } from './MirrorOptionsForm';
 import { AdvancedOptionsForm } from './AdvancedOptionsForm';
-// Removed Tabs import as we're switching to grid layout
 import type {
   ConfigApiResponse,
   GiteaConfig,
@@ -679,6 +678,7 @@ export function ConfigTabs() {
             }
             onAutoSave={autoSaveGiteaConfig}
             isAutoSaving={isAutoSavingGitea}
+            githubUsername={config.githubConfig.username}
           />
         </div>
 

src/components/config/GiteaConfigForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -16,20 +16,62 @@ import {
 } from "../ui/select";
 import { Checkbox } from "../ui/checkbox";
 import { giteaApi } from "@/lib/api";
-import type { GiteaConfig, GiteaOrgVisibility } from "@/types/config";
+import type { GiteaConfig, GiteaOrgVisibility, MirrorStrategy } from "@/types/config";
 import { toast } from "sonner";
 import { Info } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { OrganizationStrategy } from "./OrganizationStrategy";
+import { Separator } from "../ui/separator";
 
 interface GiteaConfigFormProps {
   config: GiteaConfig;
   setConfig: React.Dispatch<React.SetStateAction<GiteaConfig>>;
   onAutoSave?: (giteaConfig: GiteaConfig) => Promise<void>;
   isAutoSaving?: boolean;
+  githubUsername?: string;
 }
 
-export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving }: GiteaConfigFormProps) {
+export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, githubUsername }: GiteaConfigFormProps) {
   const [isLoading, setIsLoading] = useState(false);
+  
+  // Derive the mirror strategy from existing config for backward compatibility
+  const getMirrorStrategy = (): MirrorStrategy => {
+    if (config.mirrorStrategy) return config.mirrorStrategy;
+    if (config.preserveOrgStructure) return "preserve";
+    if (config.organization && config.organization !== config.username) return "single-org";
+    return "flat-user";
+  };
+  
+  const [mirrorStrategy, setMirrorStrategy] = useState<MirrorStrategy>(getMirrorStrategy());
+  
+  // Update config when strategy changes
+  useEffect(() => {
+    const newConfig = { ...config };
+    
+    switch (mirrorStrategy) {
+      case "preserve":
+        newConfig.preserveOrgStructure = true;
+        newConfig.mirrorStrategy = "preserve";
+        break;
+      case "single-org":
+        newConfig.preserveOrgStructure = false;
+        newConfig.mirrorStrategy = "single-org";
+        if (!newConfig.organization) {
+          newConfig.organization = "github-mirrors";
+        }
+        break;
+      case "flat-user":
+        newConfig.preserveOrgStructure = false;
+        newConfig.mirrorStrategy = "flat-user";
+        newConfig.organization = "";
+        break;
+    }
+    
+    setConfig(newConfig);
+    if (onAutoSave) {
+      onAutoSave(newConfig);
+    }
+  }, [mirrorStrategy]);
 
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
@@ -168,124 +210,65 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving }:
           </p>
         </div>
 
+        <Separator className="my-2" />
+        
+        <OrganizationStrategy
+          strategy={mirrorStrategy}
+          destinationOrg={config.organization}
+          starredReposOrg={config.starredReposOrg}
+          onStrategyChange={setMirrorStrategy}
+          onDestinationOrgChange={(org) => {
+            const newConfig = { ...config, organization: org };
+            setConfig(newConfig);
+            if (onAutoSave) onAutoSave(newConfig);
+          }}
+          onStarredReposOrgChange={(org) => {
+            const newConfig = { ...config, starredReposOrg: org };
+            setConfig(newConfig);
+            if (onAutoSave) onAutoSave(newConfig);
+          }}
+          githubUsername={githubUsername}
+          giteaUsername={config.username}
+        />
+        
+        <Separator className="my-2" />
+        
         <div>
           <label
-            htmlFor="organization"
+            htmlFor="visibility"
             className="block text-sm font-medium mb-1.5"
           >
-            Destination organisation (optional)
+            Organization Visibility
           </label>
-          <input
-            id="organization"
-            name="organization"
-            type="text"
-            value={config.organization}
-            onChange={handleChange}
-            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            placeholder="Organization name"
-          />
-          <p className="text-xs text-muted-foreground mt-1">
-            Repos are created here if no per-repo org is set.
-          </p>
-        </div>
-
-        <div className="flex items-center">
-          <Checkbox
-            id="preserve-org-structure"
-            name="preserveOrgStructure"
-            checked={config.preserveOrgStructure}
-            onCheckedChange={(checked) =>
+          <Select
+            name="visibility"
+            value={config.visibility}
+            onValueChange={(value) =>
               handleChange({
-                target: {
-                  name: "preserveOrgStructure",
-                  type: "checkbox",
-                  checked: Boolean(checked),
-                  value: "",
-                },
+                target: { name: "visibility", value },
               } as React.ChangeEvent<HTMLInputElement>)
             }
-          />
-          <label
-            htmlFor="preserve-org-structure"
-            className="ml-2 text-sm select-none flex items-center"
           >
-            Mirror GitHub org / team hierarchy
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className="ml-1 cursor-pointer align-middle text-muted-foreground"
-                  role="button"
-                  tabIndex={0}
-                >
-                  <Info size={16} />
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side="right" className="max-w-xs text-xs">
-                Creates nested orgs or prefixes in Gitea so the layout matches GitHub.
-                When enabled, organization repositories will be mirrored to
-                the same organization structure in Gitea. When disabled, all
-                repositories will be mirrored under your Gitea username.
-              </TooltipContent>
-            </Tooltip>
-          </label>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label
-              htmlFor="visibility"
-              className="block text-sm font-medium mb-1.5"
-            >
-              Organization Visibility
-            </label>
-            <Select
-              name="visibility"
-              value={config.visibility}
-              onValueChange={(value) =>
-                handleChange({
-                  target: { name: "visibility", value },
-                } as React.ChangeEvent<HTMLInputElement>)
-              }
-            >
-              <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
-                <SelectValue placeholder="Select visibility" />
-              </SelectTrigger>
-              <SelectContent className="bg-background text-foreground border border-input shadow-sm">
-                {(["public", "private", "limited"] as GiteaOrgVisibility[]).map(
-                  (option) => (
-                    <SelectItem
-                      key={option}
-                      value={option}
-                      className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
-                    >
-                      {option.charAt(0).toUpperCase() + option.slice(1)}
-                    </SelectItem>
-                  )
-                )}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div>
-            <label
-              htmlFor="starred-repos-org"
-              className="block text-sm font-medium mb-1.5"
-            >
-              Starred Repositories Organization
-            </label>
-            <input
-              id="starred-repos-org"
-              name="starredReposOrg"
-              type="text"
-              value={config.starredReposOrg}
-              onChange={handleChange}
-              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              placeholder="github"
-            />
-            <p className="text-xs text-muted-foreground mt-1">
-              Leave blank to use 'github'.
-            </p>
-          </div>
+            <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+              <SelectValue placeholder="Select visibility" />
+            </SelectTrigger>
+            <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+              {(["public", "private", "limited"] as GiteaOrgVisibility[]).map(
+                (option) => (
+                  <SelectItem
+                    key={option}
+                    value={option}
+                    className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                  >
+                    {option.charAt(0).toUpperCase() + option.slice(1)}
+                  </SelectItem>
+                )
+              )}
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground mt-1">
+            Visibility for newly created organizations
+          </p>
         </div>
       </CardContent>
 

src/components/config/OrganizationStrategy.tsx

@@ -0,0 +1,387 @@
+import React from "react";
+import { Card } from "@/components/ui/card";
+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 } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export type MirrorStrategy = "preserve" | "single-org" | "flat-user";
+
+interface OrganizationStrategyProps {
+  strategy: MirrorStrategy;
+  destinationOrg?: string;
+  starredReposOrg?: string;
+  onStrategyChange: (strategy: MirrorStrategy) => void;
+  onDestinationOrgChange: (org: string) => void;
+  onStarredReposOrgChange: (org: string) => void;
+  githubUsername?: string;
+  giteaUsername?: string;
+}
+
+const strategyConfig = {
+  preserve: {
+    title: "Mirror GitHub Structure",
+    icon: FolderTree,
+    description: "Keep the same organization structure as GitHub",
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+    borderColor: "border-blue-200",
+    details: [
+      "Personal repos → Your Gitea username",
+      "Org repos → Same org name in Gitea",
+      "Team structure preserved"
+    ]
+  },
+  "single-org": {
+    title: "Consolidate to One Org",
+    icon: Building2,
+    description: "Mirror all repositories into a single organization",
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+    borderColor: "border-purple-200",
+    details: [
+      "All repos in one place",
+      "Simplified management",
+      "Custom organization name"
+    ]
+  },
+  "flat-user": {
+    title: "Flat User Structure",
+    icon: User,
+    description: "Mirror all repositories under your user account",
+    color: "text-green-600",
+    bgColor: "bg-green-50",
+    borderColor: "border-green-200",
+    details: [
+      "All repos under your username",
+      "No organizations needed",
+      "Simple and personal"
+    ]
+  }
+};
+
+const StrategyVisualizer: React.FC<{ 
+  strategy: MirrorStrategy; 
+  destinationOrg?: string;
+  starredReposOrg?: string;
+  githubUsername?: string;
+  giteaUsername?: string;
+}> = ({ strategy, destinationOrg, starredReposOrg, githubUsername = "you", giteaUsername = "you" }) => {
+  const renderPreserveStructure = () => (
+    <div className="flex items-center justify-between gap-8 p-6">
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">GitHub</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <User className="h-4 w-4" />
+            <span className="text-sm">{githubUsername}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Building2 className="h-4 w-4" />
+            <span className="text-sm">my-org/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Star className="h-4 w-4" />
+            <span className="text-sm">awesome/starred-repo</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="flex items-center">
+        <GitBranch className="h-5 w-5 text-muted-foreground" />
+      </div>
+      
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">Gitea</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-blue-50 rounded">
+            <User className="h-4 w-4 text-blue-600" />
+            <span className="text-sm">{giteaUsername}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-blue-50 rounded">
+            <Building2 className="h-4 w-4 text-blue-600" />
+            <span className="text-sm">my-org/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-blue-50 rounded">
+            <Building2 className="h-4 w-4 text-blue-600" />
+            <span className="text-sm">{starredReposOrg || "starred"}/starred-repo</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderSingleOrg = () => (
+    <div className="flex items-center justify-between gap-8 p-6">
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">GitHub</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <User className="h-4 w-4" />
+            <span className="text-sm">{githubUsername}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Building2 className="h-4 w-4" />
+            <span className="text-sm">my-org/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Star className="h-4 w-4" />
+            <span className="text-sm">awesome/starred-repo</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="flex items-center">
+        <GitBranch className="h-5 w-5 text-muted-foreground" />
+      </div>
+      
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">Gitea</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-purple-50 rounded">
+            <Building2 className="h-4 w-4 text-purple-600" />
+            <span className="text-sm">{destinationOrg || "github-mirrors"}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-purple-50 rounded">
+            <Building2 className="h-4 w-4 text-purple-600" />
+            <span className="text-sm">{destinationOrg || "github-mirrors"}/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-purple-50 rounded">
+            <Building2 className="h-4 w-4 text-purple-600" />
+            <span className="text-sm">{starredReposOrg || "starred"}/starred-repo</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderFlatUser = () => (
+    <div className="flex items-center justify-between gap-8 p-6">
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">GitHub</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <User className="h-4 w-4" />
+            <span className="text-sm">{githubUsername}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Building2 className="h-4 w-4" />
+            <span className="text-sm">my-org/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+            <Star className="h-4 w-4" />
+            <span className="text-sm">awesome/starred-repo</span>
+          </div>
+        </div>
+      </div>
+      
+      <div className="flex items-center">
+        <GitBranch className="h-5 w-5 text-muted-foreground" />
+      </div>
+      
+      <div className="flex-1">
+        <div className="text-sm font-medium text-muted-foreground mb-3">Gitea</div>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 p-2 bg-green-50 rounded">
+            <User className="h-4 w-4 text-green-600" />
+            <span className="text-sm">{giteaUsername}/my-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-green-50 rounded">
+            <User className="h-4 w-4 text-green-600" />
+            <span className="text-sm">{giteaUsername}/team-repo</span>
+          </div>
+          <div className="flex items-center gap-2 p-2 bg-green-50 rounded">
+            <Building2 className="h-4 w-4 text-green-600" />
+            <span className="text-sm">{starredReposOrg || "starred"}/starred-repo</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="mt-4">
+      <Card className="overflow-hidden">
+        <div className="bg-muted/50 p-3 border-b">
+          <h4 className="text-sm font-medium flex items-center gap-2">
+            <Package className="h-4 w-4" />
+            Repository Mapping Preview
+          </h4>
+        </div>
+        {strategy === "preserve" && renderPreserveStructure()}
+        {strategy === "single-org" && renderSingleOrg()}
+        {strategy === "flat-user" && renderFlatUser()}
+      </Card>
+    </div>
+  );
+};
+
+export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
+  strategy,
+  destinationOrg,
+  starredReposOrg,
+  onStrategyChange,
+  onDestinationOrgChange,
+  onStarredReposOrgChange,
+  githubUsername,
+  giteaUsername,
+}) => {
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold mb-1">Organization Strategy</h3>
+        <p className="text-sm text-muted-foreground">
+          Choose how your repositories will be organized in Gitea
+        </p>
+      </div>
+
+      <RadioGroup value={strategy} onValueChange={onStrategyChange}>
+        <div className="grid gap-4">
+          {(Object.entries(strategyConfig) as [MirrorStrategy, typeof strategyConfig.preserve][]).map(([key, config]) => {
+            const isSelected = strategy === key;
+            const Icon = config.icon;
+
+            return (
+              <div key={key}>
+                <label htmlFor={key} className="cursor-pointer">
+                  <Card 
+                    className={cn(
+                      "relative",
+                      isSelected && `${config.borderColor} border-2`,
+                      !isSelected && "border-muted"
+                    )}
+                  >
+                    <div className="p-4">
+                      <div className="flex items-start gap-4">
+                        <RadioGroupItem 
+                          value={key} 
+                          id={key} 
+                          className="mt-1"
+                        />
+                        
+                        <div className={cn(
+                          "rounded-lg p-2",
+                          isSelected ? config.bgColor : "bg-muted"
+                        )}>
+                          <Icon className={cn(
+                            "h-5 w-5",
+                            isSelected ? config.color : "text-muted-foreground"
+                          )} />
+                        </div>
+                        
+                        <div className="flex-1">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h4 className="font-medium">{config.title}</h4>
+                            {isSelected && (
+                              <Badge variant="secondary" className="text-xs">
+                                Selected
+                              </Badge>
+                            )}
+                          </div>
+                          <p className="text-sm text-muted-foreground mb-3">
+                            {config.description}
+                          </p>
+                          
+                          <div className="space-y-1">
+                            {config.details.map((detail, idx) => (
+                              <div key={idx} className="flex items-center gap-2">
+                                <div className={cn(
+                                  "h-1.5 w-1.5 rounded-full",
+                                  isSelected ? config.bgColor : "bg-muted"
+                                )} />
+                                <span className="text-xs text-muted-foreground">{detail}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                </label>
+              </div>
+            );
+          })}
+        </div>
+      </RadioGroup>
+
+      {strategy === "single-org" && (
+        <div className="space-y-4">
+          <Card className="p-4 border-purple-200 bg-purple-50/50">
+            <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>
+      )}
+
+      <Card className="p-4 border-orange-200 bg-orange-50/50">
+        <div className="space-y-3">
+          <div>
+            <Label htmlFor="starredReposOrg" className="flex items-center gap-2">
+              <Star className="h-4 w-4 text-orange-600" />
+              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="mt-1.5"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Keep starred repos organized separately from your own repositories
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <StrategyVisualizer 
+        strategy={strategy}
+        destinationOrg={destinationOrg}
+        starredReposOrg={starredReposOrg}
+        githubUsername={githubUsername}
+        giteaUsername={giteaUsername}
+      />
+    </div>
+  );
+};