editor improvements

GanjooRazor/Areas/User/Pages/Editor.cshtml

@@ -1808,8 +1808,13 @@ else
 
         @foreach (var verse in Model.PageInformation.Poem.Verses)
         {
+            var verseCoupletNumber = Model.GetVerseCoupletNumber(verse);
             <div class="up-verse-row" id="tr-@verse.VOrder">
-                <p><span class="up-verse-number">@Model.GetVerseCoupletNumber(verse).ToPersianNumbers()</span><span class="up-hint">ترتیب مصرع یا خط از ابتدا: @verse.VOrder.ToPersianNumbers()</span></p>
+                <p>
+                    <span class="up-verse-number">@verseCoupletNumber.ToPersianNumbers()</span>
+                    <span class="up-verse-progress" title="@verseCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(Model.GetCoupletProgressPercent(verseCoupletNumber))%"></span></span>
+                    <span class="up-hint">ترتیب مصرع یا خط از ابتدا: @verse.VOrder.ToPersianNumbers()</span>
+                </p>
 
                 <div class="up-field">
                     <label for="id-@($"{verse.VOrder}")"><span class="up-field-icon" aria-hidden="true">📝</span> ویراستهٔ من</label>
@@ -1941,7 +1946,7 @@ else
                 </script>
 
                 <div class="up-btn-group">
-                    <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost">⬇ رفتن به ذخیره</a>
+                    <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
                     @if (Model.ShowAdminOps && verse.VOrder > 1 && verse.VersePosition != RMuseum.Models.Ganjoor.VersePosition.Left)
                     {
                         <a role="button" id="breakpoem-@verse.VOrder" class="up-btn up-btn--sm up-btn--danger" onclick="breakPoem(@Model.PageInformation.Poem.Id, @verse.VOrder, '@verse.Text')">✂️ شکستن از اینجا</a>
@@ -2219,7 +2224,7 @@ else
             </div>
         </div>
 
-        <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost">⬇ رفتن به ذخیره</a>
+        <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
     </div>
 
     <div class="up-card">
@@ -2233,7 +2238,12 @@ else
            || Model.PageInformation.Poem.Verses[verseIndex].VersePosition == RMuseum.Models.Ganjoor.VersePosition.Paragraph
            )
             {
+                var summaryCoupletNumber = Model.GetVerseCoupletNumber(Model.PageInformation.Poem.Verses[verseIndex]);
                 <div class="up-verse-row">
+                    <p>
+                        <span class="up-verse-number">@summaryCoupletNumber.ToPersianNumbers()</span>
+                        <span class="up-verse-progress" title="@summaryCoupletNumber.ToPersianNumbers() از @Model.TotalCoupletsCount.ToPersianNumbers()"><span class="up-verse-progress-fill" style="width:@(Model.GetCoupletProgressPercent(summaryCoupletNumber))%"></span></span>
+                    </p>
                     <div class="up-field">
                         <label>متن</label>
                         @if (Model.PageInformation.Poem.Verses[verseIndex].VersePosition == RMuseum.Models.Ganjoor.VersePosition.Paragraph)
@@ -2308,7 +2318,7 @@ else
                         </div>
                     </div>
 
-                    <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost">⬇ رفتن به ذخیره</a>
+                    <a role="button" href="#savecorrections" class="up-btn up-btn--sm up-btn--ghost up-btn--block">⬇ رفتن به ذخیره</a>
                 </div>
             }
         }

GanjooRazor/Areas/User/Pages/Editor.cshtml.cs

@@ -88,6 +88,27 @@ namespace GanjooRazor.Areas.User.Pages
             return -1;
         }
 
+        /// <summary>
+        /// total number of couplets/lines in the poem (same counting rules as GetVerseCoupletNumber,
+        /// just run all the way through) - used to render the small read-progress bar next to the
+        /// couplet number in the verse-editing and couplet-summary ("خلاصه و معنی") sections.
+        /// </summary>
+        public int TotalCoupletsCount =>
+            PageInformation?.Poem?.Verses == null || PageInformation.Poem.Verses.Length == 0
+            ? 0
+            : GetVerseCoupletNumber(PageInformation.Poem.Verses[PageInformation.Poem.Verses.Length - 1]);
+
+        /// <summary>
+        /// 0-100 fill percentage for the read-progress bar, for a given couplet number (1-based, as
+        /// returned by GetVerseCoupletNumber)
+        /// </summary>
+        public int GetCoupletProgressPercent(int coupletNumber)
+        {
+            if (TotalCoupletsCount <= 0 || coupletNumber <= 0)
+                return 0;
+            return Math.Min(100, coupletNumber * 100 / TotalCoupletsCount);
+        }
+
 
         public PoemRelatedImage TextSourceImage { get; set; }
 

GanjooRazor/wwwroot/css/user-panel.css

@@ -800,6 +800,26 @@ body.up-modal-open {
     vertical-align: middle;
 }
 
+/* small read-progress indicator shown beside the couplet number - how far through the whole
+   poem this couplet is, not a form control */
+.up-verse-progress {
+    display: inline-block;
+    width: 44px;
+    height: 5px;
+    border-radius: 999px;
+    background: var(--up-border);
+    overflow: hidden;
+    vertical-align: middle;
+    margin-inline-end: var(--up-space-2);
+}
+
+.up-verse-progress-fill {
+    display: block;
+    height: 100%;
+    background: var(--up-primary);
+    border-radius: 999px;
+}
+
 .up-form-actions {
     display: flex;
     gap: var(--up-space-2);