122 lines
7.0 KiB
TypeScript
122 lines
7.0 KiB
TypeScript
import { type Component, For } from "solid-js";
|
|
import { ThemeToggle } from "../components/ThemeToggle";
|
|
import { store, restoreTask, deleteTaskPermanently, setMatrixScaleDays } from "@/store";
|
|
import { Trash2, Undo2, ArrowLeftRight } from "lucide-solid";
|
|
import { Button } from "@/components/ui/button";
|
|
import { toast } from "solid-sonner";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
|
|
import { pb } from "@/lib/pocketbase";
|
|
|
|
export const SettingsView: Component = () => {
|
|
return (
|
|
<div class="px-6 py-10 max-w-2xl mx-auto space-y-10 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
|
<header class="space-y-1 flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold tracking-tight">Settings</h1>
|
|
<p class="text-muted-foreground">{pb.authStore.model?.email}</p>
|
|
</div>
|
|
<Button variant="ghost" size="sm" onClick={() => { pb.authStore.clear(); location.reload(); }}>Sign Out</Button>
|
|
</header>
|
|
|
|
<div class="grid gap-6">
|
|
<section class="p-5 rounded-2xl border border-border bg-card shadow-sm">
|
|
<div class="flex items-center justify-between">
|
|
<div class="space-y-0.5">
|
|
<h3 class="text-base font-semibold">Appearance</h3>
|
|
<p class="text-sm text-muted-foreground">Select your preferred color scheme.</p>
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Matrix Configuration */}
|
|
<section class="p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="space-y-0.5">
|
|
<h3 class="text-base font-semibold flex items-center gap-2">
|
|
<ArrowLeftRight size={16} />
|
|
Matrix Horizon
|
|
</h3>
|
|
<p class="text-sm text-muted-foreground">Adjust the time scale for your strategy grid.</p>
|
|
</div>
|
|
<div class="w-[120px]">
|
|
<Select
|
|
value={store.matrixScaleDays.toString()}
|
|
onChange={(val) => val && setMatrixScaleDays(parseInt(val))}
|
|
options={["7", "14", "30", "60", "90"]}
|
|
placeholder="Select days"
|
|
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue} days</SelectItem>}
|
|
>
|
|
<SelectTrigger class="h-9">
|
|
<span class="text-sm font-medium">{store.matrixScaleDays} days</span>
|
|
</SelectTrigger>
|
|
<SelectContent />
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4">
|
|
<div class="space-y-0.5">
|
|
<h3 class="text-base font-semibold flex items-center gap-2">
|
|
<Trash2 size={16} />
|
|
Trash
|
|
</h3>
|
|
<p class="text-sm text-muted-foreground">Items are permanently deleted after 7 days.</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<For each={store.tasks.filter(t => t.deletedAt)} fallback={
|
|
<div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
|
|
Trash is empty.
|
|
</div>
|
|
}>
|
|
{(task) => {
|
|
const daysLeft = Math.ceil(((task.deletedAt || 0) + (7 * 24 * 60 * 60 * 1000) - Date.now()) / (1000 * 60 * 60 * 24));
|
|
return (
|
|
<div class="flex items-center justify-between p-3 rounded-xl bg-muted/30 border border-border/50 group hover:bg-muted/50 transition-colors">
|
|
<div class="min-w-0 flex-1 mr-4">
|
|
<p class="font-medium truncate">{task.title || "Untitled"}</p>
|
|
<p class="text-[10px] text-muted-foreground">Expires in {Math.max(0, daysLeft)} days</p>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
class="h-8 px-2 text-xs hover:bg-green-500/10 hover:text-green-600"
|
|
onClick={() => {
|
|
restoreTask(task.id);
|
|
toast.success("Task restored");
|
|
}}
|
|
>
|
|
<Undo2 size={14} class="mr-1" />
|
|
Recover
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
class="h-8 w-8 hover:bg-red-500/10 hover:text-red-600"
|
|
onClick={() => {
|
|
// For permanent deletion, still using confirm for safety but ensuring toast follows
|
|
if (confirm("Permanently delete this task? This cannot be undone.")) {
|
|
deleteTaskPermanently(task.id);
|
|
toast.error("Task permanently deleted", {
|
|
duration: 3000
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<Trash2 size={14} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|