Skip to content

Commit fc78e0e

Browse files
xbubboxbubbo
committed
Simplify
1 parent 8859ce5 commit fc78e0e

File tree

1 file changed

+24
-73
lines changed

1 file changed

+24
-73
lines changed

‎src/components/Browser.tsx‎

Lines changed: 24 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,16 @@ const IconButton = ({ onClick, icon: Icon, className = "", disabled = false, tit
1818
export default function Browser() {
1919
const [tabs, setTabs] = useState<Tab[]>([{ id: 1, title: "Tab 1", url: "about:blank", active: true, reloadKey: 0 }]);
2020
const [url, setUrl] = useState("about:blank");
21-
const [favicons, setFavicons] = useState<{ [key: number]: string }>({});
21+
const [favicons, setFavicons] = useState<Record<number, string>>({});
2222
const [bookmarks, setBookmarks] = useState<Array<{ Title: string; url: string; favicon?: string }>>([]);
2323
const activeTab = useMemo(() => tabs.find((tab) => tab.active), [tabs]);
24-
const iframeRefs = useRef<{ [key: number]: HTMLIFrameElement | null }>({});
24+
const iframeRefs = useRef<Record<number, HTMLIFrameElement | null>>({});
2525

2626
useEffect(() => {
2727
let firstTabUrl = getDefaultUrl();
2828
try {
2929
const goUrl = sessionStorage.getItem("goUrl");
30-
if (goUrl?.trim()) {
31-
firstTabUrl = goUrl;
32-
}
30+
if (goUrl?.trim()) firstTabUrl = goUrl;
3331
} catch (error) {
3432
console.warn("Session storage access failed:", error);
3533
}
@@ -46,24 +44,20 @@ export default function Browser() {
4644
}, []);
4745

4846
useEffect(() => {
49-
if (activeTab) {
50-
const iframe = iframeRefs.current[activeTab.id];
51-
const actualUrl = getActualUrl(iframe);
52-
setUrl(actualUrl || activeTab.url);
53-
}
47+
if (!activeTab) return;
48+
const iframe = iframeRefs.current[activeTab.id];
49+
const actualUrl = getActualUrl(iframe);
50+
setUrl(actualUrl || activeTab.url);
5451
}, [activeTab]);
5552

5653
useEffect(() => {
5754
if (!activeTab) return;
58-
5955
const iframe = iframeRefs.current[activeTab.id];
6056
if (!iframe) return;
6157

6258
const updateState = () => {
6359
const actualUrl = getActualUrl(iframe);
64-
if (actualUrl && actualUrl !== url) {
65-
setUrl(actualUrl);
66-
}
60+
if (actualUrl && actualUrl !== url) setUrl(actualUrl);
6761

6862
try {
6963
const iframeTitle = iframe.contentWindow?.document?.title;
@@ -80,8 +74,7 @@ export default function Browser() {
8074
} else if (actualUrl) {
8175
try {
8276
const urlObj = new URL(actualUrl);
83-
const defaultFavicon = `${urlObj.origin}/favicon.ico`;
84-
setFavicons((prev) => ({ ...prev, [activeTab.id]: defaultFavicon }));
77+
setFavicons((prev) => ({ ...prev, [activeTab.id]: `${urlObj.origin}/favicon.ico` }));
8578
} catch (_e) {}
8679
}
8780
}
@@ -104,22 +97,18 @@ export default function Browser() {
10497
const addNewTab = () => {
10598
const newId = tabs.length ? Math.max(...tabs.map((tab) => tab.id)) + 1 : 1;
10699
const defaultUrl = getDefaultUrl();
107-
108100
setTabs((prev) => [...prev.map((tab) => ({ ...tab, active: false })), { id: newId, title: `Tab ${newId}`, url: defaultUrl, active: true, reloadKey: 0 }]);
109101
setUrl(defaultUrl);
110102
};
111103

112104
const closeTab = (id: number) => {
113105
setTabs((prev) => {
114106
const remaining = prev.filter((tab) => tab.id !== id);
115-
116107
if (remaining.length === 0) {
117108
let firstTabUrl = getDefaultUrl();
118109
try {
119110
const goUrl = sessionStorage.getItem("goUrl");
120-
if (goUrl?.trim()) {
121-
firstTabUrl = goUrl;
122-
}
111+
if (goUrl?.trim()) firstTabUrl = goUrl;
123112
} catch (error) {
124113
console.warn("Session storage access failed:", error);
125114
}
@@ -138,18 +127,7 @@ export default function Browser() {
138127
const handleNavigate = (value: string) => {
139128
if (!activeTab) return;
140129
const formattedUrl = formatUrl(value);
141-
142-
setTabs((prev) =>
143-
prev.map((tab) =>
144-
tab.id === activeTab.id
145-
? {
146-
...tab,
147-
url: formattedUrl,
148-
reloadKey: tab.reloadKey + 1,
149-
}
150-
: tab,
151-
),
152-
);
130+
setTabs((prev) => prev.map((tab) => (tab.id === activeTab.id ? { ...tab, url: formattedUrl, reloadKey: tab.reloadKey + 1 } : tab)));
153131
setUrl(formattedUrl);
154132
};
155133

@@ -163,7 +141,7 @@ export default function Browser() {
163141
}
164142
};
165143

166-
const Action = (action: "back" | "forward" | "reload" | "home") => {
144+
const handleAction = (action: "back" | "forward" | "reload" | "home") => {
167145
if (!activeTab) return;
168146
const iframe = iframeRefs.current[activeTab.id];
169147

@@ -174,40 +152,26 @@ export default function Browser() {
174152

175153
if (!iframe?.contentWindow) return;
176154

177-
switch (action) {
178-
case "back":
179-
iframe.contentWindow.history.back();
180-
break;
181-
case "forward":
182-
iframe.contentWindow.history.forward();
183-
break;
184-
case "reload":
185-
iframe.contentWindow.location.reload();
186-
break;
187-
}
155+
if (action === "back") iframe.contentWindow.history.back();
156+
else if (action === "forward") iframe.contentWindow.history.forward();
157+
else if (action === "reload") iframe.contentWindow.location.reload();
188158
};
189159

190160
const toggleFullscreen = () => {
191161
if (!activeTab) return;
192162
const iframe = iframeRefs.current[activeTab.id];
193-
if (iframe) {
194-
iframe.requestFullscreen().catch((err) => {
195-
console.error("Failed to enter fullscreen mode:", err);
196-
});
197-
}
163+
iframe?.requestFullscreen().catch((err) => console.error("Failed to enter fullscreen mode:", err));
198164
};
199165

200166
const addBookmark = () => {
201167
if (!activeTab) return;
202168
const iframe = iframeRefs.current[activeTab.id];
203169
const actualUrl = getActualUrl(iframe) || activeTab.url;
204-
205170
const title = prompt("Enter a Title for this bookmark:", activeTab.title || "New Bookmark");
206171

207172
if (title && typeof localStorage !== "undefined") {
208173
try {
209174
let faviconUrl = favicons[activeTab.id] || "";
210-
211175
if (!faviconUrl) {
212176
try {
213177
const urlObj = new URL(actualUrl);
@@ -221,7 +185,6 @@ export default function Browser() {
221185
const updatedBookmarks = [...bookmarks, newBookmark];
222186
setBookmarks(updatedBookmarks);
223187
localStorage.setItem("bookmarks", JSON.stringify(updatedBookmarks));
224-
console.log("Bookmark added:", newBookmark);
225188
alert("Bookmark added successfully!");
226189
} catch (e) {
227190
console.error("Failed to add bookmark:", e);
@@ -253,8 +216,8 @@ export default function Browser() {
253216
<button
254217
type="button"
255218
className={closeButtonClass}
256-
onClick={(event) => {
257-
event.stopPropagation();
219+
onClick={(e) => {
220+
e.stopPropagation();
258221
closeTab(tab.id);
259222
}}
260223
aria-label={`Close ${tab.title}`}
@@ -270,26 +233,16 @@ export default function Browser() {
270233

271234
<div className="flex items-center justify-between gap-3 bg-background-secondary px-3 py-2 backdrop-blur-xl">
272235
<div className="flex items-center gap-1">
273-
<IconButton icon={Home} onClick={() => Action("home")} title="Home" />
274-
<IconButton icon={ChevronLeft} onClick={() => Action("back")} title="Back" />
275-
<IconButton icon={ChevronRight} onClick={() => Action("forward")} title="Forward" />
276-
<IconButton icon={RotateCw} onClick={() => Action("reload")} title="Reload" />
236+
<IconButton icon={Home} onClick={() => handleAction("home")} title="Home" />
237+
<IconButton icon={ChevronLeft} onClick={() => handleAction("back")} title="Back" />
238+
<IconButton icon={ChevronRight} onClick={() => handleAction("forward")} title="Forward" />
239+
<IconButton icon={RotateCw} onClick={() => handleAction("reload")} title="Reload" />
277240
</div>
278241

279242
<div className="flex-1">
280243
<div className={actionBarClass}>
281244
<Lock className="h-4 w-4 text-muted-foreground" />
282-
<input
283-
className={addressInputClass}
284-
value={url}
285-
placeholder="Search or enter address"
286-
onChange={(event) => setUrl(event.target.value)}
287-
onKeyDown={(event) => {
288-
if (event.key === "Enter") {
289-
handleNavigate(event.currentTarget.value);
290-
}
291-
}}
292-
/>
245+
<input className={addressInputClass} value={url} placeholder="Search or enter address" onChange={(e) => setUrl(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleNavigate(e.currentTarget.value)} />
293246
</div>
294247
</div>
295248

@@ -312,9 +265,7 @@ export default function Browser() {
312265
onClick={() => handleNavigate(bookmark.url)}
313266
onContextMenu={(e) => {
314267
e.preventDefault();
315-
if (confirm(`Remove bookmark "${bookmark.Title}"?`)) {
316-
removeBookmark(bookmark.url, bookmark.Title);
317-
}
268+
if (confirm(`Remove bookmark "${bookmark.Title}"?`)) removeBookmark(bookmark.url, bookmark.Title);
318269
}}
319270
>
320271
{bookmark.favicon ? (

0 commit comments

Comments
 (0)