From 4564a78457c4a8b58411e1a2a827b112496f81bc Mon Sep 17 00:00:00 2001
From: Hamid Reza Mohammadi <mohammadi.hr@gmail.com>
Date: Fri, 1 Oct 2021 13:40:05 +0330
Subject: [PATCH] #208 bookmarking poem from main page UI

---
 GanjooRazor/Pages/AudioClip.cshtml           |  4 +-
 GanjooRazor/Pages/Bp.cshtml                  |  2 +-
 GanjooRazor/Pages/Error.cshtml               |  2 +-
 GanjooRazor/Pages/Golha.cshtml               |  2 +-
 GanjooRazor/Pages/Index.cshtml               | 10 ++--
 GanjooRazor/Pages/Index.cshtml.cs            | 18 ++++++
 GanjooRazor/Pages/Login.cshtml               |  2 +-
 GanjooRazor/Pages/Pin.cshtml                 |  2 +-
 GanjooRazor/Pages/ReportComment.cshtml       |  2 +-
 GanjooRazor/Pages/ResetPassword.cshtml       |  2 +-
 GanjooRazor/Pages/Search.cshtml              |  4 +-
 GanjooRazor/Pages/Shared/_AdminLayout.cshtml |  2 +-
 GanjooRazor/Pages/Shared/_Layout.cshtml      |  2 +-
 GanjooRazor/Pages/SignUp.cshtml              |  2 +-
 GanjooRazor/Pages/Spotify.cshtml             |  2 +-
 GanjooRazor/Pages/Trans.cshtml               |  2 +-
 GanjooRazor/Pages/_GanjoorPagePartial.cshtml | 45 ++++++++-------
 GanjooRazor/Pages/errors/404.cshtml          |  2 +-
 GanjooRazor/wwwroot/css/p8.css               | 31 ++++++++++
 GanjooRazor/wwwroot/js/bk.js                 | 59 ++++++++++++++++----
 20 files changed, 145 insertions(+), 52 deletions(-)

diff --git a/GanjooRazor/Pages/AudioClip.cshtml b/GanjooRazor/Pages/AudioClip.cshtml
index 78817f70..173318a6 100644
--- a/GanjooRazor/Pages/AudioClip.cshtml
+++ b/GanjooRazor/Pages/AudioClip.cshtml
@@ -15,7 +15,7 @@
         گنجور &raquo; نمایش خوانش
     </title>
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
-    <link href="~/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script>
@@ -143,7 +143,7 @@
     </p>
 
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <script src="~/js/bk.js"></script>
+    <script src="~/js/bk.js?version=2"></script>
     <script src="~/js/vaabd.js"></script>
     <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
     <script src="~/dist/add-on/jplayer.playlist.min.js"></script>
diff --git a/GanjooRazor/Pages/Bp.cshtml b/GanjooRazor/Pages/Bp.cshtml
index 273902cb..1b977944 100644
--- a/GanjooRazor/Pages/Bp.cshtml
+++ b/GanjooRazor/Pages/Bp.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از بیپتونز</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Error.cshtml b/GanjooRazor/Pages/Error.cshtml
index cbed5360..ed9464c4 100644
--- a/GanjooRazor/Pages/Error.cshtml
+++ b/GanjooRazor/Pages/Error.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/Pages/Golha.cshtml b/GanjooRazor/Pages/Golha.cshtml
index 1260c4c1..50030582 100644
--- a/GanjooRazor/Pages/Golha.cshtml
+++ b/GanjooRazor/Pages/Golha.cshtml
@@ -10,7 +10,7 @@
     <title>انتخاب قطعه‌ای از برنامهٔ گلها مرتبط با این شعر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/js/golha.js"></script>
diff --git a/GanjooRazor/Pages/Index.cshtml b/GanjooRazor/Pages/Index.cshtml
index b9c7b413..bbab8683 100644
--- a/GanjooRazor/Pages/Index.cshtml
+++ b/GanjooRazor/Pages/Index.cshtml
@@ -17,16 +17,15 @@
         <meta name="robots" content="noindex, nofollow" />
     }
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
     <script src="/lib/jquery/dist/jquery.min.js"></script>
     <script>
         var playerScrollLock = false;
     </script>
