yusufipek/RepoHub
1
0
Fork 0
mirror of https://github.com/yusufipk/RepoHub.git synced 2026-09-11 18:46:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement platform locking with shadcn-ui tooltips and remove preset match badge.

Browse Source
This commit is contained in:
Yusuf İpek
2025-11-23 13:28:51 +03:00
parent 5b66d4700a
commit 4eac0917d0
11 changed files with 293 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/globals.css
+22 -11
View File
@@ -10,20 +10,25 @@
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 221.2 83.2% 53.3%;
--primary: 218 63% 38%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 221.2 83.2% 53.3%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
.dark {
@@ -33,8 +38,8 @@
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 217.2 91.2% 59.8%;
--primary-foreground: 222.2 84% 4.9%;
--primary: 218 63% 38%;
--primary-foreground: 210 40% 98%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
@@ -45,7 +50,12 @@
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 224.3 76.3% 94.1%;
--ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
@@ -53,7 +63,8 @@
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
}
src/components/PlatformSelector.tsx
+74 -34
View File
@@ -7,16 +7,26 @@ import { apiClient } from '@/lib/api/client'
import { useLocale } from '@/contexts/LocaleContext'
import { Platform } from '@/types'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Lock } from 'lucide-react'
interface PlatformSelectorProps {
selectedPlatform: Platform | null
onPlatformSelect: (platform: Platform) => void
isLocked?: boolean
lockedMessage?: string
}
export function PlatformSelector({ selectedPlatform, onPlatformSelect }: PlatformSelectorProps) {
export function PlatformSelector({
selectedPlatform,
onPlatformSelect,
isLocked = false,
lockedMessage = "Platform selection is locked"
}: PlatformSelectorProps) {
const { t } = useLocale()
const [platforms, setPlatforms] = useState<Platform[]>([])
const [loading, setLoading] = useState(true)
const iconSlug: Record<string, string> = {
debian: 'debian',
ubuntu: 'ubuntu',
@@ -66,43 +76,73 @@ export function PlatformSelector({ selectedPlatform, onPlatformSelect }: Platfor
return (
<Card className="w-full">
<CardHeader className="pb-4">
<CardTitle className="text-lg">{t('platform.select')}</CardTitle>
<CardTitle className="text-lg flex items-center gap-2">
{t('platform.select')}
{isLocked && <Lock className="h-4 w-4 text-muted-foreground" />}
</CardTitle>
<CardDescription className="text-sm">
{t('platform.description')}
</CardDescription>
</CardHeader>
<CardContent className="pt-0">
<div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2">
{platforms.map((platform) => (
<Button
key={platform.id}
variant="outline"
className={`h-12 px-2 py-1 flex flex-col items-center justify-center gap-1 rounded-md border transition-colors
${selectedPlatform?.id === platform.id
? 'border-primary ring-2 ring-primary/60 bg-primary/5'
: 'border-border hover:bg-secondary/60'}`}
onClick={() => onPlatformSelect(platform)}
>
<div
className={`h-5 w-5 ${selectedPlatform?.id === platform.id ? 'text-foreground' : 'text-muted-foreground'}`}
style={{
WebkitMaskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
maskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
WebkitMaskRepeat: 'no-repeat',
maskRepeat: 'no-repeat',
WebkitMaskSize: 'contain',
maskSize: 'contain',
WebkitMaskPosition: 'center',
maskPosition: 'center',
backgroundColor: 'currentColor'
} as React.CSSProperties}
/>
<div className="text-center">
<div className="font-medium text-xs leading-tight truncate max-w-[90px]">{platform.name}</div>
</div>
</Button>
))}
</div>
<TooltipProvider>
<div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2">
{platforms.map((platform) => {
const isSelected = selectedPlatform?.id === platform.id
const isDisabled = isLocked && !isSelected
const ButtonContent = (
<Button
key={platform.id}
variant="outline"
className={`h-12 px-2 py-1 flex flex-col items-center justify-center gap-1 rounded-md border transition-colors w-full
${isSelected
? 'border-primary ring-2 ring-primary/60 bg-primary/5'
: 'border-border hover:bg-secondary/60'}
${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}
`}
onClick={() => !isLocked && onPlatformSelect(platform)}
disabled={isDisabled}
>
<div
className={`h-5 w-5 ${isSelected ? 'text-foreground' : 'text-muted-foreground'}`}
style={{
WebkitMaskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
maskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
WebkitMaskRepeat: 'no-repeat',
maskRepeat: 'no-repeat',
WebkitMaskSize: 'contain',
maskSize: 'contain',
WebkitMaskPosition: 'center',
maskPosition: 'center',
backgroundColor: 'currentColor'
} as React.CSSProperties}
/>
<div className="text-center">
<div className="font-medium text-xs leading-tight truncate max-w-[90px]">{platform.name}</div>
</div>
</Button>
)
if (isLocked && !isSelected) {
return (
<Tooltip key={platform.id}>
<TooltipTrigger asChild>
<div className="w-full cursor-not-allowed">
{ButtonContent}
</div>
</TooltipTrigger>
<TooltipContent>
<p>{lockedMessage}</p>
</TooltipContent>
</Tooltip>
)
}
return ButtonContent
})}
</div>
</TooltipProvider>
</CardContent>
</Card>
)
src/components/RecommendationCard.tsx
+2 -9
View File
@@ -1,4 +1,4 @@
import { Package as PackageIcon, Star } from 'lucide-react'
import { Package as PackageIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { RecommendedPackage } from '@/types/recommendations'
@@ -19,14 +19,7 @@ export function RecommendationCard({ pkg, isSelected, onToggle }: Recommendation
}`}
onClick={() => onToggle(pkg)}
>
{pkg.presetMatch && (
<div className="absolute top-2 right-2">
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold bg-primary text-primary-foreground">
<Star className="h-3 w-3" />
{t('recommendations.preset_badge')}
</span>
</div>
)}
<CardContent className="p-4">
<div className="flex items-start gap-3 mb-3">
src/components/RecommendationListItem.tsx
+1 -7
View File
@@ -1,4 +1,4 @@
import { Package as PackageIcon, Star, Info } from 'lucide-react'
import { Package as PackageIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { RecommendedPackage } from '@/types/recommendations'
@@ -24,12 +24,6 @@ export function RecommendationListItem({ pkg, isSelected, onToggle }: Recommenda
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<h4 className="font-semibold text-sm truncate">{pkg.name}</h4>
{pkg.presetMatch && (
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-semibold bg-primary text-primary-foreground">
<Star className="h-2.5 w-2.5" />
Essential
</span>
)}
<span className="text-xs text-muted-foreground">{pkg.version}</span>
</div>
<p className="text-xs text-muted-foreground truncate">{pkg.description}</p>
src/components/RepoHubApp.tsx
+26 -2
View File
@@ -1,6 +1,6 @@
"use client"
import { useState, useEffect } from 'react'
import { useState, useEffect, useRef } from 'react'
import { LocaleProvider } from '@/contexts/LocaleContext'
import { Header } from './Header'
import { PlatformSelector } from './PlatformSelector'
@@ -28,7 +28,8 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
isLoading: isProfileLoading,
hasCompletedOnboarding,
saveProfile,
detectedOS
detectedOS,
getEffectiveOS
} = useRecommendationProfile()
const [showOnboarding, setShowOnboarding] = useState(false)
@@ -148,7 +149,24 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
const handleCloseScriptPreview = () => {
setGeneratedScript(null)
}
// Track previous effective OS to detect profile changes
const prevEffectiveOS = useRef<string | null>(null)
// Calculate current effective OS
const effectiveOS = getEffectiveOS()
// Sync platform selection with profile changes
useEffect(() => {
if (hasCompletedOnboarding && availablePlatforms.length > 0) {
const platform = availablePlatforms.find(p => p.id === effectiveOS)
// If profile OS changed, or if no platform is selected yet, update selection
if (platform && (effectiveOS !== prevEffectiveOS.current || !selectedPlatform)) {
setSelectedPlatform(platform)
prevEffectiveOS.current = effectiveOS
}
}
}, [hasCompletedOnboarding, effectiveOS, availablePlatforms, selectedPlatform])
return (
<div key={locale} className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<Header
@@ -183,10 +201,16 @@ function RepoHubAppContent({ cryptomusEnabled }: { cryptomusEnabled: boolean })
/>
)}
{/* Platform Selector */}
<PlatformSelector
selectedPlatform={selectedPlatform}
onPlatformSelect={handlePlatformSelect}
isLocked={selectedPackages.length > 0}
lockedMessage="Clear your selection to switch platforms"
/>
{/* Package Browser */}
src/components/ui/tooltip.tsx
+30
View File
@@ -0,0 +1,30 @@
"use client"
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "@/lib/utils"
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
src/lib/utils.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { type ClassValue, clsx } from "clsx"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {