added a help guide
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
import { type Component, Show } from "solid-js";
|
||||
import { ArrowLeft, ExternalLink, HelpCircle, Zap, ShieldCheck, ListTodo, LayoutDashboard, Snowflake, Pickaxe, Clock, ArrowUpCircle, Search, Palette, Trash2, Smartphone, Users, Box, BarChart3, Upload } from "lucide-solid";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
interface HelpViewProps {
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
export const HelpView: Component<HelpViewProps> = (props) => {
|
||||
return (
|
||||
<div class="w-full max-w-3xl mx-auto py-4 sm:py-10 px-4 sm:px-0 animate-in fade-in slide-in-from-bottom-2 duration-500">
|
||||
<header class="flex items-center gap-4 mb-8">
|
||||
<Show when={props.onBack}>
|
||||
<Button variant="ghost" size="icon" onClick={() => props.onBack?.()} class="h-10 w-10 rounded-xl">
|
||||
<ArrowLeft size={20} />
|
||||
</Button>
|
||||
</Show>
|
||||
<div>
|
||||
<h1 class="text-2xl sm:text-4xl font-black tracking-tighter flex items-center gap-3">
|
||||
<HelpCircle size={32} class="text-primary hidden sm:block" />
|
||||
User Guide
|
||||
</h1>
|
||||
<p class="text-[0.625rem] sm:text-xs text-muted-foreground font-mono uppercase tracking-widest opacity-70">
|
||||
Everything you need to know about TaskGrid
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="space-y-12 pb-20">
|
||||
{/* Welcome & Access */}
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||
<ShieldCheck size={20} class="text-primary" />
|
||||
Welcome & Access
|
||||
</h2>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="p-4 rounded-2xl bg-muted/30 border border-border/50">
|
||||
<p class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground mb-1">Website</p>
|
||||
<a href="https://tasgrid.ccllc.pro" target="_blank" class="text-sm font-bold text-primary flex items-center gap-1 hover:underline">
|
||||
tasgrid.ccllc.pro
|
||||
<ExternalLink size={12} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-4 rounded-2xl bg-muted/30 border border-border/50">
|
||||
<p class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground mb-1">Login</p>
|
||||
<p class="text-sm font-medium">Use your <strong>Cardoza Construction email</strong> (the same one you use for Outlook). Your password should match your email password as well.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Basic Features */}
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||
<Zap size={20} class="text-yellow-500" />
|
||||
Basic Features (Getting Started)
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-bold text-lg">Creating Your First Task</h3>
|
||||
<ol class="space-y-3 pl-1">
|
||||
{[
|
||||
<>Click the <strong>large plus (+) sign</strong> in the bottom right corner (or type <code>control + k</code>).</>,
|
||||
<><strong>Title</strong>: Enter a clear name for what needs to be done.</>,
|
||||
<><strong>Priority</strong>: Choose from 1 (trivial) to 10 (absolutely necessary).</>,
|
||||
<><strong>Urgency & Due Date</strong>: These are linked!
|
||||
<ul class="mt-2 space-y-1 ml-4 list-disc text-xs text-muted-foreground">
|
||||
<li>Pick an <strong>Urgency level</strong> (10 is today, 1 is 6 months from now), and the due date will be calculated for you.</li>
|
||||
<li>Alternatively, pick a <strong>Due Date</strong> using the calendar, and the urgency will adjust automatically.</li>
|
||||
</ul>
|
||||
</>,
|
||||
<><strong>Size</strong>: This defaults to <strong>5</strong>. Adjust it if the task is very small (15 mins) or very large (multiple days).</>,
|
||||
<><strong>Description</strong>: Add notes or details. Use the <strong>forward slash (/)</strong> to reveal formatting options like bold text, checklists, and even adding images.</>,
|
||||
<>Click <strong>Create Task</strong>.</>
|
||||
].map((item, i) => (
|
||||
<li class="flex gap-4 items-start">
|
||||
<span class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-bold">{i + 1}</span>
|
||||
<div class="text-sm leading-relaxed">{item}</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Viewing Your Tasks</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">TaskGrid sorts your tasks so you don't have to. The primary views are:</p>
|
||||
<div class="grid gap-4">
|
||||
{[
|
||||
{ icon: ListTodo, label: "Focus (Default)", desc: "Your most important tasks, ranked by a combination of Urgency and Priority." },
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
label: "Strategy Matrix",
|
||||
desc: "A 4-quadrant grid mapping Urgency vs. Priority.",
|
||||
sub: [
|
||||
{ l: "Do First", d: "Urgent & Important" },
|
||||
{ l: "Schedule", d: "Important but not urgent yet" },
|
||||
{ l: "Delegate", d: "Urgent but not important" },
|
||||
{ l: "Eliminate", d: "Neither urgent nor important" }
|
||||
]
|
||||
},
|
||||
{ icon: Snowflake, label: "Snowball", desc: "Shows your smallest tasks first to help you build momentum." },
|
||||
{ icon: Pickaxe, label: "Dig In", desc: "Shows your largest tasks first for when you have time to focus." },
|
||||
{ icon: Clock, label: "Urgency", desc: "Sorts tasks purely by when they are due." },
|
||||
{ icon: ArrowUpCircle, label: "Priority", desc: "Sorts tasks purely by how important they are." }
|
||||
].map(view => (
|
||||
<div class="p-4 rounded-xl border border-border/50 bg-card/50 flex gap-4 items-start">
|
||||
<div class="mt-1 text-primary p-2 rounded-lg bg-primary/5">
|
||||
<view.icon size={18} />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm font-bold">{view.label}</p>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">{view.desc}</p>
|
||||
{view.sub && (
|
||||
<div class="grid grid-cols-2 gap-2 pt-2 border-t border-border/20">
|
||||
{view.sub.map(s => (
|
||||
<div>
|
||||
<p class="text-[0.625rem] font-black uppercase text-primary/70">{s.l}</p>
|
||||
<p class="text-[0.625rem] text-muted-foreground">{s.d}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Other Info</h3>
|
||||
<div class="grid gap-3 sm:grid-cols-3">
|
||||
{[
|
||||
{ icon: Search, label: "Search & Filters", desc: "Use the bar at the top right to find specific tasks or filter by priority, urgency, or tasks edited today." },
|
||||
{ icon: Palette, label: "Themes", desc: "Switch between Light Mode and Dark Mode in the Settings." },
|
||||
{ icon: Trash2, label: "Trash", desc: "Deleted tasks are kept for 7 days before being permanently removed. You can recover them in Settings." }
|
||||
].map(info => (
|
||||
<div class="p-3 rounded-xl border border-border/50 bg-card/10">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<info.icon size={14} class="text-primary" />
|
||||
<p class="text-xs font-bold">{info.label}</p>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">{info.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Mobile Installation</h3>
|
||||
<p class="text-sm text-muted-foreground mb-3">TaskGrid works like a dedicated app on your phone:</p>
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="p-4 rounded-xl bg-primary/5 border border-primary/10">
|
||||
<p class="text-xs font-bold flex items-center gap-2 mb-2"><Smartphone size={14} /> Android</p>
|
||||
<p class="text-xs text-muted-foreground">Tap the three dots in Chrome, select "Add to Home Screen," then "Install."</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-xl bg-primary/5 border border-primary/10">
|
||||
<p class="text-xs font-bold flex items-center gap-2 mb-2"><Smartphone size={14} /> iPhone</p>
|
||||
<p class="text-xs text-muted-foreground">Tap the Share icon in Safari and select "Add to Home Screen."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Advanced Features */}
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||
<Zap size={20} class="text-primary" />
|
||||
Advanced Features (Teams & Automation)
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-bold text-lg">Sharing & Collaboration</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">Collaboration in TaskGrid is flexible and transparent:</p>
|
||||
<ol class="space-y-4 text-sm leading-relaxed">
|
||||
<li>
|
||||
<strong>1. Manual Sharing</strong>: Open a task and use the <strong>Share</strong> menu to add a specific person.
|
||||
<ul class="ml-4 mt-1 list-disc text-muted-foreground">
|
||||
<li>You can also <strong>unshare and split</strong> tasks here. Unshare just removes it from their list and split gives each of you a unique copy of the task.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>2. Tag-Based User Sharing</strong>: Add a tag that matches a coworker's name (e.g., "John Smith").
|
||||
<ul class="ml-4 mt-1 list-disc text-muted-foreground">
|
||||
<li>This automatically shares the task with them.</li>
|
||||
<li>Both of you can edit the task together (Collaborative mode).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>3. Collaboration vs. Handoff</strong>:
|
||||
<ul class="ml-4 mt-1 list-disc text-muted-foreground">
|
||||
<li><strong>Collaborate</strong>: Both users can see and edit.</li>
|
||||
<li><strong>Handoff</strong>: The task is transferred to the other person, and they become the new owner.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Team Spaces (Buckets)</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed italic mb-2">"Buckets" are shared areas for teams (like "Shop" or "Maintenance").</p>
|
||||
<ul class="space-y-2 text-sm leading-relaxed">
|
||||
<li><strong>Move to Bucket</strong>: Simply add a tag that matches the bucket name (e.g., tagging a task with "Shop").</li>
|
||||
<li><strong>Visibility</strong>: By default, bucketed tasks are hidden from your main view to keep your list clean. You can view them by selecting the bucket in the sidebar but they will only appear if you have pinned them.</li>
|
||||
<li><strong>Pinning</strong>: In order to work in a bucket, you must "Pin" it in Settings so it always shows up in your sidebar.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg flex items-center gap-2"><BarChart3 size={20} class="text-primary" /> Oversight (Share All)</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||||
Managers and team leads can ask their teams to create a "share all" sharing rule in setting. This will add that user's bucket as an option in the sidebar just like shared buckets. Clicking a user's name in your sidebar allows you to view their entire task list, making it easy to track progress across the team.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Automatic Tasks (Recurrence)</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
||||
For recurring work, you can set a task to repeat <strong>Daily</strong>, <strong>Weekly</strong> (on any specified days of the week), or <strong>Monthly</strong> (on a specified day of the month).
|
||||
</p>
|
||||
<ul class="space-y-1 ml-4 list-disc text-sm text-muted-foreground">
|
||||
<li>When you mark it complete, TaskGrid automatically "un-completes" it for you when the next cycle begins.</li>
|
||||
<li>You'll see status labels like "Complete until Monday" to let you know exactly when it will reappear.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4">
|
||||
<h3 class="font-bold text-lg">Bulk Import (Filling a Bucket)</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed italic mb-2">Need to add a long list of tasks at once?</p>
|
||||
<ol class="space-y-2 text-sm leading-relaxed list-decimal ml-4">
|
||||
<li>Go to <strong>Settings > Import Tasks</strong>.</li>
|
||||
<li>Paste your list (one task per line).</li>
|
||||
<li>Click "Parse and Configure."</li>
|
||||
<li>Use the <strong>Bulk Update</strong> tool at the top to set the Priority, Urgency, and Tag (e.g., "Shop") for all tasks at once.</li>
|
||||
<li>Update tasks that need individual urgency and priority. (Usually all tasks need individual urgency and priority because if everything is set the same TasGrid can't sort them)</li>
|
||||
<li>Click <strong>Import Tasks</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Power User Tips */}
|
||||
<section class="p-6 rounded-2xl bg-primary/5 border border-primary/20 space-y-4">
|
||||
<h2 class="text-xl font-bold flex items-center gap-2">
|
||||
<Zap size={20} class="text-primary" />
|
||||
Power User Tips
|
||||
</h2>
|
||||
<ul class="space-y-4">
|
||||
<li class="text-sm flex gap-3">
|
||||
<span class="text-primary font-bold">/</span>
|
||||
<span><strong>Quick Entry Shorthands</strong>: Type <code>/p5</code> (priority), <code>/u8</code> (urgency), or <code>/t Wood</code> (tags) directly into the title box when creating a task to set properties instantly without touching your mouse!</span>
|
||||
</li>
|
||||
<li class="text-sm flex gap-3">
|
||||
<span class="text-primary font-bold">/</span>
|
||||
<span><strong>Task Templates</strong>: If you have recurring projects with the same notes and tags, create a <strong>Template</strong> in Settings. You can apply it with a single click in the creation menu.</span>
|
||||
</li>
|
||||
<li class="text-sm flex gap-3">
|
||||
<span class="text-primary font-bold">/</span>
|
||||
<span><strong>Matrix Color Pro-tip</strong>: The dots on your Strategy Matrix change color based on <strong>Size</strong>—**Blue** dots are small wins (easy tasks), and **Red** dots are major projects (time-consuming tasks).</span>
|
||||
</li>
|
||||
<li class="text-sm flex gap-3">
|
||||
<span class="text-primary font-bold">/</span>
|
||||
<span><strong>Smart Tagging</strong>: If you are currently viewing a Bucket (e.g., "Shop"), when you click the Plus button to add a task, TaskGrid will automatically add the "Shop" tag for you.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
{/* Help/Contact */}
|
||||
<footer class="pt-10 border-t border-border flex flex-col items-center text-center space-y-4">
|
||||
<p class="text-sm text-muted-foreground">
|
||||
If the app feels out of sync, a quick <button onClick={() => location.reload()} class="text-primary font-bold hover:underline cursor-pointer bg-transparent border-none p-0 inline">refresh</button> usually fixes it. Most updates happen automatically in real-time!
|
||||
</p>
|
||||
<p class="text-sm font-medium">
|
||||
If you have any other questions contact Timothy Cardoza or IT.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,7 +2,7 @@ import { type Component, For, Show, createSignal, lazy, Suspense } from "solid-j
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { store, restoreTask, deleteTaskPermanently, addTemplate, removeTemplate, updateTemplate, upsertTagDefinition, removeTagDefinition, renameTagDefinition, addShareRule, removeShareRule, updateShareRule, createBucket, updateBucket, deleteBucket, toggleBucketSubscription } from "@/store";
|
||||
import { useTheme } from "@/components/ThemeProvider";
|
||||
import { Trash2, Undo2, ArrowLeftRight, Hash, Copy, Plus, ChevronDown, ChevronRight, Type, Share2, Users, Tag, Upload, Box, Edit2, Archive } from "lucide-solid";
|
||||
import { Trash2, Undo2, ArrowLeftRight, Hash, Copy, Plus, ChevronDown, ChevronRight, Type, Share2, Users, Tag, Upload, Box, Edit2, Archive, HelpCircle } from "lucide-solid";
|
||||
import { TagPicker } from "@/components/TagPicker";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -15,7 +15,7 @@ import { createEffect } from "solid-js";
|
||||
const TaskEditor = lazy(() => import("../components/TaskEditor").then(m => ({ default: m.TaskEditor })));
|
||||
const ImportTool = lazy(() => import("../components/ImportTool").then(m => ({ default: m.ImportTool })));
|
||||
|
||||
export const SettingsView: Component = () => {
|
||||
export const SettingsView: Component<{ setView?: (v: string) => void }> = (props) => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [isTagsOpen, setIsTagsOpen] = createSignal(false);
|
||||
const [isTemplatesOpen, setIsTemplatesOpen] = createSignal(false);
|
||||
@@ -80,6 +80,26 @@ export const SettingsView: Component = () => {
|
||||
<div class="flex flex-col gap-12">
|
||||
|
||||
|
||||
{/* Resources Category (Mostly for Mobile) */}
|
||||
<div class="space-y-3 md:hidden">
|
||||
<h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Resources</h2>
|
||||
<button
|
||||
onClick={() => props.setView ? props.setView("help") : (window as any).setCurrentView?.("help")}
|
||||
class="w-full p-4 rounded-2xl border border-primary/20 bg-primary/5 shadow-sm flex items-center justify-between group active:scale-[0.98] transition-all"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
|
||||
<HelpCircle size={20} />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h3 class="text-sm font-bold">User Help Guide</h3>
|
||||
<p class="text-[0.625rem] text-muted-foreground">Learn how to use TaskGrid effectively.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight size={16} class="text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Sharing Category */}
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-xs font-bold text-muted-foreground/40 uppercase tracking-widest pl-1">Sharing</h2>
|
||||
|
||||
Reference in New Issue
Block a user