UI improvements and initial loading screen color
This commit is contained in:
+98
-1
@@ -6,10 +6,107 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>tasgrid</title>
|
||||
<script>
|
||||
(function () {
|
||||
const storedTheme = localStorage.getItem("tasgrid-theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
const theme = (storedTheme === "system" || !storedTheme) ? systemTheme : storedTheme;
|
||||
document.documentElement.classList.add(theme);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-light: #ffffff;
|
||||
--bg-dark: #020617;
|
||||
--primary: #0f172a;
|
||||
--primary-dark: #f8fafc;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg: var(--bg-dark);
|
||||
--text: var(--primary-dark);
|
||||
}
|
||||
|
||||
html.light {
|
||||
--bg: var(--bg-light);
|
||||
--text: var(--primary);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#splash {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.05em;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.loader-bar {
|
||||
width: 140px;
|
||||
height: 2px;
|
||||
background: rgba(128, 128, 128, 0.2);
|
||||
border-radius: 99px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.loader-progress {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
background: var(--text);
|
||||
border-radius: 99px;
|
||||
animation: progressMove 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes slideUpFade {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progressMove {
|
||||
0% {
|
||||
left: -30%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="root">
|
||||
<div id="splash">
|
||||
<div class="logo-text">Tasgrid</div>
|
||||
<div class="loader-bar">
|
||||
<div class="loader-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -34,6 +34,13 @@ const App: Component = () => {
|
||||
import('./views/PriorityView');
|
||||
import('./views/MatrixView');
|
||||
import('./views/SettingsView');
|
||||
|
||||
// Remove splash screen after high priority work is done
|
||||
const splash = document.getElementById('splash');
|
||||
if (splash) {
|
||||
splash.style.opacity = '0';
|
||||
setTimeout(() => splash.remove(), 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
+180
-219
@@ -1,5 +1,5 @@
|
||||
import { type Component, createSignal, For, Show } from "solid-js";
|
||||
import { Search, X, Hash, ChevronDown, ArrowUpCircle, Clock } from "lucide-solid";
|
||||
import { Search, X, Hash, ArrowUpCircle, Clock } from "lucide-solid";
|
||||
import { store, setFilter, clearFilter } from "@/store";
|
||||
import { Button } from "./ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||
|
||||
export const FilterBar: Component = () => {
|
||||
const [isExpanded, setIsExpanded] = createSignal(false);
|
||||
const [isOpen, setIsOpen] = createSignal(false);
|
||||
|
||||
const hasActiveFilters = () => {
|
||||
const f = store.filter;
|
||||
@@ -17,227 +17,188 @@ export const FilterBar: Component = () => {
|
||||
|
||||
const allTags = () => Object.keys(store.tagDefinitions || {}).sort();
|
||||
|
||||
const FilterControls: Component<{ class?: string }> = (props) => (
|
||||
<div class={cn("flex flex-col md:flex-row items-stretch md:items-center gap-3", props.class)}>
|
||||
{/* Main Search */}
|
||||
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0 min-w-0">
|
||||
<Search size={16} class="text-muted-foreground shrink-0" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tasks..."
|
||||
value={store.filter.query}
|
||||
onInput={(e) => setFilter({ query: e.currentTarget.value })}
|
||||
class="bg-transparent border-none focus:ring-0 text-sm flex-1 md:w-40 h-8 outline-none placeholder:text-muted-foreground/50 min-w-0"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Priority Range */}
|
||||
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Priority</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Select
|
||||
value={store.filter.priorityMin.toString()}
|
||||
onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
|
||||
<ArrowUpCircle size={12} class="text-muted-foreground/70" />
|
||||
<span>{store.filter.priorityMin}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
<span class="text-muted-foreground/50">-</span>
|
||||
<Select
|
||||
value={store.filter.priorityMax.toString()}
|
||||
onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
|
||||
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
|
||||
<span>{store.filter.priorityMax}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Urgency Range */}
|
||||
<div class="flex items-center gap-2 px-2 border-b md:border-b-0 md:border-r border-border/50 pb-2 md:pb-0">
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Urgency</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<Select
|
||||
value={store.filter.urgencyMin.toString()}
|
||||
onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 w-12 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground flex items-center gap-1">
|
||||
<Clock size={12} class="text-muted-foreground/70" />
|
||||
<span>{store.filter.urgencyMin}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
<span class="text-muted-foreground/50">-</span>
|
||||
<Select
|
||||
value={store.filter.urgencyMax.toString()}
|
||||
onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
|
||||
options={["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 w-8 p-0 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground justify-center">
|
||||
<span>{store.filter.urgencyMax}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div class="px-2 flex items-center gap-2 min-w-[120px]">
|
||||
<Hash size={14} class="text-muted-foreground" />
|
||||
<div class="flex flex-wrap gap-1 max-w-[200px]">
|
||||
<Show when={store.filter.tags.length === 0}>
|
||||
<Select
|
||||
value=""
|
||||
onChange={(val) => {
|
||||
if (val && !store.filter.tags.includes(val)) {
|
||||
setFilter({ tags: [...store.filter.tags, val] });
|
||||
}
|
||||
}}
|
||||
options={allTags()}
|
||||
placeholder="Add Tag..."
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 p-0 bg-transparent border-none shadow-none focus:ring-0 text-[10px] italic text-muted-foreground">
|
||||
<span>Add Tag...</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</Show>
|
||||
<For each={store.filter.tags}>
|
||||
{(tag) => (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="h-5 px-1 text-[10px] gap-0.5 cursor-pointer hover:bg-destructive/20 border-border/50"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFilter({ tags: store.filter.tags.filter(t => t !== tag) });
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
<X size={8} />
|
||||
</Badge>
|
||||
)}
|
||||
</For>
|
||||
<Show when={store.filter.tags.length > 0}>
|
||||
<Select
|
||||
value=""
|
||||
onChange={(val) => {
|
||||
if (val && !store.filter.tags.includes(val)) {
|
||||
setFilter({ tags: [...store.filter.tags, val] });
|
||||
}
|
||||
}}
|
||||
options={allTags()}
|
||||
placeholder="+"
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-5 w-5 p-0 bg-muted/50 border-none shadow-none focus:ring-0 text-[10px] rounded-full flex items-center justify-center">
|
||||
<span>+</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions for Desktop */}
|
||||
<div class="hidden md:flex items-center gap-1 pl-2 ml-auto">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
onClick={clearFilter}
|
||||
title="Clear all filters"
|
||||
>
|
||||
<X size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
>
|
||||
<ChevronDown size={16} class="rotate-90" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Clear All for Mobile */}
|
||||
<div class="flex md:hidden items-center pt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-full text-xs h-8 gap-2"
|
||||
onClick={clearFilter}
|
||||
>
|
||||
<X size={14} />
|
||||
Clear All Filters
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="flex items-center gap-2">
|
||||
{/* Desktop View: Inline expansion */}
|
||||
<div class="hidden md:flex items-center">
|
||||
{!isExpanded() ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class={cn(
|
||||
"h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
|
||||
hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
|
||||
<div class="fixed top-4 right-5 sm:right-6 z-[60]">
|
||||
<Popover open={isOpen()} onOpenChange={setIsOpen}>
|
||||
<PopoverTrigger
|
||||
as={Button}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class={cn(
|
||||
"bg-background/80 backdrop-blur-sm border border-border hover:bg-muted shadow-sm transition-all duration-300",
|
||||
hasActiveFilters() && "border-primary/50 ring-1 ring-primary/20",
|
||||
isOpen() && "bg-muted ring-1 ring-border"
|
||||
)}
|
||||
title="Filters & Search"
|
||||
>
|
||||
<div class="relative">
|
||||
<Search size={18} class={cn("transition-transform duration-300", isOpen() && "scale-110")} />
|
||||
{hasActiveFilters() && !isOpen() && (
|
||||
<div class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary animate-pulse border border-background" />
|
||||
)}
|
||||
onClick={() => setIsExpanded(true)}
|
||||
>
|
||||
<Search size={18} />
|
||||
<span class="text-sm font-medium">Filter</span>
|
||||
{hasActiveFilters() && (
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<div class="bg-card border border-border/50 p-2 rounded-xl shadow-lg animate-in fade-in slide-in-from-top-4 duration-300 w-auto overflow-hidden">
|
||||
<FilterControls />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[calc(100vw-2rem)] sm:w-[480px] p-0 overflow-hidden bg-card border-border shadow-2xl rounded-2xl animate-in fade-in zoom-in-95 duration-200">
|
||||
{/* Header */}
|
||||
<div class="px-4 py-3 border-b border-border/50 bg-muted/20 flex items-center justify-between">
|
||||
<h3 class="text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
|
||||
<Search size={12} />
|
||||
Filters & Search
|
||||
</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<Show when={hasActiveFilters()}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="h-7 px-2 text-[10px] font-bold uppercase tracking-wider text-muted-foreground hover:text-destructive"
|
||||
onClick={clearFilter}
|
||||
>
|
||||
Clear All
|
||||
</Button>
|
||||
</Show>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-7 w-7 rounded-lg"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<X size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile View: Popover */}
|
||||
<div class="flex md:hidden items-center">
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
as={Button}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class={cn(
|
||||
"h-9 px-3 gap-2 text-muted-foreground hover:text-foreground transition-all duration-300",
|
||||
hasActiveFilters() && "text-primary bg-primary/10 hover:bg-primary/20"
|
||||
)}
|
||||
>
|
||||
<Search size={18} />
|
||||
<span class="text-sm font-medium">Filter</span>
|
||||
{hasActiveFilters() && (
|
||||
<div class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
|
||||
)}
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-[calc(100vw-2rem)] sm:w-96 p-4">
|
||||
<FilterControls class="w-full" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
{/* Controls Grid */}
|
||||
<div class="p-4 space-y-6">
|
||||
{/* Search Input */}
|
||||
<div class="space-y-2">
|
||||
<div class="relative group">
|
||||
<Search size={16} class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/50 group-focus-within:text-primary transition-colors" />
|
||||
<input
|
||||
ref={(el) => {
|
||||
if (el) setTimeout(() => el.focus(), 50);
|
||||
}}
|
||||
type="text"
|
||||
placeholder="Search tasks, descriptions, tags..."
|
||||
value={store.filter.query}
|
||||
onInput={(e) => setFilter({ query: e.currentTarget.value })}
|
||||
class="w-full bg-muted/30 border border-border/50 rounded-xl pl-10 pr-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/40 transition-all placeholder:text-muted-foreground/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{/* Priority Range */}
|
||||
<div class="space-y-2.5">
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Priority Range</label>
|
||||
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
|
||||
<Select
|
||||
value={store.filter.priorityMin.toString()}
|
||||
onChange={(val) => val && setFilter({ priorityMin: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
|
||||
<div class="flex items-center gap-2 justify-center">
|
||||
<ArrowUpCircle size={14} class="text-muted-foreground/70" />
|
||||
<span>Min: {store.filter.priorityMin}</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
<div class="w-px h-4 bg-border/50" />
|
||||
<Select
|
||||
value={store.filter.priorityMax.toString()}
|
||||
onChange={(val) => val && setFilter({ priorityMax: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
|
||||
<div class="flex items-center gap-2 justify-center">
|
||||
<span>Max: {store.filter.priorityMax}</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Urgency Range */}
|
||||
<div class="space-y-2.5">
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1">Urgency Range</label>
|
||||
<div class="flex items-center gap-2 bg-muted/20 p-1 rounded-xl border border-border/30">
|
||||
<Select
|
||||
value={store.filter.urgencyMin.toString()}
|
||||
onChange={(val) => val && setFilter({ urgencyMin: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
|
||||
<div class="flex items-center gap-2 justify-center">
|
||||
<Clock size={14} class="text-muted-foreground/70" />
|
||||
<span>Min: {store.filter.urgencyMin}</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
<div class="w-px h-4 bg-border/50" />
|
||||
<Select
|
||||
value={store.filter.urgencyMax.toString()}
|
||||
onChange={(val) => val && setFilter({ urgencyMax: parseInt(val) })}
|
||||
options={["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]}
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-9 flex-1 bg-transparent border-none shadow-none focus:ring-0 text-xs font-bold text-foreground">
|
||||
<div class="flex items-center gap-2 justify-center">
|
||||
<span>Max: {store.filter.urgencyMax}</span>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags Multi-select */}
|
||||
<div class="space-y-2.5">
|
||||
<label class="text-[10px] font-black uppercase tracking-widest text-muted-foreground ml-1 flex items-center justify-between">
|
||||
Filter by Tags
|
||||
<span class="text-[9px] lowercase font-medium opacity-50 tracking-normal">Click to remove</span>
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2 min-h-[44px] p-2 bg-muted/10 border border-dashed border-border/60 rounded-xl">
|
||||
<For each={store.filter.tags}>
|
||||
{(tag) => (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="h-7 px-2.5 rounded-lg text-xs gap-2 cursor-pointer transition-all hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30 border-border/40"
|
||||
onClick={() => setFilter({ tags: store.filter.tags.filter(t => t !== tag) })}
|
||||
>
|
||||
<Hash size={12} class="opacity-50" />
|
||||
{tag}
|
||||
<X size={10} />
|
||||
</Badge>
|
||||
)}
|
||||
</For>
|
||||
<Select
|
||||
value=""
|
||||
onChange={(val) => {
|
||||
if (val && !store.filter.tags.includes(val)) {
|
||||
setFilter({ tags: [...store.filter.tags, val] });
|
||||
}
|
||||
}}
|
||||
options={allTags()}
|
||||
placeholder="Add tag..."
|
||||
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
|
||||
>
|
||||
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
|
||||
<span>+ Tag</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent />
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -64,11 +64,9 @@ export const Layout: Component<LayoutProps> = (props) => {
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden pb-32 sm:pb-6 relative scroll-smooth">
|
||||
<div class="w-full max-w-screen-2xl mx-auto p-3 sm:p-6 lg:p-10 space-y-6 sm:space-y-8">
|
||||
<div class="w-full max-w-screen-2xl mx-auto px-4 sm:px-8 lg:px-12 pt-16 sm:pt-20 pb-8 space-y-6 sm:space-y-8">
|
||||
<Show when={props.currentView.toLowerCase() !== "settings"}>
|
||||
<div class="sticky top-0 z-40 flex items-center justify-end py-2 -mx-3 px-3 md:relative md:top-auto md:z-auto md:py-0 md:mx-0 md:px-0 bg-background/80 backdrop-blur-md md:bg-transparent md:backdrop-blur-none transition-all duration-300">
|
||||
<FilterBar />
|
||||
</div>
|
||||
<FilterBar />
|
||||
</Show>
|
||||
|
||||
{props.children}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type Component, For } from "solid-js";
|
||||
import { type Component, For, Show } from "solid-js";
|
||||
import { LayoutDashboard, ListTodo, Settings, Clock, ArrowUpCircle, PanelLeftClose } from "lucide-solid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "./ui/button";
|
||||
@@ -57,19 +57,28 @@ export const Sidebar: Component<{
|
||||
)}
|
||||
>
|
||||
<div class={cn("p-4 flex items-center justify-between", !props.isLocked && "pl-14")}>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-primary px-2">Tasgrid</h1>
|
||||
<h1 class={cn(
|
||||
"text-xl font-bold tracking-tighter text-primary px-2 transition-opacity",
|
||||
(props.isLocked || props.isPeeking)
|
||||
? "opacity-100 duration-500 delay-[50ms]"
|
||||
: "opacity-0 duration-116 delay-0"
|
||||
)}>
|
||||
Tasgrid
|
||||
</h1>
|
||||
{/* Close Button - Only visible when Locked (to collapse) or Peeking (manual close) */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => {
|
||||
props.setIsLocked(false);
|
||||
props.setIsPeeking(false);
|
||||
}}
|
||||
>
|
||||
<PanelLeftClose size={16} />
|
||||
</Button>
|
||||
<Show when={props.isLocked}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => {
|
||||
props.setIsLocked(false);
|
||||
props.setIsPeeking(false);
|
||||
}}
|
||||
>
|
||||
<PanelLeftClose size={16} />
|
||||
</Button>
|
||||
</Show>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1 mt-2">
|
||||
<For each={navItems.filter(i => i.view !== "settings")}>
|
||||
|
||||
@@ -24,7 +24,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
|
||||
return (
|
||||
<div
|
||||
class={cn(
|
||||
"group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
|
||||
"group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-500 hover:duration-100 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
|
||||
props.task.completed && "opacity-60"
|
||||
)}
|
||||
onClick={() => setActiveTaskId(props.task.id)}
|
||||
|
||||
@@ -114,6 +114,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Custom Scrollbar --- */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border: 3px solid var(--background);
|
||||
background-clip: content-box;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted-foreground);
|
||||
border: 3px solid var(--background);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) var(--background);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-exit-active {
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
Reference in New Issue
Block a user