[SCRUM-20] Add real-time autosave with debouncing for markdown editor

[Copilot]

Implements debounced autosave to localStorage with error handling for quota limits and visual feedback for save status.

Changes

New autosave utility (src/utils/autosave.ts)

• Debounced save function (2s delay, retriggerable)
• Error handling for quota exceeded and localStorage unavailable
• TypeScript interfaces for error types and callbacks

export function createDebouncedAutosave(delay: number = 2000) {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  
  return (filename: string, content: string, callback?: AutosaveCallback): void => {
    if (timeoutId !== null) clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      try {
        localStorage.setItem(filename, content);
        callback?.();
      } catch (error) {
        // Handle quota/availability errors
        callback?.(error);
      }
    }, delay);
  };
}

MarkdownEditor integration (src/components/MarkdownEditor.tsx)

• Triggers autosave on content change via useRef to maintain stable function instance
• Status indicator: "Saving..." → "✓ Autosaved" → idle (2s fade)
• Warning banner on storage errors with user guidance
• Manual save button preserved as fallback

Bug fix (src/components/Sidebar.tsx)

• Changed filename: any to filename: string | null with null check

Screenshots

Autosave in action:

Persistence after refresh:

Security

CodeQL: 0 alerts. LocalStorage data is unencrypted client-side storage (see SCRUM-20 STRIDE analysis).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[SCRUM-20] Add Real-Time Autosave for Markdown Editor</issue_title>
<issue_description>## 🤖 Instructions for @copilot

Development Branch: jira/scrum-20

IMPORTANT: This issue has full project context available. Please:

1. Fetch the jira issue description/details for the issue SCRUM-20 to get more context.
2. Work on the linked branch: jira/scrum-20 (see Development section →)
3. Read the project documentation in the docs/ directory:
   • docs/architecture/overview.md - System architecture and tech stack
   • docs/api-standards/ - API naming conventions and CRUD specifications
   • docs/laravel/ - Laravel patterns, database access, error handling, testing
   • docs/react/ - React component structure, state management, API consumption, testing
4. Follow the established patterns defined in the documentation
5. Implement the requirements described below
6. Create a PR from jira/scrum-20 when ready

---

📋 Requirements

h2. User Story

As a user who is writing or editing markdown documents,
I want my changes to be autosaved in real-time,
so that I don’t lose my work if I accidentally refresh or close the browser.

---

h2. Acceptance Criteria

The editor must automatically save the markdown content to local storage every 2 seconds of inactivity.

Autosave must not cause noticeable UI lag.

If the user closes the browser or refreshes the page, the content must still be available.

Autosave must not overwrite content if local storage is full or unavailable; show a warning instead.

Manual Save button should still be available as a fallback.

---

h2. Non-Functional Requirements

• Autosave operations must be debounced to avoid performance issues.
• Local storage operations must be resilient against storage quota errors.
• Error handling must log failures to the console for debugging.
• Code should be written in TypeScript with proper typing.

✅ Acceptance Criteria

• Implementation follows patterns defined in project documentation
• Code adheres to naming conventions and API standards from docs/api-standards/
• Laravel code follows patterns from docs/laravel/core-patterns.md
• React components follow structure from docs/react/component-structure.md
• Tests are added following docs/laravel/unit-testing-standards.md or docs/react/testing-library-patterns.md
• Error handling follows docs/laravel/error-handling.md
• All changes are made on branch jira/scrum-20

🔗 Jira Reference

Jira Issue: SCRUM-20
Priority: Medium
Type: Story

📚 Project Context

This repository follows strict coding standards. All patterns, conventions, and architectural decisions are documented in the docs/ directory of the jira/scrum-20 branch.

Before implementing, please read:

• Architecture overview for system understanding
• API standards for endpoint and naming conventions
• Laravel patterns for backend implementation
• React patterns for frontend implementation
• Testing standards for test coverage

---

🌿 Development

Branch: jira/scrum-20

This issue is linked to the jira/scrum-20 branch. All implementation work should be done on this branch, and a PR should be created from this branch to the main branch when ready.

---

This issue was automatically created from Jira with full project context.
</issue_description>

Comments on the Issue (you are @copilot in this section)

@dineshh-m ## 🤖 @copilot - Implementation Instructions

Hi @copilot! This issue is linked to the development branch jira/scrum-20 (see Development section above).

Please work on this issue following these steps:

1️⃣ Work on the Linked Branch

The branch jira/scrum-20 has been created and linked to this issue.

git checkout jira/scrum-20

2️⃣ Read Project Documentation

Before implementing, please review the project standards in the docs/ directory:
- Fetch the jira issue description/details for the issue 16 to get more context.

Architecture & Standards:

• docs/architecture/overview.md - System architecture, tech stack, patterns
• docs/api-standards/naming-conventions.md - Naming conventions for APIs, URLs, fields
• docs/api-standards/crud-api-spec.md - CRUD API specification with examples

Laravel Backend:

• docs/laravel/core-patterns.md - MVC patterns, controllers, models
• docs/laravel/database-access-layer.md - Eloquent ORM, queries, migrations
• docs/laravel/error-handling.md - Error handling patterns
• docs/laravel/unit-testing-standards.md - PHPUnit testing patterns

React Frontend:

• docs/react/component-structure.md - Component organization and patterns
• docs/react/state-management.md - React Query, Context API, state patterns
• `docs/react/api...

• Fixes [SCRUM-20] Add Real-Time Autosave for Markdown Editor #16

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.