feat: expand default window size to 1080x760, fix vertical home clipping, and add individual history item deletion

main
I Luk Kim 3 weeks ago
parent 43c42be482
commit 4afbeb2331

@ -12,9 +12,11 @@
"app": { "app": {
"windows": [ "windows": [
{ {
"title": "tauri-app", "title": "Mana Viewer",
"width": 800, "width": 1080,
"height": 600 "height": 760,
"minWidth": 800,
"minHeight": 600
} }
], ],
"security": { "security": {

@ -73,7 +73,6 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
background: background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.18) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
@ -85,6 +84,7 @@ body {
.url-input-container { .url-input-container {
width: 100%; width: 100%;
max-width: 640px; max-width: 640px;
margin: auto 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 28px; gap: 28px;
@ -425,6 +425,38 @@ kbd {
gap: 4px; gap: 4px;
} }
.history-item-wrapper {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
.history-item-wrapper .history-item {
flex: 1;
}
.history-delete-btn {
background: transparent;
border: none;
color: var(--color-text-subtle);
font-size: 13px;
padding: 8px;
border-radius: var(--radius-md);
cursor: pointer;
opacity: 0.4;
transition: all var(--transition-fast);
}
.history-item-wrapper:hover .history-delete-btn {
opacity: 1;
}
.history-delete-btn:hover {
background: rgba(239, 68, 68, 0.15);
color: var(--color-danger, #ef4444);
}
.history-item { .history-item {
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;

@ -155,32 +155,45 @@ export function UrlInput({
{history.map((entry) => { {history.map((entry) => {
const displayTitle = entry.chapterTitle || (entry.title && entry.title !== entry.url ? entry.title : null); const displayTitle = entry.chapterTitle || (entry.title && entry.title !== entry.url ? entry.title : null);
return ( return (
<button <div key={entry.url} className="history-item-wrapper">
key={entry.url} <button
className="history-item" className="history-item"
onClick={() => { onClick={() => {
setUrl(entry.url); setUrl(entry.url);
onLoad(entry.url); onLoad(entry.url);
}} }}
> >
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/> <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
<path d="M12 6v6l4 2"/> <path d="M12 6v6l4 2"/>
</svg> </svg>
<div className="history-info"> <div className="history-info">
{displayTitle ? ( {displayTitle ? (
<> <>
<span className="history-manga-title">{displayTitle}</span> <span className="history-manga-title">{displayTitle}</span>
<span className="history-url-sub">{entry.url}</span> <span className="history-url-sub">{entry.url}</span>
</> </>
) : ( ) : (
<span className="history-url">{entry.url}</span> <span className="history-url">{entry.url}</span>
)} )}
</div> </div>
<span className="history-time"> <span className="history-time">
{new Date(entry.timestamp).toLocaleDateString('ko-KR')} {new Date(entry.timestamp).toLocaleDateString('ko-KR')}
</span> </span>
</button> </button>
<button
className="history-delete-btn"
title="이 항목 삭제"
onClick={(e) => {
e.stopPropagation();
const updated = history.filter((h) => h.url !== entry.url);
localStorage.setItem(HISTORY_KEY, JSON.stringify(updated));
setHistory(updated);
}}
>
</button>
</div>
); );
})} })}
</div> </div>

Loading…
Cancel
Save