-    <script src="/js/bk.js"></script>
+    <script src="/js/bk.js?version=2"></script>
 
     @if (Model.IsHomePage)
     {
@@ -36,11 +35,12 @@
     {
         if (Model.IsPoemPage)
         {
-            <script>
+<script>
                 $(document).ready(function () {
                     btshmr(@Model.GanjoorPage.Id);
+                    checkIfBookmarked(@Model.GanjoorPage.Id);
                 });
-            </script>
+</script>
         }
         <script type="application/ld+json">
         {
diff --git a/GanjooRazor/Pages/Index.cshtml.cs b/GanjooRazor/Pages/Index.cshtml.cs
index f9490882..d9e209a4 100644
--- a/GanjooRazor/Pages/Index.cshtml.cs
+++ b/GanjooRazor/Pages/Index.cshtml.cs
@@ -713,5 +713,23 @@ namespace GanjooRazor.Pages
                 }
             }
         }
+
+        public async Task<IActionResult> OnGetIsCoupletBookmarkedAsync(int poemId, int coupletIndex)
+        {
+            using (HttpClient secureClient = new HttpClient())
+            {
+                if (await GanjoorSessionChecker.PrepareClient(secureClient, Request, Response))
+                {
+                    HttpResponseMessage response = await secureClient.GetAsync($"{APIRoot.Url}/api/ganjoor/bookmark/{poemId}/{coupletIndex}");
+                    if (!response.IsSuccessStatusCode)
+                    {
+                        return new BadRequestObjectResult(JsonConvert.DeserializeObject<string>(await response.Content.ReadAsStringAsync()));
+                    }
+                    var res = JsonConvert.DeserializeObject<bool>(await response.Content.ReadAsStringAsync());
+                    return new OkObjectResult(res);
+                }
+            }
+            return new OkObjectResult(false);
+        }
     }
 }
\ No newline at end of file
diff --git a/GanjooRazor/Pages/Login.cshtml b/GanjooRazor/Pages/Login.cshtml
index 081fa666..a83d8218 100644
--- a/GanjooRazor/Pages/Login.cshtml
+++ b/GanjooRazor/Pages/Login.cshtml
@@ -13,7 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Pin.cshtml b/GanjooRazor/Pages/Pin.cshtml
index 853e851e..c13f4c1d 100644
--- a/GanjooRazor/Pages/Pin.cshtml
+++ b/GanjooRazor/Pages/Pin.cshtml
@@ -11,7 +11,7 @@
     <title>پیشنهاد شعر مرتبط با تصویر</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist//jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/ReportComment.cshtml b/GanjooRazor/Pages/ReportComment.cshtml
index 543ba927..13c2b05c 100644
--- a/GanjooRazor/Pages/ReportComment.cshtml
+++ b/GanjooRazor/Pages/ReportComment.cshtml
@@ -9,7 +9,7 @@
     <meta charset="utf-8" />
     <title>درخواست حذف حاشیه</title>
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <style>
     label{
 		width:100px;
diff --git a/GanjooRazor/Pages/ResetPassword.cshtml b/GanjooRazor/Pages/ResetPassword.cshtml
index d0bd30a6..5592e575 100644
--- a/GanjooRazor/Pages/ResetPassword.cshtml
+++ b/GanjooRazor/Pages/ResetPassword.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Search.cshtml b/GanjooRazor/Pages/Search.cshtml
index 17ca723f..eb0934bf 100644
--- a/GanjooRazor/Pages/Search.cshtml
+++ b/GanjooRazor/Pages/Search.cshtml
@@ -15,7 +15,7 @@
     @Html.Raw(ViewData["Title"])
   </title>
 
-  <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+  <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
   <link href="/css/fab.css" rel="stylesheet" type="text/css" />
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
@@ -181,7 +181,7 @@
     </div>
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
-    <script src="/js/bk.js"></script>
+    <script src="/js/bk.js?version=2"></script>
     <script src="/js/vaabd.js"></script>
 
     @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
diff --git a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
index 74b124ec..162e11da 100644
--- a/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
+++ b/GanjooRazor/Pages/Shared/_AdminLayout.cshtml
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
diff --git a/GanjooRazor/Pages/Shared/_Layout.cshtml b/GanjooRazor/Pages/Shared/_Layout.cshtml
index f8792c1a..8dada7c5 100644
--- a/GanjooRazor/Pages/Shared/_Layout.cshtml
+++ b/GanjooRazor/Pages/Shared/_Layout.cshtml
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
     <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/fab.css" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
diff --git a/GanjooRazor/Pages/SignUp.cshtml b/GanjooRazor/Pages/SignUp.cshtml
index cb9c54d2..0d779e6c 100644
--- a/GanjooRazor/Pages/SignUp.cshtml
+++ b/GanjooRazor/Pages/SignUp.cshtml
@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div id="hdr">
diff --git a/GanjooRazor/Pages/Spotify.cshtml b/GanjooRazor/Pages/Spotify.cshtml
index 1286be18..97145f03 100644
--- a/GanjooRazor/Pages/Spotify.cshtml
+++ b/GanjooRazor/Pages/Spotify.cshtml
@@ -11,7 +11,7 @@
     <title>انتخاب قطعهٔ موسیقی مرتبط با شعر از اسپاتیفای</title>
     <meta name="robots" content="noindex, nofollow" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link href="/css/spotify.css" rel="stylesheet" type="text/css" />
 
     <script src="/lib/jquery/dist/jquery.min.js"></script>
diff --git a/GanjooRazor/Pages/Trans.cshtml b/GanjooRazor/Pages/Trans.cshtml
index 9a82db3e..66645f60 100644
--- a/GanjooRazor/Pages/Trans.cshtml
+++ b/GanjooRazor/Pages/Trans.cshtml
@@ -14,7 +14,7 @@
         گنجور &raquo; برگردان‌ها و نویس‌های شعر
     </title>
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
-    <link href="~/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="~/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 </head>
diff --git a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
index 4f628989..12a5756e 100644
--- a/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
+++ b/GanjooRazor/Pages/_GanjoorPagePartial.cshtml
@@ -284,7 +284,7 @@
                                         <a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" + Model.GanjoorPage.Poem.Next.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Next.Title): @Html.Raw(Model.GanjoorPage.Poem.Next.Excerpt)</a><span> &raquo;</span>
                                     }
                                     else
