Understanding the PlantKeeper Interface

🎯 What You'll Learn

• Main interface areas - Dashboard, sidebar, content area
• Navigation patterns - How to move between features
• View options - Grid, list, calendar, table layouts
• Quick actions - Fast access to common tasks
• Keyboard shortcuts - Speed up your workflow

⚡ Quick Start

5-Second Navigation:

1. Sidebar (left) - Main navigation menu
2. Dashboard (center) - Your plants and tasks
3. Quick Actions - Buttons on plant cards
4. Tabs - Plant details organized by topic
5. User Menu (top right) - Settings and logout

📚 Complete Guide

Main Interface Layout

Three Key Areas

1. Sidebar Navigation (Left)

Always Visible (Desktop):

📊 Dashboard         - Home screen, today's tasks
🌱 My Plants         - All plants, search, filter
⏰ Reminders         - Active reminders, schedule
📈 Growth Tracking   - Charts, measurements
📔 Diary             - All diary entries
🤖 Plant Doctor      - AI consultation
⚙️ Settings          - Account, preferences

Mobile Behavior:

• Hidden by default (saves screen space)
• Tap hamburger menu (☰) top left to open
• Tap outside sidebar to close

Active State: Current page highlighted in green.

2. Top Bar (Header)

Left Side:

• PlantKeeper Logo - Click to return to dashboard
• Hamburger Menu (☰) - Mobile only, toggles sidebar

Center (contextual):

• Page title: "Dashboard", "My Plants", "Plant Details"
• Breadcrumb trail: "My Plants > Monstera > Growth"

Right Side:

• 🔔 Notifications - Bell icon, red badge if unread
• 👤 User Menu - Avatar/initials, dropdown:
  • Account Settings
  • Billing (Premium users)
  • Help & Support
  • Log Out

3. Main Content Area (Center)

Changes Based on Page:

Dashboard: Plant cards + Today's Tasks My Plants: Plant grid/list + filters Plant Details: Tabs + content Reminders: Calendar + list view Growth: Charts + data table Diary: Timeline + entries Plant Doctor: Chat interface

Dashboard Deep Dive

Home Screen Overview

Top Section - Quick Stats

Three Key Metrics (cards):

1. Total Plants 🌱

   • Count: "12 plants"
   • Click: Goes to My Plants

2. Today's Tasks ✅

   • Count: "3 tasks due"
   • Click: Expands task list

3. Health Overview 💚

   • Status: "11 healthy, 1 needs attention" language: "en"
   • Click: Filters plants by health

Quick Actions Bar:

• ➕ Add Plant - Large green button
• 📊 View Reports - Growth/care analytics
• 🔍 Search Plants - Quick search

Main Area - Plant Cards

Grid Layout (default):

Each Card Shows:

• 📷 Plant Photo (or placeholder icon)
• 🏷️ Plant Name ("My Monstera")
• 🌿 Species ("Monstera deliciosa")
• 📍 Location ("Living Room")
• 💚 Health Status (colored dot: green/yellow/red)
• ⏰ Next Task ("Water in 2 days")

Quick Action Buttons (hover on desktop):

• 💧 Water
• 🌱 Fertilize
• 📝 Add Diary Entry
• 👁️ View Details

Click Card: Opens plant details page.

Right Sidebar - Today's Tasks

Task List (desktop only):

Shows:

• Tasks due today
• Overdue tasks (red badge)
• Upcoming tasks (next 3 days)

Each Task:

• Task type icon (💧 🌱 ✂️)
• Plant name
• Task description
• Due time
• Complete button ✅

Empty State: "No tasks due today! 🎉"

My Plants Page

Complete Plant Collection

View Options

Switch Between Views (top right icons):

Grid View 🔲 (Default)

• Visual, card-based
• Shows photos prominently
• Best for: Browsing, visual recognition

List View 📋

• Compact, row-based
• More plants visible
• Shows more data per plant
• Best for: Scanning many plants

Table View 📊 (Premium)

• Spreadsheet-style
• Sortable columns
• Bulk selection
• Best for: Data analysis, bulk operations

Filters & Search

Top Bar Controls:

Search Box 🔍

• Type plant name, species, location
• Real-time filtering
• Searches: name, species, nickname, notes

Filter Button 🔽

Opens Filter Panel:

• Location (room dropdown)
• Health Status (healthy, needs attention, critical)
• Light Exposure (direct, indirect, low)
• Care Due (water due, fertilize due, any task)
• Species (dropdown)

Active Filters: Show as badges, click X to remove.

Sort Options ⬍

• Alphabetical (A-Z, Z-A)
• Date Added (newest, oldest)
• Health Status (worst first)
• Next Task (soonest first)
• Species (alphabetical)

Bulk Actions

Select Multiple Plants (checkbox mode):

1. Click "Select" button (top right)
2. Checkboxes appear on plant cards
3. Select plants (✅)
4. Bulk actions bar appears at bottom

Bulk Actions:

• 💧 Water all selected
• 🌱 Fertilize all selected
• 📝 Add diary entry to all
• 🗑️ Delete all selected
• 🏷️ Change location (move all)
• 📤 Export data

Plant Details Page

Individual Plant View

Tab Navigation

6 Tabs (horizontal bar below plant header):

📊 Overview     - Quick summary, health, stats
🌿 Care Info    - Species care guide, requirements
📈 Growth       - Charts, measurements, progress
📔 Diary        - Timeline of all care activities
⏰ Reminders    - Active reminders for this plant
📷 Photos       - Photo gallery, upload new

Tab Behavior:

• Click tab to switch content
• Active tab highlighted (underline + bold)
• URL updates: /plants/[id]/growth
• Direct links work (shareable)

Plant Header

Above Tabs (sticky on scroll):

Left Side:

• ← Back Button - Returns to My Plants
• 📷 Plant Photo (large)
• 🏷️ Plant Name (editable inline)
• 🌿 Species + Nickname
• 📍 Location

Right Side:

• Health Status Badge - Color-coded
• Edit Plant ✏️ - Edit all details
• More Actions (⋮ menu):
  • Move to different location
  • Archive plant
  • Delete plant

Quick Actions Bar (below header):

• 💧 Water - Mark as watered
• 🌱 Fertilize - Mark as fertilized
• 📝 Add Diary - Quick entry
• 📏 Record Growth - Add measurement
• 🤖 Ask Plant Doctor - Get help

Overview Tab Content

Dashboard for Single Plant:

Health Summary Card

• Overall health score (1-10)
• Last watered (X days ago)
• Last fertilized (X days ago)
• Days since added
• Growth rate

Recent Activity

• Last 5 diary entries
• Quick preview
• "View all" link to Diary tab

Upcoming Care

• Next 3 reminders
• Due dates/times
• Quick complete buttons

Quick Stats

• Total diary entries
• Total photos
• Growth measurements
• Days in collection

Reminders Page

Calendar + List View

Calendar View (Default)

Monthly Calendar:

• Days with tasks highlighted
• Color-coded by task type:
  • 💧 Blue = Watering
  • 🌱 Green = Fertilizing
  • ✂️ Purple = Pruning
  • 🐛 Red = Pest check
  • 🔄 Orange = Other

Interaction:

• Click day to see tasks
• Hover shows quick preview
• Navigation: ← → arrows for months

List View

All Reminders (sortable):

Today Section

• All tasks due today
• Overdue tasks (red banner)

Upcoming Section

• Grouped by date
• Next 7 days visible
• Expand to see more

Recurring Section

• All active recurring reminders
• Next due date shown
• Edit/pause/delete options

Reminder Card

Each Reminder Shows:

• Task type icon + name
• Plant name (clickable)
• Frequency ("Every 7 days")
• Next due (date + time)
• Notification status (🔔 on/off)

Actions:

• ✅ Complete now
• ✏️ Edit reminder
• ⏸️ Pause reminder
• 🗑️ Delete reminder

Growth Tracking Page

Charts & Data

Chart View (Default)

Interactive Charts:

Height Chart 📏

• Line chart over time
• Zoom in/out
• Hover for exact values
• Toggle plants on/off

Leaf Count Chart 🍃

• Line chart over time
• Multiple plants comparable
• Growth spurts visible

Chart Controls:

• Time range: 1M, 3M, 6M, 1Y, All
• Compare plants (multi-select)
• Export chart as image

Data Table View

All Measurements:

• Date | Plant | Height | Leaves | Notes
• Sortable columns
• Filter by plant
• Export to CSV (Premium)

Add Measurement Button

Floating Action Button (bottom right):

