Skip to content

Commit 7f95492

Browse files
georg-stonegeorg-stone
committed
lots of polish
1 parent 2131186 commit 7f95492

File tree

4 files changed

+126
-38
lines changed

4 files changed

+126
-38
lines changed

‎apps/new-tab/public/_locales/en/messages.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,5 +235,20 @@
235235
},
236236
"appearance": {
237237
"message": "Appearance"
238+
},
239+
"new_wallpaper": {
240+
"message": "New wallpaper"
241+
},
242+
"every_reload": {
243+
"message": "Every reload"
244+
},
245+
"every_hour": {
246+
"message": "Every hour"
247+
},
248+
"every_day": {
249+
"message": "Every day"
250+
},
251+
"every_week": {
252+
"message": "Every week"
238253
}
239254
}

‎apps/new-tab/src/App.tsx

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
import { createStoredSignal } from "./hooks/localStorage";
4747
import { TextField, TextFieldRoot } from "./components/ui/textfield";
4848
import { CommandPalette } from "./components/ui/cmd";
49+
import { number } from "mathjs";
4950

5051
type MessageKeys = keyof typeof data;
5152

@@ -157,10 +158,6 @@ const App: Component = () => {
157158
"iconUrl",
158159
"assets/logo.png"
159160
);
160-
const [selectedImage, setSelectedImage] = createSignal<string>(
161-
localStorage.getItem("selectedImage") ||
162-
images[Math.floor(Math.random() * images.length)]
163-
);
164161
const [layout, setLayout] = createStoredSignal("layout", "center");
165162
const [currentFont, setCurrentFont] = createStoredSignal("font", "sans");
166163
const [background, setBackground] = createStoredSignal("background", "image");
@@ -175,6 +172,17 @@ const App: Component = () => {
175172
"wallpaperBlur",
176173
0
177174
);
175+
const [wallpaperChangeTime, setWallpaperChangeTime] =
176+
createStoredSignal<number>("wallpaperChangeTime", 1000 * 60 * 60 * 24 * 7);
177+
const [selectedImage, setSelectedImage] = createSignal<any>(
178+
((localStorage.getItem("selectedImage") as any) &&
179+
typeof JSON.parse(localStorage.getItem("selectedImage") as string) ==
180+
"object" &&
181+
JSON.parse(localStorage.getItem("selectedImage") as string)) || {
182+
url: images[Math.floor(Math.random() * images.length)],
183+
expiry: Date.now() + Number(wallpaperChangeTime()),
184+
}
185+
);
178186
const [backgroundPaused, setBackgroundPaused] = createStoredSignal<string>(
179187
"backgroundPaused",
180188
"false"
@@ -408,14 +416,21 @@ const App: Component = () => {
408416
}
409417

410418
if (backgroundPaused() == "false") {
411-
let newImage = images[Math.floor(Math.random() * images.length)];
412-
localStorage.setItem("selectedImage", newImage);
413-
fetch(newImage, {
414-
mode: "no-cors",
415-
headers: {
416-
"Cache-Control": "public, max-age=315360000, immutable",
417-
},
418-
});
419+
console.log(selectedImage());
420+
if (Number(selectedImage().expiry) < Date.now()) {
421+
let newImage = {
422+
url: images[Math.floor(Math.random() * images.length)],
423+
expiry: Date.now() + Number(wallpaperChangeTime()),
424+
};
425+
fetch(newImage.url, {
426+
mode: "no-cors",
427+
headers: {
428+
"Cache-Control": "public, max-age=315360000, immutable",
429+
},
430+
}).then((response) => {
431+
localStorage.setItem("selectedImage", JSON.stringify(newImage));
432+
});
433+
}
419434
}
420435

421436
setInterval(() => {
@@ -501,7 +516,7 @@ const App: Component = () => {
501516
{needsOnboarding() && <OnboardingFlow />}
502517
{background() === "image" && (
503518
<img
504-
src={selectedImage()}
519+
src={selectedImage().url}
505520
alt=""
506521
id="wallpaper"
507522
class="absolute inset-0 h-full w-full object-cover transition-all"
@@ -534,15 +549,6 @@ const App: Component = () => {
534549
: "",
535550
}}
536551
>
537-
<div
538-
class={cn(
539-
"blob-gradient blob-gradient absolute top-0 z-20 h-full w-full opacity-50 dark:hidden dark:opacity-20",
540-
imageLoaded() ? "hidden" : ""
541-
)}
542-
style={{
543-
display: background() != "image" ? "none" : "",
544-
}}
545-
></div>
546552
<div
547553
class="absolute inset-0 z-30 h-screen flex-wrap items-center justify-center gap-3 p-4"
548554
style={{
@@ -718,7 +724,7 @@ const App: Component = () => {
718724
)}
719725
</div>
720726
</div>
721-
<div class="inset-shadow group fixed right-2 top-2 flex flex-row-reverse items-center justify-center rounded-full bg-white p-1 px-2 text-black shadow-inner shadow-black/20 focus-within:gap-2 hover:gap-2 dark:bg-black/95 dark:text-white dark:shadow-white/10">
727+
<div class="group fixed right-2 top-2 flex flex-row-reverse items-center justify-center rounded-full bg-white p-1 px-2 text-black shadow-inner shadow-black/20 focus-within:gap-2 hover:gap-2 dark:bg-black/95 dark:text-white dark:shadow-white/10">
722728
<button class="peer group-hover:hidden">
723729
<Menu />
724730
</button>

‎apps/new-tab/src/Settings.tsx

Lines changed: 82 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import {
33
AlignVerticalJustifyStart,
44
ArrowLeft,
55
Bookmark,
6+
Calendar,
7+
Calendar1,
68
Clock,
79
CloudLightningIcon,
810
Grid,
11+
Hourglass,
912
Image,
1013
MessageCircle,
1114
Moon,
1215
PaintBucket,
1316
Palette,
17+
RefreshCcw,
1418
Settings,
1519
Square,
1620
Sunrise,
@@ -68,7 +72,7 @@ function SettingsTrigger({
6872
return canvas.toDataURL();
6973
}
7074

71-
const [open, setOpen] = createSignal(true);
75+
const [open, setOpen] = createSignal(false);
7276
const [font, setFont] = createStoredSignal("font", "sans");
7377
const [theme, setTheme] = createStoredSignal("kb-color-mode", "system");
7478
const [background, setBackground] = createStoredSignal("background", "image");
@@ -86,6 +90,8 @@ function SettingsTrigger({
8690
"wallpaperBlur",
8791
0
8892
);
93+
const [wallpaperChangeTime, setWallpaperChangeTime] =
94+
createStoredSignal<number>("wallpaperChangeTime", 1000 * 60 * 60 * 24);
8995
const [pageIconURL, setPageIconURL] = createStoredSignal(
9096
"iconUrl",
9197
"assets/logo.png"
@@ -103,13 +109,22 @@ function SettingsTrigger({
103109
});
104110
function SettingsPage() {
105111
return (
106-
<div class="text-foreground bg-background fixed inset-0 z-10 grid max-h-screen grid-cols-[300px_calc(100vw-300px)]">
112+
<div
113+
class={cn(
114+
"text-foreground bg-background fixed inset-0 z-10 grid max-h-screen grid-cols-[300px_calc(100vw-300px)]",
115+
{
116+
"**:!font-sans": font() == "sans",
117+
"**:!font-serif": font() == "serif",
118+
"**:!font-mono": font() == "mono",
119+
}
120+
)}
121+
>
107122
<div
108123
id="sidebar"
109124
class="border-r-[rgb(39, 39, 42)] flex h-full w-[300px] max-w-lg flex-col gap-2 border-r-2 bg-[hsl(var(--sidebar))] px-4 py-20"
110125
>
111126
<button
112-
class="flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800"
127+
class="flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800 data-[selected]:text-white"
113128
{...(settingsMenu() == "general"
114129
? { "data-selected": "true" }
115130
: "")}
@@ -119,7 +134,7 @@ function SettingsTrigger({
119134
>
120135
<Settings
121136
height={20}
122-
class="size-6 justify-start rounded-lg bg-purple-700 p-0.5"
137+
class="size-6 justify-start rounded-lg bg-purple-700 p-0.5 text-white"
123138
/>
124139
{chrome.i18n.getMessage("general")}
125140
</button>
@@ -130,9 +145,12 @@ function SettingsTrigger({
130145
onClick={() => {
131146
setSettingsMenu("appearance");
132147
}}
133-
class="flex items-center justify-start gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800"
148+
class="flex items-center justify-start gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800 data-[selected]:text-white"
134149
>
135-
<Palette height={20} class="size-6 rounded-lg bg-pink-700 p-0.5" />
150+
<Palette
151+
height={20}
152+
class="size-6 rounded-lg bg-pink-700 p-0.5 text-white"
153+
/>
136154
{chrome.i18n.getMessage("appearance")}
137155
</button>
138156
<button
@@ -142,9 +160,12 @@ function SettingsTrigger({
142160
onClick={() => {
143161
setSettingsMenu("background");
144162
}}
145-
class="flex items-center justify-start gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800"
163+
class="flex items-center justify-start gap-2 rounded-lg border-2 px-4 py-2 text-left text-sm active:opacity-80 data-[selected]:border-blue-800 data-[selected]:bg-blue-800 data-[selected]:text-white"
146164
>
147-
<Image height={20} class="size-6 rounded-lg bg-teal-700 p-0.5" />
165+
<Image
166+
height={20}
167+
class="size-6 rounded-lg bg-teal-700 p-0.5 text-white"
168+
/>
148169
{chrome.i18n.getMessage("background")}
149170
</button>
150171
</div>
@@ -290,14 +311,14 @@ function SettingsTrigger({
290311
href="https://github.com/thingbomb/flowtide/discussions"
291312
class="text-blue-400 hover:underline"
292313
>
293-
Forum
314+
{chrome.i18n.getMessage("forum")}
294315
</a>
295316
•
296317
<a
297318
href="https://feedback.flowtide.app/feature-requests"
298319
class="text-blue-400 hover:underline"
299320
>
300-
Feature request
321+
{chrome.i18n.getMessage("feature_request")}
301322
</a>
302323
</div>
303324
</>
@@ -456,6 +477,57 @@ function SettingsTrigger({
456477
</div>
457478
<br />
458479
<br />
480+
<h2 class="mb-3 text-2xl font-[500]">
481+
{chrome.i18n.getMessage("new_wallpaper")}
482+
</h2>
483+
<div class="card-group grid-cols-2 grid-rows-1">
484+
<BigButton
485+
{...(Number(wallpaperChangeTime()) === 1
486+
? { "data-selected": true }
487+
: {})}
488+
onClick={() => {
489+
localStorage.removeItem("selectedImage");
490+
setWallpaperChangeTime(1);
491+
}}
492+
title={chrome.i18n.getMessage("every_reload")}
493+
icon={<RefreshCcw class="size-[64px]" fill="none" />}
494+
/>
495+
<BigButton
496+
{...(Number(wallpaperChangeTime()) === 1000 * 60 * 60
497+
? { "data-selected": true }
498+
: {})}
499+
onClick={() => {
500+
localStorage.removeItem("selectedImage");
501+
setWallpaperChangeTime(1000 * 60 * 60);
502+
}}
503+
title={chrome.i18n.getMessage("every_hour")}
504+
icon={<Hourglass class="size-[64px]" fill="none" />}
505+
/>
506+
<BigButton
507+
{...(Number(wallpaperChangeTime()) === 1000 * 60 * 60 * 24
508+
? { "data-selected": true }
509+
: {})}
510+
onClick={() => {
511+
localStorage.removeItem("selectedImage");
512+
setWallpaperChangeTime(1000 * 60 * 60 * 24);
513+
}}
514+
title={chrome.i18n.getMessage("every_day")}
515+
icon={<Calendar1 class="size-[64px]" fill="none" />}
516+
/>
517+
<BigButton
518+
{...(Number(wallpaperChangeTime()) === 1000 * 60 * 60 * 24 * 7
519+
? { "data-selected": true }
520+
: {})}
521+
onClick={() => {
522+
localStorage.removeItem("selectedImage");
523+
setWallpaperChangeTime(1000 * 60 * 60 * 24 * 7);
524+
}}
525+
title={chrome.i18n.getMessage("every_week")}
526+
icon={<Calendar class="size-[64px]" fill="none" />}
527+
/>
528+
</div>
529+
<br />
530+
<br />
459531
<h2 class="mb-3 text-2xl font-[500]">
460532
{chrome.i18n.getMessage("opacity")}
461533
</h2>

‎apps/new-tab/src/index.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,6 @@
9999
@apply max-h-[150px] max-w-[400px] rounded-[20px] bg-zinc-600;
100100
}
101101

102-
.blob-gradient {
103-
background: radial-gradient(circle, #9a62f7, #8396d5 47%, #00d4ff00);
104-
filter: blur(100px);
105-
}
106-
107102
@layer utilities {
108103
.scrollbar-hidden::-webkit-scrollbar {
109104
display: none;

0 commit comments

Comments
 (0)