From 4cc9f55e4c5e679ef3b350788171574709c0ba4c Mon Sep 17 00:00:00 2001
From: Shivangi <shivangichaurasia1515@gmail.com>
Date: Wed, 20 May 2026 20:31:15 +0530
Subject: [PATCH] feat: Add README completion progress indicator

---
 src/pages/ReadmeMaker/EditorPanel.jsx | 27 ++++----
 src/pages/ReadmeMaker/ReadmeMaker.jsx |  2 +
 src/pages/ReadmeMaker/Sidebar.jsx     | 63 +++++++++++++++++-
 src/styles/index.css                  | 92 +++++++++++++++++++++++++++
 src/utils/markdownUtils.js            | 56 ++++++++++++++++
 5 files changed, 226 insertions(+), 14 deletions(-)

diff --git a/src/pages/ReadmeMaker/EditorPanel.jsx b/src/pages/ReadmeMaker/EditorPanel.jsx
index 4fe52ff..8c8ab9c 100644
--- a/src/pages/ReadmeMaker/EditorPanel.jsx
+++ b/src/pages/ReadmeMaker/EditorPanel.jsx
@@ -14,10 +14,10 @@ function WordCount({ text }) {
   );
 }
 
-function EditorSection({ num, title, badge, hidden, children }) {
+function EditorSection({ id, num, title, badge, hidden, children }) {
   if (hidden) return null;
   return (
-    <div className="editor-section">
+    <div className="editor-section" id={id}>
       <div className="es-header">
         <div className="es-num">{num}</div>
         <div className="es-title">{title}</div>
@@ -61,7 +61,7 @@ export default function EditorPanel({
     <div className="editor">
       <div className="editor-inner" id="editorInner">
 
-        <EditorSection num={1} title="Project Title & Badges" hidden={!sectionState.title}>
+        <EditorSection id="editor-section-title" num={1} title="Project Title & Badges" hidden={!sectionState.title}>
           <div className="two-col">
             <div>
               <label>PROJECT NAME *</label>
@@ -102,7 +102,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={2} title="Description" hidden={!sectionState.description}>
+        <EditorSection id="editor-section-description" num={2} title="Description" hidden={!sectionState.description}>
           <div>
             <label>SHORT DESCRIPTION</label>
             <textarea className="textInput" id="description" style={{ minHeight: 90 }}
@@ -121,7 +121,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num="3A" title="Academic / Research Details" hidden={!sectionState.academic}>
+        <EditorSection id="editor-section-academic" num="3A" title="Academic / Research Details" hidden={!sectionState.academic}>
           <div>
             <label>ABSTRACT</label>
             <textarea className="textInput" id="abstractText" style={{ minHeight: 100 }}
@@ -157,7 +157,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={3} title="Features" hidden={!sectionState.features}>
+        <EditorSection id="editor-section-features" num={3} title="Features" hidden={!sectionState.features}>
           <div>
             <label>KEY FEATURES — use "### Category" for groups, "- item" for bullets</label>
             <textarea className="textInput" id="features" style={{ minHeight: 130 }}
@@ -168,6 +168,7 @@ export default function EditorPanel({
         </EditorSection>
 
         <EditorSection
+          id="editor-section-techstack"
           num={4} title="Tech Stack" hidden={!sectionState.techstack}
           badge={techCount > 0 ? `${techCount} selected` : undefined}
         >
@@ -192,7 +193,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={5} title="Installation" hidden={!sectionState.installation}>
+        <EditorSection id="editor-section-installation" num={5} title="Installation" hidden={!sectionState.installation}>
           <div>
             <label>PREREQUISITES</label>
             <input type="text" id="prereqs" placeholder="Python 3.10+, Node.js 18+"
@@ -221,7 +222,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={7} title="Project Structure Visualizer" hidden={!sectionState.structure}>
+        <EditorSection id="editor-section-structure" num={7} title="Project Structure Visualizer" hidden={!sectionState.structure}>
           <div>
             <label>PASTE YOUR FOLDER STRUCTURE (indented with spaces)</label>
             <textarea className="textInput" id="rawStructure" style={{ minHeight: 120 }}
@@ -235,7 +236,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={8} title="Screenshots" hidden={!sectionState.screenshots}>
+        <EditorSection id="editor-section-screenshots" num={8} title="Screenshots" hidden={!sectionState.screenshots}>
           <div>
             <label>LIVE DEMO / VIDEO LINK (optional)</label>
             <input type="url" id="videoUrl" placeholder="https://youtube.com/watch?v=..."
@@ -286,7 +287,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={9} title="API Documentation" hidden={!sectionState.api}>
+        <EditorSection id="editor-section-api" num={9} title="API Documentation" hidden={!sectionState.api}>
           <div>
             <label>API ENDPOINTS — format: METHOD /path | Description (one per line)</label>
             <textarea className="textInput" id="apiDocs" style={{ minHeight: 100 }}
@@ -301,7 +302,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={10} title="Contributing" hidden={!sectionState.contributing}>
+        <EditorSection id="editor-section-contributing" num={10} title="Contributing" hidden={!sectionState.contributing}>
           <div>
             <label>CUSTOM CONTRIBUTING NOTES (optional — default guide auto-generated)</label>
             <textarea className="textInput" id="contribNotes" style={{ minHeight: 70 }}
@@ -311,7 +312,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={11} title="License & Author" hidden={!sectionState.author}>
+        <EditorSection id="editor-section-author" num={11} title="License & Author" hidden={!sectionState.author}>
           <div className="two-col">
             <div>
               <label>LICENSE</label>
@@ -366,7 +367,7 @@ export default function EditorPanel({
           </div>
         </EditorSection>
 
-        <EditorSection num={12} title="Support & Donation" hidden={!sectionState.support}>
+        <EditorSection id="editor-section-support" num={12} title="Support & Donation" hidden={!sectionState.support}>
           <div>
             <label>SUPPORT MESSAGE (optional)</label>
             <textarea className="textInput" id="supportMsg" style={{ minHeight: 60 }}
diff --git a/src/pages/ReadmeMaker/ReadmeMaker.jsx b/src/pages/ReadmeMaker/ReadmeMaker.jsx
index cdbed40..0e96f0d 100644
--- a/src/pages/ReadmeMaker/ReadmeMaker.jsx
+++ b/src/pages/ReadmeMaker/ReadmeMaker.jsx
@@ -93,6 +93,8 @@ export default function ReadmeMaker() {
             toggleTech={toggleTech}
             applyTemplate={handleApplyTemplate}
             activeTemplate={activeTemplate}
+            formData={formData}
+            screenshots={screenshots}
           />
           <EditorPanel
             formData={formData}
diff --git a/src/pages/ReadmeMaker/Sidebar.jsx b/src/pages/ReadmeMaker/Sidebar.jsx
index 9c16fd2..4a25ba3 100644
--- a/src/pages/ReadmeMaker/Sidebar.jsx
+++ b/src/pages/ReadmeMaker/Sidebar.jsx
@@ -1,14 +1,75 @@
 import { SECTIONS, TECHS, TEMPLATES } from '../../utils/constants';
+import { calculateProgress } from '../../utils/markdownUtils';
 
 export default function Sidebar({
   sectionState, toggleSection,
   selectedTechs, toggleTech,
   applyTemplate, activeTemplate,
+  formData, screenshots,
 }) {
-  const activeSectionCount = Object.values(sectionState).filter(Boolean).length;
+  const progress = calculateProgress({ formData, sectionState, selectedTechs, screenshots });
+
+  const handleMissingChipClick = (id) => {
+    if (!sectionState[id]) {
+      toggleSection(id, true);
+    }
+    setTimeout(() => {
+      const element = document.getElementById(`editor-section-${id}`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        const input = element.querySelector('input, textarea');
+        input?.focus();
+      }
+    }, 100);
+  };
 
   return (
     <aside className="sidebar">
+      <div className="sidebar-section progress-section">
+        <div className="sidebar-label">README Completion</div>
+        <div className="progress-container">
+          <div className="progress-bar-bg">
+            <div className="progress-bar-fill" style={{ width: `${progress.percentage}%` }}></div>
+          </div>
+          <div className="progress-info">
+            <span className="progress-percent">{progress.percentage}%</span>
+            <span className="progress-status">
+              {progress.percentage === 100 && '🎉 Perfect!'}
+              {progress.percentage >= 75 && progress.percentage < 100 && '🚀 Great start!'}
+              {progress.percentage >= 40 && progress.percentage < 75 && '📝 Getting there...'}
+              {progress.percentage < 40 && '✍️ Just starting'}
+            </span>
+          </div>
+        </div>
+
+        {progress.missingCore.length > 0 && (
+          <div className="missing-sections-container">
+            <div className="missing-title">Recommended Sections:</div>
+            <div className="missing-chips">
+              {progress.missingCore.map(id => {
+                const labelMap = {
+                  title: 'Title',
+                  description: 'Description',
+                  techstack: 'Tech Stack',
+                  installation: 'Installation',
+                  author: 'Author/License'
+                };
+                return (
+                  <button
+                    key={id}
+                    className="missing-chip"
+                    onClick={() => handleMissingChipClick(id)}
+                    title="Click to enable and focus this section"
+                  >
+                    ⚠️ {labelMap[id]}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
       <div className="sidebar-section">
         <div className="sidebar-label">Templates</div>
         <div className="templates-grid">
diff --git a/src/styles/index.css b/src/styles/index.css
index 3c875d4..767bc92 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -716,6 +716,98 @@ body.light-mode .hero-title {
   box-shadow: 0 0 10px var(--accent);
 }
 
+/* README Progress Indicator */
+.progress-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.progress-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.progress-bar-bg {
+  width: 100%;
+  height: 8px;
+  background: var(--surface2);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%);
+  border-radius: 4px;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+
+.progress-percent {
+  font-weight: 700;
+  color: var(--text);
+  font-family: "JetBrains Mono", monospace;
+}
+
+.progress-status {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.missing-sections-container {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.missing-title {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text);
+  opacity: 0.8;
+}
+
+.missing-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.missing-chip {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  color: var(--yellow);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.missing-chip:hover {
+  background: var(--surface3);
+  border-color: var(--yellow);
+  transform: translateY(-1px);
+}
+
+.missing-chip:active {
+  transform: translateY(0);
+}
+
 /* Section toggles */
 .section-toggles {
   display: flex;
diff --git a/src/utils/markdownUtils.js b/src/utils/markdownUtils.js
index 43358c7..96d9070 100644
--- a/src/utils/markdownUtils.js
+++ b/src/utils/markdownUtils.js
@@ -308,3 +308,59 @@ export function getWordCount(text) {
   if (!text) return 0;
   return text.trim().split(/\s+/).filter(w => w && w !== '###' && w !== '-').length;
 }
+
+export function calculateProgress({ formData, sectionState, selectedTechs, screenshots }) {
+  const isFilled = (id) => {
+    if (!sectionState[id]) return false;
+    switch (id) {
+      case 'title':
+        return !!formData.projName?.trim();
+      case 'description':
+        return !!formData.description?.trim();
+      case 'features':
+        return !!formData.features?.trim();
+      case 'techstack':
+        return selectedTechs?.size > 0 || !!formData.customTech?.trim();
+      case 'installation':
+        return !!formData.installCmds?.trim() || !!formData.usageCmd?.trim();
+      case 'structure':
+        return !!formData.rawStructure?.trim();
+      case 'screenshots':
+        return (screenshots && screenshots.length > 0) || !!formData.imageUrls?.trim() || !!formData.videoUrl?.trim();
+      case 'api':
+        return !!formData.apiDocs?.trim();
+      case 'contributing':
+        return true;
+      case 'author':
+        return !!formData.authorName?.trim() || !!formData.authorGh?.trim();
+      case 'support':
+        return !!formData.supportMsg?.trim() || !!formData.supportBmac?.trim() || !!formData.supportKofi?.trim() || !!formData.supportPatreon?.trim() || !!formData.supportGhSponsors?.trim();
+      case 'academic':
+        return !!formData.abstractText?.trim() || !!formData.paperLink?.trim();
+      default:
+        return false;
+    }
+  };
+
+  const coreSections = ['title', 'description', 'techstack', 'installation', 'author'];
+  const optionalSections = ['features', 'structure', 'screenshots', 'api', 'contributing', 'academic', 'support'];
+
+  let coreScore = 0;
+  coreSections.forEach(id => {
+    if (isFilled(id)) coreScore += 15;
+  });
+
+  let optionalScore = 0;
+  optionalSections.forEach(id => {
+    if (isFilled(id)) optionalScore += 5;
+  });
+  optionalScore = Math.min(25, optionalScore);
+
+  const totalProgress = coreScore + optionalScore;
+  const missingCore = coreSections.filter(id => !isFilled(id));
+
+  return {
+    percentage: totalProgress,
+    missingCore,
+  };
+}