• ➕ icon, green circle
• Click to open measurement form
• Quick entry: Plant, Height, Leaves, Save

Diary Page

Timeline of Activities

Timeline View (Default)

Chronological Feed:

Entry Card:

• 📅 Date + time
• 🏷️ Entry type badge (watered, fertilized, observation)
• 🌱 Plant name(s) affected
• 📝 Notes/description
• 📷 Photos (if attached)
• 🏷️ Tags

Scroll Behavior:

• Infinite scroll (loads more as you scroll)
• "Load More" button at bottom
• Smooth scrolling

Filter & Search

Filter by:

• Entry Type (dropdown)
• Plant (multi-select)
• Date Range (calendar picker)
• Tags (checkbox list)

Search:

• Full-text search in notes
• Real-time results

Add Entry Button

Floating Action Button (bottom right):

• ➕ icon, green circle
• Click to open diary form
• Quick entry or detailed entry

Plant Doctor Page

AI Chat Interface

Chat Layout

Left Sidebar (desktop):

• Conversation History
• Recent consultations
• Click to load conversation
• New conversation button ➕

Main Chat Area:

• Messages (user + assistant)
• Scroll to see history
• Auto-scrolls to latest message

Input Area (bottom):

• Text box for questions
• Photo upload button 📷
• Voice input button 🎤 (Premium)
• Send button ➤

Message Types

User Messages

• Right-aligned
• Blue bubble
• Your question/photo

Assistant Messages

• Left-aligned
• Green bubble
• AI response
• Formatted with sections

System Messages

• Center-aligned
• Gray text
• "Analyzing photo...", "Generating response..."

Photo Upload in Chat

Two Ways:

1. Click Photo Icon 📷

   • Opens file picker
   • Select photo
   • Preview shows
   • Click send

2. Drag & Drop

   • Drag photo into chat
   • Drop zone highlights
   • Auto-uploads

Photo Preview: Shows thumbnail with X to remove.

Mobile Interface Differences

Optimizations for Small Screens

Sidebar Behavior

