202 lines
7.8 KiB
TypeScript
202 lines
7.8 KiB
TypeScript
import { NostrQuery } from "@lume/system";
|
|
import type { Settings } from "@lume/types";
|
|
import * as Switch from "@radix-ui/react-switch";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
import { requestPermission } from "@tauri-apps/plugin-notification";
|
|
import { useEffect, useState } from "react";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
|
|
export const Route = createFileRoute("/settings/general")({
|
|
beforeLoad: async () => {
|
|
const settings = await NostrQuery.getSettings();
|
|
return { settings };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { settings } = Route.useRouteContext();
|
|
const [newSettings, setNewSettings] = useState<Settings>(settings);
|
|
|
|
const toggleNofitication = async () => {
|
|
await requestPermission();
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
notification: !newSettings.notification,
|
|
}));
|
|
};
|
|
|
|
const toggleGossip = async () => {
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
gossip: !newSettings.gossip,
|
|
}));
|
|
};
|
|
|
|
const toggleAutoUpdate = () => {
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
autoUpdate: !newSettings.autoUpdate,
|
|
}));
|
|
};
|
|
|
|
const toggleEnhancedPrivacy = () => {
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
enhancedPrivacy: !newSettings.enhancedPrivacy,
|
|
}));
|
|
};
|
|
|
|
const toggleZap = () => {
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
zap: !newSettings.zap,
|
|
}));
|
|
};
|
|
|
|
const toggleNsfw = () => {
|
|
setNewSettings((prev) => ({
|
|
...prev,
|
|
nsfw: !newSettings.nsfw,
|
|
}));
|
|
};
|
|
|
|
const updateSettings = useDebouncedCallback(() => {
|
|
NostrQuery.setSettings(newSettings);
|
|
}, 200);
|
|
|
|
useEffect(() => {
|
|
updateSettings();
|
|
}, [newSettings]);
|
|
|
|
return (
|
|
<div className="mx-auto w-full max-w-xl">
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="font-semibold text-sm text-neutral-700 dark:text-neutral-300">
|
|
General
|
|
</h2>
|
|
<div className="flex flex-col divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl px-3">
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Notification</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
By turning on push notifications, you'll start getting
|
|
notifications from Lume directly.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.notification}
|
|
onClick={() => toggleNofitication()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Relay Hint</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
Automatically connect to the necessary relay suggested by
|
|
Relay Hint when fetching a new event.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.gossip}
|
|
onClick={() => toggleGossip()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Enhanced Privacy</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
Lume presents external resources like images, videos, or link
|
|
previews in plain text.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.enhancedPrivacy}
|
|
onClick={() => toggleEnhancedPrivacy()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-medium">Auto Update</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
Automatically download and install new version.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.autoUpdate}
|
|
onClick={() => toggleAutoUpdate()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold">Filter sensitive content</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
By default, Lume will display all content which have Content
|
|
Warning tag, it's may include NSFW content.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.nsfw}
|
|
onClick={() => toggleNsfw()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="font-semibold text-sm text-neutral-700 dark:text-neutral-300">
|
|
Interface
|
|
</h2>
|
|
<div className="flex flex-col divide-y divide-black/10 dark:divide-white/10 bg-black/5 dark:bg-white/5 rounded-xl px-3">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex w-full items-start justify-between gap-4 py-3">
|
|
<div className="flex-1">
|
|
<h3 className="font-semibold">Zap</h3>
|
|
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
|
Show the Zap button in each note and user's profile screen,
|
|
use for send bitcoin tip to other users.
|
|
</p>
|
|
</div>
|
|
<div className="w-36 flex justify-end shrink-0">
|
|
<Switch.Root
|
|
checked={newSettings.zap}
|
|
onClick={() => toggleZap()}
|
|
className="relative h-7 w-12 shrink-0 cursor-default rounded-full bg-black/10 outline-none data-[state=checked]:bg-blue-500 dark:bg-white/10"
|
|
>
|
|
<Switch.Thumb className="block size-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
|
|
</Switch.Root>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|