Skip to content

Commit 2f4c25e

Browse files
authored
Fix category name and update feature.
1 parent 5f4719c commit 2f4c25e

File tree

5 files changed

+602
-69
lines changed

5 files changed

+602
-69
lines changed

Settings.js

Lines changed: 207 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)