• Collapsed by default - Saves screen space
• Hamburger menu - Tap ☰ to open
• Overlay - Sidebar covers content (doesn't push)
• Tap outside - Closes sidebar

Bottom Navigation (Mobile Only)

5 Icon Tabs (bottom of screen):

🏠 Dashboard
🌱 Plants
⏰ Reminders
📔 Diary
👤 More (Settings/Plant Doctor)

Active Tab: Highlighted in green.

Responsive Plant Cards

Stacks Vertically:

• Full width
• Photo on top
• Info below
• Quick actions always visible

Floating Action Buttons

More Prominent:

• Larger size (easier to tap)
• Bottom right corner
• Labeled (not just icon)

Swipe Gestures

List Views:

• Swipe left on item → Quick actions (Complete, Edit, Delete)
• Swipe right on item → Mark complete

Keyboard Shortcuts

Speed Up Your Workflow (Desktop)

Global Shortcuts

Navigation:

• D - Go to Dashboard
• P - Go to My Plants
• R - Go to Reminders
• G - Go to Growth Tracking
• J - Go to Diary
• A - Go to Plant Doctor

Actions:

• N - Add new plant
• S - Focus search box
• / - Focus search (anywhere)
• ? - Show keyboard shortcuts help
• Esc - Close modal/dialog

Plant List Shortcuts

When Viewing My Plants:

• ↑ / ↓ - Navigate between plants
• Enter - Open selected plant details
• W - Water selected plant
• F - Fertilize selected plant
• Delete - Delete selected plant (with confirmation)

Plant Details Shortcuts

When Viewing Plant:

• 1-6 - Switch between tabs (Overview, Care, Growth, Diary, Reminders, Photos)
• E - Edit plant
• B - Go back to My Plants
• W - Quick water action
• F - Quick fertilize action

Diary Shortcuts

• N - New diary entry
• ↑ / ↓ - Navigate entries
• Enter - Open selected entry

Forms & Modals

• Enter - Submit form (when valid)
• Esc - Close modal/cancel
• Tab - Next field
• Shift + Tab - Previous field

Accessibility Shortcuts

• Alt + / - Skip to main content
• Alt + N - Skip to navigation
• Alt + S - Skip to search

Customization Options

Personalize Your Interface

Theme Options

Settings → Display:

Light Mode (Default)

• White background
• Dark text
• Best for: Daytime use, bright rooms

Dark Mode

• Dark background
• Light text
• Best for: Evening use, eye strain

Auto (System)

• Follows OS setting
• Switches automatically at sunset

Density Options

Settings → Display → Density:

Comfortable (Default)

• More spacing
• Larger elements
• Easier to tap/click

Compact

• Less spacing
• More content visible
• Best for: Power users, large collections

Default View

Settings → Display → Default View:

• Grid view (visual)
• List view (compact)
• Table view (data-focused, Premium)

Plant Card Info

Settings → Display → Card Information:

Toggle Visibility:

• ✅ Show location
• ✅ Show next task
• ✅ Show health status
• ✅ Show species
• ⬜ Show acquisition date
• ⬜ Show pot size

Customize: Show only what matters to you!

Language

Settings → General → Language:

• 🇬🇧 English (default)
• 🇪🇸 Español
• More languages coming soon

💡 Tips & Tricks

Use Search Liberally

Fastest Way to Find Plants:

• Press / anywhere
• Type few letters of plant name
• Enter to open plant details

Faster Than: Scrolling through My Plants!

Bookmark Frequent Views

Browser Bookmarks:

• My Plants filtered by location: /plants?location=Living+Room
• Today's reminders: /reminders?filter=today
• Growth charts: /growth?period=6M

Quick Access: Bookmark your most-used views!

Master Keyboard Shortcuts

Learn Gradually:

• Week 1: Learn D, P, N (navigation + add plant)
• Week 2: Add W, F (watering, fertilizing)
• Week 3: Add 1-6 (tab switching)

Speed Boost: 5 shortcuts = 50% faster workflow!

Customize Your Dashboard

Settings → Dashboard → Widgets:

Choose What to Display:

• ✅ Today's tasks (essential)
• ✅ Recent plants (helpful)
• ✅ Health summary (useful)
• ⬜ Growth highlights (optional)
• ⬜ Diary preview (optional)

Clean Dashboard: Show only what you check daily!

Use Right-Click Menus

Context Menus (desktop):

• Right-click plant card → Quick actions
• Right-click diary entry → Edit/delete
• Right-click reminder → Complete/edit/delete

Faster Than: Opening full details!

❓ Common Questions

Q: Why doesn't sidebar show on mobile?

A: Space optimization! Small screens need content space.

Access Sidebar:

• Tap hamburger menu (☰) top left
• Or use bottom navigation (🏠 🌱 ⏰ 📔 👤)

Tip: Bottom nav faster for main sections!

Q: How do I change default view (grid vs list)?

A: Settings → Display → Default View

Per-Page Override: View switcher (top right icons) temporarily changes view.

Preference Saved: Per device (desktop might prefer table, mobile grid).

Q: Can I hide the right sidebar (Today's Tasks)?

A: Yes! Settings → Display → Sidebar

Options:

• Always show (default, desktop only)
• Auto-hide (shows on hover)
• Always hide

Mobile: No right sidebar (screen too small).

Q: What are the color-coded health dots?

A: Plant health status:

• 🟢 Green - Healthy (all care on schedule)
• 🟡 Yellow - Needs attention (task overdue 1-3 days)
• 🟠 Orange - Concerning (task overdue 4-7 days)
• 🔴 Red - Critical (task overdue 7+ days or Plant Doctor flagged issue)

Click Status: See what needs attention.

Q: How do I see all plants on one page (no pagination)?

A: My Plants → Scroll down → Infinite scroll loads more automatically.

Disable Auto-Load: Settings → Display → Pagination → "Show Load More button instead"

Tip: Table view (Premium) best for large collections!

Q: Can I customize keyboard shortcuts?

A: Not yet! Currently using standard shortcuts.

Feature Request: Submitted to roadmap for future release.

Workaround: Browser extensions (AutoHotkey, BetterTouchTool) can remap keys.

🔗 Related Topics

Essential Reading

• Quick Start Guide - 5-minute overview
• Core Concepts - How PlantKeeper works

Feature-Specific Navigation

• Dashboard Overview - Dashboard deep dive
• Plant Views - Grid, list, table comparison

Customization

• Display Customization - Personalize interface
• Keyboard Shortcuts - Complete shortcut reference

Last Updated: October 24, 2025
Document Version: 2.0 (Modular Structure)