Updated Layout

src/components/config/GitHubConfigForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -10,14 +10,16 @@ import {
 import { githubApi } from "@/lib/api";
 import type { GitHubConfig, MirrorOptions, AdvancedOptions } from "@/types/config";
 import { Input } from "../ui/input";
-import { Checkbox } from "../ui/checkbox";
 import { toast } from "sonner";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Info } from "lucide-react";
 import { Alert, AlertDescription } from "../ui/alert";
-import { Info } from "lucide-react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { GitHubMirrorSettings } from "./GitHubMirrorSettings";
 import { Separator } from "../ui/separator";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 interface GitHubConfigFormProps {
   config: GitHubConfig;
@@ -123,12 +125,52 @@ export function GitHubConfigForm({
         </div>
 
         <div>
+          <div className="flex items-center gap-2 mb-1.5">
             <label
               htmlFor="github-token"
-            className="block text-sm font-medium mb-1.5"
+              className="block text-sm font-medium"
             >
               GitHub Token
             </label>
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className="p-0.5 hover:bg-muted rounded-sm transition-colors"
+                >
+                  <Info className="h-3.5 w-3.5 text-muted-foreground" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent side="right" align="start" className="w-80">
+                <div className="space-y-2">
+                  <h4 className="font-medium text-sm">GitHub Token Requirements</h4>
+                  <div className="text-sm space-y-2">
+                    <p>
+                      You need to create a <span className="font-medium">Classic GitHub PAT Token</span> with the following scopes:
+                    </p>
+                    <ul className="ml-4 space-y-1 list-disc">
+                      <li><code className="text-xs bg-muted px-1 py-0.5 rounded">repo</code></li>
+                      <li><code className="text-xs bg-muted px-1 py-0.5 rounded">admin:org</code></li>
+                    </ul>
+                    <p className="text-muted-foreground">
+                      The organization access is required for mirroring organization repositories.
+                    </p>
+                    <p>
+                      Generate tokens at{" "}
+                      <a
+                        href="https://github.com/settings/tokens"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline font-medium"
+                      >
+                        github.com/settings/tokens
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
           <Input
             id="github-token"
             name="token"
@@ -136,7 +178,7 @@ export function GitHubConfigForm({
             value={config.token}
             onChange={handleChange}
             className="bg-background"
-            placeholder="Your GitHub personal access token"
+            placeholder="Your GitHub token (classic) with repo and admin:org scopes"
           />
           <p className="text-xs text-muted-foreground mt-1">
             Required for private repositories, organizations, and starred
@@ -165,43 +207,6 @@ export function GitHubConfigForm({
         />
     </CardContent>
 
-      <CardFooter className="flex-col items-start">
-        <Alert variant="note" className="w-full">
-          <AlertTriangle className="h-4 w-4 text-blue-600 dark:text-blue-400 mr-2" />
-          <AlertDescription className="text-sm">
-            <div className="font-semibold mb-1">Note:</div>
-            <div className="mb-1">
-              You need to create a{" "}
-              <span className="font-semibold">Classic GitHub PAT Token</span>{" "}
-              with following scopes:
-            </div>
-            <ul className="ml-4 mb-1 list-disc">
-              <li>
-                <code>repo</code>
-              </li>
-              <li>
-                <code>admin:org</code>
-              </li>
-            </ul>
-            <div className="mb-1">
-              The organization access is required for mirroring organization
-              repositories.
-            </div>
-            <div>
-              You can generate tokens at{" "}
-              <a
-                href="https://github.com/settings/tokens"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="underline font-medium hover:text-blue-900 dark:hover:text-blue-200"
-              >
-                github.com/settings/tokens
-              </a>
-              .
-            </div>
-          </AlertDescription>
-        </Alert>
-      </CardFooter>
     </Card>
   );
 }

src/components/config/GiteaConfigForm.tsx

@@ -210,12 +210,13 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
           </p>
         </div>
 
-        <Separator className="my-2" />
+        <Separator />
         
         <OrganizationStrategy
           strategy={mirrorStrategy}
           destinationOrg={config.organization}
           starredReposOrg={config.starredReposOrg}
+          visibility={config.visibility}
           onStrategyChange={setMirrorStrategy}
           onDestinationOrgChange={(org) => {
             const newConfig = { ...config, organization: org };
@@ -227,54 +228,15 @@ export function GiteaConfigForm({ config, setConfig, onAutoSave, isAutoSaving, g
             setConfig(newConfig);
             if (onAutoSave) onAutoSave(newConfig);
           }}
+          onVisibilityChange={(visibility) => {
+            const newConfig = { ...config, visibility };
+            setConfig(newConfig);
+            if (onAutoSave) onAutoSave(newConfig);
+          }}
           githubUsername={githubUsername}
           giteaUsername={config.username}
         />
-        
-        <Separator className="my-2" />
-        
-        <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>
-          <p className="text-xs text-muted-foreground mt-1">
-            Visibility for newly created organizations
-          </p>
-        </div>
       </CardContent>
-
-      <CardFooter className="">
-        {/* Footer content can be added here if needed */}
-      </CardFooter>
     </Card>
   );
 }

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,12 +365,19 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
         </div>
       </RadioGroup>
 
-      {strategy === "single-org" && (
+      <Separator className="my-4" />
+
       <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">
+          <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>
@@ -377,19 +395,17 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
               value={destinationOrg || ""}
               onChange={(e) => onDestinationOrgChange(e.target.value)}
               placeholder="github-mirrors"
-                  className="mt-1.5"
+              className=""
             />
-              </div>
-            </div>
-          </Card>
+            <p className="text-xs text-muted-foreground mt-1">
+              Organization for consolidated repositories
+            </p>
           </div>
         )}
 
-      <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" />
+        <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>
@@ -407,14 +423,54 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
             value={starredReposOrg || ""}
             onChange={(e) => onStarredReposOrgChange(e.target.value)}
             placeholder="starred"
-              className="mt-1.5"
+            className=""
           />
-            <p className="text-xs text-muted-foreground dark:text-muted-foreground/70 mt-1">
+          <p className="text-xs text-muted-foreground mt-1">
             Keep starred repos organized separately from your own repositories
           </p>
         </div>
+
+        <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>
-      </Card>
+        </div>
+      </div>
+
+      <Separator className="my-4" />
 
       <StrategyVisualizer 
         strategy={strategy}

src/lib/gitea.ts

@@ -416,7 +416,7 @@ export async function getOrCreateGiteaOrg({
         username: orgName,
         full_name: `${orgName} Org`,
         description: `Mirrored organization from GitHub ${orgName}`,
-        visibility: "public",
+        visibility: config.giteaConfig?.visibility || "public",
       }),
     });