-                              if (Model.GanjoorPage.Poem.Category.Cat.Next != null)
+                             if (Model.GanjoorPage.Poem.Category.Cat.Next != null)
                                     {
                                         <a href="@Model.GanjoorPage.Poem.Category.Cat.Next.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Next.Title</a><span> &raquo;</span>
                                     }
@@ -295,7 +295,7 @@
                                         <span>&laquo; </span><a href="@Html.Raw(Model.GanjoorPage.PoetOrCat.Cat.FullUrl + "/" +Model.GanjoorPage.Poem.Previous.UrlSlug)">@Html.Raw(Model.GanjoorPage.Poem.Previous.Title) :@Html.Raw(Model.GanjoorPage.Poem.Previous.Excerpt)</a>
                                     }
                                     else
-                              if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
+                             if (Model.GanjoorPage.Poem.Category.Cat.Previous != null)
                                     {
                                         <span>&laquo; </span><a href="@Model.GanjoorPage.Poem.Category.Cat.Previous.FullUrl">@Model.GanjoorPage.Poem.Category.Cat.Previous.Title</a>
                                     }
@@ -325,34 +325,39 @@
                             }
 
                             <p>
-                                <small><i class="material-icons" style="font-size:12px;direction:rtl">mouse</i> با دو بار کلیک روی واژه‌ها یا انتخاب متن و کلیک روی آنها می‌توانید آنها را در لغتنامهٔ دهخدا جستجو کنید.</small>
+                                <small><i class="pageicons">mouse</i> با دو بار کلیک روی واژه‌ها یا انتخاب متن و کلیک روی آنها می‌توانید آنها را در لغتنامهٔ دهخدا جستجو کنید.</small>
                             </p>
                             <p>
-                                <small><i class="material-icons" style="font-size: 12px;direction: rtl;">format_list_numbered_rtl</i> <a role="button" onclick="btshmr(@Model.GanjoorPage.Id)" class="actionlink" id="bnum-button">حذف شماره‌ها</a></small>
-                                @if (Model.GanjoorPage.Poem.GanjoorMetre != null)
+
+                                <small><i class="pageicons">format_list_numbered_rtl</i> <a role="button" onclick="btshmr(@Model.GanjoorPage.Id)" class="actionlink" id="bnum-button">حذف شماره‌ها</a></small>
+                                @if (Model.LoggedIn)
                                 {
-                                    <text>| <small>وزن: <a href="@Html.Raw($"/vazn/?v={Uri.EscapeUriString(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)}&amp;a={Model.GanjoorPage.PoetOrCat.Poet.Id}")">@Html.Raw(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)</a></small></text>
+                                    <text> | <a role="button" id="bookmark" style="cursor: pointer;" onclick="switchBookmark(@Model.GanjoorPage.Id, 0)" title="نشانه‌گذاری / حذف نشانه"><i class="pageicons" id="bookmark-icon">star_border</i></a></text>
+                                    }
+                                    @if (Model.GanjoorPage.Poem.GanjoorMetre != null)
+                                    {
+                                        <text> | <small>وزن: <a href="@Html.Raw($"/vazn/?v={Uri.EscapeUriString(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)}&amp;a={Model.GanjoorPage.PoetOrCat.Poet.Id}")">@Html.Raw(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)</a></small></text>
                                     @if (!string.IsNullOrEmpty(Model.GanjoorPage.Poem.RhymeLetters))
                                     {
                                         <text> | <small>🔍 <a href="@Html.Raw($"/simi/?v={Uri.EscapeUriString(Model.GanjoorPage.Poem.GanjoorMetre.Rhythm)}&amp;g={Uri.EscapeUriString(Model.GanjoorPage.Poem.RhymeLetters)}")">شعرهای مشابه (وزن و قافیه)</a></small></text>
                                     }
                                 }
