Frictionless

Backup/restore and note pinning

Added two small QoL features to FlowKit today, both addressing gaps I noticed after using it for a while.

Backup & Restore. FlowKit only ever stored data in localStorage, which means a cleared cache or a new browser wipes out every task and note with no way back. There’s now a 💾 button in the sidebar (and a command palette entry) that opens a modal with two options: Export downloads a timestamped JSON file with all tasks, notes, and recent colors; Import reads a JSON file back in and merges it non-destructively (skips anything with an ID you already have, so it’s safe to import the same file twice).

Note pinning. Notes were a flat, most-recently-created list, so anything you wanted to keep handy just scrolled away. Each note now has a 📌 toggle, both on its row in the sidebar list and in the editor topbar. Pinned notes always sort to the top, so reference notes stay put instead of getting buried under whatever you jotted last.

Both features reuse the existing dark theme and modal/toast components rather than introducing new UI patterns, so they should feel native to the rest of the app.

Docs pass + re-testing all three panels

Spent this session getting FlowKit’s documentation in shape and re-testing the app end to end before moving on to new features.

What I did:

• Wrote a full README.md for the repo, covering the feature set (Task Manager, Focus Timer, Quick Stats), the pure HTML/CSS/JS tech stack, how to run it locally, and a link to the live demo. Before this, the only way to understand the project was to read all 1,400 lines of index.html.
• Walked back through each view to sanity-check things still work: added tasks with different priorities/statuses/tags, ran the 25-minute Focus Timer through start/pause/reset, and confirmed Quick Stats updates live as tasks change.
• Captured a fresh screenshot of the Focus Timer view for the project page.

Why it matters:
A project with zero docs is hard for anyone (including future me) to jump into. The README now doubles as a feature checklist and makes the GitHub repo stand on its own.

What’s next:

• localStorage persistence so tasks survive a reload
• Drag-and-drop task reordering
• A calendar view for due dates

Building FlowKit — A Frictionless Productivity App

I started the Frictionless mission by building FlowKit, a browser-based productivity suite that lives in a single HTML file with zero dependencies.

What I built

FlowKit is organized around three core views, switchable from a compact icon sidebar:

📋 Task Manager — A full Kanban-style task list with:

• Priority badges (High / Med / Low) with color coding
• Due date tracking per task
• Status labels: Todo, In Progress, Blocked, Done
• Tag system for categorization
• Inline checkbox to mark tasks complete

⏱ Focus Timer — A Pomodoro-style countdown timer:

• 25-minute work sessions
• Start / Pause / Reset controls
• Stays visible as a floating timer widget

📊 Quick Stats — A live dashboard that reads from the task list:

• Total task count
• Completed vs blocked counts
• Auto-updates as tasks change

Tech choices

Everything is pure HTML/CSS/JS — no frameworks, no build step. I used CSS custom properties for the entire dark theme (--bg, --accent, --surface etc.), which made it easy to keep colors consistent across all three panels.

The sidebar navigation uses a simple display: none / flex toggle — clicking an icon sets .active on the right section. Felt much cleaner than routing.

What’s next

I want to add drag-and-drop reordering for tasks and a local-storage layer so tasks persist between sessions. Also thinking about a calendar view for due dates.

Live demo: siriusw823.github.io/sirius-flowkit/