Help Guide updates
This commit is contained in:
+193
-73
@@ -1,114 +1,234 @@
|
|||||||
# TaskGrid User Guide
|
# TasGrid Help Guide
|
||||||
|
|
||||||
## Welcome & Access
|
## Welcome & Access
|
||||||
|
|
||||||
- **Website**: [tasgrid.ccllc.pro](https://tasgrid.ccllc.pro)
|
- **Website**: [tasgrid.ccllc.pro](https://tasgrid.ccllc.pro)
|
||||||
- **Login**: Use your **Cardoza Construction email** (the same one you use for Outlook). Your password should match your email password as well.
|
- **Login**: Use your Cardoza Construction email and the same password you use for Outlook.
|
||||||
|
- **Where to find Help**:
|
||||||
|
- Desktop: open **Help Guide** from the sidebar.
|
||||||
|
- Mobile: open **Settings > User Help Guide**.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Basic Features (Getting Started)
|
## Basic Functions
|
||||||
|
|
||||||
### Creating Your First Task
|
### Create Tasks
|
||||||
|
|
||||||
1. Click the **large plus (+) sign** in the bottom right corner (or type control \+ k).
|
- Open Quick Entry with the floating **+** button or `Ctrl/Cmd+K`.
|
||||||
2. **Title**: Enter a clear name for what needs to be done.
|
- Required fields are **Title**, **Priority**, and **Urgency**.
|
||||||
3. **Priority**: Choose from 1 (trivial) to 10 (absolutely necessary).
|
- Optional fields include **Size**, **Due Date**, **tags**, and a rich text description.
|
||||||
4. **Urgency & Due Date**: These are linked\!
|
- **Urgency** and **Due Date** stay connected. Changing one updates the other.
|
||||||
- Pick an **Urgency level** (10 is today, 1 is 6 months from now), and the due date will be calculated for you.
|
- New tasks automatically inherit the context you are working inside:
|
||||||
- Alternatively, pick a **Due Date** using the calendar, and the urgency will adjust automatically.
|
- **My Bucket** keeps the task in your personal context.
|
||||||
5. **Size**: This defaults to **5**. Adjust it if the task is very small (15 mins) or very large (multiple days).
|
- A pinned bucket adds that bucket's `@tag`.
|
||||||
6. **Description**: Add notes or details. Use the **forward slash (/)** to reveal formatting options like bold text, checklists, and even adding images.
|
- A supervised personal context adds that user's `@tag`.
|
||||||
7. Click **Create Task**.
|
- Creating from Notes mode adds the active note's `#tag`.
|
||||||
|
- Quick Entry shorthand:
|
||||||
|
- `/pN` sets priority
|
||||||
|
- `/uN` sets urgency
|
||||||
|
- `/t tag` adds a tag
|
||||||
|
- `/t tag:value` adds a tag and value
|
||||||
|
- Saved task templates can prefill common work.
|
||||||
|
|
||||||
### Viewing Your Tasks
|
### Edit and Manage Tasks
|
||||||
|
|
||||||
TaskGrid sorts your tasks so you don't have to. The primary views are:
|
- Open a task to edit:
|
||||||
|
- title
|
||||||
|
- status
|
||||||
|
- priority
|
||||||
|
- urgency
|
||||||
|
- size
|
||||||
|
- due date
|
||||||
|
- tags
|
||||||
|
- favorite state
|
||||||
|
- rich text body
|
||||||
|
- Task cards also support lightweight actions such as status changes, duplicate, and favorite.
|
||||||
|
- Double-click the status control to mark a task complete.
|
||||||
|
- Deleted tasks go to **Trash** first and can be restored.
|
||||||
|
|
||||||
- **✨ Focus (Default)**: Your most important tasks, ranked by a combination of Urgency and Priority.
|
### Notes
|
||||||
- **📊 Strategy Matrix**: A 4-quadrant grid mapping Urgency vs. Priority.
|
|
||||||
- **Do First**: Urgent & Important.
|
|
||||||
- **Schedule**: Important but not urgent yet.
|
|
||||||
- **Delegate**: Urgent but not important.
|
|
||||||
- **Eliminate**: Neither urgent nor important.
|
|
||||||
- **❄️ Snowball**: Shows your **smallest** tasks first to help you build momentum.
|
|
||||||
- **⛏️ Dig In**: Shows your **largest** tasks first for when you have time to focus.
|
|
||||||
- **🕒 Urgency**: Sorts tasks purely by when they are due.
|
|
||||||
- **⭐ Priority**: Sorts tasks purely by how important they are.
|
|
||||||
|
|
||||||
### Other Info
|
- Use the **Tasks/Notes** toggle to switch into Notes mode.
|
||||||
|
- Notes support:
|
||||||
|
- titles
|
||||||
|
- rich formatting
|
||||||
|
- attachments
|
||||||
|
- favorites
|
||||||
|
- public/private visibility
|
||||||
|
- Tasks can link to notes through `#note` tags and note references.
|
||||||
|
- Creating a task while a note is active automatically links that task to the note.
|
||||||
|
- Existing tasks can also be linked from the note view.
|
||||||
|
- Notes can generate a share link from the note actions menu.
|
||||||
|
|
||||||
- **Search & Filters**: Use the bar at the top right to find specific tasks or filter by priority, urgency, or tasks edited today.
|
### Share Tasks
|
||||||
- **Themes**: Switch between **Light Mode** and **Dark Mode** in the Settings.
|
|
||||||
- **Trash**: Deleted tasks are kept for **7 days** before being permanently removed. You can recover them in Settings.
|
|
||||||
|
|
||||||
### Mobile Installation
|
- Task sharing is **tag-driven**.
|
||||||
|
- Use:
|
||||||
|
- `@people` to share with users
|
||||||
|
- `@buckets` to move or share into bucket contexts
|
||||||
|
- `#notes` to connect tasks to notes
|
||||||
|
- When adding a user, bucket, or note context through the tag picker, choose:
|
||||||
|
- **Collaborative**: both sides keep access
|
||||||
|
- **Handoff**: responsibility moves to the receiving context
|
||||||
|
- Task detail shows the active contexts and the policy each one is using.
|
||||||
|
|
||||||
TaskGrid works like a dedicated app on your phone:
|
### Buckets and Supervision
|
||||||
|
|
||||||
- **Android**: Tap the three dots in Chrome, select "Add to Home Screen," then "Install."
|
- **My Bucket** is your personal home context.
|
||||||
- **iPhone**: Tap the Share icon in Safari and select "Add to Home Screen."
|
- Pin buckets in Settings to make them appear in the context switcher.
|
||||||
|
- Supervision allows approved users to switch into another person's personal context.
|
||||||
|
- The context switcher can show:
|
||||||
|
- My Bucket
|
||||||
|
- pinned buckets
|
||||||
|
- supervised personal contexts
|
||||||
|
- Some system tags are intentionally hidden in the current view while still staying active behind the scenes.
|
||||||
|
|
||||||
|
### Views and Finding Work
|
||||||
|
|
||||||
|
- **Focus**: default ranked view
|
||||||
|
- **Matrix**: urgency vs priority
|
||||||
|
- **Snowball**: smallest tasks first
|
||||||
|
- **Dig In**: largest tasks first
|
||||||
|
- **Urgency**: due-date pressure first
|
||||||
|
- **Priority**: importance first
|
||||||
|
- **Progress**: status/progress first
|
||||||
|
- Basic filters include:
|
||||||
|
- free-text search
|
||||||
|
- include/exclude tags
|
||||||
|
- priority range
|
||||||
|
- urgency range
|
||||||
|
- edited today
|
||||||
|
- mine
|
||||||
|
- starred
|
||||||
|
|
||||||
|
### Everyday Extras
|
||||||
|
|
||||||
|
- **Trash** in Settings includes separate recovery areas for tasks and notes.
|
||||||
|
- **Mobile install**:
|
||||||
|
- Android: use Chrome's install or add-to-home-screen action.
|
||||||
|
- iPhone: use Safari's **Add to Home Screen**.
|
||||||
|
- If the app feels stale or out of sync, a quick refresh is the best first step.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Advanced Features (Teams & Automation)
|
## Advanced Features
|
||||||
|
|
||||||
### Sharing & Collaboration
|
### Advanced Views
|
||||||
|
|
||||||
Collaboration in TaskGrid is flexible and transparent:
|
- The same task pool can be viewed through different sort modes:
|
||||||
|
- Focus
|
||||||
|
- Urgency
|
||||||
|
- Priority
|
||||||
|
- Progress
|
||||||
|
- Snowball
|
||||||
|
- Dig In
|
||||||
|
- **Strategy Matrix** plots incomplete tasks on an urgency-vs-priority grid.
|
||||||
|
- Dots are clickable.
|
||||||
|
- Dot color reflects task size.
|
||||||
|
- Tooltips show the task title plus `U`, `S`, and `P` values.
|
||||||
|
- The time scale can be switched to `1`, `7`, `30`, `60`, or `90` days.
|
||||||
|
|
||||||
1. **Manual Sharing**: Open a task and use the **Share** menu to add a specific person.
|
### Notes Power Use
|
||||||
- You can also **unshare** **and split** tasks here. Unshare just removes it from their list and split gives each of you a unique copy of the task.
|
|
||||||
2. **Tag-Based User Sharing**: Add a tag that matches a coworker's name (e.g., "John Smith").
|
|
||||||
- This automatically shares the task with them.
|
|
||||||
- Both of you can edit the task together (Collaborative mode).
|
|
||||||
3. **Collaboration vs. Handoff**:
|
|
||||||
- **Collaborate**: Both users can see and edit.
|
|
||||||
- **Handoff**: The task is transferred to the other person, and they become the new owner.
|
|
||||||
|
|
||||||
### Team Spaces (Buckets)
|
- Root notes can have child tabs.
|
||||||
|
- Child tabs inherit the parent note's privacy setting.
|
||||||
|
- Desktop supports drag-and-drop tab reordering.
|
||||||
|
- Tabs can be renamed inline.
|
||||||
|
- Root notes manage the shared linked-task set.
|
||||||
|
- Renaming a note also updates the matching `#note` tag definition so linked tasks stay aligned.
|
||||||
|
|
||||||
"Buckets" are shared areas for teams (like "Shop" or "Maintenance").
|
### Rich Editor
|
||||||
|
|
||||||
- **Move to Bucket**: Simply add a tag that matches the bucket name (e.g., tagging a task with "Shop").
|
- Tasks, notes, and templates all use the same editor.
|
||||||
- **Visibility**: 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.
|
- Type `/` to open slash commands, including:
|
||||||
- **Pinning**: In order to work in a bucket, you must "Pin" it in Settings so it always shows up in your sidebar.
|
- text and headings
|
||||||
|
- bullet lists
|
||||||
|
- checklists
|
||||||
|
- multi checklists
|
||||||
|
- code blocks
|
||||||
|
- blockquotes
|
||||||
|
- uploads
|
||||||
|
- job file embeds
|
||||||
|
- dividers
|
||||||
|
- tables
|
||||||
|
- The editor also supports:
|
||||||
|
- underline
|
||||||
|
- links
|
||||||
|
- highlight
|
||||||
|
- text alignment
|
||||||
|
- resizable tables
|
||||||
|
- `@user` mentions
|
||||||
|
- `#note` mentions
|
||||||
|
- Files can be pasted or dragged in directly.
|
||||||
|
- Images become image blocks.
|
||||||
|
- Videos become video blocks.
|
||||||
|
- Other files become file attachment blocks.
|
||||||
|
- Clicking an image opens a fullscreen zoomable preview.
|
||||||
|
|
||||||
### Oversight (Share All)
|
### Task Automation
|
||||||
|
|
||||||
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.
|
- Recurrence is configured from the task's **More** menu.
|
||||||
|
- Supported recurrence types:
|
||||||
|
- daily
|
||||||
|
- weekly
|
||||||
|
- monthly
|
||||||
|
- Weekly recurrence supports selected weekdays.
|
||||||
|
- Monthly recurrence supports a day of the month.
|
||||||
|
- Completed recurring tasks automatically reopen when the next cycle arrives.
|
||||||
|
|
||||||
### Automatic Tasks (Recurrence)
|
### Templates and Saved Filters
|
||||||
|
|
||||||
For recurring work, you can set a task to repeat **Daily**, **Weekly** (on any specified days of the week), or **Monthly** (on a specified day of the month).
|
- Task templates can store:
|
||||||
|
- name
|
||||||
|
- title
|
||||||
|
- priority
|
||||||
|
- urgency
|
||||||
|
- tags
|
||||||
|
- rich description
|
||||||
|
- Task templates are applied from Quick Entry.
|
||||||
|
- Task filters and note filters can both be saved as reusable templates.
|
||||||
|
- Use **Load All** when you need older history that is not currently loaded into the list.
|
||||||
|
|
||||||
- When you mark it complete, TaskGrid automatically "un-completes" it for you when the next cycle begins.
|
### Sharing and Context Policies
|
||||||
- You'll see status labels like "Complete until Monday" to let you know exactly when it will reappear.
|
|
||||||
|
|
||||||
### Bulk Import (Filling a Bucket)
|
- User, bucket, and note contexts can each behave as **Collaborative** or **Handoff**.
|
||||||
|
- Settings lets you adjust:
|
||||||
|
- per-user context policy
|
||||||
|
- bucket policy
|
||||||
|
- supervision access
|
||||||
|
- `@user`, `@bucket`, and `#note` tags are not just labels. They create structured access and relationship rules.
|
||||||
|
- Some active context tags may be hidden in the current UI while still remaining attached to the task.
|
||||||
|
|
||||||
Need to add a long list of tasks at once?
|
### Settings Deep Dive
|
||||||
|
|
||||||
1. Go to **Settings** \> **Import Tasks**.
|
- **Theme**: Light, Dark, or System
|
||||||
2. Paste your list (one task per line).
|
- **Tag List**: manage tag values and colors
|
||||||
3. Click "Parse and Configure."
|
- **Buckets**:
|
||||||
4. Use the **Bulk Update** tool at the top to set the Priority, Urgency, and Tag (e.g., "Shop") for all tasks at once.
|
- create
|
||||||
5. 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)
|
- rename
|
||||||
6. Click **Import Tasks**.
|
- pin or unpin
|
||||||
|
- archive
|
||||||
|
- **Supervision**: choose who can switch into your personal context
|
||||||
|
- **Import Tasks**: paste lists, set bulk defaults, then fine-tune before import
|
||||||
|
- **Trash**: restore or permanently delete tasks and notes
|
||||||
|
|
||||||
|
### App Maintenance
|
||||||
|
|
||||||
|
- TasGrid is a progressive web app and can be installed on mobile.
|
||||||
|
- The app checks for updates automatically while running and when it becomes visible again.
|
||||||
|
- **Update App** in Settings triggers the manual update flow.
|
||||||
|
- **Reset PWA** clears cached app state, unregisters service workers, and reloads the app.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Power User Tips
|
## Not Included Here
|
||||||
|
|
||||||
- **Quick Entry Shorthands**: Type `/p5` (priority), `/u8` (urgency), or `/t Wood` (tags) directly into the title box when creating a task to set properties instantly without touching your mouse!
|
- SDK or API integration-developer documentation
|
||||||
- **Task Templates**: If you have recurring projects with the same notes and tags, create a **Template** in Settings. You can apply it with a single click in the creation menu.
|
- Internal dev migration tools
|
||||||
- **Matrix Color Pro-tip**: The dots on your Strategy Matrix change color based on **Size**—**Blue** dots are small wins (easy tasks), and **Red** dots are major projects (time-consuming tasks).
|
- Internal admin repair or production migration workflows
|
||||||
- **Smart Tagging**: 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.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Need help?
|
## Need More Help?
|
||||||
|
|
||||||
If the app feels out of sync, a quick [**refresh**](#) usually fixes it. Most updates happen automatically in real-time\!
|
If TasGrid feels out of sync, refresh the app first. If you still need help, contact Timothy Cardoza or IT.
|
||||||
|
|
||||||
If you have any other questions contact Timothy Cardoza or IT.
|
|
||||||
|
|||||||
+532
-226
@@ -1,15 +1,481 @@
|
|||||||
import { type Component, Show } from "solid-js";
|
import { type Component, For, Show } from "solid-js";
|
||||||
import { ArrowLeft, ExternalLink, HelpCircle, Zap, ShieldCheck, ListTodo, LayoutDashboard, Snowflake, Pickaxe, Clock, ArrowUpCircle, Search, Palette, Trash2, Smartphone, BarChart3 } from "lucide-solid";
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
BookOpen,
|
||||||
|
Boxes,
|
||||||
|
ExternalLink,
|
||||||
|
HelpCircle,
|
||||||
|
LayoutDashboard,
|
||||||
|
ListTodo,
|
||||||
|
NotebookText,
|
||||||
|
PencilLine,
|
||||||
|
RefreshCcw,
|
||||||
|
Search,
|
||||||
|
Settings2,
|
||||||
|
Share2,
|
||||||
|
ShieldCheck,
|
||||||
|
Smartphone,
|
||||||
|
Sparkles,
|
||||||
|
WandSparkles,
|
||||||
|
Workflow,
|
||||||
|
Zap
|
||||||
|
} from "lucide-solid";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
interface HelpViewProps {
|
interface HelpViewProps {
|
||||||
onBack?: () => void;
|
onBack?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface GuideItem {
|
||||||
|
title: string;
|
||||||
|
body: string;
|
||||||
|
bullets?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GuideSection {
|
||||||
|
title: string;
|
||||||
|
icon: any;
|
||||||
|
intro: string;
|
||||||
|
items: GuideItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AccessCard {
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
detail: string;
|
||||||
|
href?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const accessCards: AccessCard[] = [
|
||||||
|
{
|
||||||
|
title: "Website",
|
||||||
|
content: "tasgrid.ccllc.pro",
|
||||||
|
href: "https://tasgrid.ccllc.pro",
|
||||||
|
detail: "Open TasGrid in your browser or install it as an app on mobile."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Login",
|
||||||
|
content: "Use your Cardoza Construction email",
|
||||||
|
detail: "Your TasGrid account uses the same email and password you use for Outlook."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Finding Help",
|
||||||
|
content: "Desktop: Sidebar Mobile: Settings > User Help Guide",
|
||||||
|
detail: "The Help Guide is (This thing your looking at) is always available in the navigation sidebar on desktop or in settings on mobile, so you can reference it while learning the app."
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const basicSections: GuideSection[] = [
|
||||||
|
{
|
||||||
|
title: "Create Tasks",
|
||||||
|
icon: ListTodo,
|
||||||
|
intro: "Quick Entry is the fastest way to get work into the system.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Start a new task",
|
||||||
|
body: "Use the floating plus button or press Ctrl/Cmd+K to open Quick Entry.",
|
||||||
|
bullets: [
|
||||||
|
"Title, Priority, and Urgency are the only required fields.",
|
||||||
|
"You can also set Size, Due Date, tags, and a rich description before creating the task."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Urgency and due date stay connected",
|
||||||
|
body: "Adjust either one and TasGrid updates the other so your schedule and scoring stay aligned."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Tasks inherit your current context",
|
||||||
|
body: "New tasks automatically pick up the context you are working inside.",
|
||||||
|
bullets: [
|
||||||
|
"My Bucket keeps the task in your personal context.",
|
||||||
|
"Pinned bucket views add that bucket's @tag.",
|
||||||
|
"Supervised views add the selected user's @tag.",
|
||||||
|
"Creating from Notes mode adds the active note's #tag."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Use templates and shorthand when you are moving fast",
|
||||||
|
body: "Saved task templates can prefill common work, and Quick Entry shorthand can set properties without leaving the title field.",
|
||||||
|
bullets: [
|
||||||
|
"Use /pN for priority, /uN for urgency, and /t tag for tags.",
|
||||||
|
"If a tag has a value, use /t tag:value."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Edit and Manage Tasks",
|
||||||
|
icon: PencilLine,
|
||||||
|
intro: "Opening a task gives you the full working sheet for that item.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Edit the task directly",
|
||||||
|
body: "The task detail sheet lets you update title, status, priority, urgency, size, due date, tags, favorite state, and the rich text body."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Use quick actions from the list",
|
||||||
|
body: "Without opening the detail sheet, you can still change status, duplicate a task, and toggle favorite on task cards."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Mark work complete",
|
||||||
|
body: "Use the status control to move work through progress states or mark it complete.",
|
||||||
|
bullets: [
|
||||||
|
"Click the status circle on the left side of each task to mark it as partially or fully complete.",
|
||||||
|
"Recurring tasks use the same status control and reopen automatically when their next cycle arrives."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Trash is reversible",
|
||||||
|
body: "Deleting a task sends it to trash for 7 days before permanent deletion and the app gives you an undo action right away."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Notes",
|
||||||
|
icon: NotebookText,
|
||||||
|
intro: "Notes are first-class workspace documents, not just task descriptions.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Switch into Notes mode",
|
||||||
|
body: "Use the Tasks/Notes toggle in the main layout to move between task lists and the notepad."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Create and edit notes",
|
||||||
|
body: "Notes support titles, rich formatting, attachments, favorites, and public or private visibility."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Link tasks to notes",
|
||||||
|
body: "TasGrid connects notes and tasks through #note tags and explicit note references.",
|
||||||
|
bullets: [
|
||||||
|
"Tasks created while a note is active automatically link back to that note.",
|
||||||
|
"You can also search for an existing task and link it from the note view."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Share notes when needed",
|
||||||
|
body: "Notes can generate a share link from the note actions menu. If a note is private when you share it, TasGrid prompts you to make it public."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Share Tasks",
|
||||||
|
icon: Share2,
|
||||||
|
intro: "Sharing is tag-driven. The current app does not use the old manual per-task share flow as the primary model.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Share with people, buckets, and notes",
|
||||||
|
body: "Add @people, @buckets, or #notes in the tag list to create the sharing relationship."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Choose the share mode",
|
||||||
|
body: "When you add a user, bucket, or note context through the tag picker, you can choose Collaborative or Handoff.",
|
||||||
|
bullets: [
|
||||||
|
"Collaborative keeps the task visible to both sides.",
|
||||||
|
"Handoff moves responsibility to the receiving context."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Read the active sharing state",
|
||||||
|
body: "Task detail shows which contexts are attached to the task and which policy each one is using."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Buckets and Supervision",
|
||||||
|
icon: Boxes,
|
||||||
|
intro: "Contexts control where work lives and who can see it.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "My Bucket is your personal home view",
|
||||||
|
body: "This is your normal personal context and where your own work lives by default."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Pinned buckets act like shared team spaces",
|
||||||
|
body: "When you pin a bucket in Settings, it appears in the context switcher so you can jump into that shared workspace."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Supervision lets leads switch into personal contexts",
|
||||||
|
body: "If someone grants you supervision access, their personal context appears in the same switcher as buckets."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Some system tags stay hidden on purpose",
|
||||||
|
body: "TasGrid may hide the current bucket tag, your own personal context tag, or locked note tags while still preserving those relationships behind the scenes."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Views and Finding Work",
|
||||||
|
icon: Search,
|
||||||
|
intro: "TasGrid gives you multiple ways to surface the right work without manually resorting everything.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Use the main views",
|
||||||
|
body: "Focus, Matrix, Snowball, Dig In, Urgency, Priority, and Progress all present the same tasks through different sorting lenses."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Search and filter from the list",
|
||||||
|
body: "Basic task filters include free-text search, tag filters, priority range, urgency range, edited today, mine, and starred."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Filter notes too",
|
||||||
|
body: "Notes support their own search and filter flow, including note-specific saved filters."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Everyday Extras",
|
||||||
|
icon: Smartphone,
|
||||||
|
intro: "A few small habits make TasGrid easier to trust day to day.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Recover from trash",
|
||||||
|
body: "Settings includes separate trash areas for tasks and notes, with restore and permanent delete actions."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Install the app on mobile",
|
||||||
|
body: "On Android, use Chrome's install or add-to-home-screen action. On iPhone, use Safari's Add to Home Screen option."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Refresh if things feel stale",
|
||||||
|
body: "TasGrid updates in real time, but if the app ever feels out of sync, a quick refresh is the fastest first step."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const advancedSections: GuideSection[] = [
|
||||||
|
{
|
||||||
|
title: "Advanced Views",
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
intro: "Each task view emphasizes a different decision-making lens.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Focus, Urgency, Priority, Progress, Snowball, and Dig In",
|
||||||
|
body: "These views sort the same active task pool by different scoring rules, so you can choose the mode that matches how you want to work right now."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Strategy Matrix",
|
||||||
|
body: "Matrix plots incomplete tasks on an urgency-versus-priority grid.",
|
||||||
|
bullets: [
|
||||||
|
"Dots are clickable.",
|
||||||
|
"Dot color reflects task size.",
|
||||||
|
"The tooltip shows the task title plus U, S, and P values.",
|
||||||
|
"The time scale can be changed to 1, 7, 30, 60, or 90 days."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Notes Power Use",
|
||||||
|
icon: NotebookText,
|
||||||
|
intro: "Notes can operate like multi-tab project workspaces.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Use tabs for structured note sets",
|
||||||
|
body: "A root note can have child tabs, and those tabs inherit the parent's privacy settings.",
|
||||||
|
bullets: [
|
||||||
|
"Tabs can be renamed inline.",
|
||||||
|
"Desktop supports drag-and-drop tab reordering."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Understand root versus child note behavior",
|
||||||
|
body: "Root notes manage the shared linked-task set. Child tabs can view those relationships, but root notes are the ones that can directly unlink tasks."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Keep note tags in sync automatically",
|
||||||
|
body: "Renaming a note also renames the matching #note tag definition so linked tasks keep pointing at the right note."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Rich Editor",
|
||||||
|
icon: WandSparkles,
|
||||||
|
intro: "Tasks, notes, and templates all use the same editor, so the same advanced authoring tools work across the app.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Use slash commands",
|
||||||
|
body: "Type / in the editor to insert structured content.",
|
||||||
|
bullets: [
|
||||||
|
"Text and headings",
|
||||||
|
"Bullet lists, checklists, and multi checklists",
|
||||||
|
"Code blocks and blockquotes",
|
||||||
|
"Uploads for images, videos, and documents",
|
||||||
|
"Job File embeds",
|
||||||
|
"Dividers and tables"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Use formatting and mentions",
|
||||||
|
body: "The editor supports underline, links, highlight, text alignment, resizable tables, and both @user and #note mentions."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Work with files and media",
|
||||||
|
body: "You can paste or drag files directly into the editor.",
|
||||||
|
bullets: [
|
||||||
|
"Images are converted and inserted as image blocks.",
|
||||||
|
"Videos become video blocks.",
|
||||||
|
"Other files become file attachment blocks.",
|
||||||
|
"Clicking an image opens a fullscreen zoomable preview."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Embed job files from Prism",
|
||||||
|
body: "The Job File slash command opens a searchable selector so users can attach plans, estimates, addendums, or files from the matched job."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Task Automation",
|
||||||
|
icon: Workflow,
|
||||||
|
intro: "Recurring work stays visible without forcing you to recreate the same task every cycle.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Set recurrence from the task's More menu",
|
||||||
|
body: "Tasks can repeat daily, weekly, or monthly."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Use weekly and monthly options",
|
||||||
|
body: "Weekly recurrence supports selected weekdays, and monthly recurrence supports a chosen day of the month."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Let TasGrid reopen the task automatically",
|
||||||
|
body: "Once a recurring task is completed, TasGrid resets it when the next scheduled cycle arrives."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Templates and Saved Filters",
|
||||||
|
icon: BookOpen,
|
||||||
|
intro: "Reuse good structure instead of re-entering the same setup every time.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Task templates",
|
||||||
|
body: "Templates can store a reusable name, title, priority, urgency, tags, and rich description, then be applied directly from Quick Entry."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Saved task and note filters",
|
||||||
|
body: "Both task filters and note filters can be saved as named templates and reapplied later."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Load older history when needed",
|
||||||
|
body: "Use Load All when you want to search or review older items that are not currently loaded into the active list."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sharing and Context Policies",
|
||||||
|
icon: Share2,
|
||||||
|
intro: "Contexts are more than labels. They control access, ownership, and how work moves through the system.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Collaborative versus Handoff",
|
||||||
|
body: "Every user, bucket, or note context can behave as either collaborative access or a handoff target."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Per-user and per-bucket policies",
|
||||||
|
body: "Settings lets you adjust user context policy and bucket policy independently, so not every shared space has to behave the same way."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Know the hidden rules",
|
||||||
|
body: "TasGrid derives structured relationships from @user, @bucket, and #note tags, and some of those tags may be hidden in the current view while still remaining active."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Settings Deep Dive",
|
||||||
|
icon: Settings2,
|
||||||
|
intro: "Settings is where you shape how TasGrid behaves for you and your team.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Theme, tags, and organization",
|
||||||
|
body: "Choose Light, Dark, or System theme, manage tag values and colors, and review system tags for users, buckets, and notes."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Buckets and supervision",
|
||||||
|
body: "Create buckets, rename them, pin or unpin them, archive old ones, and manage who can supervise your personal context."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Import and trash",
|
||||||
|
body: "Bulk import tasks from pasted lists, then manage recoverable tasks and notes from their separate trash sections."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "App Maintenance",
|
||||||
|
icon: Sparkles,
|
||||||
|
intro: "TasGrid is a progressive web app, so it can install and update like a lightweight native app.",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Update flow",
|
||||||
|
body: "TasGrid checks for updates on registration, regularly while running, and when the app becomes visible again.",
|
||||||
|
bullets: [
|
||||||
|
"You can manually trigger Update App from Settings.",
|
||||||
|
"A ready update may also apply automatically when the app is hidden or idle."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Reset the PWA if needed",
|
||||||
|
body: "Reset PWA clears cached app state, unregisters service workers, and reloads the app."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Install behavior",
|
||||||
|
body: "Mobile installation is supported, and the installed app uses the same Help, Notes, Tasks, and Settings experience as the browser version."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const GuideSectionCard: Component<{ section: GuideSection }> = (props) => {
|
||||||
|
const Icon = props.section.icon;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article class="rounded-3xl border border-border/60 bg-card/70 backdrop-blur-sm overflow-hidden shadow-sm">
|
||||||
|
<div class="p-5 sm:p-6 border-b border-border/40 bg-gradient-to-r from-primary/[0.08] via-primary/[0.03] to-transparent">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="hidden sm:flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
|
||||||
|
<Icon size={20} />
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h3 class="text-lg sm:text-xl font-black tracking-tight flex items-center gap-2">
|
||||||
|
<Icon size={18} class="sm:hidden text-primary" />
|
||||||
|
{props.section.title}
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-muted-foreground leading-relaxed">{props.section.intro}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-5 sm:p-6 space-y-4">
|
||||||
|
<For each={props.section.items}>
|
||||||
|
{(item) => (
|
||||||
|
<div class="rounded-2xl border border-border/40 bg-background/60 p-4 space-y-2">
|
||||||
|
<h4 class="text-sm font-bold tracking-tight">{item.title}</h4>
|
||||||
|
<p class="text-sm text-muted-foreground leading-relaxed">{item.body}</p>
|
||||||
|
<Show when={item.bullets?.length}>
|
||||||
|
<ul class="space-y-1.5 pt-1">
|
||||||
|
<For each={item.bullets}>
|
||||||
|
{(bullet) => (
|
||||||
|
<li class="text-sm text-muted-foreground leading-relaxed flex gap-2">
|
||||||
|
<span class="mt-[0.45rem] h-1.5 w-1.5 shrink-0 rounded-full bg-primary/60" />
|
||||||
|
<span>{bullet}</span>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</ul>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const HelpView: Component<HelpViewProps> = (props) => {
|
export const HelpView: Component<HelpViewProps> = (props) => {
|
||||||
return (
|
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">
|
<div class="w-full max-w-5xl 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">
|
<header class="flex items-center gap-4 mb-8 sm:mb-10">
|
||||||
<Show when={props.onBack}>
|
<Show when={props.onBack}>
|
||||||
<Button variant="ghost" size="icon" onClick={() => props.onBack?.()} class="h-10 w-10 rounded-xl">
|
<Button variant="ghost" size="icon" onClick={() => props.onBack?.()} class="h-10 w-10 rounded-xl">
|
||||||
<ArrowLeft size={20} />
|
<ArrowLeft size={20} />
|
||||||
@@ -18,257 +484,97 @@ export const HelpView: Component<HelpViewProps> = (props) => {
|
|||||||
<div>
|
<div>
|
||||||
<h1 class="text-2xl sm:text-4xl font-black tracking-tighter flex items-center gap-3">
|
<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" />
|
<HelpCircle size={32} class="text-primary hidden sm:block" />
|
||||||
User Guide
|
Help Guide
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-[0.625rem] sm:text-xs text-muted-foreground font-mono uppercase tracking-widest opacity-70">
|
<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
|
Full guide to TasGrid 's daily workflows and advanced tools
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="space-y-12 pb-20">
|
<div class="space-y-12 pb-20">
|
||||||
{/* Welcome & Access */}
|
<section class="space-y-5">
|
||||||
<section class="space-y-4">
|
|
||||||
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||||
<ShieldCheck size={20} class="text-primary" />
|
<ShieldCheck size={20} class="text-primary" />
|
||||||
Welcome & Access
|
Welcome & Access
|
||||||
</h2>
|
</h2>
|
||||||
<div class="grid gap-4 sm:grid-cols-2">
|
<div class="grid gap-4 md:grid-cols-3">
|
||||||
<div class="p-4 rounded-2xl bg-muted/30 border border-border/50">
|
<For each={accessCards}>
|
||||||
<p class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground mb-1">Website</p>
|
{(card) => (
|
||||||
<a href="https://tasgrid.ccllc.pro" target="_blank" class="text-sm font-bold text-primary flex items-center gap-1 hover:underline">
|
<div class="rounded-2xl border border-border/50 bg-card/50 p-4 space-y-2 shadow-sm">
|
||||||
tasgrid.ccllc.pro
|
<p class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground">
|
||||||
<ExternalLink size={12} />
|
{card.title}
|
||||||
</a>
|
</p>
|
||||||
</div>
|
<Show
|
||||||
<div class="p-4 rounded-2xl bg-muted/30 border border-border/50">
|
when={card.href}
|
||||||
<p class="text-[0.625rem] font-black uppercase tracking-widest text-muted-foreground mb-1">Login</p>
|
fallback={<p class="text-sm font-bold tracking-tight">{card.content}</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>
|
<a
|
||||||
|
href={card.href}
|
||||||
|
target="_blank"
|
||||||
|
class="text-sm font-bold tracking-tight text-primary flex items-center gap-1 hover:underline"
|
||||||
|
>
|
||||||
|
{card.content}
|
||||||
|
<ExternalLink size={12} />
|
||||||
|
</a>
|
||||||
|
</Show>
|
||||||
|
<p class="text-sm text-muted-foreground leading-relaxed">{card.detail}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Basic Features */}
|
|
||||||
<section class="space-y-6">
|
<section class="space-y-6">
|
||||||
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
<div class="space-y-2">
|
||||||
<Zap size={20} class="text-yellow-500" />
|
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||||
Basic Features (Getting Started)
|
<ListTodo size={20} class="text-primary" />
|
||||||
</h2>
|
Basic Functions
|
||||||
|
</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">
|
<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.
|
Start here if you want the day-to-day version of TasGrid . These sections cover the normal workflows most users touch every day.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-4 pt-4">
|
<div class="space-y-5">
|
||||||
<h3 class="font-bold text-lg">Automatic Tasks (Recurrence)</h3>
|
<For each={basicSections}>
|
||||||
|
{(section) => <GuideSectionCard section={section} />}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="space-y-6">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<h2 class="text-xl font-bold border-b border-border pb-2 flex items-center gap-2">
|
||||||
|
<Zap size={20} class="text-yellow-500" />
|
||||||
|
Advanced Features
|
||||||
|
</h2>
|
||||||
<p class="text-sm text-muted-foreground leading-relaxed">
|
<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).
|
This section covers the deeper controls, power-user tools, and settings-driven behavior that shape how TasGrid works across teams.
|
||||||
</p>
|
</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>
|
||||||
|
|
||||||
<div class="space-y-4 pt-4">
|
<div class="space-y-5">
|
||||||
<h3 class="font-bold text-lg">Bulk Import (Filling a Bucket)</h3>
|
<For each={advancedSections}>
|
||||||
<p class="text-sm text-muted-foreground leading-relaxed italic mb-2">Need to add a long list of tasks at once?</p>
|
{(section) => <GuideSectionCard section={section} />}
|
||||||
<ol class="space-y-2 text-sm leading-relaxed list-decimal ml-4">
|
</For>
|
||||||
<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>
|
</div>
|
||||||
</section>
|
</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">
|
<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">
|
<p class="text-sm text-muted-foreground max-w-2xl leading-relaxed">
|
||||||
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!
|
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-flex items-center gap-1"
|
||||||
|
>
|
||||||
|
refresh
|
||||||
|
<RefreshCcw size={12} />
|
||||||
|
</button>{" "}
|
||||||
|
is still the best first step. Most changes sync automatically in real time.
|
||||||
</p>
|
</p>
|
||||||
<p class="text-sm font-medium">
|
<p class="text-sm font-medium">
|
||||||
If you have any other questions contact Timothy Cardoza or IT.
|
If you still need help after that, contact Timothy Cardoza or IT.
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export const SettingsView: Component<{ setView?: (v: string) => void }> = (props
|
|||||||
</div>
|
</div>
|
||||||
<div class="text-left">
|
<div class="text-left">
|
||||||
<h3 class="text-sm font-bold">User Help Guide</h3>
|
<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>
|
<p class="text-[0.625rem] text-muted-foreground">Learn how to use TasGrid effectively.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ChevronRight size={16} class="text-muted-foreground group-hover:text-primary transition-colors" />
|
<ChevronRight size={16} class="text-muted-foreground group-hover:text-primary transition-colors" />
|
||||||
|
|||||||
Reference in New Issue
Block a user