-                                @if (!string.IsNullOrEmpty(Model.GanjoorPage.Poem.OldTag))
-                                {
-                                    <text> | <small><a href="@Html.Raw($"{Model.GanjoorPage.Poem.OldTagPageUrl}/")">@Html.Raw(Model.GanjoorPage.Poem.OldTag)</a></small></text>
-                                }
-                                @if (!string.IsNullOrEmpty(Model.GanjoorPage.Poem.SourceName))
-                                {
-                                    <text> | <small>منبع اولیه: <a href="@Html.Raw($"/sources/{Model.GanjoorPage.Poem.SourceUrlSlug}/")">@Html.Raw(Model.GanjoorPage.Poem.SourceName)</a></small></text>
-                                }
-                                | <small><a href="@Html.Raw($"http://www.facebook.com/sharer.php?u=https://ganjoor.net{Model.GanjoorPage.FullUrl}&amp;t={Uri.EscapeUriString(Model.GanjoorPage.FullTitle)}/")">ارسال به فیس‌بوک</a></small>
+                                    @if (!string.IsNullOrEmpty(Model.GanjoorPage.Poem.OldTag))
+                                    {
+                                        <text> | <small><a href="@Html.Raw($"{Model.GanjoorPage.Poem.OldTagPageUrl}/")">@Html.Raw(Model.GanjoorPage.Poem.OldTag)</a></small></text>
+                                    }
+                                    @if (!string.IsNullOrEmpty(Model.GanjoorPage.Poem.SourceName))
+                                    {
+                                        <text> | <small>منبع اولیه: <a href="@Html.Raw($"/sources/{Model.GanjoorPage.Poem.SourceUrlSlug}/")">@Html.Raw(Model.GanjoorPage.Poem.SourceName)</a></small></text>
+                                    }
+                                    | <small><a href="@Html.Raw($"http://www.facebook.com/sharer.php?u=https://ganjoor.net{Model.GanjoorPage.FullUrl}&amp;t={Uri.EscapeUriString(Model.GanjoorPage.FullTitle)}/")">ارسال به فیس‌بوک</a></small>
 
-                                @if (Model.LoggedIn)
-                                {
-                                    <text>| <small><a href="@Html.Raw($"/trans?p={Model.GanjoorPage.Id}")" onclick="wpopen(this.href); return false" class="comments-link">#</a></small></text>
-                                }
+                                    @if (Model.LoggedIn)
+                                    {
+                                        <text>| <small><a href="@Html.Raw($"/trans?p={Model.GanjoorPage.Id}")" onclick="wpopen(this.href); return false" class="comments-link">#</a></small></text>
+                                    }
 
-                            </p>
+                                </p>
                             <h3>این شعر را چه کسی در کدام آهنگ خوانده است؟</h3>
                             @if (Model.GanjoorPage.Poem.Songs.Length == 0)
                             {
diff --git a/GanjooRazor/Pages/errors/404.cshtml b/GanjooRazor/Pages/errors/404.cshtml
index f76c9ad6..c05dadd3 100644
--- a/GanjooRazor/Pages/errors/404.cshtml
+++ b/GanjooRazor/Pages/errors/404.cshtml
@@ -14,7 +14,7 @@
         @ViewData["Title"]
     </title>
 
-    <link href="/css/p8.css" rel="stylesheet" type="text/css" />
+    <link href="/css/p8.css?version=2" rel="stylesheet" type="text/css" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
 
diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 75a2df8d..e9f37f9d 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -848,3 +848,34 @@ ol {
     .commentquote p {
         display: inline;
     }
+
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v107/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons, .pageicons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.pageicons {
+    font-size: 12px;
+    direction: rtl;
+    text-indent: 0;
+    color: #300;
+}
diff --git a/GanjooRazor/wwwroot/js/bk.js b/GanjooRazor/wwwroot/js/bk.js
index 0827f7ce..e8911584 100644
--- a/GanjooRazor/wwwroot/js/bk.js
+++ b/GanjooRazor/wwwroot/js/bk.js
@@ -50,7 +50,7 @@ function bnumClick(poemId, index) {
             $(data).appendTo(document.getElementById(divId));
         },
     });
