Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added templates and fixed UX for virtual keyboard opening when opening a task

Browse Source
This commit is contained in:
Timothy Cardoza
2026-01-31 17:35:22 -06:00
parent 2e17ffee27
commit 064aca3ced
4 changed files with 544 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TaskDetail.tsx
+41 -13
View File
@@ -1,8 +1,8 @@
import { type Component, createEffect, createSignal, For } from "solid-js";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { type Task, removeTask, restoreTask, updateTask } from "@/store";
import { type Task, removeTask, restoreTask, updateTask, saveTaskAsTemplate } from "@/store";
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X } from "lucide-solid";
import { ArrowUpCircle, Clock, Calendar, Type, Trash2, X, Copy } from "lucide-solid";
import { calculateDateFromUrgency, calculateUrgencyFromDate } from "@/store";
import { Button } from "./ui/button";
import { TagPicker } from "./TagPicker";
@@ -81,7 +81,16 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
return (
<Sheet open={props.isOpen} onOpenChange={(open) => !open && props.onClose()}>
<SheetContent hideCloseButton class="w-full sm:max-w-2xl px-0 sm:px-0 flex flex-col h-full bg-background border-l border-border shadow-2xl">
<SheetContent
hideCloseButton
onOpenAutoFocus={(e) => {
// Prevent auto-focus on mobile to avoid keyboard popup
if (window.innerWidth < 768) {
e.preventDefault();
}
}}
class="w-full sm:max-w-2xl px-0 sm:px-0 flex flex-col h-full bg-background border-l border-border shadow-2xl"
>
{/* Header Area */}
<div class="px-6 pt-6 pb-2 shrink-0">
<textarea
@@ -263,16 +272,35 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
<span class="text-xs font-bold uppercase tracking-wider">Delete</span>
</Button>
{/* Close button (Mobile only) */}
<Button
variant="ghost"
size="sm"
class="md:hidden h-9 px-3 gap-2 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={() => props.onClose()}
>
<X size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Close</span>
</Button>
<div class="flex items-center gap-2">
{/* Save as Template (Desktop + Mobile) */}
<Button
variant="ghost"
size="sm"
class="h-9 px-3 gap-2 hover:bg-primary/10 hover:text-primary text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={async () => {
const name = prompt("Enter a name for this template:");
if (name) {
await saveTaskAsTemplate(props.task.id, name);
toast.success(`Template "${name}" created`);
}
}}
>
<Copy size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Template</span>
</Button>
{/* Close button (Mobile only) */}
<Button
variant="ghost"
size="sm"
class="md:hidden h-9 px-3 gap-2 hover:bg-muted text-muted-foreground transition-all rounded-xl border border-border/40"
onClick={() => props.onClose()}
>
<X size={16} />
<span class="text-xs font-bold uppercase tracking-wider">Close</span>
</Button>
</div>
</div>
</SheetContent>
</Sheet>