filter and layout improvements. added created at and modified at date/time stamps
This commit is contained in:
+46
-38
@@ -12,37 +12,48 @@ import { createSignal } from "solid-js";
|
||||
|
||||
export const SettingsView: Component = () => {
|
||||
return (
|
||||
<div class="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 class="w-full max-w-2xl mx-auto py-4 sm:py-10 px-4 sm:px-0 space-y-8 sm:space-y-12 animate-in fade-in slide-in-from-bottom-2 duration-500 min-w-0 overflow-hidden text-balance">
|
||||
<header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h1 class="text-2xl sm:text-4xl font-black tracking-tighter">Settings</h1>
|
||||
<p class="text-[10px] sm:text-xs text-muted-foreground truncate opacity-70 font-mono tracking-tight" title={pb.authStore.model?.email}>
|
||||
{pb.authStore.model?.email}
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => { pb.authStore.clear(); location.reload(); }}>Sign Out</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full sm:w-auto font-black uppercase tracking-widest text-[10px] h-10 sm:h-8 rounded-xl shadow-sm border-border/60"
|
||||
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">
|
||||
<section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<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 class="flex justify-start sm:justify-end">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</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">
|
||||
<section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="space-y-0.5 min-w-0">
|
||||
<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>
|
||||
<p class="text-sm text-muted-foreground truncate sm:whitespace-normal">Adjust the time scale for your strategy grid.</p>
|
||||
</div>
|
||||
<div class="w-[120px]">
|
||||
<div class="w-full sm:w-[120px] shrink-0">
|
||||
<Select
|
||||
value={store.matrixScaleDays.toString()}
|
||||
onChange={(val) => val && setMatrixScaleDays(parseInt(val))}
|
||||
@@ -50,7 +61,7 @@ export const SettingsView: Component = () => {
|
||||
placeholder="Select days"
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue} days</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-9">
|
||||
<SelectTrigger class="h-9 w-full">
|
||||
<span class="text-sm font-medium">{store.matrixScaleDays} days</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
@@ -59,7 +70,7 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4">
|
||||
<section class="p-4 sm: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">
|
||||
<Hash size={16} />
|
||||
@@ -79,20 +90,20 @@ export const SettingsView: Component = () => {
|
||||
const [tempName, setTempName] = createSignal(tagName);
|
||||
|
||||
const handleRename = () => {
|
||||
if (tempName() !== tagName) {
|
||||
if (tempName() && tempName() !== tagName) {
|
||||
renameTagDefinition(tagName, tempName());
|
||||
}
|
||||
setIsEditingName(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex items-center justify-between p-3 rounded-xl bg-muted/30 border border-border/50">
|
||||
<div class="flex items-center gap-3 flex-1">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded-xl bg-muted/30 border border-border/50 gap-3 sm:gap-4">
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div class={cn("w-2 h-2 rounded-full shrink-0", val > 5 ? "bg-green-500" : val < 5 ? "bg-red-500" : "bg-gray-400")} />
|
||||
|
||||
{isEditingName() ? (
|
||||
<input
|
||||
class="flex h-7 w-48 rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
||||
class="flex h-7 min-w-0 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
value={tempName()}
|
||||
onInput={(e) => setTempName(e.currentTarget.value)}
|
||||
onBlur={handleRename}
|
||||
@@ -101,7 +112,7 @@ export const SettingsView: Component = () => {
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
class="font-medium cursor-pointer hover:underline decoration-dashed underline-offset-4"
|
||||
class="font-medium cursor-pointer hover:underline decoration-dashed underline-offset-4 truncate"
|
||||
onClick={() => setIsEditingName(true)}
|
||||
title="Click to rename"
|
||||
>
|
||||
@@ -110,7 +121,7 @@ export const SettingsView: Component = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center grow sm:grow-0 justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 border-border/20">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-muted-foreground font-bold uppercase tracking-wider">Val</span>
|
||||
<select
|
||||
@@ -144,13 +155,13 @@ export const SettingsView: Component = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4">
|
||||
<div class="space-y-0.5">
|
||||
<section class="p-4 sm:p-5 rounded-2xl border border-border bg-card shadow-sm space-y-4 min-w-0 overflow-hidden">
|
||||
<div class="space-y-0.5 min-w-0">
|
||||
<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>
|
||||
<p class="text-sm text-muted-foreground truncate">Items are permanently deleted after 7 days.</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
@@ -162,35 +173,32 @@ export const SettingsView: Component = () => {
|
||||
{(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 class="flex flex-col sm:flex-row sm:items-center justify-between p-3.5 rounded-2xl bg-muted/20 border border-border/40 group hover:bg-muted/40 transition-all gap-3 min-w-0">
|
||||
<div class="min-w-0 flex-1 px-1">
|
||||
<p class="font-semibold truncate text-sm sm:text-base">{task.title || "Untitled"}</p>
|
||||
<p class="text-[11px] text-muted-foreground opacity-70">Expires in {Math.max(0, daysLeft)} days</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="flex items-center justify-end gap-2 shrink-0 border-t sm:border-t-0 pt-3 sm:pt-0 border-border/10">
|
||||
<Button
|
||||
variant="ghost"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
class="h-8 px-2 text-xs hover:bg-green-500/10 hover:text-green-600"
|
||||
class="h-9 px-4 text-[10px] font-bold uppercase tracking-widest hover:bg-green-500/10 hover:text-green-600 bg-background/50 border border-border/50 transition-all rounded-xl shadow-sm"
|
||||
onClick={() => {
|
||||
restoreTask(task.id);
|
||||
toast.success("Task restored");
|
||||
}}
|
||||
>
|
||||
<Undo2 size={14} class="mr-1" />
|
||||
<Undo2 size={14} class="mr-2" />
|
||||
Recover
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 hover:bg-red-500/10 hover:text-red-600"
|
||||
class="h-9 w-9 hover:bg-red-500/10 hover:text-red-600 rounded-xl border border-border/50 bg-background/30"
|
||||
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
|
||||
});
|
||||
toast.error("Task permanently deleted");
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user