Skip to content

Commit ab21312

Browse files
PercslolPercslol
committed
[chrome] fix about page, work on making settings more functional
1 parent 68adf46 commit ab21312

File tree

14 files changed

+69
-91
lines changed

14 files changed

+69
-91
lines changed

‎packages/chrome/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { Tab } from "./Tab";
55
import { BookmarksStrip } from "./components/BookmarksStrip";
66
import { Omnibar } from "./components/Omnibar/Omnibar";
77

8-
export function App(_, cx: ComponentContext) {
8+
export function App(props: {}, cx: ComponentContext) {
99
const applyTheme = () => {
1010
let theme = browser.settings.theme;
1111

@@ -45,7 +45,7 @@ export function App(_, cx: ComponentContext) {
4545
}}
4646
/>
4747
<Omnibar tab={use(browser.activetab)} />
48-
{use(browser.activetab.url, browser.settings.bookmarksPinned)
48+
{use(browser.activetab.url, browser.settings.showBookmarksBar)
4949
.map(([u, pinned]) => pinned || u.href === "puter://newtab")
5050
.andThen(<BookmarksStrip />)}
5151
<div style="border-bottom: 1px solid var(--bg20)"></div>

‎packages/chrome/src/Browser.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ export type Settings = {
6262
startupPage: "new-tab" | "continue";
6363
defaultZoom: number;
6464
showBookmarksBar: boolean;
65-
bookmarksPinned: boolean;
6665
defaultSearchEngine:
6766
| "google"
6867
| "bing"
@@ -98,7 +97,6 @@ export class Browser extends StatefulClass {
9897
startupPage: "new-tab",
9998
defaultZoom: 100,
10099
showBookmarksBar: true,
101-
bookmarksPinned: false,
102100
defaultSearchEngine: "google",
103101
searchSuggestionsEnabled: true,
104102
blockTrackers: true,
@@ -219,11 +217,16 @@ export class Browser extends StatefulClass {
219217
state.deserialize(s);
220218
return state;
221219
});
222-
for (let detab of de.tabs) {
223-
let tab = this.newTab();
224-
tab.deserialize(detab);
225-
tab.history.justTriggeredNavigation = true;
226-
tab.history.go(0, false);
220+
221+
if (de.settings.startupPage === "continue") {
222+
for (let detab of de.tabs) {
223+
let tab = this.newTab();
224+
tab.deserialize(detab);
225+
tab.history.justTriggeredNavigation = true;
226+
tab.history.go(0, false);
227+
}
228+
} else {
229+
this.tabs[0] = this.newTab();
227230
}
228231
this.activetab = this.tabs[0];
229232
this.bookmarks = de.bookmarks.map(createState);

‎packages/chrome/src/assets/favicon.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import defaultFavicon from "../../public/defaultfavicon.png";
1+
import defaultFavicon from "/defaultfavicon.png";
22

33
export const defaultFaviconUrl = defaultFavicon;

‎packages/chrome/src/components/BookmarkPopup.tsx‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,56 +5,44 @@ import { Input } from "./Input";
55
import { closeMenu } from "./Menu";
66
import { Button } from "./Button";
77

8-
export function BookmarkPopup(s: {
8+
export function BookmarkPopup(props: {
99
bookmark: Stateful<BookmarkEntry>;
1010
new: boolean;
1111
}) {
1212
return (
1313
<div>
14-
<div class="title">{s.new ? "Add Bookmark" : "Edit Bookmark"}</div>
14+
<div class="title">{props.new ? "Add Bookmark" : "Edit Bookmark"}</div>
1515

1616
<div class="field">
17-
<Input
18-
label="Title"
19-
value={s.bookmark.title}
20-
onInput={(e) =>
21-
(s.bookmark.title = (e.target as HTMLInputElement).value)
22-
}
23-
/>
17+
<Input label="Title" value={use(props.bookmark.title)} />
2418
</div>
2519
<div class="field">
26-
<Input
27-
label="URL"
28-
value={s.bookmark.url}
29-
onInput={(e) =>
30-
(s.bookmark.url = (e.target as HTMLInputElement).value)
31-
}
32-
/>
20+
<Input label="URL" value={use(props.bookmark.url)} />
3321
</div>
3422
<div class="actions">
3523
<Button
3624
on:click={() => {
37-
if (!s.new) {
25+
if (!props.new) {
3826
browser.bookmarks = browser.bookmarks.filter(
39-
(b) => b !== s.bookmark
27+
(b) => b !== props.bookmark
4028
);
4129
}
4230
closeMenu();
4331
}}
4432
>
45-
{s.new ? "Cancel" : "Delete"}
33+
{props.new ? "Cancel" : "Delete"}
4634
</Button>
4735
<Button
4836
variant="primary"
4937
on:click={() => {
50-
if (s.new) {
51-
browser.bookmarks = [s.bookmark, ...browser.bookmarks];
38+
if (props.new) {
39+
browser.bookmarks = [props.bookmark, ...browser.bookmarks];
5240
}
5341

5442
closeMenu();
5543
}}
5644
>
57-
{s.new ? "Add" : "Save"}
45+
{props.new ? "Add" : "Save"}
5846
</Button>
5947
</div>
6048
</div>

‎packages/chrome/src/components/BookmarksStrip.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { browser, type BookmarkEntry } from "../Browser";
55
import { createMenu, createMenuCustom, setContextMenu } from "./Menu";
66
import { BookmarkPopup } from "./BookmarkPopup";
77

8-
export function BookmarksStrip(_, cx: ComponentContext) {
8+
export function BookmarksStrip(props: {}, cx: ComponentContext) {
99
cx.mount = () => {
1010
setContextMenu(cx.root, [
1111
{
@@ -15,11 +15,11 @@ export function BookmarksStrip(_, cx: ComponentContext) {
1515
},
1616
{
1717
label: "Pin Bookmarks Strip",
18-
checkbox: use(browser.settings.bookmarksPinned),
18+
checkbox: use(browser.settings.showBookmarksBar),
1919
},
2020
]);
2121
};
22-
22+
console.log(browser.bookmarks);
2323
return (
2424
<div>
2525
<button

‎packages/chrome/src/pages/AboutPage.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { css } from "dreamland/core";
22
import type { Tab } from "../Tab";
3+
import { versionInfo } from "@mercuryworkshop/scramjet";
34

4-
export function AboutPage(s: { tab: Tab }) {
5+
export function AboutPage(props: { tab: Tab }) {
56
return (
67
<div>
78
<div class="main">
89
<h1>Puter Browser</h1>
9-
Scramjet Version: {$scramjetVersion.build} {$scramjetVersion.version}
10+
Scramjet Version: {versionInfo.version} ({versionInfo.build})
1011
</div>
1112
</div>
1213
);

‎packages/chrome/src/pages/DownloadsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Icon } from "../components/Icon";
66
import { formatBytes } from "../utils";
77
import { defaultFaviconUrl } from "../assets/favicon";
88

9-
export function DownloadsPage(s: { tab: Tab }) {
9+
export function DownloadsPage(props: { tab: Tab }) {
1010
return (
1111
<div>
1212
<nav>

‎packages/chrome/src/pages/HistoryPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Tab } from "../Tab";
33
import { browser } from "../Browser";
44
import { defaultFaviconUrl } from "../assets/favicon";
55

6-
export function HistoryPage(s: { tab: Tab }) {
6+
export function HistoryPage(props: { tab: Tab }) {
77
return (
88
<div>
99
<nav>

‎packages/chrome/src/pages/PlaygroundPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import type { Tab } from "../Tab";
2727
// }
2828
// `;
2929

30-
export function PlaygroundPage(s: { tab: Tab }) {
30+
export function PlaygroundPage(props: { tab: Tab }) {
3131
return (
3232
<div>
3333
<h1>Scramjet Playground</h1>

‎packages/chrome/src/pages/SettingsPage.tsx‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { css, type Component } from "dreamland/core";
22
import type { Tab } from "../Tab";
33
import type { IconifyIcon } from "@iconify/types";
4+
import { versionInfo } from "@mercuryworkshop/scramjet";
45
import { Icon } from "../components/Icon";
56
import { browser } from "../Browser";
67
import { Checkbox } from "../components/Checkbox";
@@ -15,15 +16,10 @@ import {
1516
iconAbout,
1617
} from "../icons";
1718

18-
export const SettingsPage: Component<
19-
{
20-
tab: Tab;
21-
},
22-
{
23-
selected: string;
24-
searchQuery: string;
25-
}
26-
> = function () {
19+
export function SettingsPage(
20+
this: { selected: string; searchQuery: string },
21+
props: { tab: Tab }
22+
) {
2723
this.selected = "general";
2824
this.searchQuery = "";
2925

@@ -137,7 +133,9 @@ export const SettingsPage: Component<
137133
id="startup-new-tab"
138134
name="startupPage"
139135
value="new-tab"
140-
checked={browser.settings.startupPage === "new-tab"}
136+
checked={use(browser.settings.startupPage).map(
137+
(v) => v === "new-tab"
138+
)}
141139
on:change={() => {
142140
browser.settings.startupPage = "new-tab";
143141
}}
@@ -150,9 +148,9 @@ export const SettingsPage: Component<
150148
id="startup-continue"
151149
name="startupPage"
152150
value="continue"
153-
checked={
154-
browser.settings.startupPage === "continue"
155-
}
151+
checked={use(browser.settings.startupPage).map(
152+
(v) => v === "continue"
153+
)}
156154
on:change={() => {
157155
browser.settings.startupPage = "continue";
158156
}}
@@ -175,9 +173,6 @@ export const SettingsPage: Component<
175173
<div class="checkbox-option">
176174
<Checkbox
177175
value={use(browser.settings.showBookmarksBar)}
178-
on:change={(checked) => {
179-
browser.settings.showBookmarksBar = checked;
180-
}}
181176
/>
182177
<label for="show-bookmarks-bar">
183178
Always show bookmarks bar
@@ -206,12 +201,7 @@ export const SettingsPage: Component<
206201
<div class="setting-group">
207202
<select
208203
class="select-input"
209-
value={browser.settings.defaultSearchEngine}
210-
on:change={(e: Event) => {
211-
browser.settings.defaultSearchEngine = (
212-
e.target as HTMLSelectElement
213-
).value as any;
214-
}}
204+
value={use(browser.settings.defaultSearchEngine)}
215205
>
216206
<option value="google">Google</option>
217207
<option value="bing">Bing</option>
@@ -233,9 +223,6 @@ export const SettingsPage: Component<
233223
<div class="checkbox-option">
234224
<Checkbox
235225
value={use(browser.settings.searchSuggestionsEnabled)}
236-
on:change={(checked) => {
237-
browser.settings.searchSuggestionsEnabled = checked;
238-
}}
239226
/>
240227
<label for="search-suggestions">
241228
Show search and site suggestions in the address bar
@@ -262,24 +249,14 @@ export const SettingsPage: Component<
262249
<div class="section-content">
263250
<div class="setting-group">
264251
<div class="checkbox-option">
265-
<Checkbox
266-
value={use(browser.settings.blockTrackers)}
267-
on:change={(value) => {
268-
browser.settings.blockTrackers = value;
269-
}}
270-
/>
252+
<Checkbox value={use(browser.settings.blockTrackers)} />
271253
<label for="block-trackers">
272254
Block third-party trackers
273255
</label>
274256
</div>
275257

276258
<div class="checkbox-option">
277-
<Checkbox
278-
value={use(browser.settings.doNotTrack)}
279-
on:change={(checked) => {
280-
browser.settings.doNotTrack = checked;
281-
}}
282-
/>
259+
<Checkbox value={use(browser.settings.doNotTrack)} />
283260
<label for="do-not-track">
284261
Send 'Do Not Track' with browsing requests
285262
</label>
@@ -299,9 +276,6 @@ export const SettingsPage: Component<
299276
<div class="checkbox-option">
300277
<Checkbox
301278
value={use(browser.settings.clearHistoryOnExit)}
302-
on:change={(checked) => {
303-
browser.settings.clearHistoryOnExit = checked;
304-
}}
305279
/>
306280
<label for="clear-history">
307281
Clear history when browser closes
@@ -351,9 +325,6 @@ export const SettingsPage: Component<
351325
<div class="checkbox-option">
352326
<Checkbox
353327
value={use(browser.settings.extensionsDevMode)}
354-
on:change={(checked) => {
355-
browser.settings.extensionsDevMode = checked;
356-
}}
357328
/>
358329
<label for="dev-mode">Enable developer mode</label>
359330
</div>
@@ -387,7 +358,10 @@ export const SettingsPage: Component<
387358
/>
388359
<div class="browser-info">
389360
<h3>Browser.js</h3>
390-
{/* <p>Scramjet Version: {$scramjetVersion.build} {$scramjetVersion.version}</p> */}
361+
<p>
362+
Scramjet Version: {versionInfo.version} (
363+
{versionInfo.build})
364+
</p>
391365
<p>© 2025 Puter Technologies</p>
392366
</div>
393367
</div>
@@ -418,7 +392,7 @@ export const SettingsPage: Component<
418392
</div>
419393
</div>
420394
);
421-
};
395+
}
422396

423397
SettingsPage.style = css`
424398
:scope {

0 commit comments

Comments
 (0)