From 4afbeb23312655d455f14c8973a97aa301525e17 Mon Sep 17 00:00:00 2001
From: I Luk Kim <yirugi@gmail.com>
Date: Wed, 22 Jul 2026 18:10:07 +0900
Subject: [PATCH] feat: expand default window size to 1080x760, fix vertical
 home clipping, and add individual history item deletion

---
 src-tauri/tauri.conf.json   |  8 +++--
 src/App.css                 | 34 ++++++++++++++++++-
 src/components/UrlInput.tsx | 65 ++++++++++++++++++++++---------------
 3 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 40a399f..3c9c976 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -12,9 +12,11 @@
   "app": {
     "windows": [
       {
-        "title": "tauri-app",
-        "width": 800,
-        "height": 600
+        "title": "Mana Viewer",
+        "width": 1080,
+        "height": 760,
+        "minWidth": 800,
+        "minHeight": 600
       }
     ],
     "security": {
diff --git a/src/App.css b/src/App.css
index 1ca7a37..3319e84 100644
--- a/src/App.css
+++ b/src/App.css
@@ -73,7 +73,6 @@ body {
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
   background:
     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 {
   width: 100%;
   max-width: 640px;
+  margin: auto 0;
   display: flex;
   flex-direction: column;
   gap: 28px;
@@ -425,6 +425,38 @@ kbd {
   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 {
   background: transparent;
   border: 1px solid transparent;
diff --git a/src/components/UrlInput.tsx b/src/components/UrlInput.tsx
index 211d802..255bc16 100644
--- a/src/components/UrlInput.tsx
+++ b/src/components/UrlInput.tsx
@@ -155,32 +155,45 @@ export function UrlInput({
               {history.map((entry) => {
                 const displayTitle = entry.chapterTitle || (entry.title && entry.title !== entry.url ? entry.title : null);
                 return (
-                  <button
-                    key={entry.url}
-                    className="history-item"
-                    onClick={() => {
-                      setUrl(entry.url);
-                      onLoad(entry.url);
-                    }}
-                  >
-                    <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 6v6l4 2"/>
-                    </svg>
-                    <div className="history-info">
-                      {displayTitle ? (
-                        <>
-                          <span className="history-manga-title">{displayTitle}</span>
-                          <span className="history-url-sub">{entry.url}</span>
-                        </>
-                      ) : (
-                        <span className="history-url">{entry.url}</span>
-                      )}
-                    </div>
-                    <span className="history-time">
-                      {new Date(entry.timestamp).toLocaleDateString('ko-KR')}
-                    </span>
-                  </button>
+                  <div key={entry.url} className="history-item-wrapper">
+                    <button
+                      className="history-item"
+                      onClick={() => {
+                        setUrl(entry.url);
+                        onLoad(entry.url);
+                      }}
+                    >
+                      <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 6v6l4 2"/>
+                      </svg>
+                      <div className="history-info">
+                        {displayTitle ? (
+                          <>
+                            <span className="history-manga-title">{displayTitle}</span>
+                            <span className="history-url-sub">{entry.url}</span>
+                          </>
+                        ) : (
+                          <span className="history-url">{entry.url}</span>
+                        )}
+                      </div>
+                      <span className="history-time">
+                        {new Date(entry.timestamp).toLocaleDateString('ko-KR')}
+                      </span>
+                    </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>