chore: release v0.3.5

* feat(ui): add one-click texts, file existence checks, clipboard copy

* refactor(ui): remove unused clearCompleted and adjust card bg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vidbee",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "A modern Electron application for downloading videos and audios",
   "main": "./out/main/index.js",
   "author": "VidBee",

src/main/download-engine/format-utils.ts

@@ -6,7 +6,6 @@ import type {
 } from '../../shared/types'
 
 const qualityPresetToVideoHeight: Record<OneClickQualityPreset, number | null> = {
-  auto: null,
   best: null,
   good: 1080,
   normal: 720,
@@ -15,7 +14,6 @@ const qualityPresetToVideoHeight: Record<OneClickQualityPreset, number | null> =
 }
 
 const qualityPresetToAudioAbr: Record<OneClickQualityPreset, number | null> = {
-  auto: null,
   best: 320,
   good: 256,
   normal: 192,
@@ -187,7 +185,7 @@ export const resolveSelectedFormat = (
     return directMatch
   }
 
-  const preset = settings.oneClickQuality ?? 'auto'
+  const preset = settings.oneClickQuality ?? 'best'
 
   if (options.type === 'video') {
     const videoFormats = formats.filter(

src/main/index.ts

@@ -107,11 +107,6 @@ function setupDownloadEvents(): void {
 }
 
 function initAutoUpdater(): void {
-  if (process.env.NODE_ENV !== 'production') {
-    log.info('Skipping auto-updater initialization in development mode')
-    return
-  }
-
   try {
     log.info('Initializing auto-updater...')
 
@@ -123,6 +118,12 @@ function initAutoUpdater(): void {
     autoUpdater.on('update-available', (info) => {
       log.info('Update available:', info.version)
       mainWindow?.webContents.send('update:available', info)
+
+      // If auto-update is enabled, the update will be downloaded automatically
+      // because autoDownload is set to true
+      if (settingsManager.get('autoUpdate')) {
+        log.info('Auto-update is enabled, update will be downloaded automatically')
+      }
     })
 
     autoUpdater.on('update-not-available', (info) => {
@@ -153,12 +154,18 @@ function initAutoUpdater(): void {
       }
     })
 
-    if (settingsManager.get('autoUpdate')) {
-      log.info('Auto-update is enabled, checking for updates...')
-      void autoUpdater.checkForUpdatesAndNotify()
-    }
-
     log.info('Auto-updater initialized successfully')
+
+    // Check for updates immediately if auto-update is enabled
+    const autoUpdateEnabled = settingsManager.get('autoUpdate')
+    if (autoUpdateEnabled) {
+      log.info('Auto-update is enabled, checking for updates immediately...')
+      // Use checkForUpdates instead of checkForUpdatesAndNotify
+      // because we have our own notification system and want to ensure immediate download
+      void autoUpdater.checkForUpdates()
+    } else {
+      log.info('Auto-update is disabled, skipping automatic update check')
+    }
   } catch (error) {
     log.error('Failed to initialize auto-updater:', error)
   }

src/main/ipc/services/file-system-service.ts

@@ -229,6 +229,25 @@ class FileSystemService extends IpcService {
       .replace(/'/g, ''')
   }
 
+  @IpcMethod()
+  async fileExists(_context: IpcContext, filePath: string): Promise<boolean> {
+    try {
+      if (!filePath) {
+        return false
+      }
+
+      const sanitizedPath = this.sanitizePath(filePath)
+      const normalizedPath = path.normalize(sanitizedPath)
+
+      const stats = await fs.stat(normalizedPath).catch(() => null)
+
+      return stats?.isFile() ?? false
+    } catch (error) {
+      console.error('Failed to check file existence:', error)
+      return false
+    }
+  }
+
   @IpcMethod()
   async deleteFile(_context: IpcContext, filePath: string): Promise<boolean> {
     try {

src/main/lib/download-engine.ts

@@ -53,6 +53,11 @@ class DownloadEngine extends EventEmitter {
     // Add encoding support for proper handling of non-ASCII characters
     args.push('--encoding', 'utf-8')
 
+    // Note: Some sites (e.g., YouTube) may not provide filesize information
+    // in the initial request. This is normal behavior and filesize may be null/undefined
+    // for many formats. File size information might require additional HTTP HEAD requests
+    // which would significantly slow down info extraction, so yt-dlp doesn't fetch it by default.
+
     // Add proxy if configured
     if (settings.proxy) {
       args.push('--proxy', settings.proxy)
@@ -92,6 +97,27 @@ class DownloadEngine extends EventEmitter {
         if (code === 0 && stdout) {
           try {
             const info = JSON.parse(stdout)
+
+            // Calculate estimated file size for formats missing filesize information
+            // Using tbr (total bitrate in kbps) and duration (in seconds)
+            // Formula: (tbr * 1000) / 8 * duration = size in bytes
+            if (info.formats && Array.isArray(info.formats) && info.duration) {
+              const duration = info.duration
+              for (const format of info.formats) {
+                if (
+                  !format.filesize &&
+                  !format.filesize_approx &&
+                  format.tbr &&
+                  typeof format.tbr === 'number' &&
+                  duration > 0
+                ) {
+                  // Calculate estimated size: tbr (kbps) * 1000 / 8 bits per byte * duration (seconds)
+                  const estimatedSize = Math.round(((format.tbr * 1000) / 8) * duration)
+                  format.filesize_approx = estimatedSize
+                }
+              }
+            }
+
             scopedLoggers.download.info('Successfully retrieved video info for:', url)
             resolve(info)
           } catch (error) {

src/renderer/src/App.tsx

@@ -61,43 +61,30 @@ function AppContent() {
       }
     }
 
-    const startUpdateDownload = async () => {
-      if (updateDownloadInProgressRef.current) {
-        return
-      }
-
-      updateDownloadInProgressRef.current = true
-      toast.info(t('about.notifications.downloadStarted'))
-
-      try {
-        const result = await ipcServices.update.downloadUpdate()
-        if (!result.success) {
-          throw new Error(result.error ?? 'Unknown error')
-        }
-      } catch (error) {
-        updateDownloadInProgressRef.current = false
-        const message =
-          error instanceof Error && error.message
-            ? error.message
-            : t('about.notifications.unknownErrorFallback')
-        toast.error(t('about.notifications.updateError', { error: message }))
+    const handleGoToDownloadPage = () => {
+      if (typeof window !== 'undefined') {
+        window.open('https://vidbee.org/download/', '_blank', 'noopener,noreferrer')
       }
     }
 
     const handleUpdateAvailable = (rawInfo: unknown) => {
       const info = (rawInfo ?? {}) as { version?: string }
       const versionLabel = info.version ?? ''
-      toast.success(t('about.notifications.updateAvailable', { version: versionLabel }))
 
       if (autoUpdateEnabled) {
-        void startUpdateDownload()
-      } else {
-        toast(t('about.notifications.downloadUpdate', { version: versionLabel }), {
+        // Update will be downloaded automatically because autoDownload is enabled in main process
+        toast.success(t('about.notifications.updateAvailable', { version: versionLabel }), {
           action: {
-            label: t('about.notifications.manualDownloadAction'),
-            onClick: () => {
-              void startUpdateDownload()
-            }
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownloadPage
+          }
+        })
+        // No need to manually call downloadUpdate() because autoDownload is true
+      } else {
+        toast.success(t('about.notifications.updateAvailable', { version: versionLabel }), {
+          action: {
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownloadPage
           }
         })
       }
@@ -166,7 +153,12 @@ function AppContent() {
   const renderPage = () => {
     switch (currentPage) {
       case 'home':
-        return <Home onOpenSupportedSites={() => setCurrentPage('sites')} />
+        return (
+          <Home
+            onOpenSupportedSites={() => setCurrentPage('sites')}
+            onOpenSettings={() => setCurrentPage('settings')}
+          />
+        )
       case 'settings':
         return <Settings />
       case 'about':
@@ -174,7 +166,12 @@ function AppContent() {
       case 'sites':
         return <SupportedSites />
       default:
-        return <Home onOpenSupportedSites={() => setCurrentPage('sites')} />
+        return (
+          <Home
+            onOpenSupportedSites={() => setCurrentPage('sites')}
+            onOpenSettings={() => setCurrentPage('settings')}
+          />
+        )
     }
   }
 

src/renderer/src/assets/theme.css

@@ -60,32 +60,32 @@
   --card-foreground: oklch(0.8853 0 0);
   --popover: oklch(0 0 0);
   --popover-foreground: oklch(0.9328 0.0025 228.7857);
-  --primary: oklch(0.6692 0.1607 245.0110);
+  --primary: oklch(0.8223 0.1704 79.8747);
   --primary-foreground: oklch(1.0000 0 0);
   --secondary: oklch(0.9622 0.0035 219.5331);
   --secondary-foreground: oklch(0.1884 0.0128 248.5103);
-  --muted: oklch(0.2090 0 0);
+  --muted: oklch(0.3485 0 0);
   --muted-foreground: oklch(0.5637 0.0078 247.9662);
   --accent: oklch(0.1928 0.0331 242.5459);
-  --accent-foreground: oklch(0.6692 0.1607 245.0110);
+  --accent-foreground: oklch(0.8223 0.1704 79.8747);
   --destructive: oklch(0.6188 0.2376 25.7658);
   --destructive-foreground: oklch(1.0000 0 0);
   --border: oklch(0.2674 0.0047 248.0045);
   --input: oklch(0.3020 0.0288 244.8244);
-  --ring: oklch(0.6818 0.1584 243.3540);
-  --chart-1: oklch(0.6723 0.1606 244.9955);
+  --ring: oklch(0.8223 0.1704 79.8747);
+  --chart-1: oklch(0.8223 0.1704 79.8747);
   --chart-2: oklch(0.6907 0.1554 160.3454);
   --chart-3: oklch(0.8214 0.1600 82.5337);
   --chart-4: oklch(0.7064 0.1822 151.7125);
   --chart-5: oklch(0.5919 0.2186 10.5826);
   --sidebar: oklch(0.2097 0.0080 274.5332);
   --sidebar-foreground: oklch(0.8853 0 0);
-  --sidebar-primary: oklch(0.6818 0.1584 243.3540);
+  --sidebar-primary: oklch(0.8223 0.1704 79.8747);
   --sidebar-primary-foreground: oklch(1.0000 0 0);
   --sidebar-accent: oklch(0.1928 0.0331 242.5459);
-  --sidebar-accent-foreground: oklch(0.6692 0.1607 245.0110);
+  --sidebar-accent-foreground: oklch(0.8223 0.1704 79.8747);
   --sidebar-border: oklch(0.3795 0.0220 240.5943);
-  --sidebar-ring: oklch(0.6818 0.1584 243.3540);
+  --sidebar-ring: oklch(0.8223 0.1704 79.8747);
   --font-sans: Open Sans, sans-serif;
   --font-serif: Georgia, serif;
   --font-mono: Menlo, monospace;

src/renderer/src/components/download/DownloadItem.tsx

@@ -5,6 +5,7 @@ import { Progress } from '@renderer/components/ui/progress'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { AlertCircle, CheckCircle2, Copy, FolderOpen, Loader2, Play, Trash2, X } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { useCachedThumbnail } from '../../hooks/use-cached-thumbnail'
@@ -67,6 +68,30 @@ export function DownloadItem({ download }: DownloadItemProps) {
     ? actionsContainerBaseClass
     : `${actionsContainerBaseClass} sm:opacity-0 sm:group-hover:opacity-100`
 
+  // Track if the file exists
+  const [fileExists, setFileExists] = useState(false)
+
+  // Check if file exists when download data changes
+  useEffect(() => {
+    const checkFileExists = async () => {
+      if (!download.title || !download.downloadPath || !download.format) {
+        setFileExists(false)
+        return
+      }
+
+      try {
+        const filePath = generateFilePath(download.downloadPath, download.title, download.format)
+        const exists = await ipcServices.fs.fileExists(filePath)
+        setFileExists(exists)
+      } catch (error) {
+        console.error('Failed to check file existence:', error)
+        setFileExists(false)
+      }
+    }
+
+    checkFileExists()
+  }, [download.title, download.downloadPath, download.format])
+
   const handleCancel = async () => {
     if (isHistory) return
     try {
@@ -93,18 +118,31 @@ export function DownloadItem({ download }: DownloadItemProps) {
       toast.error(t('notifications.openFolderFailed'))
     }
   }
+  // Check if copy to clipboard is available
+  const canCopyToClipboard = () => {
+    return !!(download.title && download.downloadPath && download.format && fileExists)
+  }
+
   // need title, downloadPath, format
   const handleCopyToClipboard = async () => {
-    if (!download.title || !download.downloadPath || !download.format) {
+    if (!canCopyToClipboard()) {
+      toast.error(t('notifications.copyFailed'))
+      return
+    }
+
+    // Type guard: these values are guaranteed to exist after canCopyToClipboard() check
+    const downloadPath = download.downloadPath
+    const format = download.format
+    const title = download.title
+
+    if (!downloadPath || !format || !title) {
       toast.error(t('notifications.copyFailed'))
       return
     }
 
     try {
       // Generate file path using downloadPath + title + ext
-      const downloadPath = download.downloadPath
-      const format = download.format
-      const filePath = generateFilePath(downloadPath, download.title, format)
+      const filePath = generateFilePath(downloadPath, title, format)
 
       const success = await ipcServices.fs.copyFileToClipboard(filePath)
       if (!success) {
@@ -320,7 +358,7 @@ export function DownloadItem({ download }: DownloadItemProps) {
                             size="icon"
                             className="h-8 w-8 shrink-0"
                             onClick={handleCopyToClipboard}
-                            disabled={!download.title || !download.downloadPath || !download.format}
+                            disabled={!canCopyToClipboard()}
                           >
                             <Copy className="h-4 w-4" />
                           </Button>
@@ -373,6 +411,7 @@ export function DownloadItem({ download }: DownloadItemProps) {
                             size="icon"
                             className="h-8 w-8 shrink-0"
                             onClick={handleCopyToClipboard}
+                            disabled={!canCopyToClipboard()}
                           >
                             <Copy className="h-4 w-4" />
                           </Button>

src/renderer/src/components/download/UnifiedDownloadHistory.tsx

@@ -1,13 +1,13 @@
 import { Button } from '@renderer/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@renderer/components/ui/card'
+import { CardContent, CardHeader } from '@renderer/components/ui/card'
 import { cn } from '@renderer/lib/utils'
-import { useAtomValue, useSetAtom } from 'jotai'
+import { useAtomValue } from 'jotai'
 import { History as HistoryIcon } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHistorySync } from '../../hooks/use-history-sync'
 import type { DownloadRecord } from '../../store/downloads'
-import { clearCompletedAtom, downloadStatsAtom, downloadsArrayAtom } from '../../store/downloads'
+import { downloadStatsAtom, downloadsArrayAtom } from '../../store/downloads'
 import { DownloadItem } from './DownloadItem'
 import { PlaylistDownloadGroup } from './PlaylistDownloadGroup'
 
@@ -17,7 +17,6 @@ export function UnifiedDownloadHistory() {
   const { t } = useTranslation()
   const allRecords = useAtomValue(downloadsArrayAtom)
   const downloadStats = useAtomValue(downloadStatsAtom)
-  const clearCompleted = useSetAtom(clearCompletedAtom)
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
 
   useHistorySync()
@@ -99,33 +98,9 @@ export function UnifiedDownloadHistory() {
     return { order, groups }
   }, [filteredRecords])
 
-  const hasCompletedActive = allRecords.some(
-    (item) => item.entryType === 'active' && item.status === 'completed'
-  )
-  const handleClearCompleted = () => {
-    clearCompleted()
-  }
-
   return (
-    <Card className="border border-border/60 bg-background max-w-full shadow-sm backdrop-blur-sm">
-      <CardHeader className="gap-4">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div className="space-y-1">
-            <CardTitle>{t('download.downloadQueue')}</CardTitle>
-          </div>
-          <div className="flex flex-wrap items-center gap-2 text-xs">
-            {hasCompletedActive && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 border border-border/60 px-3"
-                onClick={handleClearCompleted}
-              >
-                {t('download.clearCompleted')}
-              </Button>
-            )}
-          </div>
-        </div>
+    <div className="space-y-4">
+      <CardHeader className="gap-4 p-0">
         <div className="flex flex-wrap items-center gap-2 text-sm">
           {filters.map((filter) => {
             const isActive = statusFilter === filter.key
@@ -155,7 +130,7 @@ export function UnifiedDownloadHistory() {
           })}
         </div>
       </CardHeader>
-      <CardContent className="space-y-3 overflow-hidden w-full">
+      <CardContent className="space-y-3 p-0 overflow-hidden w-full">
         {filteredRecords.length === 0 ? (
           <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border/60 px-6 py-10 text-center text-muted-foreground">
             <HistoryIcon className="h-10 w-10 opacity-50" />
@@ -191,6 +166,6 @@ export function UnifiedDownloadHistory() {
           </div>
         )}
       </CardContent>
-    </Card>
+    </div>
   )
 }

src/renderer/src/components/video/AudioExtractor.tsx

@@ -41,44 +41,46 @@ export function AudioExtractor({ onExtract }: AudioExtractorProps) {
   ]
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('audioExtract.title')}</CardTitle>
+    <Card className="border-2 border-dashed">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">{t('audioExtract.title')}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label>{t('audioExtract.selectFormat')}</Label>
-          <Select value={extractFormat} onValueChange={setExtractFormat}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {audioFormats.map((format) => (
-                <SelectItem key={format.value} value={format.value}>
-                  {format.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="space-y-2.5">
+            <Label className="text-sm font-semibold">{t('audioExtract.selectFormat')}</Label>
+            <Select value={extractFormat} onValueChange={setExtractFormat}>
+              <SelectTrigger className="h-10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {audioFormats.map((format) => (
+                  <SelectItem key={format.value} value={format.value}>
+                    {format.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2.5">
+            <Label className="text-sm font-semibold">{t('audioExtract.selectQuality')}</Label>
+            <Select value={extractQuality} onValueChange={setExtractQuality}>
+              <SelectTrigger className="h-10">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {qualities.map((quality) => (
+                  <SelectItem key={quality.value} value={quality.value}>
+                    {quality.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
 
-        <div className="space-y-2">
-          <Label>{t('audioExtract.selectQuality')}</Label>
-          <Select value={extractQuality} onValueChange={setExtractQuality}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {qualities.map((quality) => (
-                <SelectItem key={quality.value} value={quality.value}>
-                  {quality.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-
-        <Button onClick={() => onExtract('extract')} className="w-full">
+        <Button onClick={() => onExtract('extract')} className="w-full" size="lg">
           {t('audioExtract.extract')}
         </Button>
       </CardContent>

src/renderer/src/components/video/FormatSelector.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next'
 import type { OneClickQualityPreset, VideoFormat } from '../../../../shared/types'
 
 const qualityPresetToVideoHeight: Record<OneClickQualityPreset, number | null> = {
-  auto: null,
   best: null,
   good: 1080,
   normal: 720,
@@ -73,9 +72,22 @@ export function FormatSelector({
 
   useEffect(() => {
     // Filter and sort formats
-    const videos = formats.filter((f) => f.video_ext !== 'none' && f.vcodec && f.vcodec !== 'none')
+    // Exclude m3u8/HLS formats as they are streaming formats not suitable for direct download
+    const videos = formats.filter(
+      (f) =>
+        f.video_ext !== 'none' &&
+        f.vcodec &&
+        f.vcodec !== 'none' &&
+        f.protocol !== 'm3u8' &&
+        f.protocol !== 'm3u8_native'
+    )
     const audios = formats.filter(
-      (f) => f.acodec && f.acodec !== 'none' && (f.video_ext === 'none' || !f.video_ext)
+      (f) =>
+        f.acodec &&
+        f.acodec !== 'none' &&
+        (f.video_ext === 'none' || !f.video_ext) &&
+        f.protocol !== 'm3u8' &&
+        f.protocol !== 'm3u8_native'
     )
 
     // Apply showMoreFormats filter
@@ -87,6 +99,48 @@ export function FormatSelector({
       ? audios
       : audios.filter((f) => f.ext !== 'webm')
 
+    // Sort formats by quality (best first)
+    const sortVideoFormatsByQuality = (a: VideoFormat, b: VideoFormat) => {
+      // Sort by height (higher is better)
+      const aHeight = a.height ?? 0
+      const bHeight = b.height ?? 0
+      if (aHeight !== bHeight) {
+        return bHeight - aHeight
+      }
+      // If same height, sort by fps (higher is better)
+      const aFps = a.fps ?? 0
+      const bFps = b.fps ?? 0
+      if (aFps !== bFps) {
+        return bFps - aFps
+      }
+      // If same quality, prefer formats with file size information
+      const aHasSize = !!(a.filesize || a.filesize_approx)
+      const bHasSize = !!(b.filesize || b.filesize_approx)
+      if (aHasSize !== bHasSize) {
+        return bHasSize ? 1 : -1
+      }
+      return 0
+    }
+
+    const sortAudioFormatsByQuality = (a: VideoFormat, b: VideoFormat) => {
+      // Sort by bitrate/quality if available
+      const aQuality = a.tbr ?? a.quality ?? 0
+      const bQuality = b.tbr ?? b.quality ?? 0
+      if (aQuality !== bQuality) {
+        return bQuality - aQuality
+      }
+      // If same quality, prefer formats with file size information
+      const aHasSize = !!(a.filesize || a.filesize_approx)
+      const bHasSize = !!(b.filesize || b.filesize_approx)
+      if (aHasSize !== bHasSize) {
+        return bHasSize ? 1 : -1
+      }
+      return 0
+    }
+
+    filteredVideos.sort(sortVideoFormatsByQuality)
+    filteredAudios.sort(sortAudioFormatsByQuality)
+
     setVideoFormats(filteredVideos)
     setAudioFormats(filteredAudios)
 
@@ -121,25 +175,50 @@ export function FormatSelector({
   }
 
   const formatVideoLabel = (format: VideoFormat) => {
-    const quality = `${format.height || '???'}p${format.fps === 60 ? '60' : ''}`
-    const codec = settings.showMoreFormats ? ` | ${format.vcodec?.split('.')[0]}` : ''
+    const parts: string[] = []
+    // Resolution
+    if (format.height) {
+      parts.push(`${format.height}p${format.fps === 60 ? '60' : ''}`)
+    }
+    // Format extension
+    parts.push(format.ext.toUpperCase())
+    // Codec (if showMoreFormats is enabled)
+    if (settings.showMoreFormats && format.vcodec) {
+      parts.push(format.vcodec.split('.')[0])
+    }
+    // Audio indicator
+    if (format.acodec !== 'none') {
+      parts.push('🔊')
+    }
+    // File size
     const size = formatSize(format.filesize || format.filesize_approx)
-    const hasAudio = format.acodec !== 'none' ? ' 🔊' : ''
-    return `${quality} | ${format.ext} ${codec} | ${size}${hasAudio}`
+    if (size !== t('download.unknownSize')) {
+      parts.push(size)
+    }
+    return parts.join(' • ')
   }
 
   const formatAudioLabel = (format: VideoFormat) => {
+    const parts: string[] = []
+    // Quality
     const quality = format.format_note || t('download.unknownQuality')
+    parts.push(quality)
+    // Format extension
     const ext = format.ext === 'webm' ? 'opus' : format.ext
+    parts.push(ext.toUpperCase())
+    // File size
     const size = formatSize(format.filesize || format.filesize_approx)
-    return `${quality} | ${ext} | ${size}`
+    if (size !== t('download.unknownSize')) {
+      parts.push(size)
+    }
+    return parts.join(' • ')
   }
 
   if (type === 'video') {
     return (
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <Label>{t('download.selectVideoFormat')}</Label>
+      <div className="space-y-5">
+        <div className="space-y-3">
+          <Label className="text-sm font-semibold">{t('download.selectVideoFormat')}</Label>
           <Select
             value={selectedVideo}
             onValueChange={(value) => {
@@ -147,25 +226,25 @@ export function FormatSelector({
               onVideoFormatChange?.(value)
             }}
           >
-            <SelectTrigger>
+            <SelectTrigger className="h-11">
               <SelectValue />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="max-h-[300px] p-1.5">
               {videoFormats.map((format) => (
                 <SelectItem
                   key={format.format_id}
                   value={format.format_id}
-                  className="font-mono text-xs"
+                  className="cursor-pointer py-2.5"
                 >
-                  {formatVideoLabel(format)}
+                  <span className="text-sm">{formatVideoLabel(format)}</span>
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
         </div>
 
-        <div className="space-y-2">
-          <Label>{t('download.selectAudioFormat')}</Label>
+        <div className="space-y-3">
+          <Label className="text-sm font-semibold">{t('download.selectAudioFormat')}</Label>
           <Select
             value={selectedAudio}
             onValueChange={(value) => {
@@ -173,18 +252,20 @@ export function FormatSelector({
               onAudioFormatChange?.(value)
             }}
           >
-            <SelectTrigger>
+            <SelectTrigger className="h-11">
               <SelectValue />
             </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">{t('download.noAudio')}</SelectItem>
+            <SelectContent className="max-h-[300px] p-1.5">
+              <SelectItem value="none" className="cursor-pointer py-2.5">
+                <span className="text-sm">{t('download.noAudio')}</span>
+              </SelectItem>
               {audioFormats.map((format) => (
                 <SelectItem
                   key={format.format_id}
                   value={format.format_id}
-                  className="font-mono text-xs"
+                  className="cursor-pointer py-2.5"
                 >
-                  {formatAudioLabel(format)}
+                  <span className="text-sm">{formatAudioLabel(format)}</span>
                 </SelectItem>
               ))}
             </SelectContent>
@@ -196,8 +277,8 @@ export function FormatSelector({
 
   // Audio only
   return (
-    <div className="space-y-2">
-      <Label>{t('download.selectFormat')}</Label>
+    <div className="space-y-3">
+      <Label className="text-sm font-semibold">{t('download.selectFormat')}</Label>
       <Select
         value={selectedAudio}
         onValueChange={(value) => {
@@ -205,17 +286,17 @@ export function FormatSelector({
           onAudioFormatChange?.(value)
         }}
       >
-        <SelectTrigger>
+        <SelectTrigger className="h-11">
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="max-h-[300px] p-1.5">
           {audioFormats.map((format) => (
             <SelectItem
               key={format.format_id}
               value={format.format_id}
-              className="font-mono text-xs"
+              className="cursor-pointer py-2.5"
             >
-              {formatAudioLabel(format)}
+              <span className="text-sm">{formatAudioLabel(format)}</span>
             </SelectItem>
           ))}
         </SelectContent>

src/renderer/src/components/video/VideoInfoCard.tsx

@@ -115,53 +115,59 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
   }
 
   return (
-    <div className="space-y-4">
-      <Button variant="ghost" onClick={() => clearVideoInfo()} className="gap-2">
+    <div className="space-y-5">
+      <Button variant="ghost" onClick={() => clearVideoInfo()} className="gap-2 -ml-2" size="sm">
         <ArrowLeft className="h-4 w-4" />
         {t('download.back')}
       </Button>
 
-      <Card>
-        <CardHeader>
+      <Card className="overflow-hidden">
+        <CardHeader className="pb-4">
           <div className="flex flex-col md:flex-row gap-6">
             {/* Thumbnail */}
             <div className="shrink-0">
               <ImageWithPlaceholder
                 src={cachedThumbnail}
                 alt={title}
-                className="w-full md:w-80 rounded-lg aspect-video"
+                className="w-full md:w-80 rounded-lg aspect-video object-cover shadow-sm"
                 fallbackIcon={<Play className="h-12 w-12" />}
               />
             </div>
 
             {/* Video Metadata */}
-            <div className="flex-1 space-y-3">
-              <div>
-                <CardTitle className="text-xl mb-2">{t('download.videoInfo')}</CardTitle>
+            <div className="flex-1 space-y-4 min-w-0">
+              <div className="space-y-3">
+                <CardTitle className="text-2xl leading-tight">{t('download.videoInfo')}</CardTitle>
                 <CardDescription className="flex flex-wrap gap-2 items-center">
                   {videoInfo.duration && (
-                    <Badge variant="secondary" className="gap-1">
-                      <Clock className="h-3 w-3" />
-                      {formatDuration(videoInfo.duration)}
+                    <Badge variant="secondary" className="gap-1.5 px-2.5 py-1">
+                      <Clock className="h-3.5 w-3.5" />
+                      <span>{formatDuration(videoInfo.duration)}</span>
                     </Badge>
                   )}
                   {videoInfo.view_count && (
-                    <Badge variant="secondary" className="gap-1">
-                      <Eye className="h-3 w-3" />
-                      {formatViews(videoInfo.view_count)}
+                    <Badge variant="secondary" className="gap-1.5 px-2.5 py-1">
+                      <Eye className="h-3.5 w-3.5" />
+                      <span>{formatViews(videoInfo.view_count)}</span>
+                    </Badge>
+                  )}
+                  {videoInfo.uploader && (
+                    <Badge variant="outline" className="px-2.5 py-1">
+                      {videoInfo.uploader}
                     </Badge>
                   )}
-                  {videoInfo.uploader && <Badge variant="outline">{videoInfo.uploader}</Badge>}
                 </CardDescription>
               </div>
 
-              <div className="space-y-2">
-                <Label htmlFor={titleId}>{t('download.title')}</Label>
+              <div className="space-y-2.5">
+                <Label htmlFor={titleId} className="text-sm font-semibold">
+                  {t('download.title')}
+                </Label>
                 <Input
                   id={titleId}
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  className="font-medium"
+                  className="font-medium h-10"
                 />
               </div>
             </div>
@@ -170,14 +176,18 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
 
         <Separator />
 
-        <CardContent className="pt-6 space-y-6">
+        <CardContent className="pt-6 pb-6">
           <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'video' | 'audio')}>
-            <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="video">{t('download.video')}</TabsTrigger>
-              <TabsTrigger value="audio">{t('download.audio')}</TabsTrigger>
+            <TabsList className="grid w-full grid-cols-2 mb-6">
+              <TabsTrigger value="video" className="text-sm font-medium">
+                {t('download.video')}
+              </TabsTrigger>
+              <TabsTrigger value="audio" className="text-sm font-medium">
+                {t('download.audio')}
+              </TabsTrigger>
             </TabsList>
 
-            <TabsContent value="video" className="space-y-4 mt-4">
+            <TabsContent value="video" className="space-y-5 mt-0">
               <FormatSelector
                 formats={videoInfo.formats || []}
                 type="video"
@@ -194,13 +204,18 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
                 onDownloadSubsChange={setDownloadSubs}
               />
 
-              <Button onClick={() => handleDownload('video')} className="w-full" size="lg">
+              <Button
+                onClick={() => handleDownload('video')}
+                className="w-full"
+                size="lg"
+                variant="default"
+              >
                 <DownloadIcon className="mr-2 h-5 w-5" />
                 {t('download.downloadVideo')}
               </Button>
             </TabsContent>
 
-            <TabsContent value="audio" className="space-y-4 mt-4">
+            <TabsContent value="audio" className="space-y-5 mt-0">
               <FormatSelector
                 formats={videoInfo.formats || []}
                 type="audio"
@@ -218,7 +233,12 @@ export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
                 onDownloadSubsChange={setDownloadSubs}
               />
 
-              <Button onClick={() => handleDownload('audio')} className="w-full" size="lg">
+              <Button
+                onClick={() => handleDownload('audio')}
+                className="w-full"
+                size="lg"
+                variant="default"
+              >
                 <DownloadIcon className="mr-2 h-5 w-5" />
                 {t('download.downloadAudio')}
               </Button>

src/renderer/src/locales/en.json

@@ -2,8 +2,10 @@
   "about": {
     "actions": {
       "checkUpdates": "Check updates",
+      "download": "Download",
       "email": "Email",
       "feedback": "Feedback",
+      "goToDownload": "Go to download page",
       "openRepo": "Open GitHub repository",
       "view": "View",
       "visit": "Visit"
@@ -32,6 +34,7 @@
       "restartToUpdate": "Restart now to install update?",
       "restartNowAction": "Restart now",
       "updateAvailable": "Update available: {{version}}",
+      "updateAvailableMessage": "A new version {{version}} is available. Please download it from the official website.",
       "updateDownloaded": "Update downloaded, restart to install",
       "updateDownloadedVersion": "Update {{version}} downloaded, restart to install",
       "updateError": "Failed to check for updates: {{error}}",
@@ -136,8 +139,10 @@
     "noAudio": "No Audio",
     "noHistory": "No download history",
     "noItems": "No items found",
+    "goToSettings": "Go to Settings",
     "oneClickDownload": "One-Click Download",
     "oneClickDownloadDescription": "Download directly with default settings without confirmation",
+    "oneClickDownloadEnabled": "One-Click Download is enabled. Downloads will start directly with default settings.",
     "oneClickDownloadNow": "Download Now",
     "oneClickDownloadStarted": "Download started with default settings",
     "paste": "Paste",

src/renderer/src/pages/About.tsx

@@ -11,6 +11,7 @@ import { Switch } from '@renderer/components/ui/switch'
 import { useAtom, useSetAtom } from 'jotai'
 import type { LucideIcon } from 'lucide-react'
 import {
+  Download,
   Facebook,
   FileText,
   Github,
@@ -77,6 +78,47 @@ export function About() {
   ) => {
     await saveSetting({ key, value })
     toast.success(t('notifications.settingsSaved'))
+
+    // If auto-update is enabled, check for updates immediately
+    if (key === 'autoUpdate' && value === true) {
+      try {
+        toast.info(t('about.notifications.checkingUpdates'))
+        const result = await ipcServices.update.checkForUpdates()
+
+        if (result.available) {
+          // The update will be downloaded automatically because autoDownload is enabled
+          toast.success(t('about.notifications.updateAvailable', { version: result.version }), {
+            action: {
+              label: t('about.actions.goToDownload'),
+              onClick: handleGoToDownload
+            }
+          })
+          setLatestVersionState({
+            status: 'available',
+            version: result.version ?? ''
+          })
+        } else if (result.error) {
+          toast.error(t('about.notifications.updateError', { error: result.error }))
+          setLatestVersionState({
+            status: 'error',
+            error: result.error
+          })
+        } else {
+          toast.success(t('about.notifications.noUpdatesAvailable'))
+          setLatestVersionState({
+            status: 'uptodate',
+            version: result.version ?? appVersion
+          })
+        }
+      } catch (error) {
+        console.error('Failed to check for updates:', error)
+        toast.error(t('about.notifications.updateError', { error: 'Unknown error' }))
+      }
+    }
+  }
+
+  const handleGoToDownload = () => {
+    openShareUrl('https://vidbee.org/download/')
   }
 
   const handleCheckForUpdates = async () => {
@@ -85,7 +127,12 @@ export function About() {
       const result = await ipcServices.update.checkForUpdates()
 
       if (result.available) {
-        toast.success(t('about.notifications.updateAvailable', { version: result.version }))
+        toast.success(t('about.notifications.updateAvailable', { version: result.version }), {
+          action: {
+            label: t('about.actions.goToDownload'),
+            onClick: handleGoToDownload
+          }
+        })
         setLatestVersionState({
           status: 'available',
           version: result.version ?? ''
@@ -247,6 +294,12 @@ export function About() {
                     <Github className="h-4 w-4" />
                   </a>
                 </Button>
+                {latestVersionState?.status === 'available' ? (
+                  <Button onClick={handleGoToDownload} variant="default" className="gap-2">
+                    <Download className="h-4 w-4" />
+                    {t('about.actions.goToDownload')}
+                  </Button>
+                ) : null}
                 <Button onClick={handleCheckForUpdates} className="gap-2">
                   <RefreshCw className="h-4 w-4" />
                   {t('about.actions.checkUpdates')}
@@ -266,49 +319,49 @@ export function About() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('about.followAuthorTitle')}</CardTitle>
-            <CardDescription>{t('about.followAuthorDescription')}</CardDescription>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <p className="text-sm text-muted-foreground md:max-w-md">
-              {t('about.followAuthorSupport')}
-            </p>
-            <div className="flex flex-wrap gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => openShareUrl('https://x.com/nexmoex')}
-                className="gap-2"
-              >
-                <Twitter className="h-4 w-4" />
-                {t('about.followAuthorActions.follow')}
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-
         <Card>
           <CardHeader>
             <CardTitle>{t('about.shareTitle')}</CardTitle>
             <CardDescription>{t('about.shareDescription')}</CardDescription>
           </CardHeader>
-          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-            <p className="text-sm text-muted-foreground md:max-w-md">{t('about.shareSupport')}</p>
-            <div className="flex flex-wrap gap-2">
-              <Button variant="outline" size="sm" onClick={handleShareTwitter} className="gap-2">
-                <Twitter className="h-4 w-4" />
-                {t('about.shareActions.twitter')}
-              </Button>
-              <Button variant="outline" size="sm" onClick={handleShareFacebook} className="gap-2">
-                <Facebook className="h-4 w-4" />
-                {t('about.shareActions.facebook')}
-              </Button>
-              <Button variant="secondary" size="sm" onClick={handleCopyShareLink} className="gap-2">
-                <LinkIcon className="h-4 w-4" />
-                {t('about.shareActions.copy')}
-              </Button>
+          <CardContent className="space-y-4">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+              <p className="text-sm text-muted-foreground md:max-w-md">{t('about.shareSupport')}</p>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="outline" size="sm" onClick={handleShareTwitter} className="gap-2">
+                  <Twitter className="h-4 w-4" />
+                  {t('about.shareActions.twitter')}
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleShareFacebook} className="gap-2">
+                  <Facebook className="h-4 w-4" />
+                  {t('about.shareActions.facebook')}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleCopyShareLink}
+                  className="gap-2"
+                >
+                  <LinkIcon className="h-4 w-4" />
+                  {t('about.shareActions.copy')}
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+              <p className="text-sm text-muted-foreground md:max-w-md">
+                {t('about.followAuthorSupport')}
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => openShareUrl('https://x.com/nexmoex')}
+                  className="gap-2"
+                >
+                  <Twitter className="h-4 w-4" />
+                  {t('about.followAuthorActions.follow')}
+                </Button>
+              </div>
             </div>
           </CardContent>
         </Card>

src/renderer/src/pages/Home.tsx

@@ -19,7 +19,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/u
 import { popularSites } from '@renderer/data/popularSites'
 import type { AppSettings, OneClickQualityPreset, PlaylistInfo } from '@shared/types'
 import { useAtom, useSetAtom } from 'jotai'
-import { AlertCircle, Download, ListVideo, Loader2, Search } from 'lucide-react'
+import { AlertCircle, Download, Loader2, Search } from 'lucide-react'
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
@@ -42,7 +42,6 @@ import {
 } from '../store/video'
 
 const qualityPresetToVideoHeight: Record<OneClickQualityPreset, number | null> = {
-  auto: null,
   best: null,
   good: 1080,
   normal: 720,
@@ -51,7 +50,6 @@ const qualityPresetToVideoHeight: Record<OneClickQualityPreset, number | null> =
 }
 
 const qualityPresetToAudioAbr: Record<OneClickQualityPreset, number | null> = {
-  auto: null,
   best: 320,
   good: 256,
   normal: 192,
@@ -72,7 +70,7 @@ const dedupe = (candidates: Array<string | undefined>): string[] => {
 }
 
 const getQualityPreset = (settings: AppSettings): OneClickQualityPreset =>
-  settings.oneClickQuality ?? 'auto'
+  settings.oneClickQuality ?? 'best'
 
 const buildAudioSelectors = (preset: OneClickQualityPreset): string[] => {
   if (preset === 'worst') {
@@ -126,9 +124,10 @@ const buildAudioFormatPreference = (settings: AppSettings): string => {
 
 interface HomeProps {
   onOpenSupportedSites?: () => void
+  onOpenSettings?: () => void
 }
 
-export function Home({ onOpenSupportedSites }: HomeProps) {
+export function Home({ onOpenSupportedSites, onOpenSettings }: HomeProps) {
   const { t } = useTranslation()
   const [videoInfo, _setVideoInfo] = useAtom(currentVideoInfoAtom)
   const [loading] = useAtom(videoInfoLoadingAtom)
@@ -540,11 +539,9 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
       <Tabs defaultValue="single" className="w-full">
         <TabsList className="grid w-full grid-cols-2">
           <TabsTrigger value="single" className="flex items-center gap-2">
-            <Download className="h-4 w-4" />
             {t('download.singleVideo')}
           </TabsTrigger>
           <TabsTrigger value="playlist" className="flex items-center gap-2">
-            <ListVideo className="h-4 w-4" />
             {t('playlist.title')}
           </TabsTrigger>
         </TabsList>
@@ -624,18 +621,20 @@ export function Home({ onOpenSupportedSites }: HomeProps) {
 
                 {/* One-Click Download Info */}
                 {settings.oneClickDownload && (
-                  <div className="rounded-lg bg-blue-50 dark:bg-blue-900/10 p-4">
-                    <div className="flex items-start gap-3">
-                      <Download className="h-5 w-5 text-blue-600 mt-0.5 dark:text-blue-400" />
-                      <div className="flex-1 space-y-1">
-                        <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
-                          {t('download.oneClickDownload')}
-                        </p>
-                        <p className="text-sm text-blue-700">
-                          {t('download.oneClickDownloadDescription')}
-                        </p>
-                      </div>
+                  <div className="flex items-center justify-between gap-2 rounded-lg bg-card px-4 py-3 text-sm text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <span>{t('download.oneClickDownloadEnabled')}</span>
                     </div>
+                    {onOpenSettings && (
+                      <Button
+                        type="button"
+                        variant="link"
+                        className="h-auto px-2 py-0 text-xs"
+                        onClick={onOpenSettings}
+                      >
+                        {t('download.goToSettings')}
+                      </Button>
+                    )}
                   </div>
                 )}
 

src/renderer/src/pages/Settings.tsx

@@ -235,9 +235,6 @@ export function Settings() {
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="auto">
-                            {t('settings.oneClickQualityOptions.auto')}
-                          </SelectItem>
                           <SelectItem value="best">
                             {t('settings.oneClickQualityOptions.best')}
                           </SelectItem>

src/shared/types/index.ts

@@ -17,6 +17,7 @@ export interface VideoFormat {
   audio_ext?: string
   tbr?: number
   quality?: number
+  protocol?: string // http, https, m3u8, m3u8_native, etc.
 }
 
 export interface VideoInfo {
@@ -171,7 +172,7 @@ export interface PlaylistDownloadResult {
 }
 
 // Settings types
-export type OneClickQualityPreset = 'auto' | 'best' | 'good' | 'normal' | 'bad' | 'worst'
+export type OneClickQualityPreset = 'best' | 'good' | 'normal' | 'bad' | 'worst'
 
 export interface AppSettings {
   downloadPath: string
@@ -205,7 +206,7 @@ export const defaultSettings: AppSettings = {
   theme: 'system',
   oneClickDownload: false,
   oneClickDownloadType: 'video',
-  oneClickQuality: 'auto',
+  oneClickQuality: 'best',
   closeToTray: false,
   hideDockIcon: false,
   autoUpdate: true