-    
+
 }
 
 function coupletNumImage(bnum, color) {
@@ -103,7 +103,7 @@ function btshmr_internal(poemId) {
             else {
                 msr1s[i].parentElement.innerHTML = '<div class="bnum normalbnum" onclick="bnumClick(' + String(poemId) + ',' + String(i) + ');" id="bnum' + String(i + 1) + '"></div>' + msr1s[i].parentElement.innerHTML;//no alt, so that when user copies text does not appear in the copied content
             }
-            
+
             document.getElementById("bnum" + String(i + 1)).style.background = 'url(' + coupletNumImage(bshfarsinum(String(j + 1)), "red") + ')';
             j++;
         }
@@ -123,6 +123,8 @@ function btshmr(poemId) {
 
 
 
+
+
 function hilightverse(vnum, clr, sc, forceScroll) {
     var root = document;
     if (typeof root == "string") root = document.getElementById(root);
@@ -333,7 +335,7 @@ function getVerseIndexFromCoupleIndex(coupletIndex) {
         if (msr1s[i].className != "m2") {
             cIndex++;
         }
-        
+
         if (cIndex == coupletIndex) {
             vIndex = (i + bandNums);
             break;
@@ -343,20 +345,20 @@ function getVerseIndexFromCoupleIndex(coupletIndex) {
             if (msr1s[i].getElementsByTagName("p").length > 1)
                 bandNums++;
         }
-        
+
     }
     return vIndex;
 }
 
 
 function playCouplet(coupletIndex) {
-    
+
     var vIndex = getVerseIndexFromCoupleIndex(coupletIndex);
     if (jlist.isPlaying) {
         jlist.pause();
     }
     var comboId = '#narrators-' + coupletIndex;
-    var recitationIndex =  $(comboId).find(":selected").val()
+    var recitationIndex = $(comboId).find(":selected").val()
     jlist.select(recitationIndex);
 
     if (audioxmlfiles.length > 0) {
@@ -371,7 +373,7 @@ function playCouplet(coupletIndex) {
                 });
 
                 var foundCouplet = false;
-                
+
                 $(xml).find('SyncInfo').each(function () {
                     var v = parseInt($(this).find('VerseOrder').text())
                     if (v == vIndex) {
@@ -403,7 +405,12 @@ function editCouplet(poemId, coupletIndex) {
 
 function switchBookmark(poemId, coupletIndex) {
     var iconElementId = 'bookmark-icon-' + String(coupletIndex);
-    document.getElementById(iconElementId).innerHTML = 'star_half';
+    if (document.getElementById(iconElementId) != null) {
+        document.getElementById(iconElementId).innerHTML = 'star_half';
+    }
+    if (coupletIndex == 0) {
+        document.getElementById('bookmark-icon').innerHTML = 'star_half';
+    }
     var url = '/?handler=SwitchBookmark';
 
     $.ajax({
@@ -418,12 +425,44 @@ function switchBookmark(poemId, coupletIndex) {
         },
         success: function (isBookmarked) {
             if (isBookmarked == true) {
-                document.getElementById(iconElementId).innerHTML = 'star';
+                if (document.getElementById(iconElementId) != null) {
+                    document.getElementById(iconElementId).innerHTML = 'star';
+                }
+
+                if (coupletIndex == 0) {
+                    document.getElementById('bookmark-icon').innerHTML = 'star';
+                }
             }
             else {
-                document.getElementById(iconElementId).innerHTML = 'star_border';
+                if (document.getElementById(iconElementId) != null) {
+                    document.getElementById(iconElementId).innerHTML = 'star_border';
+                }
+
+                if (coupletIndex == 0) {
+                    document.getElementById('bookmark-icon').innerHTML = 'star_border';
+                }
             }
         },
 
     });
+}
+
+function checkIfBookmarked(poemId) {
+    setTimeout(function () {
+        $.ajax({
+            type: "GET",
+            url: '?Handler=IsCoupletBookmarked&poemId=' + String(poemId) + '&coupletIndex=0',
+            error: function (err) {
+                console.log(err);
+            },
+            success: function (isBookmarked) {
+                if (isBookmarked) {
+                    document.getElementById('bookmark-icon').innerHTML = 'star';
+                }
+                else {
+                    document.getElementById(iconElementId).innerHTML = 'star_border';
+                }
+            },
+        });
+    }, 1);
 }
\ No newline at end of file