@@ -1551,14 +1551,14 @@ const ConfigModal = () => {
15511551 } ) ,
15521552 react . createElement ( TabButton , {
15531553 id : "lyrics" ,
1554- label : "가사 " ,
1554+ label : "동작 " ,
15551555 icon : "" ,
15561556 isActive : activeTab === "lyrics" ,
15571557 onClick : setActiveTab
15581558 } ) ,
15591559 react . createElement ( TabButton , {
15601560 id : "translation" ,
1561- label : "번역 " ,
1561+ label : "제공자 " ,
15621562 icon : "" ,
15631563 isActive : activeTab === "translation" ,
15641564 onClick : setActiveTab
@@ -2298,76 +2298,229 @@ const ConfigModal = () => {
22982298 const updateInfo = await Utils . checkForUpdates ( ) ;
22992299
23002300 if ( resultContainer ) {
2301- let bgColor , borderColor , textColor , message , showLink = false ;
2301+ let message , showUpdateSection = false , showCopyButton = false ;
2302+ const platform = Utils . detectPlatform ( ) ;
2303+ const platformName = Utils . getPlatformName ( ) ;
2304+ const installCommand = Utils . getInstallCommand ( ) ;
23022305
23032306 if ( updateInfo . error ) {
2304- bgColor = 'rgba(61, 26, 26, 0.5)' ;
2305- borderColor = 'rgba(139, 46, 46, 0.3)' ;
2306- textColor = '#ff6b6b' ;
2307- message = `❌ 업데이트 확인 실패: ${ updateInfo . error } ` ;
2307+ message = `업데이트 확인 실패: ${ updateInfo . error } ` ;
2308+ resultContainer . innerHTML = `
2309+ <div style="
2310+ padding: 16px 20px;
2311+ background: rgba(255, 255, 255, 0.03);
2312+ border: 1px solid rgba(255, 107, 107, 0.2);
2313+ border-left: 1px solid rgba(255, 255, 255, 0.08);
2314+ border-right: 1px solid rgba(255, 255, 255, 0.08);
2315+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
2316+ border-bottom-left-radius: 12px;
2317+ border-bottom-right-radius: 12px;
2318+ backdrop-filter: blur(30px) saturate(150%);
2319+ -webkit-backdrop-filter: blur(30px) saturate(150%);
2320+ ">
2321+ <div style="
2322+ display: flex;
2323+ align-items: center;
2324+ gap: 12px;
2325+ color: rgba(255, 107, 107, 0.9);
2326+ font-size: 13px;
2327+ font-weight: 500;
2328+ ">
2329+ <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
2330+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
2331+ </svg>
2332+ <div>
2333+ <div style="font-weight: 600; margin-bottom: 2px;">업데이트 확인 실패</div>
2334+ <div style="opacity: 0.8; font-size: 12px;">네트워크 연결을 확인하세요</div>
2335+ </div>
2336+ </div>
2337+ </div>
2338+ ` ;
23082339 } else if ( updateInfo . hasUpdate ) {
2309- bgColor = 'rgba(26, 61, 46, 0.5)' ;
2310- borderColor = 'rgba(46, 139, 87, 0.3)' ;
2311- textColor = '#4ade80' ;
2312- message = `✨ 업데이트 가능: v${ updateInfo . latestVersion } (현재: v${ updateInfo . currentVersion } )` ;
2313- showLink = true ;
2340+ showUpdateSection = true ;
2341+ showCopyButton = true ;
2342+
2343+ resultContainer . innerHTML = `
2344+ <div style="
2345+ padding: 20px;
2346+ background: rgba(255, 255, 255, 0.04);
2347+ border: 1px solid rgba(74, 222, 128, 0.15);
2348+ border-left: 1px solid rgba(255, 255, 255, 0.08);
2349+ border-right: 1px solid rgba(255, 255, 255, 0.08);
2350+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
2351+ border-bottom-left-radius: 12px;
2352+ border-bottom-right-radius: 12px;
2353+ backdrop-filter: blur(30px) saturate(150%);
2354+ -webkit-backdrop-filter: blur(30px) saturate(150%);
2355+ ">
2356+ <div style="margin-bottom: 16px;">
2357+ <div style="
2358+ display: flex;
2359+ align-items: center;
2360+ gap: 12px;
2361+ margin-bottom: 12px;
2362+ ">
2363+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(74, 222, 128, 0.9)" stroke-width="2">
2364+ <circle cx="12" cy="12" r="10"/>
2365+ <path d="M12 6v6l4 2"/>
2366+ </svg>
2367+ <div>
2368+ <div style="
2369+ font-size: 14px;
2370+ font-weight: 600;
2371+ color: rgba(255, 255, 255, 0.95);
2372+ margin-bottom: 2px;
2373+ letter-spacing: -0.01em;
2374+ ">업데이트 사용 가능</div>
2375+ <div style="
2376+ font-size: 12px;
2377+ color: rgba(255, 255, 255, 0.5);
2378+ ">버전 ${ updateInfo . currentVersion } → ${ updateInfo . latestVersion } </div>
2379+ </div>
2380+ </div>
2381+ </div>
2382+
2383+ <div style="
2384+ background: rgba(0, 0, 0, 0.25);
2385+ border: 1px solid rgba(255, 255, 255, 0.08);
2386+ border-radius: 8px;
2387+ padding: 12px 14px;
2388+ margin-bottom: 12px;
2389+ ">
2390+ <div style="
2391+ font-size: 12px;
2392+ color: rgba(255, 255, 255, 0.6);
2393+ margin-bottom: 8px;
2394+ font-weight: 500;
2395+ ">${ platformName } </div>
2396+ <code style="
2397+ font-family: Consolas, Monaco, 'Courier New', monospace;
2398+ font-size: 12px;
2399+ color: rgba(255, 255, 255, 0.85);
2400+ word-break: break-all;
2401+ line-height: 1.6;
2402+ user-select: all;
2403+ ">${ installCommand } </code>
2404+ </div>
2405+
2406+ <div style="display: flex; gap: 8px;">
2407+ <button id="copy-install-command-btn" style="
2408+ flex: 1;
2409+ background: rgba(255, 255, 255, 0.1);
2410+ border: 1px solid rgba(255, 255, 255, 0.15);
2411+ color: rgba(255, 255, 255, 0.9);
2412+ padding: 10px 16px;
2413+ border-radius: 8px;
2414+ cursor: pointer;
2415+ font-size: 13px;
2416+ font-weight: 600;
2417+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
2418+ letter-spacing: -0.01em;
2419+ ">명령어 복사</button>
2420+ <a href="https://github.com/ivLis-Studio/lyrics-plus/releases/tag/v${ updateInfo . latestVersion } "
2421+ target="_blank"
2422+ style="
2423+ flex: 1;
2424+ background: rgba(255, 255, 255, 0.08);
2425+ border: 1px solid rgba(255, 255, 255, 0.15);
2426+ color: rgba(255, 255, 255, 0.9);
2427+ padding: 10px 16px;
2428+ border-radius: 8px;
2429+ text-decoration: none;
2430+ font-size: 13px;
2431+ font-weight: 600;
2432+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
2433+ display: flex;
2434+ align-items: center;
2435+ justify-content: center;
2436+ letter-spacing: -0.01em;
2437+ ">릴리즈 노트</a>
2438+ </div>
2439+ </div>
2440+ ` ;
2441+
2442+ // Add copy button handler
2443+ const copyBtn = resultContainer . querySelector ( '#copy-install-command-btn' ) ;
2444+ if ( copyBtn ) {
2445+ copyBtn . addEventListener ( 'click' , async ( ) => {
2446+ const success = await Utils . copyToClipboard ( installCommand ) ;
2447+ if ( success ) {
2448+ copyBtn . textContent = '복사됨' ;
2449+ copyBtn . style . background = 'rgba(16, 185, 129, 0.15)' ;
2450+ copyBtn . style . border = '1px solid rgba(16, 185, 129, 0.3)' ;
2451+ copyBtn . style . color = 'rgba(16, 185, 129, 1)' ;
2452+ copyBtn . style . cursor = 'default' ;
2453+ copyBtn . disabled = true ;
2454+ Spicetify . showNotification ( '설치 명령어가 복사되었습니다' ) ;
2455+ } else {
2456+ Spicetify . showNotification ( '복사에 실패했습니다' , true ) ;
2457+ }
2458+ } ) ;
2459+ }
23142460 } else {
2315- bgColor = 'rgba(26, 45, 61, 0.5)' ;
2316- borderColor = 'rgba(46, 90, 139, 0.3)' ;
2317- textColor = '#60a5fa' ;
2318- message = `✓ 최신 버전입니다: v${ updateInfo . currentVersion } ` ;
2461+ resultContainer . innerHTML = `
2462+ <div style="
2463+ padding: 16px 20px;
2464+ background: rgba(255, 255, 255, 0.03);
2465+ border: 1px solid rgba(96, 165, 250, 0.15);
2466+ border-left: 1px solid rgba(255, 255, 255, 0.08);
2467+ border-right: 1px solid rgba(255, 255, 255, 0.08);
2468+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
2469+ border-bottom-left-radius: 12px;
2470+ border-bottom-right-radius: 12px;
2471+ backdrop-filter: blur(30px) saturate(150%);
2472+ -webkit-backdrop-filter: blur(30px) saturate(150%);
2473+ ">
2474+ <div style="
2475+ display: flex;
2476+ align-items: center;
2477+ gap: 12px;
2478+ color: rgba(96, 165, 250, 0.9);
2479+ font-size: 13px;
2480+ ">
2481+ <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
2482+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
2483+ </svg>
2484+ <div>
2485+ <div style="font-weight: 600; margin-bottom: 2px;">최신 버전입니다</div>
2486+ <div style="opacity: 0.8; font-size: 12px;">버전 ${ updateInfo . currentVersion } </div>
2487+ </div>
2488+ </div>
2489+ </div>
2490+ ` ;
23192491 }
2320-
2321- resultContainer . innerHTML = `
2322- <div style="
2323- padding: 16px;
2324- background: ${ bgColor } ;
2325- border: 1px solid ${ borderColor } ;
2326- border-left: 1px solid rgba(255, 255, 255, 0.08);
2327- border-right: 1px solid rgba(255, 255, 255, 0.08);
2328- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
2329- border-bottom-left-radius: 12px;
2330- border-bottom-right-radius: 12px;
2331- color: ${ textColor } ;
2332- font-size: 13px;
2333- line-height: 1.6;
2334- backdrop-filter: blur(30px) saturate(150%);
2335- -webkit-backdrop-filter: blur(30px) saturate(150%);
2336- ">
2337- <div style="font-weight: 600; margin-bottom: 8px;">${ message } </div>
2338- ${ showLink ? `
2339- <a href="https://github.com/ivLis-Studio/lyrics-plus/releases/latest"
2340- target="_blank"
2341- style="
2342- color: #4ade80;
2343- text-decoration: underline;
2344- cursor: pointer;
2345- ">
2346- → GitHub에서 다운로드하기
2347- </a>
2348- ` : '' }
2349- </div>
2350- ` ;
23512492 }
23522493 } catch ( error ) {
23532494 if ( resultContainer ) {
23542495 resultContainer . innerHTML = `
23552496 <div style="
2356- padding: 16px;
2357- background: rgba(61, 26, 26 , 0.5 );
2358- border: 1px solid rgba(139, 46, 46 , 0.3 );
2497+ padding: 16px 20px ;
2498+ background: rgba(255, 255, 255 , 0.03 );
2499+ border: 1px solid rgba(255, 107, 107 , 0.2 );
23592500 border-left: 1px solid rgba(255, 255, 255, 0.08);
23602501 border-right: 1px solid rgba(255, 255, 255, 0.08);
23612502 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
23622503 border-bottom-left-radius: 12px;
23632504 border-bottom-right-radius: 12px;
2364- color: #ff6b6b;
2365- font-size: 13px;
23662505 backdrop-filter: blur(30px) saturate(150%);
23672506 -webkit-backdrop-filter: blur(30px) saturate(150%);
23682507 ">
2369- <div style="font-weight: 600;">❌ 업데이트 확인 실패</div>
2370- <div style="margin-top: 4px; opacity: 0.9;">네트워크 연결을 확인하세요.</div>
2508+ <div style="
2509+ display: flex;
2510+ align-items: center;
2511+ gap: 12px;
2512+ color: rgba(255, 107, 107, 0.9);
2513+ font-size: 13px;
2514+ font-weight: 500;
2515+ ">
2516+ <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
2517+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
2518+ </svg>
2519+ <div>
2520+ <div style="font-weight: 600; margin-bottom: 2px;">업데이트 확인 실패</div>
2521+ <div style="opacity: 0.8; font-size: 12px;">네트워크 연결을 확인하세요</div>
2522+ </div>
2523+ </div>
23712524 </div>
23722525 ` ;
23732526 }
0 commit comments