From 6374b86854605d24c25fb1d0a011cc2fe5aed048 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 11:28:09 +0100
Subject: [PATCH 01/69] (docker/php): add alias for custom error log

---
 docker/php-apache/bash/.bash_aliases | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docker/php-apache/bash/.bash_aliases b/docker/php-apache/bash/.bash_aliases
index 8fac1a0c..6c6e5b97 100644
--- a/docker/php-apache/bash/.bash_aliases
+++ b/docker/php-apache/bash/.bash_aliases
@@ -73,6 +73,9 @@ alias ncu='./node_modules/.bin/ncu'
 # KOOHII DEV
 ###############
 
+# watch custom error log with colored output (see lib/ColorizedLogger.php)
+alias kklog='tail -f koohii-log.txt'
+
 # build / alias for favicon generator (see src/web/favicons/README.md)
 alias real-favicon=./node_modules/.bin/real-favicon
 

From 3117128a9cd680f3ffd70a27373029b8d5dd42ac Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 16:37:55 +0100
Subject: [PATCH 02/69] Do not `clearAll()` the learned kanji at end of SRS
 review

---
 src/apps/koohii/modules/review/actions/summaryAction.class.php | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/apps/koohii/modules/review/actions/summaryAction.class.php b/src/apps/koohii/modules/review/actions/summaryAction.class.php
index 67e92786..8227a5af 100755
--- a/src/apps/koohii/modules/review/actions/summaryAction.class.php
+++ b/src/apps/koohii/modules/review/actions/summaryAction.class.php
@@ -31,9 +31,6 @@ public function execute($request)
 
       if (!$this->fc_free)
       {
-        // clear remaining items from the Learned list so user can Restudy again
-        LearnedKanjiPeer::clearAll($this->getUser()->getUserId());
-
         // update last review timestamp and total reviews count
         ActiveMembersPeer::updateFlashcardInfo($this->getUser()->getUserId());
       }

From cbac97761be00740187bcf147d714a5c73121bae Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 16:45:31 +0100
Subject: [PATCH 03/69] (study/failedlist): move Javascript onload code into
 the component template

---
 src/apps/koohii/modules/study/templates/_FailedListTable.php | 4 ++++
 .../koohii/modules/study/templates/failedlistSuccess.php     | 5 -----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_FailedListTable.php b/src/apps/koohii/modules/study/templates/_FailedListTable.php
index 607524a8..6abf2c21 100755
--- a/src/apps/koohii/modules/study/templates/_FailedListTable.php
+++ b/src/apps/koohii/modules/study/templates/_FailedListTable.php
@@ -3,3 +3,7 @@
 <?php echo form_tag('study/failedlisttable') ?>
   <?php echo ui_select_table($table, $pager) ?>
 </form>
+
+<?php koohii_onload_slot(); ?>
+  new Koohii.UX.AjaxTable('FailedListTable');
+<?php end_slot(); ?>
diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index f120ba62..d5776630 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -39,8 +39,3 @@
   <div id="FailedListTable">
     <?php include_component('study', 'FailedListTable') ?>
   </div>
-
-<?php koohii_onload_slot() ?>
-  new Koohii.UX.AjaxTable('FailedListTable');
-<?php end_slot() ?>
-

From a88b4cc9e319f1b254d53de13ea9a8fd1d5f0298 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 16:47:43 +0100
Subject: [PATCH 04/69] Display `LEARNED` tag in an additional column of the
 Restudy list

---
 .../actions/FailedListTableComponent.class.php | 15 +++++++++++++++
 .../study/templates/_FailedListTable.php       |  6 +++---
 src/lib/peer/ReviewsPeer.php                   | 18 ++++++++++++++++--
 src/vite/src/assets/sass/main.build.scss       | 11 +++++++++++
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php b/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
index 0cbffcf7..a2bba7de 100755
--- a/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
+++ b/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
@@ -83,6 +83,13 @@ public function getConfig()
           "cssClass":  "text-center whitespace-nowrap",
           "colData":  "ts_lastreview",
           "colDisplay":"_lastreview"
+        },
+        {
+          "caption":   "Learned",
+          "width":     1,
+          "cssClass":  "text-right",
+          "colData":   "is_learned",
+          "colDisplay":  "_learned"
         }
       ]
     }
@@ -92,9 +99,17 @@ public function getConfig()
   public function filterDisplayData(uiSelectTableRow $row)
   {
     $rowData =& $row->getRowData();
+    
     $rowData['_failurecount'] = $rowData['failurecount']==0 ? '' : $rowData['failurecount'];
+    
     $rowData['_keyword'] = link_to_keyword($rowData['keyword'], $rowData['kanji']);
+    
     $rowData['_lastreview'] = simple_format_date((int)$rowData['ts_lastreview'], rtkLocale::DATE_SHORT);
+    
+    $isLearned = (int)$rowData['is_learned'];
+    $rowData['_learned'] = $isLearned
+      ? '<span class="ko-RestudyList-learned">LEARNED</span>'
+      : '';
   }
   
   public function validateRowData(array $rowData)
diff --git a/src/apps/koohii/modules/study/templates/_FailedListTable.php b/src/apps/koohii/modules/study/templates/_FailedListTable.php
index 6abf2c21..925afc4a 100755
--- a/src/apps/koohii/modules/study/templates/_FailedListTable.php
+++ b/src/apps/koohii/modules/study/templates/_FailedListTable.php
@@ -1,7 +1,7 @@
-<?php use_helper('Form', 'CJK', 'SimpleDate', 'Links', 'Widgets') ?>
+<?php use_helper('Form', 'CJK', 'SimpleDate', 'Links', 'Widgets'); ?>
 
-<?php echo form_tag('study/failedlisttable') ?>
-  <?php echo ui_select_table($table, $pager) ?>
+<?= form_tag('study/failedlisttable'); ?>
+  <?= ui_select_table($table, $pager); ?>
 </form>
 
 <?php koohii_onload_slot(); ?>
diff --git a/src/lib/peer/ReviewsPeer.php b/src/lib/peer/ReviewsPeer.php
index 4def0ed7..865fd61d 100755
--- a/src/lib/peer/ReviewsPeer.php
+++ b/src/lib/peer/ReviewsPeer.php
@@ -21,6 +21,9 @@
  *  getSelectForDetailedList()
  *  getSelectForExport()
  *  getFlashcardsForReview()
+ * 
+ *  getRestudyKanjiCount($userId)
+ *  getRestudyKanjiListSelect($userId)
  *
  *  hasFlashcard($userId, $ucsId)
  *  isFailedCard($userId, $ucsId)
@@ -672,18 +675,29 @@ public static function getRestudyKanjiCount($userId)
   /**
    * Return select object for the Restudy Kanji list.
    * 
-   * @param  integer   $userId
+   * @param  int   $userId
    * 
    * @return coreDatabaseSelect
    */
   public static function getRestudyKanjiListSelect($userId)
   {
     $select = self::getInstance()
-      ->select(['seq_nr' => rtkIndex::getSqlCol(), 'kanji', 'successcount', 'failurecount', 'ts_lastreview' => 'UNIX_TIMESTAMP(lastreview)']);
+      ->select([
+        'kanji',
+        'seq_nr' => rtkIndex::getSqlCol(),
+        'successcount',
+        'failurecount',
+        'ts_lastreview' => 'UNIX_TIMESTAMP(lastreview)',
+        'is_learned' => new coreDbExpr('(lk.ucs_id IS NOT NULL)')
+      ]);
+
+    $select->joinLeftUsing(LearnedKanjiPeer::getInstance()->getName().' lk', 'userid,ucs_id');
+
     $select = KanjisPeer::joinLeftUsingUCS($select);
     $select = CustkeywordsPeer::addCustomKeywordJoin($select, $userId);
     $select->where('leitnerbox=1 AND totalreviews>0');
     $select = self::filterByUserId($select, $userId);
+
     return $select;
   }
 
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 58f30932..a9edf32c 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -1116,6 +1116,17 @@ table.lessons td {
   background: var(--bg);
 }
 
+// --------------------------------------------------------------------
+// Restudy List
+// --------------------------------------------------------------------
+.ko-RestudyList {
+  // small "learned" tag in the Restudy List
+  &-learned {
+    @apply px-[.4em] py-[.3em] rounded;
+    @apply bg-[#6cbe6b] text-[#fff];
+  }
+}
+
 // --------------------------------------------------------------------
 // (last) tailwind utilities
 // --------------------------------------------------------------------

From b3a89cc64a471abf5c843bb3ab9fee2f6c92e5d4 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 16:48:20 +0100
Subject: [PATCH 05/69] (css): slightly increase the `.uiTabular` table cell
 padding

---
 src/vite/src/assets/sass/legacy/_widgets.scss  | 2 +-
 src/vite/src/assets/sass/manage.build.scss     | 3 ---
 src/vite/src/assets/sass/study-base.build.scss | 6 ------
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/vite/src/assets/sass/legacy/_widgets.scss b/src/vite/src/assets/sass/legacy/_widgets.scss
index 08849776..87e75d68 100644
--- a/src/vite/src/assets/sass/legacy/_widgets.scss
+++ b/src/vite/src/assets/sass/legacy/_widgets.scss
@@ -167,7 +167,7 @@
 .uiTabular th a.sortdesc { padding-right:12px; background:url(/assets/legacy/widgets-selecttable.gif) no-repeat 100% -72px; }
 /* tbody */
 .uiTabular td {
-  padding:8px 10px;
+  padding:10px 10px;
   color:#666;
   font-size:13px;
   line-height:1.1em;
diff --git a/src/vite/src/assets/sass/manage.build.scss b/src/vite/src/assets/sass/manage.build.scss
index a3041967..9d1946ea 100644
--- a/src/vite/src/assets/sass/manage.build.scss
+++ b/src/vite/src/assets/sass/manage.build.scss
@@ -28,9 +28,6 @@
 }
 
 /* remove flashcards list */
-.selection-table .uiTabular td {
-  padding: 4px 10px;
-}
 .selection-table .uiTabular tbody td {
   cursor: pointer;
 }
diff --git a/src/vite/src/assets/sass/study-base.build.scss b/src/vite/src/assets/sass/study-base.build.scss
index 8ae3aa78..22e99e7d 100644
--- a/src/vite/src/assets/sass/study-base.build.scss
+++ b/src/vite/src/assets/sass/study-base.build.scss
@@ -466,12 +466,6 @@
   color: #444;
 } /* small images in dropdown */
 
-/* failed kanji */
-table.failed-kanji td {
-  background-color: #fff;
-  border-top: 1px solid #eee;
-}
-
 @include breakpoint-up(lg) {
   /* less contrating themes for desktop sidebar */
   #browse {

From 26323502f7cb11b072c1c8d6b6a55c993336d38a Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 9 Mar 2022 17:02:57 +0100
Subject: [PATCH 06/69] Always clear kanji from learned list when a card is
 reviewed

No idea why this was ever conditional to the API (KanjiRyokucha)...

The list is no longer cleared at end of SRS review. Learned kanji
remain Indefinitely unless user explicitly clears the list, or during
review.

If kanji is forgotten, it needs to be re-learned, so clear flag.

If kanji is remembered, it is no longer in the Restudy list, clear flag.
---
 src/lib/peer/ReviewsPeer.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/peer/ReviewsPeer.php b/src/lib/peer/ReviewsPeer.php
index 865fd61d..88399bd3 100755
--- a/src/lib/peer/ReviewsPeer.php
+++ b/src/lib/peer/ReviewsPeer.php
@@ -851,8 +851,7 @@ public static function putFlashcardData($ucsId, $oData)
     }
 
     // clear relearned kanji if successfull answer
-    // NOTE: expected for API
-    if ($result && rtkApi::isApiModule()
+    if ($result
         && ($oData->r === LeitnerSRS::RATE_HARD ||
             $oData->r === LeitnerSRS::RATE_YES  ||
             $oData->r === LeitnerSRS::RATE_NO   ||

From 0f54358d1ca9fe142f85d74ebd30c1027b8da1ad Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 10 Mar 2022 11:37:52 +0100
Subject: [PATCH 07/69] (css/misc): move unused tweet button styles into the
 unused template

---
 .../modules/home/templates/_homeSide.php      | 29 +++++++++++++++++
 src/vite/src/assets/sass/main.build.scss      | 31 -------------------
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/apps/koohii/modules/home/templates/_homeSide.php b/src/apps/koohii/modules/home/templates/_homeSide.php
index 3fd0ac8a..99c2c343 100755
--- a/src/apps/koohii/modules/home/templates/_homeSide.php
+++ b/src/apps/koohii/modules/home/templates/_homeSide.php
@@ -13,6 +13,35 @@ function koohii_get_tweet_q($url, $text)
 $koohii_tweet_params = koohii_get_tweet_q(sfConfig::get('app_website_url'), 'Kanji Koohii');
 ?>
 <?php use_helper('Widgets') ?>
+<style type="text/css">
+#custom-tweet-button {
+  margin: 2.5em 0 0;
+  max-width: 125px;
+  text-align: center;
+}
+#custom-tweet-button a {
+  display: inline-block;
+  padding: 4px 8px;
+  font-weight: bold;
+  font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+  text-decoration: none;
+  background: #4faeec; /*1b95e0*/
+  border-radius: 3px;
+}
+#custom-tweet-button i {
+  width: 16px;
+  padding: 0 0.5em 0 0;
+  text-align: center;
+  color: #fff;
+}
+#custom-tweet-button span {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  font-size: 0.8em;
+}
+</style>
+
 <div class="col-sm-2">
   <div id="home-partners">
     <?php #echo image_tag('/images/2.0/home/sidebar-'.CJ_MODE.'-badge.gif', 'size="131x131" style="margin:0 0 0 5px;"') ?>
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index a9edf32c..1468d81b 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -1035,37 +1035,6 @@ table.lessons td {
   margin: 10px 0;
 }
 
-/* ------------------ */
-/* Social             */
-/* ------------------ */
-
-#custom-tweet-button {
-  margin: 2.5em 0 0;
-  max-width: 125px;
-  text-align: center;
-}
-#custom-tweet-button a {
-  display: inline-block;
-  padding: 4px 8px;
-  font-weight: bold;
-  font-size: 18px;
-  color: #fff;
-  cursor: pointer;
-  text-decoration: none;
-  background: #4faeec; /*1b95e0*/
-  border-radius: 3px;
-}
-#custom-tweet-button i {
-  width: 16px;
-  padding: 0 0.5em 0 0;
-  text-align: center;
-  color: #fff;
-}
-#custom-tweet-button span {
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  font-size: 0.8em;
-}
-
 /* ------------------ */
 /* CJK Fonts          */
 /* ------------------ */

From c519ff22a7c7137f00b76f0168eaff64fbcb02b9 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 10 Mar 2022 11:39:45 +0100
Subject: [PATCH 08/69] (css/misc): remove `.uiTable` right border, remove
 duplicate styles

---
 src/vite/src/assets/sass/legacy/_widgets.scss | 6 ++++--
 src/vite/src/assets/sass/main.build.scss      | 8 --------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/vite/src/assets/sass/legacy/_widgets.scss b/src/vite/src/assets/sass/legacy/_widgets.scss
index 87e75d68..4229bdea 100644
--- a/src/vite/src/assets/sass/legacy/_widgets.scss
+++ b/src/vite/src/assets/sass/legacy/_widgets.scss
@@ -148,8 +148,10 @@
 
 .uiTable {
   // crude solution for horizontal scrolling on small screens
-  overflow-y: auto; _overflow: auto; margin: 0 0 1em; border-right:1px dotted #bdbcaa;
-}
+  overflow-y: auto;
+  _overflow: auto;
+  margin: 0 0 1em;
+ }
 
 .uiTabular { border:1px solid #BDBCAA; border-top:1px solid #D9D8CE; width:100%; }
 /* thead */
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 1468d81b..956e3ef1 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -57,14 +57,6 @@
   }
 }
 
-/* ajax table container div (cf. ./legacy/_widgets.scss) */
-.uiTable {
-  overflow-y: auto;
-  _overflow: auto;
-  margin: 0 0 1em;
-  border-right: 1px dotted #bdbcaa;
-}
-
 /* when footer gradient is used */
 body.with-footer {
   background: #f0ddd4;

From 5b5c643520f2041c123ae55184c57c52f2cdcca3 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 15 Mar 2022 11:35:00 +0100
Subject: [PATCH 09/69] (_layout.scss): add col-md-6

---
 src/vite/src/assets/sass/layout/_layout.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/vite/src/assets/sass/layout/_layout.scss b/src/vite/src/assets/sass/layout/_layout.scss
index c304cf0f..42ace8da 100644
--- a/src/vite/src/assets/sass/layout/_layout.scss
+++ b/src/vite/src/assets/sass/layout/_layout.scss
@@ -67,6 +67,7 @@ $GRID_GUTTER_X: 15px;
 
 // A few places can afford columns in tablet portrait mode (md)
 .col-md-3,
+.col-md-6,
 .col-md-9 {
   @apply grow-0 w-full;
   padding-left: $GRID_GUTTER_X;
@@ -76,6 +77,9 @@ $GRID_GUTTER_X: 15px;
   .col-md-3 {
     @apply w-3/12;
   }
+  .col-md-6 {
+    @apply w-6/12;
+  }
   .col-md-9 {
     @apply w-9/12;
   }

From 76095906e7206b8460da742d042cf675761e417d Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 15 Mar 2022 11:38:47 +0100
Subject: [PATCH 10/69] Restudy List: basic layout at top of page with Restudy
 & Learned boxes

---
 .../study/templates/failedlistSuccess.php     | 69 ++++++++++++-------
 src/vite/src/assets/sass/main.build.scss      | 14 ++++
 src/vite/tailwind.config.js                   |  7 ++
 3 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index d5776630..5fa4590f 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -1,35 +1,58 @@
 <?php
-  $restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId());
+  $userId = $sf_user->getUserId();
+  $restudyCount = ReviewsPeer::getRestudyKanjiCount($userId);
+  $learnedCount = LearnedKanjiPeer::getCount($userId);
 ?>
 
   <h2>Restudy List</h2>
 
-  <div class="row">
-    <div class="col-lg-6">
-      <p>Pick a kanji from the list to restudy or go straight to review.</p> 
-
-<?php if ($restudyCount > 20): ?>
-      <h3>Using the "learned" pile</h3>
-      <p>If you have a lot of failed cards, you might want to review it in small batches as you work on them.
-       
-        To do this, use the "Learned" button on the Study pages, then review the learned pile from there.
-         </p>
-<?php endif ?>
-    </div>
+  <div class="row mb-8">
+    <div class="col-md-6">
+  <?php if ($restudyCount): ?>
+      <div class="ko-StrokeBox ko-StrokeBox--danger">
+        <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
+  <?php else: ?>
+      <div class="ko-StrokeBox ko-StrokeBox--success">
+        <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
+  <?php endif; ?>
+
+        <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#yaya', ['class' => 'whitespace-nowrap']); ?>
+
+        <div class="flex items-center">
+          <button type="button" class="btn btn-success" disabled="disabled">
+            Begin Restudy <i class="fa fa-book-open"></i>
+          </button>
 
-    <div class="col-lg-6">
-      <div class="" style="margin:0 0 1.5em;">
+          <?php if ($restudyCount): ?>
+          <?= _bs_button(
+  'Review All Forgotten Kanji',
+  '@review',
+  ['query_string' => 'box=1', 'class' => 'btn btn-lg btn-outline-danger']
+);
+          ?>
+          <?php endif; ?>
+        </div>
+      </div>
+    </div>
 
-<?php if ($restudyCount > 0): ?>
+    <div class="col-md-6">
+      <div class="min-w-300px ml-auto padded-box rounded-md">
+        <h3 class="text-md font-bold text-body">Learned Kanji</h3>
 
-        <?php //echo _bs_button_with_icon('Review forgotten cards', '@review', array('query_string' => 'box=1', 'icon' => 'fa-play')) ?>
-        <?php echo _bs_button("<strong>$restudyCount</strong> failed cards (review)", '@review', ['query_string' => 'box=1',
-          'class' => 'btn btn-lg btn-srs btn-failed', 'icon' => 'fa-play']) ?>
-<?php else: ?>
 
-        <button type="button" class="btn btn-success" disabled="disabled">You have no failed kanji cards!</button>
+        
+        <?php if ($learnedCount): ?>
+          <p><strong><?= $learnedCount; ?></strong> learned kanji are ready for review.</p>
 
-<?php endif ?>
+  <?= _bs_button(
+            'Review Learned Kanji <i class="fa fa-arrow-right"></i>',
+            '@review',
+            [
+              'query_string' => 'box=1',
+              'class' => 'btn btn-lg btn-srs btn-learned',
+            ]
+          ); ?>
+        <?php endif; ?>
 
       </div>
     </div>
@@ -37,5 +60,5 @@
   </div>
 
   <div id="FailedListTable">
-    <?php include_component('study', 'FailedListTable') ?>
+    <?php include_component('study', 'FailedListTable'); ?>
   </div>
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 956e3ef1..e45f38d0 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -128,6 +128,20 @@ a.admin-edit {
   background-color: $--clr-bg-1;
 }
 
+// a style of bordered box, clear filling
+.ko-StrokeBox {
+  @apply border-2 border-transparent rounded-md;
+  padding: 1rem;
+
+  &--danger {
+    border-color: #E579797a; // 48%
+  }
+
+  &--success {
+    border-color: #6CA02A7a; // 48%
+  }
+}
+
 /* ---------------------------- */
 /* UI */
 /* ---------------------------- */
diff --git a/src/vite/tailwind.config.js b/src/vite/tailwind.config.js
index 78b36382..d935a568 100644
--- a/src/vite/tailwind.config.js
+++ b/src/vite/tailwind.config.js
@@ -20,11 +20,18 @@ module.exports = {
 
       danger: {
         DEFAULT: "#9f0e0b",
+        dark: "#D23C3C",
       },
 
       shaded: {
         DEFAULT: "#e7e1d3",
       },
+
+      success: {
+        darker: "#2C892C",
+      },
+
+      transparent: "transparent",
     },
 
     // redeclare to remove the baked-in line-height, and add `md` alias

From f478d0b48a93e9478ba3a76e3e4496c8c71d7c13 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 15 Mar 2022 17:06:15 +0100
Subject: [PATCH 11/69] Move #FailedListTable container div to its proper
 template

---
 .../koohii/modules/study/templates/_FailedListTable.php   | 8 +++++---
 .../koohii/modules/study/templates/failedlistSuccess.php  | 4 +---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_FailedListTable.php b/src/apps/koohii/modules/study/templates/_FailedListTable.php
index 925afc4a..525ff66b 100755
--- a/src/apps/koohii/modules/study/templates/_FailedListTable.php
+++ b/src/apps/koohii/modules/study/templates/_FailedListTable.php
@@ -1,8 +1,10 @@
 <?php use_helper('Form', 'CJK', 'SimpleDate', 'Links', 'Widgets'); ?>
 
-<?= form_tag('study/failedlisttable'); ?>
-  <?= ui_select_table($table, $pager); ?>
-</form>
+<div id="FailedListTable">
+  <?= form_tag('study/failedlisttable'); ?>
+    <?= ui_select_table($table, $pager); ?>
+  </form>
+</div>
 
 <?php koohii_onload_slot(); ?>
   new Koohii.UX.AjaxTable('FailedListTable');
diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 5fa4590f..eb634fa7 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -59,6 +59,4 @@
 
   </div>
 
-  <div id="FailedListTable">
-    <?php include_component('study', 'FailedListTable'); ?>
-  </div>
+  <?php include_component('study', 'FailedListTable'); ?>

From c832f1d421f34033b193735ebd87005b89e22604 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 15 Mar 2022 17:07:22 +0100
Subject: [PATCH 12/69] Add empty state for the restudy kanji list

---
 .../koohii/modules/study/templates/failedlistSuccess.php | 9 +++++++++
 src/vite/src/assets/sass/main.build.scss                 | 4 ++++
 src/vite/tailwind.config.js                              | 5 +++++
 3 files changed, 18 insertions(+)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index eb634fa7..e20ec644 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -56,7 +56,16 @@
 
       </div>
     </div>
+<?php if (!$restudyCount): ?>
 
+  <div class="ko-StrokeBox ko-StrokeBox--subdued min-h-[336px] flex mb-8">
+    <p class="text-warm m-auto">
+      Hooray, your forgotten kanji list is empty!
+    </p>
   </div>
 
+<?php else: ?>
+
   <?php include_component('study', 'FailedListTable'); ?>
+
+<?php endif; ?>
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index e45f38d0..7cf5864b 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -137,6 +137,10 @@ a.admin-edit {
     border-color: #E579797a; // 48%
   }
 
+  &--subdued {
+    border-color: #e7e1d3;
+  }
+
   &--success {
     border-color: #6CA02A7a; // 48%
   }
diff --git a/src/vite/tailwind.config.js b/src/vite/tailwind.config.js
index d935a568..6d6e93fb 100644
--- a/src/vite/tailwind.config.js
+++ b/src/vite/tailwind.config.js
@@ -32,6 +32,11 @@ module.exports = {
       },
 
       transparent: "transparent",
+
+      warm: {
+        DEFAULT: "#87847D",
+        light: "#A9A396",
+      },
     },
 
     // redeclare to remove the baked-in line-height, and add `md` alias

From e4217b6ddb65b27560266580202e9983e8a0ddfb Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 16 Mar 2022 16:32:52 +0100
Subject: [PATCH 13/69] (ux): demo for small/default/large buttons

---
 .../src/assets/sass/abstracts/_mixins.scss    |  85 +++++++++++++-
 .../src/assets/sass/abstracts/_variables.scss |  39 ++++++-
 .../src/assets/sass/components/_buttons.scss  | 107 +++++++++---------
 src/vite/src/vue/styleguide/index.vue         |  33 +++++-
 4 files changed, 207 insertions(+), 57 deletions(-)

diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index 2005c0a2..70b07091 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -1,12 +1,95 @@
 // ====================================================================
 // MIXINS
 //
+//   Css declaration shortcuts:
+//
+//     button-color()
+//     font()
+//
 //   Responsive & Media Queries:
 //
-//     screen()
+//     breakpoint-up()              min-width bp : md/lg/xl
+//     breakpoint-down()            max-width bp : md/lg/xl
+//     screen()                     custom ranges: mbl/dsk
 //
 // ====================================================================
 
+// --------------------------------------------------------------------
+// Apply fg/bg colors, as well as :hover/:focus states to an element.
+//
+//   $child     If specified, applies the :hover/:focus styles to a
+//              child element.
+//
+// --------------------------------------------------------------------
+@mixin button-color($bg: blue, $text: #fff, $mix: $--color-mix-white, $shadow: none, $child: "") {
+  @if $child == "" {
+    background-color: $bg;
+    border-color: $bg;
+    color: $text;
+  } @else {
+    #{$child} {
+      background-color: $bg;
+      border-color: $bg;
+      color: $text;
+    }
+  }
+
+  /* postcss-bem-linter: ignore */
+  &:hover #{$child},
+  &:focus #{$child} {
+    color: $text;
+
+    @if $mix != "none" {
+      // wip (saturation / darken / lighten ? -- check with designer)
+      background-color: darken(saturate($bg, 5), 10); //mix($mix, $bg, 30%);
+      border-color: darken(saturate($bg, 5), 10); //mix($mix, $bg, 30%);
+    } @else {
+      // override element-ui's default
+      background-color: $bg;
+      border-color: $bg;
+    }
+
+    // maybe we'll add 'medium', 'strong'
+    @if $shadow == "small" {
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+// --------------------------------------------------------------------
+// FONT
+//
+//   Examples:
+//
+//     @include font(16px, 1.3em, 500);
+//     @include font(16px, 1.2em);
+//
+//     @include font($lineHeight: 1.2em);
+//
+//     @include font($size: 12px, $weight: 500);
+//     @include font(12px, $weight: 500);
+//
+//     @include font($family: '"Courier New", monospace');
+//
+// --------------------------------------------------------------------
+@mixin font($size: null, $lineHeight: null, $weight: null, $family: null) {
+  @if $size != null {
+    font-size: $size;
+  }
+
+  @if $lineHeight != null {
+    line-height: $lineHeight;
+  }
+
+  @if $weight != null {
+    font-weight: $weight;
+  }
+
+  @if $family != null {
+    font-family: unquote($family);
+  }
+}
+
 // --------------------------------------------------------------------
 // BREAKPOINT-UP (min-width)
 //
diff --git a/src/vite/src/assets/sass/abstracts/_variables.scss b/src/vite/src/assets/sass/abstracts/_variables.scss
index 9172f62f..b21db547 100644
--- a/src/vite/src/assets/sass/abstracts/_variables.scss
+++ b/src/vite/src/assets/sass/abstracts/_variables.scss
@@ -3,7 +3,7 @@
 // ====================================================================
 
 // --------------------------------------------------------------------
-// layout / breakpoints (used by breakpoint mixins)
+// Layout / breakpoints (used by breakpoint mixins)
 //
 //   References:
 //   https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints
@@ -17,7 +17,42 @@ $--bp-lg: 992px; // 992px = 62rem
 $--bp-xl: 1280px; // 1280px = 80rem
 
 // --------------------------------------------------------------------
-// colors
+// Borders
+// --------------------------------------------------------------------
+$--border-radius-md: 4px;
+$--border-radius-lg: 6px;
+
+// --------------------------------------------------------------------
+// Buttons
+// --------------------------------------------------------------------
+$--button-font-size-sm: 14px;
+$--button-font-size-md: 15px;
+$--button-font-size-lg: 16px;
+
+// --------------------------------------------------------------------
+// Colors / Brand  (should match tailwind config)
+// --------------------------------------------------------------------
+$--color-btn-default: #939291;
+
+// main primary color (saturated blue/cyan)
+$--color-btn-primary: #3272d1;
+
+// main red color
+$--color-btn-danger: #d9534f;
+
+// main green color
+$--color-btn-success: #4ea84e;
+
+// utilities
+$--color-mix-white: #ffffff;
+
+// --------------------------------------------------------------------
+// Colors / Text
+// --------------------------------------------------------------------
+$--color-text-body: #42413d;
+
+// --------------------------------------------------------------------
+// Colors ( legacy sass stuff - needs renaming/merging )
 // --------------------------------------------------------------------
 $--clr-bg-body: #f4f0e5;
 $--clr-bg-1: #e7e1d3; /* shaded background 1 */
diff --git a/src/vite/src/assets/sass/components/_buttons.scss b/src/vite/src/assets/sass/components/_buttons.scss
index 6402f21b..e62fc310 100644
--- a/src/vite/src/assets/sass/components/_buttons.scss
+++ b/src/vite/src/assets/sass/components/_buttons.scss
@@ -1,79 +1,84 @@
 // ====================================================================
-// BUTTONS
+// KOOHII BUTTONS
+//
+//  Base:
+//
+//    ko-Btn            Adds drop-shadow, handles :focus, :hover etc
+//
+//  Colors:
 //
-//   For now, Bootstrap buttons tweaks/overrides
 // ====================================================================
 
 // --------------------------------------------------------------------
-// fix the hover styles
+// Base class
 // --------------------------------------------------------------------
-.btn,
-.btn:hover {
+.ko-Btn {
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #fff;
+  text-align: center;
   text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: none;
+
+  border-radius: $--border-radius-md;
+  padding: 0.375rem 0.75rem;
 }
 
-.btn-link {
-  text-decoration: underline;
+.ko-Btn {
+  @include button-color($bg: #f1f1f1, $text: $--color-text-body, $shadow: none);
 }
 
 // --------------------------------------------------------------------
-// override the button colors - the BS mixins dont create nice hovers
+// Colors
 // --------------------------------------------------------------------
-// NOTE! because the php helper auto-adds `btn-success`, declare other colors *after*
-.btn-success {
-  color: #fff;
-  background-color: #5cb85c;
-  border-color: #4cae4c;
-
-  &:hover {
-    color: #fff;
-    background-color: #449d44;
-    border-color: #398439;
-  }
+.ko-Btn {
+  @include button-color($bg: $--color-btn-default);
 }
-
-.btn-danger {
-  color: #fff;
-  background-color: #d9534f;
-  border-color: #d43f3a;
-
-  &:hover {
-    color: #fff;
-    background-color: #c9302c;
-    border-color: #ac2925;
-  }
+.ko-Btn--primary {
+  @include button-color($bg: $--color-btn-primary);
 }
-
-// set :focus text color (override Bootstrap's selector created by their mixin)
-.btn-success,
-.btn-danger {
-  .btn-check:focus + &,
-  &:focus {
-    color: #fff;
-  }
+.ko-Btn--danger {
+  @include button-color($bg: $--color-btn-danger);
+}
+.ko-Btn--success {
+  @include button-color($bg: $--color-btn-success);
 }
 
 // --------------------------------------------------------------------
-// GHOST BUTTON
+// Sizes
+//
+//   Note selector specificity required due to element's `.el-button.is-round`
 // --------------------------------------------------------------------
-.btn-ghost {
-  color: #6f6961;
-  background-color: inherit;
-  border-color: $--clr-bg-1s;
+.ko-Btn {
+  @include font($--button-font-size-md);
+  padding: 7px 14px; // ~36px height
+  border-radius: $--border-radius-lg;
 }
 
-.btn-default {
-  background-color: $--clr-bg-1;
-  color: #444;
-  border-color: $--clr-bg-1s;
+.ko-Btn--small {
+  @include font($--button-font-size-sm);
+  padding: 4px 8px; // ~31 px height
+  border-radius: $--border-radius-lg;
 }
 
-/* cf. BootstrapHelper :: _bs_button_with_icon()  .fa .far .fas */
-.btn i {
-  margin-right: 0.5em;
+.ko-Btn--large {
+  @include font($--button-font-size-lg);
+  padding: 8px 14px; // ~42px height
+  border-radius: $--border-radius-lg;
 }
 
-/* push buttons (note :hover & :active same style due to touch :active -> :hover */
+// --------------------------------------------------------------------
+// Misc. special styles
+// --------------------------------------------------------------------
+// push buttons (note :hover & :active same style due to touch :active -> :hover)
 .btn-go {
   color: #fff;
   background-color: #5cb85c;
diff --git a/src/vite/src/vue/styleguide/index.vue b/src/vite/src/vue/styleguide/index.vue
index d3061cd5..fcd4599a 100644
--- a/src/vite/src/vue/styleguide/index.vue
+++ b/src/vite/src/vue/styleguide/index.vue
@@ -4,9 +4,7 @@
 
     <h2>Buttons</h2>
 
-    <h3>Vanilla element-ui buttons</h3>
-
-    <p>Vanilla element-ui buttons using <code>type="primary"</code> (etc).</p>
+    <p>element-ui buttons using <code>type="primary"</code> (etc).</p>
 
     <section class="ux-docSection ux-docDemoblock">
       <div class="mb-2">
@@ -27,6 +25,35 @@
         <el-button type="danger" round>Danger</el-button>
       </div>
     </section>
+   
+
+    <p>Vanilla html buttons (eg. used in php templates)</p>
+
+    <section class="ux-docSection ux-docDemoblock">
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">Size: small</span>
+        <button class="ko-Btn ko-Btn--small">Default</button>
+        <button class="ko-Btn ko-Btn--small ko-Btn--primary">Primary</button>
+        <button class="ko-Btn ko-Btn--small ko-Btn--success">Success</button>
+        <button class="ko-Btn ko-Btn--small ko-Btn--danger">Danger</button>
+      </div>
+
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">Size: default</span>
+        <button class="ko-Btn">Default</button>
+        <button class="ko-Btn ko-Btn--primary">Primary</button>
+        <button class="ko-Btn ko-Btn--success">Success</button>
+        <button class="ko-Btn ko-Btn--danger">Danger</button>
+      </div>
+      
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">Size: large</span>
+        <button class="ko-Btn ko-Btn--large">Default</button>
+        <button class="ko-Btn ko-Btn--large ko-Btn--primary">Primary</button>
+        <button class="ko-Btn ko-Btn--large ko-Btn--success">Success</button>
+        <button class="ko-Btn ko-Btn--large ko-Btn--danger">Danger</button>
+      </div>
+    </section>
   </div>
 </template>
 

From 70b4533e4f38270acc6fea4ebccfd9549959cba2 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 21 Mar 2022 12:25:51 +0100
Subject: [PATCH 14/69] (buttons): replace Bootstrap `.btn btn-success` with
 new classes

- replace lots of Bootstrap buttons to new `.ko-Btn` classes
- remove "button with icon" helper (simplify)
---
 .../koohii/lib/helper/BootstrapHelper.php     |  28 +--
 .../modules/account/templates/createDone.php  |   2 +-
 .../account/templates/flashcardsSuccess.php   |   2 +-
 .../account/templates/passwordDone.php        |   2 +-
 .../templates/spacedrepetitionSuccess.php     |   2 +-
 .../modules/home/templates/indexMember.php    |   6 +-
 .../modules/news/templates/detailSuccess.php  |   2 +-
 .../modules/news/templates/indexSuccess.php   |   2 +-
 .../modules/news/templates/postSuccess.php    |   4 +-
 .../review/templates/_LeitnerChart.php        |   8 +-
 .../review/templates/summarySuccess.php       |   9 +-
 .../modules/study/templates/_EditKeyword.php  |   2 +-
 .../modules/study/templates/_LearnedPanel.php |   2 +-
 .../modules/study/templates/editSuccess.php   |   8 +-
 .../study/templates/failedlistSuccess.php     |  83 +++----
 .../study/templates/mystoriesSuccess.php      |   9 +-
 src/vite/src/assets/sass/_utilities.scss      |  50 ++++-
 .../src/assets/sass/abstracts/_mixins.scss    |  42 ----
 .../src/assets/sass/abstracts/_variables.scss |   1 +
 .../src/assets/sass/components/_buttons.scss  | 209 ++++++++++++++++--
 src/vite/src/assets/sass/main.build.scss      |  39 +---
 .../src/assets/sass/pages/_review-home.scss   |  18 +-
 .../src/assets/sass/vendor/_bootstrap.scss    |  55 ++++-
 src/vite/src/vue/KoohiiEditStory.vue          |   4 +-
 .../src/vue/recognition/RecognitionApp.vue    |   4 +-
 src/vite/src/vue/styleguide/index.vue         |  39 ++++
 src/vite/tailwind.config.js                   |   2 +
 27 files changed, 414 insertions(+), 220 deletions(-)

diff --git a/src/apps/koohii/lib/helper/BootstrapHelper.php b/src/apps/koohii/lib/helper/BootstrapHelper.php
index 1366e65a..488ba5da 100644
--- a/src/apps/koohii/lib/helper/BootstrapHelper.php
+++ b/src/apps/koohii/lib/helper/BootstrapHelper.php
@@ -22,8 +22,7 @@
  *
  * COMMON HELPERS
  *
- *   _bs_button()                  MUST add Bootstrap css as option 'class' => 'btn btn-success ...'
- *   _bs_button_with_icon()         DONT add 'btn btn-success' ... MUST add 'icon' => 'fa-icon-id'
+ *   _bs_button()
  *
  *
  * FORM HELPERS
@@ -69,8 +68,6 @@
 /**
  * Returns html for a Bootstrap button.
  *
- * Uses 'btn btn-default' unless btn-success, btn-warning, etc specified.
- *
  * Additional options as per Symfony's link_to() helper: 'absolute', 'query_string', 'anchor', etc.
  *
  * @param string $name
@@ -83,27 +80,6 @@ function _bs_button($name, $internal_uri, array $options = [])
   return link_to($name, $internal_uri, $options);
 }
 
-/**
- * another helper to help refactoring later.
- *
- * Options:
- *   icon    fontawesome icon id (eg. fa-file-o)
- *
- * @param mixed $name
- * @param mixed $internal_uri
- */
-function _bs_button_with_icon($name, $internal_uri, array $options = [])
-{
-  $iconId = _get_option($options, 'icon');
-  assert($iconId !== null);
-
-  _bs_class_merge($options, 'btn btn-success');
-
-  $name = "<i class=\"far {$iconId}\"></i>{$name}";
-
-  return link_to($name, $internal_uri, $options);
-}
-
 // Classnames are appended to $options['class'] if present.
 function _bs_class_merge(array &$options, $classnames)
 {
@@ -272,7 +248,7 @@ function _bs_input_textarea($name, $options = [])
 
 function _bs_submit_tag($label, $options = [])
 {
-  _bs_class_merge($options, 'btn btn-success');
+  _bs_class_merge($options, 'ko-Btn ko-Btn--success');
 
   return submit_tag($label, $options);
 }
diff --git a/src/apps/koohii/modules/account/templates/createDone.php b/src/apps/koohii/modules/account/templates/createDone.php
index 427ce23a..a49e1b92 100755
--- a/src/apps/koohii/modules/account/templates/createDone.php
+++ b/src/apps/koohii/modules/account/templates/createDone.php
@@ -17,7 +17,7 @@
 
     <div>
       <?php $sf_user->setAttribute('login_username', $username); // cf. redirectToLogin() ?>
-      <?php echo _bs_button('Sign in','@login', ['query_string' => 'username='.$username, 'class' => 'btn btn-success btn-lg']) ?>
+      <?php echo _bs_button('Sign in','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success btn-lg']) ?>
     </div>
 
     <?php echo form_errors() ?>
diff --git a/src/apps/koohii/modules/account/templates/flashcardsSuccess.php b/src/apps/koohii/modules/account/templates/flashcardsSuccess.php
index 7bb559a0..24e3c877 100755
--- a/src/apps/koohii/modules/account/templates/flashcardsSuccess.php
+++ b/src/apps/koohii/modules/account/templates/flashcardsSuccess.php
@@ -25,7 +25,7 @@
     */ ?>
 
     <p>
-      <?php echo submit_tag('Save changes', ['class' => 'btn btn-success']) ?>
+      <?php echo submit_tag('Save changes', ['class' => 'ko-Btn ko-Btn--success']) ?>
     </p>
 
   </form>
diff --git a/src/apps/koohii/modules/account/templates/passwordDone.php b/src/apps/koohii/modules/account/templates/passwordDone.php
index dda25456..5a1b4c59 100755
--- a/src/apps/koohii/modules/account/templates/passwordDone.php
+++ b/src/apps/koohii/modules/account/templates/passwordDone.php
@@ -11,6 +11,6 @@
 
     <div>
       <?php $sf_user->setAttribute('login_username', $username); // cf. redirectToLogin() ?>
-      <?php echo _bs_button('Sign in with your new password','@login', ['query_string' => 'username='.$username, 'class' => 'btn btn-success btn-lg']) ?>
+      <?php echo _bs_button('Sign in with your new password','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success btn-lg']) ?>
     </div>
 
diff --git a/src/apps/koohii/modules/account/templates/spacedrepetitionSuccess.php b/src/apps/koohii/modules/account/templates/spacedrepetitionSuccess.php
index e5b7e9e1..d40662a9 100755
--- a/src/apps/koohii/modules/account/templates/spacedrepetitionSuccess.php
+++ b/src/apps/koohii/modules/account/templates/spacedrepetitionSuccess.php
@@ -15,7 +15,7 @@
   <?php echo form_tag('account/spacedrepetition') ?>
     <div id="JsVueMountSrsForm"></div>
     <p>
-      <?php echo submit_tag('Save changes', ['class' => 'btn btn-success']) ?>
+      <?php echo submit_tag('Save changes', ['class' => 'ko-Btn ko-Btn--success']) ?>
     </p>
   </form>
 
diff --git a/src/apps/koohii/modules/home/templates/indexMember.php b/src/apps/koohii/modules/home/templates/indexMember.php
index d857b45b..c2b66863 100755
--- a/src/apps/koohii/modules/home/templates/indexMember.php
+++ b/src/apps/koohii/modules/home/templates/indexMember.php
@@ -24,7 +24,7 @@
 ?>
           </div>
           <div class="bd">
-            <?= _bs_button('Study', 'study/index', ['class' => 'btn btn-lg btn-go']); ?>
+            <?= _bs_button('Study', 'study/index', ['class' => 'ko-Btn ko-Btn--push ko-Btn--xl min-w-[150px]']); ?>
           </div>
         </div>
       </div>
@@ -43,7 +43,7 @@
 ?>
           </div>
           <div class="bd">
-            <?= _bs_button('Review', '@overview', ['class' => 'btn btn-lg btn-go']); ?>
+            <?= _bs_button('Review', '@overview', ['class' => 'ko-Btn ko-Btn--push ko-Btn--xl min-w-[150px]']); ?>
           </div>
         </div>
       </div>
@@ -68,7 +68,7 @@
 ?>
           </div>
           <div class="bd">
-            <?= _bs_button('Progress chart', '@progress', ['class' => 'btn btn-lg btn-go']); ?>
+            <?= _bs_button('Progress chart', '@progress', ['class' => 'ko-Btn ko-Btn--push ko-Btn--xl min-w-[150px]']); ?>
           </div>
         </div>
       </div>
diff --git a/src/apps/koohii/modules/news/templates/detailSuccess.php b/src/apps/koohii/modules/news/templates/detailSuccess.php
index ab542450..c1d3ec42 100755
--- a/src/apps/koohii/modules/news/templates/detailSuccess.php
+++ b/src/apps/koohii/modules/news/templates/detailSuccess.php
@@ -19,7 +19,7 @@
 <?php endif ?>
 
     <div id="sitenews_back">
-      <?php echo _bs_button('&laquo; Back', '@homepage', ['class' => 'btn btn-success']) ?>
+      <?php echo _bs_button('&laquo; Back', '@homepage', ['class' => 'ko-Btn ko-Btn--success']) ?>
       <?php if ($sf_user->getUserName() === 'fuaburisu' || $sf_user->isAdministrator()): ?>
         <?php echo '&nbsp;&nbsp;'.link_to('<i class="fa fa-edit"></i> Edit Post', "news/post?post_id=$post_id", ['class' => 'btn btn-ghost']) ?>
       <?php endif; ?>
diff --git a/src/apps/koohii/modules/news/templates/indexSuccess.php b/src/apps/koohii/modules/news/templates/indexSuccess.php
index 09071aee..67f568b4 100755
--- a/src/apps/koohii/modules/news/templates/indexSuccess.php
+++ b/src/apps/koohii/modules/news/templates/indexSuccess.php
@@ -37,7 +37,7 @@
     <?php include_partial('news/list', ['posts' => $posts]) ?>
 
     <div id="sitenews_back">
-      <?php echo _bs_button('&laquo; Back', '@homepage', ['class' => 'btn btn-success']) ?>
+      <?php echo _bs_button('&laquo; Back', '@homepage', ['class' => 'ko-Btn ko-Btn--success']) ?>
     </div>
 
   </div>
diff --git a/src/apps/koohii/modules/news/templates/postSuccess.php b/src/apps/koohii/modules/news/templates/postSuccess.php
index 8bcef50d..52f5ef45 100755
--- a/src/apps/koohii/modules/news/templates/postSuccess.php
+++ b/src/apps/koohii/modules/news/templates/postSuccess.php
@@ -55,8 +55,8 @@
     </div>
 
     <div class="form-group">
-      <?php echo submit_tag('Post', ['class' => 'btn btn-success']) ?>&nbsp;&nbsp;
-      <input type="submit" name="do_preview" value="Preview" class="btn btn-primary">
+      <?php echo submit_tag('Post', ['class' => 'ko-Btn ko-Btn--success ko-Btn--large']) ?>
+      <input type="submit" name="do_preview" value="Preview" class="ko-Btn ko-Btn--primary ko-Btn--large ml-2">
     </div>
 
     </form>
diff --git a/src/apps/koohii/modules/review/templates/_LeitnerChart.php b/src/apps/koohii/modules/review/templates/_LeitnerChart.php
index e6b792e0..e28b2f8c 100755
--- a/src/apps/koohii/modules/review/templates/_LeitnerChart.php
+++ b/src/apps/koohii/modules/review/templates/_LeitnerChart.php
@@ -2,25 +2,25 @@
   use_helper('Widgets');
 ?>
 
-  <div id="srs-home_actions">
+  <div id="srs-home_actions" class="ux-flexButtonRow mb-4">
 <?php
   if ($untested_cards > 0) {
     echo _bs_button("<strong>$untested_cards</strong> new", '@review', [
-      'class' => 'btn btn-lg btn-srs btn-new',
+      'class' => 'ko-Btn ko-Btn--srs is-srs-new',
       'query_string' => $me->getQueryString(['type' => 'untested'])
     ]);
   }
 
   if ($expired_total > 0) {
     echo _bs_button("<strong>$expired_total</strong> due", '@review', [
-      'class' => 'btn btn-lg btn-srs btn-due',
+      'class' => 'ko-Btn ko-Btn--srs is-srs-due',
       'query_string' => $me->getQueryString(['type' => 'expired'])
     ]);
   }
 
   if ($restudy_cards > 0) {
     echo _bs_button("<strong>$restudy_cards</strong> restudy", 'study/failedlist', [
-      'class' => 'btn btn-lg btn-srs btn-failed'
+      'class' => 'ko-Btn ko-Btn--srs is-srs-failed'
     ]);
   }
 ?>
diff --git a/src/apps/koohii/modules/review/templates/summarySuccess.php b/src/apps/koohii/modules/review/templates/summarySuccess.php
index f8d22410..e9231809 100755
--- a/src/apps/koohii/modules/review/templates/summarySuccess.php
+++ b/src/apps/koohii/modules/review/templates/summarySuccess.php
@@ -45,7 +45,14 @@
 
     if ($fc_rept !== '')
     {
-      echo '&nbsp;&nbsp;'._bs_button('Repeat Review', $fc_rept, ['absolute' => true, 'class' => 'btn btn-success']);
+      echo '&nbsp;&nbsp;'._bs_button(
+        '<i class="fa fa-redo mr-2"></i>Repeat Review',
+        $fc_rept,
+        [
+          'absolute' => true,
+          'class' => 'ko-Btn ko-Btn--success'
+        ]
+      );
     }
 ?>
   </div>
diff --git a/src/apps/koohii/modules/study/templates/_EditKeyword.php b/src/apps/koohii/modules/study/templates/_EditKeyword.php
index 6a79d2f0..66d352fc 100644
--- a/src/apps/koohii/modules/study/templates/_EditKeyword.php
+++ b/src/apps/koohii/modules/study/templates/_EditKeyword.php
@@ -20,7 +20,7 @@
 
     <div class="mt-4 flex items-center justify-end">
       <a href="#" class="JsReset inline-block text-[#f37200] hover:text-[#f37200] mr-4" data-reset="<?php echo $orig_keyword; ?>">Reset</a>
-      <?php echo submit_tag('Save', ['class' => 'btn btn-success btn-sm']); ?>
+      <?php echo submit_tag('Save', ['class' => 'ko-Btn ko-Btn--success ko-Btn--small']); ?>
     </div>
 
   </form>
diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 2b2aeb18..bf10e2f0 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -16,7 +16,7 @@
   
       <div class="w-1/2 mx-1 mbl:ml-4">
 <?php if ($learnedCount > 0): ?>
-        <?= link_to('Review', '@review', ['query_string' => 'type=relearned', 'class' => 'btn btn-success']); ?>
+        <?= link_to('Review', '@review', ['query_string' => 'type=relearned', 'class' => 'ko-Btn ko-Btn--success']); ?>
 <?php endif; ?>
       </div>
 
diff --git a/src/apps/koohii/modules/study/templates/editSuccess.php b/src/apps/koohii/modules/study/templates/editSuccess.php
index ef7ab7c5..1fa586dc 100755
--- a/src/apps/koohii/modules/study/templates/editSuccess.php
+++ b/src/apps/koohii/modules/study/templates/editSuccess.php
@@ -37,10 +37,10 @@ function get_flashcard_button($userId, $context, $ucsId) {
 
   return <<<EOD
 <div id="EditFlashcard" class="is-toggle-$has_flashcard">
-  <a href="#" class="uiGUI btn btn-success JsEditFlashcard is-0" title="Add  Card" data-uri="$dialogUri" data-param="$params"
-><i class="fa fa-plus"></i>Add Card</a>
-  <a href="#" class="uiGUI btn btn-ghost JsEditFlashcard is-1" title="Edit Card" data-uri="$dialogUri" data-param="$params"
-><i class="fa fa-edit"></i>Edit Card</a>
+  <a href="#" class="uiGUI ko-Btn ko-Btn--success JsEditFlashcard is-0" title="Add  Card" data-uri="$dialogUri" data-param="$params"
+><i class="fa fa-plus mr-2"></i>Add Card</a>
+  <a href="#" class="uiGUI ko-Btn ko-Btn--editcard rounded JsEditFlashcard is-1" title="Edit Card" data-uri="$dialogUri" data-param="$params"
+><i class="fa fa-edit mr-2"></i>Edit Card</a>
 </div>
 EOD;
 }
diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index e20ec644..a15846bb 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -4,58 +4,67 @@
   $learnedCount = LearnedKanjiPeer::getCount($userId);
 ?>
 
-  <h2>Restudy List</h2>
+<h2>Restudy List</h2>
 
-  <div class="row mb-8">
-    <div class="col-md-6">
-  <?php if ($restudyCount): ?>
-      <div class="ko-StrokeBox ko-StrokeBox--danger">
-        <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
-  <?php else: ?>
-      <div class="ko-StrokeBox ko-StrokeBox--success">
-        <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
-  <?php endif; ?>
+<div class="row mb-8">
+  <div class="col-md-6">
+<?php if ($restudyCount): ?>
+    <div class="ko-StrokeBox ko-StrokeBox--danger">
+      <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
+<?php else: ?>
+    <div class="ko-StrokeBox ko-StrokeBox--success">
+      <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
+<?php endif; ?>
 
-        <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#yaya', ['class' => 'whitespace-nowrap']); ?>
+      <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#yaya', ['class' => 'whitespace-nowrap']); ?>
 
-        <div class="flex items-center">
-          <button type="button" class="btn btn-success" disabled="disabled">
-            Begin Restudy <i class="fa fa-book-open"></i>
-          </button>
+      <div class="flex items-center">
+        <button type="button" class="ko-Btn ko-Btn--success ko-Btn--large" disabled="disabled">
+          Begin Restudy<i class="fa fa-book ml-2"></i>
+        </button>
 
-          <?php if ($restudyCount): ?>
-          <?= _bs_button(
+        <?php if ($restudyCount): ?>
+        <?= _bs_button(
   'Review All Forgotten Kanji',
   '@review',
-  ['query_string' => 'box=1', 'class' => 'btn btn-lg btn-outline-danger']
+  ['query_string' => 'box=1', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-ghost ml-6']
 );
-          ?>
-          <?php endif; ?>
-        </div>
+        ?>
+        <?php endif; ?>
       </div>
     </div>
+  </div>
+
+  <div class="col-md-6">
+    <div class="min-w-300px ml-auto padded-box rounded-md">
 
-    <div class="col-md-6">
-      <div class="min-w-300px ml-auto padded-box rounded-md">
+      <div class="flex items-center justify-between">
         <h3 class="text-md font-bold text-body">Learned Kanji</h3>
+        <?= link_to(
+          '<i class="fa fa-times mr-2"></i>Clear learned list ',
+          'study/failedlist',
+          ['class' => 'text-danger-darker no-underline hover:underline']
+        ); ?>
+      </div>
+      
+      <?php if ($learnedCount): ?>
+        <p><strong><?= $learnedCount; ?></strong> learned kanji are ready for review.</p>
 
+<?= _bs_button(
+          'Review Learned Kanji<i class="fa fa-arrow-right ml-2"></i>',
+          '@review',
+          [
+            'query_string' => 'box=1',
+            'class' => 'ko-Btn ko-Btn--success ko-Btn--large',
+          ]
+        ); ?>
+      <?php endif; ?>
 
-        
-        <?php if ($learnedCount): ?>
-          <p><strong><?= $learnedCount; ?></strong> learned kanji are ready for review.</p>
+    </div>
+  </div>
 
-  <?= _bs_button(
-            'Review Learned Kanji <i class="fa fa-arrow-right"></i>',
-            '@review',
-            [
-              'query_string' => 'box=1',
-              'class' => 'btn btn-lg btn-srs btn-learned',
-            ]
-          ); ?>
-        <?php endif; ?>
+</div>
 
-      </div>
-    </div>
 <?php if (!$restudyCount): ?>
 
   <div class="ko-StrokeBox ko-StrokeBox--subdued min-h-[336px] flex mb-8">
diff --git a/src/apps/koohii/modules/study/templates/mystoriesSuccess.php b/src/apps/koohii/modules/study/templates/mystoriesSuccess.php
index aa320e5e..d3c01844 100755
--- a/src/apps/koohii/modules/study/templates/mystoriesSuccess.php
+++ b/src/apps/koohii/modules/study/templates/mystoriesSuccess.php
@@ -19,7 +19,14 @@
 
   <div class="mb-6 relative">
     <div class="absolute right-0 top-0">
-      <?= _bs_button_with_icon('Export to CSV', 'study/export', ['icon' => 'fa-file']); ?>
+      <?= _bs_button(
+          'Export to CSV<i class="fa fa-arrow-down ml-2"></i>',
+          'study/export',
+          [
+            'class' => 'ko-Btn ko-Btn--success',
+          ]
+          );
+      ?>
     </div>
 
     <div id="MyStoriesSelect" class="mb-3"><!-- vue --></div>
diff --git a/src/vite/src/assets/sass/_utilities.scss b/src/vite/src/assets/sass/_utilities.scss
index b6f11213..942a477f 100644
--- a/src/vite/src/assets/sass/_utilities.scss
+++ b/src/vite/src/assets/sass/_utilities.scss
@@ -1,6 +1,11 @@
 // ====================================================================
 // UTILITIES
 //
+//   Layout
+//
+//     ux-flexButtonRow        ... simple horizontal spacing of * > childrens
+//
+//
 //   Sizes / Spacings
 //
 //     ux-maxWidth300/360
@@ -10,11 +15,12 @@
 /* @define utilities */
 
 // --------------------------------------------------------------------
-// MAX WIDTH
+// MIN/MAX WIDTH
+//
+//   Useful to align *block* and *inline-block* elements:
 //
-//   Abstraction of small/medium/wide alignment of vertically
-//   stacked elements like centered content (with mx-auto) or form
-//   fields.
+//     - Use on buttons so they are not too small when label is small.
+//     - Use on centered buttons stacked vertically so they are aligned.
 //
 //   Example:
 //
@@ -25,7 +31,43 @@ $maxWidthItems: ("300" 300px, "360" 360px);
 @each $item in $maxWidthItems {
   $key: nth($item, 1);
   $val: nth($item, 2);
+  //////////////////////////////////////////////////////////////////
+  // Output:
+  //   .ux-maxWidth300 {
+  //     max-width: 300px;
+  //   }
+  //////////////////////////////////////////////////////////////////
   .ux-maxWidth#{$key} {
     max-width: $val;
   }
 }
+
+$minWidthItems: ("100" 100px, "200" 200px);
+@each $item in $minWidthItems {
+  $key: nth($item, 1);
+  $val: nth($item, 2);
+  //////////////////////////////////////////////////////////////////
+  // Output:
+  //   .ux-minWidth300 {
+  //     min-width: 300px;
+  //   }
+  //////////////////////////////////////////////////////////////////
+  .ux-minWidth#{$key} {
+    min-width: $val;
+  }
+}
+
+// --------------------------------------------------------------------
+// FLEX / BUTTON ROW
+//
+//   Simple spacer for button rows
+//
+// --------------------------------------------------------------------
+.ux-flexButtonRow {
+  $gutter: 0.5rem;
+  @apply flex flex-wrap items-center;
+  margin-left: -$gutter;
+  > * {
+    margin-left: $gutter;
+  }
+}
diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index 70b07091..82f082bd 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -14,48 +14,6 @@
 //
 // ====================================================================
 
-// --------------------------------------------------------------------
-// Apply fg/bg colors, as well as :hover/:focus states to an element.
-//
-//   $child     If specified, applies the :hover/:focus styles to a
-//              child element.
-//
-// --------------------------------------------------------------------
-@mixin button-color($bg: blue, $text: #fff, $mix: $--color-mix-white, $shadow: none, $child: "") {
-  @if $child == "" {
-    background-color: $bg;
-    border-color: $bg;
-    color: $text;
-  } @else {
-    #{$child} {
-      background-color: $bg;
-      border-color: $bg;
-      color: $text;
-    }
-  }
-
-  /* postcss-bem-linter: ignore */
-  &:hover #{$child},
-  &:focus #{$child} {
-    color: $text;
-
-    @if $mix != "none" {
-      // wip (saturation / darken / lighten ? -- check with designer)
-      background-color: darken(saturate($bg, 5), 10); //mix($mix, $bg, 30%);
-      border-color: darken(saturate($bg, 5), 10); //mix($mix, $bg, 30%);
-    } @else {
-      // override element-ui's default
-      background-color: $bg;
-      border-color: $bg;
-    }
-
-    // maybe we'll add 'medium', 'strong'
-    @if $shadow == "small" {
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-
 // --------------------------------------------------------------------
 // FONT
 //
diff --git a/src/vite/src/assets/sass/abstracts/_variables.scss b/src/vite/src/assets/sass/abstracts/_variables.scss
index b21db547..5e060c84 100644
--- a/src/vite/src/assets/sass/abstracts/_variables.scss
+++ b/src/vite/src/assets/sass/abstracts/_variables.scss
@@ -28,6 +28,7 @@ $--border-radius-lg: 6px;
 $--button-font-size-sm: 14px;
 $--button-font-size-md: 15px;
 $--button-font-size-lg: 16px;
+$--button-font-size-xl: 18px;
 
 // --------------------------------------------------------------------
 // Colors / Brand  (should match tailwind config)
diff --git a/src/vite/src/assets/sass/components/_buttons.scss b/src/vite/src/assets/sass/components/_buttons.scss
index e62fc310..0e48d884 100644
--- a/src/vite/src/assets/sass/components/_buttons.scss
+++ b/src/vite/src/assets/sass/components/_buttons.scss
@@ -3,37 +3,120 @@
 //
 //  Base:
 //
-//    ko-Btn            Adds drop-shadow, handles :focus, :hover etc
+//    ko-Btn                   Handles :focus, :hover etc
 //
 //  Colors:
 //
+//    ko-Btn--danger
+//    ko-Btn--primary
+//    ko-Btn--success
+//
+//    ko-Btn--editcard
+//
+//  States:
+//
+//    is-ghost                 Use outline aka "ghost" style
+//    is-disabled              Use grayed out colors
+//
+//  Sizes:
+//
+//    ko-Btn--small            ~31px high, 14px text
+//    ko-Btn                   ~36px high, medium size, good for forms
+//    ko-Btn--large            ~41px high, good for primary actions/ux
+//
+//
+//    @see /ux page for live demos
+//
 // ====================================================================
 
+@use "sass:color" as color;
+
+@mixin button-color($bg: blue, $text: #fff, $mix: true) {
+  --ko-btn-bg: #{$bg};
+  --ko-btn-border: #{$bg};
+  --ko-btn-text: #{$text};
+
+  // a darker shade of the main button color
+  --ko-btn-bg-darker: #{darken(saturate($bg, 5), 10)};
+
+  // :hover colors
+  --ko-btn-hover-text: #{$text};
+
+  // .is-disabled
+  $--disabled-bg: #{lighten(desaturate($bg, 15), 0)};
+  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
+  --ko-btn-disabled-bg: #{$--disabled-bg};
+  --ko-btn-disabled-border: #{$--disabled-bg};
+  --ko-btn-disabled-text: #757575;
+
+  @if $mix {
+    // $mix: $--color-mix-white;
+    --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
+    --ko-btn-hover-border: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
+
+    // --ko-btn-hover-bg: #{lighten(saturate($bg, 5), 10)};
+    // --ko-btn-hover-border: #{lighten(saturate($bg, 5), 10)};
+  } @else {
+    --ko-btn-hover-bg: #{$bg};
+    --ko-btn-hover-border: #{$bg};
+  }
+}
+
 // --------------------------------------------------------------------
 // Base class
 // --------------------------------------------------------------------
 .ko-Btn {
   display: inline-block;
   font-weight: 400;
-  line-height: 1.5;
-  color: #fff;
+  line-height: 1;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
+  white-space: nowrap;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  background-color: transparent;
   border: 1px solid transparent;
   transition: none;
 
   border-radius: $--border-radius-md;
   padding: 0.375rem 0.75rem;
-}
 
-.ko-Btn {
-  @include button-color($bg: #f1f1f1, $text: $--color-text-body, $shadow: none);
+  // apply colors
+  background-color: var(--ko-btn-bg);
+  border-color: var(--ko-btn-border);
+  color: var(--ko-btn-text);
+
+  // apply :hover
+  // apply :focus
+  &:hover,
+  &:focus {
+    background-color: var(--ko-btn-hover-bg);
+    border-color: var(--ko-btn-hover-border);
+    color: var(--ko-btn-hover-text);
+    text-decoration: none; // when applied to <a>
+  }
+
+  //
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus {
+      cursor: not-allowed;
+      background-color: var(--ko-btn-disabled-bg);
+      border-color: var(--ko-btn-disabled-border);
+      color: var(--ko-btn-disabled-text);
+    }
+  }
+
+  // outline aka "ghost" buttons
+  &.is-ghost {
+    background-color: transparent;
+    --ko-btn-border: var(--ko-btn-bg);
+    --ko-btn-text: var(--ko-btn-bg-darker);
+    --ko-btn-hover-text: var(--ko-btn-bg-darker);
+  }
 }
 
 // --------------------------------------------------------------------
@@ -59,38 +142,116 @@
 // --------------------------------------------------------------------
 .ko-Btn {
   @include font($--button-font-size-md);
-  padding: 7px 14px; // ~36px height
+  padding: 10px 12px; // ~36px height
   border-radius: $--border-radius-lg;
 }
 
 .ko-Btn--small {
   @include font($--button-font-size-sm);
-  padding: 4px 8px; // ~31 px height
+  padding: 8px 10px; // ~31 px height
   border-radius: $--border-radius-lg;
 }
 
 .ko-Btn--large {
   @include font($--button-font-size-lg);
-  padding: 8px 14px; // ~42px height
+  padding: 12px 14px; // ~41px height
   border-radius: $--border-radius-lg;
 }
 
 // --------------------------------------------------------------------
-// Misc. special styles
+// Shapes
 // --------------------------------------------------------------------
-// push buttons (note :hover & :active same style due to touch :active -> :hover)
-.btn-go {
-  color: #fff;
-  background-color: #5cb85c;
-  border: none;
-  border-bottom: 3px solid #318a31;
+
+// button style currently only used in Study > Edit Card
+.ko-Btn--editcard {
+  --ko-btn-bg: transparent;
+  --ko-btn-border: #{$--clr-bg-1s};
+  --ko-btn-text: #6f6961;
+
+  --ko-btn-hover-bg: transparent;
+  --ko-btn-hover-border: #{$--clr-bg-1s};
+  --ko-btn-hover-text: #333;
+
+  &:focus {
+    --ko-btn-hover-border: #323130;
+  }
 }
-.btn-go:active,
-.btn-go:hover {
-  color: #fff;
-  border-bottom-width: 1px;
-  margin-top: 2px;
+
+// --------------------------------------------------------------------
+// Misc. special styles
+// --------------------------------------------------------------------
+
+// used on legacy homepage, maybe reuse for something else later
+//  <button class="ko-Btn ko-Btn--push ko-Btn--xl">...
+.ko-Btn {
+  &--push {
+    --ko-btn-text: #fff;
+    --ko-btn-bg: #5cb85c;
+    --ko-btn-hover-bg: #5cb85c;
+    border-radius: $--border-radius-md;
+    border-width: 0 0 0 0;
+    border-bottom: 3px solid #318a31;
+
+    &:active,
+    &:hover {
+      border-bottom-width: 1px;
+      margin-top: 2px;
+    }
+  }
+
+  &--xl {
+    @include font($--button-font-size-xl);
+    border-radius: $--border-radius-lg;
+    padding: 15px 1rem 15px; // ~51px height
+  }
 }
-.btn-lg.btn-go {
-  padding: 12px 16px 10px;
+
+// --------------------------------------------------------------------
+// SRS buttons : used at top of Leitner Chart
+//   <button ... class="ko-Btn ko-Btn--srs is-srs-new">
+//     <strong>15</strong> lorem ipsum
+//   </button>
+// --------------------------------------------------------------------
+.ko-Btn--srs {
+  border-radius: $--border-radius-lg;
+  border-width: 0 0 0 0;
+  border-bottom: 3px solid #318a31;
+
+  @include font($--button-font-size-xl);
+  padding: 15px 1rem 13px; // ~49px height
+
+  // flashcard count on the button label
+  strong {
+    color: #fff;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    border-bottom-width: 1px;
+    margin-top: 2px;
+  }
+
+  // srs button colors
+  &.is-srs-due {
+    --ko-btn-text: #502a00;
+    --ko-btn-hover-text: #502a00;
+    --ko-btn-bg: #f7a247;
+    --ko-btn-hover-bg: #f7a247;
+    border-bottom-color: #d2633f;
+  }
+  &.is-srs-failed {
+    --ko-btn-text: #601008;
+    --ko-btn-hover-text: #601008;
+    --ko-btn-bg: #f86464;
+    --ko-btn-hover-bg: #f86464;
+    border-bottom-color: #d2633f;
+  }
+  &.is-srs-new {
+    --ko-btn-text: #0c2b5a;
+    --ko-btn-hover-text: #0c2b5a;
+    --ko-btn-bg: #79b8e9;
+    --ko-btn-hover-bg: #79b8e9;
+    border-bottom-color: #3d83ac;
+  }
 }
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 7cf5864b..9d9c2cde 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -134,7 +134,7 @@ a.admin-edit {
   padding: 1rem;
 
   &--danger {
-    border-color: #E579797a; // 48%
+    border-color: #e579797a; // 48%
   }
 
   &--subdued {
@@ -142,7 +142,7 @@ a.admin-edit {
   }
 
   &--success {
-    border-color: #6CA02A7a; // 48%
+    border-color: #6ca02a7a; // 48%
   }
 }
 
@@ -363,36 +363,6 @@ div.col-box-bis {
   padding-top: 24px;
 }
 
-/* ---------------------------- */
-/* Site wide elements           */
-/* ---------------------------- */
-
-/* Study and SRS */
-.btn-srs strong {
-  color: #fff;
-  font-size: 120%;
-}
-.btn-srs.btn-failed {
-  color: #601008;
-  background-color: #f86464;
-  border-bottom: 3px solid rgb(210, 99, 63);
-}
-.btn-srs.btn-due {
-  color: #502a00;
-  background-color: #f7a247;
-  border-bottom: 3px solid rgb(210, 99, 63);
-}
-.btn-srs.btn-new {
-  color: #0c2b5a;
-  background-color: #79b8e9;
-  border-bottom: 3px solid rgb(61, 131, 172);
-}
-
-.btn-srs:active {
-  border-bottom: 0;
-  margin-top: 3px;
-}
-
 /* ---------------------------- */
 /* Footer & Support (Nov 2016) */
 /* ---------------------------- */
@@ -864,11 +834,6 @@ table.lessons td {
   min-height: 3em;
 }
 
-#home-qs .btn-go {
-  font-size: 18px;
-  min-width: 150px;
-}
-
 #home-qs a {
   text-decoration: none;
 }
diff --git a/src/vite/src/assets/sass/pages/_review-home.scss b/src/vite/src/assets/sass/pages/_review-home.scss
index 846bae23..4d5aaeec 100644
--- a/src/vite/src/assets/sass/pages/_review-home.scss
+++ b/src/vite/src/assets/sass/pages/_review-home.scss
@@ -17,29 +17,13 @@
   margin: 2px 0 0;
 }
 
-/* due/new/failed review buttons */
-#srs-home_actions {
-  margin: 0 0 1em;
-}
-#srs-home_actions .btn {
-  margin-right: 0.5em;
-  margin-bottom: 0.4em;
-}
-#srs-home_actions .btn-lg {
-  padding: 10px 15px;
-  font-size: 16px;
-} /* helps fit new/due/restudy in there */
-
 @media (max-width: 374px) {
-  #srs-home_actions .btn-lg {
+  #srs-home_actions .ko-Btn--srs {
     font-size: 13px;
     margin-right: 5px;
   } /* iPhone 5 */
 }
 
-/*#srs-home_actions .fa-cog { font-size:120%; }
-#srs-home_actions .btn-align-right { float:right; }*/
-
 /* ---------------------------- */
 /* Due cards graph */
 /* ---------------------------- */
diff --git a/src/vite/src/assets/sass/vendor/_bootstrap.scss b/src/vite/src/assets/sass/vendor/_bootstrap.scss
index 4642a3ae..b4838f0e 100644
--- a/src/vite/src/assets/sass/vendor/_bootstrap.scss
+++ b/src/vite/src/assets/sass/vendor/_bootstrap.scss
@@ -120,12 +120,8 @@ textarea.form-control.is-invalid {
   background-image: none; // remove the invalid icon
 }
 
-/* ---------------------------- */
-/* BOOTSTRAP hacks              */
-/* cf. BootstrapHelper          */
-/* ---------------------------- */
-
-// we don't use Boostrap's structure here, see BootstrapHelper.php :: _bs_input_checkbox()
+// we don't use Boostrap's structure here,
+//  @see BootstrapHelper.php :: _bs_input_checkbox()
 .form-group input[type="checkbox"] {
   vertical-align: middle;
   margin: 0;
@@ -136,3 +132,50 @@ textarea.form-control.is-invalid {
   padding-left: 0.5em;
   font-weight: normal;
 }
+
+// --------------------------------------------------------------------
+// BOOTSTRAP BUTTONS tweaks/overrides
+// --------------------------------------------------------------------
+
+// fix the hover styles
+.btn,
+.btn:hover {
+  text-decoration: none;
+}
+
+.btn-link {
+  text-decoration: underline;
+}
+
+
+.btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+
+  &:hover {
+    color: #fff;
+    background-color: #c9302c;
+    border-color: #ac2925;
+  }
+}
+
+// set :focus text color (override Bootstrap's selector created by their mixin)
+.btn-danger {
+  .btn-check:focus + &,
+  &:focus {
+    color: #fff;
+  }
+}
+
+.btn-ghost {
+  color: #6f6961;
+  background-color: inherit;
+  border-color: $--clr-bg-1s;
+}
+
+.btn-default {
+  background-color: $--clr-bg-1;
+  color: #444;
+  border-color: $--clr-bg-1s;
+}
diff --git a/src/vite/src/vue/KoohiiEditStory.vue b/src/vite/src/vue/KoohiiEditStory.vue
index d6cf431b..7321b8f5 100644
--- a/src/vite/src/vue/KoohiiEditStory.vue
+++ b/src/vite/src/vue/KoohiiEditStory.vue
@@ -96,7 +96,7 @@
                       type="button"
                       value="Save changes"
                       title="Save/Update story"
-                      class="btn btn-success inline-block w-auto mr-1"
+                      class="ko-Btn ko-Btn--success inline-block w-auto mr-1"
                       @click.prevent="onSubmit"
                     />
                     <input
@@ -141,7 +141,7 @@
                       type="submit"
                       name="doLearned"
                       value="Add to learned list"
-                      class="btn btn-success"
+                      class="ko-Btn ko-Btn--success ko-Btn--small"
                     />
                   </div>
 
diff --git a/src/vite/src/vue/recognition/RecognitionApp.vue b/src/vite/src/vue/recognition/RecognitionApp.vue
index 1b3468ae..b94c1abe 100644
--- a/src/vite/src/vue/recognition/RecognitionApp.vue
+++ b/src/vite/src/vue/recognition/RecognitionApp.vue
@@ -23,7 +23,7 @@
             ></textarea>
             <input
               type="submit"
-              class="btn btn-success"
+              class="ko-Btn ko-Btn--success"
               value="Show"
               @click.prevent="onClickShow"
             />
@@ -56,7 +56,7 @@
           </div>
 
           <div class="mb-4 pb-4 border-b border-[#d4cdba]">
-            <button class="btn btn-success" @click="onClickToEdit">{{
+            <button class="ko-Btn ko-Btn--success" @click="onClickToEdit">{{
               "Enter more japanese text"
             }}</button>
           </div>
diff --git a/src/vite/src/vue/styleguide/index.vue b/src/vite/src/vue/styleguide/index.vue
index fcd4599a..a9cc3625 100644
--- a/src/vite/src/vue/styleguide/index.vue
+++ b/src/vite/src/vue/styleguide/index.vue
@@ -53,7 +53,46 @@
         <button class="ko-Btn ko-Btn--large ko-Btn--success">Success</button>
         <button class="ko-Btn ko-Btn--large ko-Btn--danger">Danger</button>
       </div>
+      
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">is-ghost</span>
+        <button class="ko-Btn is-ghost ko-Btn--large">Default</button>
+        <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--primary">Primary</button>
+        <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--success">Success</button>
+        <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--danger">Danger</button>
+      </div>
+      
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">is-disabled</span>
+        <button class="ko-Btn is-disabled ko-Btn--large" disabled>Default</button>
+        <button class="ko-Btn is-disabled ko-Btn--large ko-Btn--primary" disabled>Primary</button>
+        <button class="ko-Btn is-disabled ko-Btn--large ko-Btn--success" disabled>Success</button>
+        <button class="ko-Btn is-disabled ko-Btn--large ko-Btn--danger" disabled>Danger</button>
+      </div>
+    </section>
+      
+    <p>Example buttons with icons</p>
+
+    <section class="ux-docSection ux-docDemoblock">
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">&lt;button&gt;</span>
+        <button class="ko-Btn ko-Btn--large ko-Btn--primary">Spaced Repetition<i class="fa fa-arrow-right ml-2"></i></button>
+        <button class="ko-Btn ko-Btn--large ko-Btn--success is-disabled" disabled>Start Review<i class="fa fa-arrow-right ml-2"></i></button>        
+        <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--primary">
+          Show Kanji<i class="fa fa-chevron-down ml-2"></i>
+        </button>
+      </div>
+
+      <div class="mb-4 ux-flexButtonRow">
+        <span class="self-center font-bold min-w-[120px]">&lt;a&gt;</span>
+        <a href="#" class="ko-Btn ko-Btn--editcard rounded">
+          <i class="fa fa-edit mr-2"></i>Edit Card
+        </a>
+      </div>
+
     </section>
+
+
   </div>
 </template>
 
diff --git a/src/vite/tailwind.config.js b/src/vite/tailwind.config.js
index 6d6e93fb..7f347b2b 100644
--- a/src/vite/tailwind.config.js
+++ b/src/vite/tailwind.config.js
@@ -21,6 +21,7 @@ module.exports = {
       danger: {
         DEFAULT: "#9f0e0b",
         dark: "#D23C3C",
+        darker: "#BD2420",
       },
 
       shaded: {
@@ -28,6 +29,7 @@ module.exports = {
       },
 
       success: {
+        dark: "#479947",
         darker: "#2C892C",
       },
 

From db43d566d11feb072caa4bf51733cd36c689d482 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 21 Mar 2022 15:51:40 +0100
Subject: [PATCH 15/69] (buttons): replace Bootstrap buttons `.btn btn-danger`
 with new ones

---
 .../koohii/lib/helper/BootstrapHelper.php     | 34 ++++++++++++-------
 .../templates/_DeleteAccountConfirm.php       |  2 +-
 .../templates/_DeleteAccountStepOne.php       |  7 +++-
 .../account/templates/createSuccess.php       |  9 +++--
 .../templates/forgotPasswordSuccess.php       |  2 +-
 .../modules/home/templates/loginSuccess.php   |  2 +-
 .../modules/manage/templates/_RemoveList.php  |  6 +++-
 .../modules/study/templates/_LearnedPanel.php |  2 +-
 .../src/assets/sass/study-base.build.scss     |  6 ----
 .../src/assets/sass/vendor/_bootstrap.scss    | 27 ---------------
 10 files changed, 43 insertions(+), 54 deletions(-)

diff --git a/src/apps/koohii/lib/helper/BootstrapHelper.php b/src/apps/koohii/lib/helper/BootstrapHelper.php
index 488ba5da..c4b269d5 100644
--- a/src/apps/koohii/lib/helper/BootstrapHelper.php
+++ b/src/apps/koohii/lib/helper/BootstrapHelper.php
@@ -27,7 +27,7 @@
  *
  * FORM HELPERS
  *
- *  _bs_formgroup([array $options], ...)
+ *   _bs_formgroup([array $options], ...)
  *
  *    $options (optional) ... passed to Symfony tag helpers
  *
@@ -37,21 +37,17 @@
  *    Example:
  *      _bs_formgroup(['validate' => 'username'], ...)
  *
- *  _bs_input_checkbox($name, $options = array())
+ *   _bs_input_checkbox($name, $options = array())
  *
  *      OPTIONAL  'label' => 'Label text'
  *      NOTE!     The input's `value` is ALWAYS "1"
  *
- *  _bs_input_text    ($name, $options = array())
- *
- *  _bs_input_textarea($name, $options = array())
- *
- *  _bs_input_email   ($name, $options = array())
- *
- *  _bs_input_password($name, $options = array())
- *
- *  _bs_submit_tag    ($label, $options = array())
- *
+ *   _bs_input_email   ($name, $options = array())
+ *   _bs_input_password($name, $options = array())
+ *   _bs_input_text    ($name, $options = array())
+ *   _bs_input_textarea($name, $options = array())
+ * 
+ *   _bs_submit_tag    ($label, $options = array())
  *
  *
  * FORM LAYOUT
@@ -246,9 +242,21 @@ function _bs_input_textarea($name, $options = [])
   return _bs_input('textarea', $name, $options);
 }
 
+/**
+ * Returns <input type=submit" ...> - adds 'success' button styles by
+ * default unless a `ko-Btn` class is used in the `class` option.
+ *
+ * @param string $label
+ * @param array $options Symfony tag helper options
+ * @return string
+ */
 function _bs_submit_tag($label, $options = [])
 {
-  _bs_class_merge($options, 'ko-Btn ko-Btn--success');
+  // default to adding `success` style - unless a button class is used
+  $classnames = $options['class'] ?? '';
+  if (false === strstr($classnames, 'ko-Btn')) {
+    _bs_class_merge($options, 'ko-Btn ko-Btn--success');
+  }
 
   return submit_tag($label, $options);
 }
diff --git a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
index a9f29ee8..49beeddf 100755
--- a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
+++ b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
@@ -33,7 +33,7 @@
   </p>
   <?php
   echo _bs_form_group(
-    _bs_submit_tag('Delete this account', ['class' => 'btn-danger'])
+    _bs_submit_tag('Delete this account', ['class' => 'ko-Btn ko-Btn--danger'])
   );
   ?>
   </form>
diff --git a/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php b/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
index e7bad4e7..c0731c63 100755
--- a/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
+++ b/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
@@ -12,7 +12,12 @@
       <li>your account registration information (username, email, etc)</li>
     </ul>
 
-    <?= link_to('Yes,  I want to delete my account ( step 1 of 2 )', 'account/delete', ['class' => 'btn btn-danger']); ?>
+    <?= link_to(
+        'Yes,  I want to delete my account ( step 1 of 2 )',
+        'account/delete',
+        ['class' => 'ko-Btn ko-Btn--danger']
+      );
+    ?>
   
   </div>
 </section>
\ No newline at end of file
diff --git a/src/apps/koohii/modules/account/templates/createSuccess.php b/src/apps/koohii/modules/account/templates/createSuccess.php
index 3a4c7ee9..22440b4b 100755
--- a/src/apps/koohii/modules/account/templates/createSuccess.php
+++ b/src/apps/koohii/modules/account/templates/createSuccess.php
@@ -75,8 +75,13 @@
 <div class="padded-box rounded mb-3" style="max-width:380px">
 <?php
     echo _bs_form_group(
-  _bs_submit_tag('Create Account', ['class' => 'btn-lg'])
-);
+      _bs_submit_tag(
+        'Create Account',
+        [
+          'class' => 'ko-Btn ko-Btn--success ko-Btn--large'
+        ]
+      )
+    );
 ?>
 </div><!-- /padded-box -->
 
diff --git a/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php b/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
index af43b636..60e62a38 100755
--- a/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
+++ b/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
@@ -20,7 +20,7 @@
       _bs_input_email('email_address', ['label' => 'Email address', 'placeholder' => 'Email', 'class' => 'JsFocusOnLoadInput'])
     );
     echo _bs_form_group(
-      _bs_submit_tag('Send password instructions', ['class' => ''])
+      _bs_submit_tag('Send password instructions')
     );
   ?>
   </form>
diff --git a/src/apps/koohii/modules/home/templates/loginSuccess.php b/src/apps/koohii/modules/home/templates/loginSuccess.php
index 6a2f6cba..ca722d14 100755
--- a/src/apps/koohii/modules/home/templates/loginSuccess.php
+++ b/src/apps/koohii/modules/home/templates/loginSuccess.php
@@ -33,7 +33,7 @@
     */
 
     echo _bs_form_group(
-      _bs_submit_tag('Sign In', ['class' => 'btn-lg'])
+      _bs_submit_tag('Sign In', ['class' => 'ko-Btn ko-Btn--success ko-Btn--large'])
     );
 ?>
    
diff --git a/src/apps/koohii/modules/manage/templates/_RemoveList.php b/src/apps/koohii/modules/manage/templates/_RemoveList.php
index 5fa54a0e..0de755c9 100755
--- a/src/apps/koohii/modules/manage/templates/_RemoveList.php
+++ b/src/apps/koohii/modules/manage/templates/_RemoveList.php
@@ -19,7 +19,11 @@
 <?php echo form_tag('manage/removeListConfirm', ['class' => 'main-form']) ?>
 <?php
     echo _bs_submit_tag('Remove Cards') . '<em class="note">Note: there will be a confirmation step.</em>';
-    echo link_to('Clear selection', 'manage/removelist', ['class' => 'btn btn-danger', 'style' => 'margin-left:2em']);
+    echo _bs_button(
+      'Clear selection',
+      'manage/removelist',
+      ['class' => 'ko-Btn ko-Btn--danger ml-4']
+    );
 ?>
 </form>
 </div>
diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index bf10e2f0..6561926a 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -11,7 +11,7 @@
 
     <div class="flex items-center -mx-1 mbl:w-[182px] mbl:ml-auto dsk:mb-2">
       <div class="w-1/2 mx-1">
-        <?= link_to('Clear', 'study/clear?goto='.$kanji, ['class' => 'btn btn-danger']); ?>
+        <?= link_to('Clear', 'study/clear?goto='.$kanji, ['class' => 'ko-Btn ko-Btn--danger']); ?>
       </div>
   
       <div class="w-1/2 mx-1 mbl:ml-4">
diff --git a/src/vite/src/assets/sass/study-base.build.scss b/src/vite/src/assets/sass/study-base.build.scss
index 22e99e7d..f35d6cd5 100644
--- a/src/vite/src/assets/sass/study-base.build.scss
+++ b/src/vite/src/assets/sass/study-base.build.scss
@@ -407,12 +407,6 @@
   margin: 0;
 }
 
-#study-learned .btn-danger {
-  border-color: #26a65b;
-  color: #06863b;
-  background: inherit;
-} /* clear */
-
 /* ------------------- */
 /* Search autocomplete */
 /* ------------------- */
diff --git a/src/vite/src/assets/sass/vendor/_bootstrap.scss b/src/vite/src/assets/sass/vendor/_bootstrap.scss
index b4838f0e..d44094d1 100644
--- a/src/vite/src/assets/sass/vendor/_bootstrap.scss
+++ b/src/vite/src/assets/sass/vendor/_bootstrap.scss
@@ -137,37 +137,10 @@ textarea.form-control.is-invalid {
 // BOOTSTRAP BUTTONS tweaks/overrides
 // --------------------------------------------------------------------
 
-// fix the hover styles
-.btn,
-.btn:hover {
-  text-decoration: none;
-}
-
 .btn-link {
   text-decoration: underline;
 }
 
-
-.btn-danger {
-  color: #fff;
-  background-color: #d9534f;
-  border-color: #d43f3a;
-
-  &:hover {
-    color: #fff;
-    background-color: #c9302c;
-    border-color: #ac2925;
-  }
-}
-
-// set :focus text color (override Bootstrap's selector created by their mixin)
-.btn-danger {
-  .btn-check:focus + &,
-  &:focus {
-    color: #fff;
-  }
-}
-
 .btn-ghost {
   color: #6f6961;
   background-color: inherit;

From 83080e7a55a7a8d0cee9644e885dfa11a62888b5 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 21 Mar 2022 16:57:21 +0100
Subject: [PATCH 16/69] (buttons): replace Bootstrap `btn-ghost`, use new
 buttons

---
 .../manage/templates/_AddCustomConfirm.php    |  2 +-
 .../manage/templates/_AddOrderConfirm.php     |  2 +-
 .../templates/_ImportKeywordsConfirm.php      |  2 +-
 .../manage/templates/_RemoveCustomConfirm.php |  2 +-
 .../manage/templates/_RemoveListConfirm.php   |  2 +-
 .../modules/news/templates/detailSuccess.php  |  2 +-
 .../modules/study/templates/editSuccess.php   |  2 +-
 .../src/assets/sass/abstracts/_variables.scss |  2 +-
 .../src/assets/sass/components/_buttons.scss  | 56 +++++++++----------
 .../src/assets/sass/vendor/_bootstrap.scss    | 12 ----
 src/vite/src/vue/styleguide/index.vue         |  2 +-
 11 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/src/apps/koohii/modules/manage/templates/_AddCustomConfirm.php b/src/apps/koohii/modules/manage/templates/_AddCustomConfirm.php
index 3b913091..ee70ac24 100755
--- a/src/apps/koohii/modules/manage/templates/_AddCustomConfirm.php
+++ b/src/apps/koohii/modules/manage/templates/_AddCustomConfirm.php
@@ -16,7 +16,7 @@
   <?php endif ?>
 
   <p>
-    <?php if ($countNewCards > 0) { echo _bs_submit_tag('Add Cards') . '&nbsp;&nbsp;'; } ?><a href="#" class="btn btn-ghost JSManageCancel">Go back</a>
+    <?php if ($countNewCards > 0) { echo _bs_submit_tag('Add Cards') . '&nbsp;&nbsp;'; } ?><a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a>
   </p>
 
 
diff --git a/src/apps/koohii/modules/manage/templates/_AddOrderConfirm.php b/src/apps/koohii/modules/manage/templates/_AddOrderConfirm.php
index 068c73c4..58fddc04 100755
--- a/src/apps/koohii/modules/manage/templates/_AddOrderConfirm.php
+++ b/src/apps/koohii/modules/manage/templates/_AddOrderConfirm.php
@@ -17,7 +17,7 @@
 <?php if ($countNewCards) {
   echo _bs_submit_tag('Add Cards', ['style' => 'margin-right:0.5em']); }
 ?>
-<a href="#" class="btn btn-ghost JSManageCancel">Go back</a>
+<a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a>
 
 
 
diff --git a/src/apps/koohii/modules/manage/templates/_ImportKeywordsConfirm.php b/src/apps/koohii/modules/manage/templates/_ImportKeywordsConfirm.php
index 085d3e1f..f3113b59 100755
--- a/src/apps/koohii/modules/manage/templates/_ImportKeywordsConfirm.php
+++ b/src/apps/koohii/modules/manage/templates/_ImportKeywordsConfirm.php
@@ -8,6 +8,6 @@
 
   <?php echo ui_data_table($keywords) ?>
 
-  <?php echo _bs_submit_tag('Import') ?>&nbsp;&nbsp;<a href="#" class="btn btn-ghost JSManageCancel">Go back</a>
+  <?php echo _bs_submit_tag('Import') ?>&nbsp;&nbsp;<a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a>
 
 </form>
diff --git a/src/apps/koohii/modules/manage/templates/_RemoveCustomConfirm.php b/src/apps/koohii/modules/manage/templates/_RemoveCustomConfirm.php
index 48eea73b..14250f87 100755
--- a/src/apps/koohii/modules/manage/templates/_RemoveCustomConfirm.php
+++ b/src/apps/koohii/modules/manage/templates/_RemoveCustomConfirm.php
@@ -15,7 +15,7 @@
   <?php endif ?>
 
   <p>
-    <?php if ($count) { echo _bs_submit_tag('Remove Flashcards') . '&nbsp;&nbsp;'; } ?><a href="#" class="btn btn-ghost JSManageCancel">Go back</a>
+    <?php if ($count) { echo _bs_submit_tag('Remove Flashcards') . '&nbsp;&nbsp;'; } ?><a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a>
   </p>
 
 
diff --git a/src/apps/koohii/modules/manage/templates/_RemoveListConfirm.php b/src/apps/koohii/modules/manage/templates/_RemoveListConfirm.php
index 2f773539..2dd5729d 100755
--- a/src/apps/koohii/modules/manage/templates/_RemoveListConfirm.php
+++ b/src/apps/koohii/modules/manage/templates/_RemoveListConfirm.php
@@ -15,7 +15,7 @@
   <?php endif ?>
 
   <p>
-    <?php if ($count) { echo _bs_submit_tag('Delete Cards') . '&nbsp;&nbsp;'; } ?><a href="#" class="btn btn-ghost JSManageCancel">Go back</a>
+    <?php if ($count) { echo _bs_submit_tag('Delete Cards') . '&nbsp;&nbsp;'; } ?><a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a>
   </p>
 
 
diff --git a/src/apps/koohii/modules/news/templates/detailSuccess.php b/src/apps/koohii/modules/news/templates/detailSuccess.php
index c1d3ec42..88787d63 100755
--- a/src/apps/koohii/modules/news/templates/detailSuccess.php
+++ b/src/apps/koohii/modules/news/templates/detailSuccess.php
@@ -21,7 +21,7 @@
     <div id="sitenews_back">
       <?php echo _bs_button('&laquo; Back', '@homepage', ['class' => 'ko-Btn ko-Btn--success']) ?>
       <?php if ($sf_user->getUserName() === 'fuaburisu' || $sf_user->isAdministrator()): ?>
-        <?php echo '&nbsp;&nbsp;'.link_to('<i class="fa fa-edit"></i> Edit Post', "news/post?post_id=$post_id", ['class' => 'btn btn-ghost']) ?>
+        <?php echo '&nbsp;&nbsp;'.link_to('<i class="fa fa-edit"></i> Edit Post', "news/post?post_id=$post_id", ['class' => 'ko-Btn is-ghost']) ?>
       <?php endif; ?>
 
     </div>
diff --git a/src/apps/koohii/modules/study/templates/editSuccess.php b/src/apps/koohii/modules/study/templates/editSuccess.php
index 1fa586dc..53b90e34 100755
--- a/src/apps/koohii/modules/study/templates/editSuccess.php
+++ b/src/apps/koohii/modules/study/templates/editSuccess.php
@@ -39,7 +39,7 @@ function get_flashcard_button($userId, $context, $ucsId) {
 <div id="EditFlashcard" class="is-toggle-$has_flashcard">
   <a href="#" class="uiGUI ko-Btn ko-Btn--success JsEditFlashcard is-0" title="Add  Card" data-uri="$dialogUri" data-param="$params"
 ><i class="fa fa-plus mr-2"></i>Add Card</a>
-  <a href="#" class="uiGUI ko-Btn ko-Btn--editcard rounded JsEditFlashcard is-1" title="Edit Card" data-uri="$dialogUri" data-param="$params"
+  <a href="#" class="uiGUI ko-Btn is-ghost rounded JsEditFlashcard is-1" title="Edit Card" data-uri="$dialogUri" data-param="$params"
 ><i class="fa fa-edit mr-2"></i>Edit Card</a>
 </div>
 EOD;
diff --git a/src/vite/src/assets/sass/abstracts/_variables.scss b/src/vite/src/assets/sass/abstracts/_variables.scss
index 5e060c84..f858b7ee 100644
--- a/src/vite/src/assets/sass/abstracts/_variables.scss
+++ b/src/vite/src/assets/sass/abstracts/_variables.scss
@@ -33,7 +33,7 @@ $--button-font-size-xl: 18px;
 // --------------------------------------------------------------------
 // Colors / Brand  (should match tailwind config)
 // --------------------------------------------------------------------
-$--color-btn-default: #939291;
+$--color-btn-default: #8e8d8c;
 
 // main primary color (saturated blue/cyan)
 $--color-btn-primary: #3272d1;
diff --git a/src/vite/src/assets/sass/components/_buttons.scss b/src/vite/src/assets/sass/components/_buttons.scss
index 0e48d884..6b49a60e 100644
--- a/src/vite/src/assets/sass/components/_buttons.scss
+++ b/src/vite/src/assets/sass/components/_buttons.scss
@@ -42,13 +42,6 @@
   // :hover colors
   --ko-btn-hover-text: #{$text};
 
-  // .is-disabled
-  $--disabled-bg: #{lighten(desaturate($bg, 15), 0)};
-  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
-  --ko-btn-disabled-bg: #{$--disabled-bg};
-  --ko-btn-disabled-border: #{$--disabled-bg};
-  --ko-btn-disabled-text: #757575;
-
   @if $mix {
     // $mix: $--color-mix-white;
     --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
@@ -60,6 +53,23 @@
     --ko-btn-hover-bg: #{$bg};
     --ko-btn-hover-border: #{$bg};
   }
+
+  // .is-disabled
+  $--disabled-bg: #{lighten(desaturate($bg, 15), 0)};
+  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
+  --ko-btn-disabled-bg: #{$--disabled-bg};
+  --ko-btn-disabled-border: #{$--disabled-bg};
+  --ko-btn-disabled-text: #757575;
+
+  // outline aka "ghost" buttons
+  &.is-ghost {
+    --ko-btn-bg: transparent;
+    --ko-btn-border: #{$bg};
+    --ko-btn-text: var(--ko-btn-bg-darker);
+    --ko-btn-hover-bg: transparent;
+    --ko-btn-hover-border: var(--ko-btn-bg-darker);
+    --ko-btn-hover-text: #{darken(saturate($bg, 10), 20)};
+  }
 }
 
 // --------------------------------------------------------------------
@@ -109,14 +119,6 @@
       color: var(--ko-btn-disabled-text);
     }
   }
-
-  // outline aka "ghost" buttons
-  &.is-ghost {
-    background-color: transparent;
-    --ko-btn-border: var(--ko-btn-bg);
-    --ko-btn-text: var(--ko-btn-bg-darker);
-    --ko-btn-hover-text: var(--ko-btn-bg-darker);
-  }
 }
 
 // --------------------------------------------------------------------
@@ -124,7 +126,16 @@
 // --------------------------------------------------------------------
 .ko-Btn {
   @include button-color($bg: $--color-btn-default);
+
+  // (override) warm color for the default outline button
+  &.is-ghost {
+    --ko-btn-border: #d4cdba;
+    --ko-btn-text: #6f6961;
+    --ko-btn-hover-text: #3f3931;
+    --ko-btn-hover-border: #928c7d;
+  }
 }
+
 .ko-Btn--primary {
   @include button-color($bg: $--color-btn-primary);
 }
@@ -162,21 +173,6 @@
 // Shapes
 // --------------------------------------------------------------------
 
-// button style currently only used in Study > Edit Card
-.ko-Btn--editcard {
-  --ko-btn-bg: transparent;
-  --ko-btn-border: #{$--clr-bg-1s};
-  --ko-btn-text: #6f6961;
-
-  --ko-btn-hover-bg: transparent;
-  --ko-btn-hover-border: #{$--clr-bg-1s};
-  --ko-btn-hover-text: #333;
-
-  &:focus {
-    --ko-btn-hover-border: #323130;
-  }
-}
-
 // --------------------------------------------------------------------
 // Misc. special styles
 // --------------------------------------------------------------------
diff --git a/src/vite/src/assets/sass/vendor/_bootstrap.scss b/src/vite/src/assets/sass/vendor/_bootstrap.scss
index d44094d1..dc817434 100644
--- a/src/vite/src/assets/sass/vendor/_bootstrap.scss
+++ b/src/vite/src/assets/sass/vendor/_bootstrap.scss
@@ -140,15 +140,3 @@ textarea.form-control.is-invalid {
 .btn-link {
   text-decoration: underline;
 }
-
-.btn-ghost {
-  color: #6f6961;
-  background-color: inherit;
-  border-color: $--clr-bg-1s;
-}
-
-.btn-default {
-  background-color: $--clr-bg-1;
-  color: #444;
-  border-color: $--clr-bg-1s;
-}
diff --git a/src/vite/src/vue/styleguide/index.vue b/src/vite/src/vue/styleguide/index.vue
index a9cc3625..e406bea9 100644
--- a/src/vite/src/vue/styleguide/index.vue
+++ b/src/vite/src/vue/styleguide/index.vue
@@ -85,7 +85,7 @@
 
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">&lt;a&gt;</span>
-        <a href="#" class="ko-Btn ko-Btn--editcard rounded">
+        <a href="#" class="ko-Btn is-ghost rounded">
           <i class="fa fa-edit mr-2"></i>Edit Card
         </a>
       </div>

From 11fe98fb40ada9b24c374d51547771593fdda2c5 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 21 Mar 2022 17:12:14 +0100
Subject: [PATCH 17/69] (buttons): refactor Boostrap `.btn-primary`, use new
 classes

---
 .../modules/manage/templates/_AddCustomProcess.php  |  2 +-
 .../modules/manage/templates/_AddOrderProcess.php   |  2 +-
 .../manage/templates/_ImportKeywordsProcess.php     |  2 +-
 .../manage/templates/_RemoveCustomProcess.php       |  2 +-
 .../modules/manage/templates/_RemoveListProcess.php |  2 +-
 .../modules/review/templates/summarySuccess.php     |  2 +-
 .../koohii/modules/study/templates/_RestudyList.php |  2 +-
 src/vite/src/assets/sass/study-base.build.scss      | 13 -------------
 src/vite/src/vue/KoohiiEditStory.vue                |  6 +++---
 9 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/apps/koohii/modules/manage/templates/_AddCustomProcess.php b/src/apps/koohii/modules/manage/templates/_AddCustomProcess.php
index e3b7edef..b4c48f4b 100755
--- a/src/apps/koohii/modules/manage/templates/_AddCustomProcess.php
+++ b/src/apps/koohii/modules/manage/templates/_AddCustomProcess.php
@@ -16,6 +16,6 @@
 ?>
   </div>
 
-  <p><a href="#" class="btn btn-primary JSManageReset">Add more cards</a></p>
+  <p><a href="#" class="ko-Btn is-ghost JSManageReset">Add more cards</a></p>
 
 </form>
diff --git a/src/apps/koohii/modules/manage/templates/_AddOrderProcess.php b/src/apps/koohii/modules/manage/templates/_AddOrderProcess.php
index a20503b6..89ce022a 100755
--- a/src/apps/koohii/modules/manage/templates/_AddOrderProcess.php
+++ b/src/apps/koohii/modules/manage/templates/_AddOrderProcess.php
@@ -16,6 +16,6 @@
 ?>
   </div>
 
-  <p><a href="#" class="btn btn-primary JSManageReset">Add more cards</a></p>
+  <p><a href="#" class="ko-Btn is-ghost JSManageReset">Add more cards</a></p>
 
 </form>
diff --git a/src/apps/koohii/modules/manage/templates/_ImportKeywordsProcess.php b/src/apps/koohii/modules/manage/templates/_ImportKeywordsProcess.php
index 41049b0b..fad1cf5a 100755
--- a/src/apps/koohii/modules/manage/templates/_ImportKeywordsProcess.php
+++ b/src/apps/koohii/modules/manage/templates/_ImportKeywordsProcess.php
@@ -10,6 +10,6 @@
 
 <?php echo form_tag('manage/importKeywords', ['class' => 'main-form']) ?>
 
-  <p><a href="#" class="btn btn-primary JSManageCancel">Go back</a></p>
+  <p><a href="#" class="ko-Btn is-ghost JSManageCancel">Go back</a></p>
 
 </form>
diff --git a/src/apps/koohii/modules/manage/templates/_RemoveCustomProcess.php b/src/apps/koohii/modules/manage/templates/_RemoveCustomProcess.php
index f105acf0..d7b71c15 100755
--- a/src/apps/koohii/modules/manage/templates/_RemoveCustomProcess.php
+++ b/src/apps/koohii/modules/manage/templates/_RemoveCustomProcess.php
@@ -24,6 +24,6 @@
 
 <?php endif; ?>
 
-  <p><a href="#" class="btn btn-primary JSManageReset">Remove more cards</a></p>
+  <p><a href="#" class="ko-Btn is-ghost JSManageReset">Remove more cards</a></p>
 
 </form>
diff --git a/src/apps/koohii/modules/manage/templates/_RemoveListProcess.php b/src/apps/koohii/modules/manage/templates/_RemoveListProcess.php
index fd505a14..99f7c101 100755
--- a/src/apps/koohii/modules/manage/templates/_RemoveListProcess.php
+++ b/src/apps/koohii/modules/manage/templates/_RemoveListProcess.php
@@ -25,6 +25,6 @@
 
 <?php endif; ?>
 
-  <p><a href="#" class="btn btn-primary JSManageReset">Delete more cards</a></p>
+  <p><a href="#" class="ko-Btn is-ghost JSManageReset">Delete more cards</a></p>
 
 </form>
diff --git a/src/apps/koohii/modules/review/templates/summarySuccess.php b/src/apps/koohii/modules/review/templates/summarySuccess.php
index e9231809..3384c283 100755
--- a/src/apps/koohii/modules/review/templates/summarySuccess.php
+++ b/src/apps/koohii/modules/review/templates/summarySuccess.php
@@ -41,7 +41,7 @@
 
 <?php
     $go_back = $fc_free ? 'review/custom' : 'review/index';
-    echo _bs_button('Back', $go_back, ['class' => 'btn btn-primary']);
+    echo _bs_button('Back', $go_back, ['class' => 'ko-Btn is-ghost']);
 
     if ($fc_rept !== '')
     {
diff --git a/src/apps/koohii/modules/study/templates/_RestudyList.php b/src/apps/koohii/modules/study/templates/_RestudyList.php
index bb3fa2a3..873319e5 100755
--- a/src/apps/koohii/modules/study/templates/_RestudyList.php
+++ b/src/apps/koohii/modules/study/templates/_RestudyList.php
@@ -10,7 +10,7 @@
     <h3 class="">Restudy <strong><?php echo $restudy_count ?></strong></h3>
 
     <div class="mbl:ml-auto">
-      <?php echo link_to('Start', 'study/edit', ['query_string' => "restudy", 'class' => 'btn btn-primary']) ?>
+      <?php echo link_to('Start', 'study/edit', ['query_string' => "restudy", 'class' => 'ko-Btn is-ghost']) ?>
     </div>
 
   </div>
diff --git a/src/vite/src/assets/sass/study-base.build.scss b/src/vite/src/assets/sass/study-base.build.scss
index f35d6cd5..c6a21458 100644
--- a/src/vite/src/assets/sass/study-base.build.scss
+++ b/src/vite/src/assets/sass/study-base.build.scss
@@ -382,11 +382,6 @@
 #study-restudy h3 {
   color: #861c1c;
 }
-#study-restudy .btn-primary {
-  background: inherit;
-  border-color: rgba(134, 28, 28, 0.4);
-  color: #fff;
-}
 
 /* learned pane */
 #study-learned {
@@ -399,14 +394,6 @@
   color: #0f7439;
 }
 
-#study-learned .dismiss-msg {
-  font-size: 18px;
-  color: #457a45;
-}
-#study-learned .btn-dismiss .fa {
-  margin: 0;
-}
-
 /* ------------------- */
 /* Search autocomplete */
 /* ------------------- */
diff --git a/src/vite/src/vue/KoohiiEditStory.vue b/src/vite/src/vue/KoohiiEditStory.vue
index 7321b8f5..4997afdb 100644
--- a/src/vite/src/vue/KoohiiEditStory.vue
+++ b/src/vite/src/vue/KoohiiEditStory.vue
@@ -75,7 +75,7 @@
                   name="txtStory"
                 ></textarea>
 
-                <div class="flex justify-between items-center">
+                <div class="flex flex-wrap items-center">
                   <div class="flex items-center">
                     <input
                       id="storyedit_public"
@@ -86,7 +86,7 @@
                     <label for="storyedit_public" class="form-label mb-0 ml-2">Share this story</label
                     >
                   </div>
-                  <div class="">
+                  <div class="ml-auto">
                     <koohii-chars-left
                       :text="postStoryEdit"
                       :max-length="512"
@@ -104,7 +104,7 @@
                       value="Cancel"
                       name="cancel"
                       title="Cancel changes"
-                      class="btn btn-default inline-block w-auto"
+                      class="ko-Btn is-ghost"
                       @click="onCancel"
                     />
                   </div>

From 8d17e9a5943780f891023ea1eae34ef53a77a00c Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 21 Mar 2022 17:21:28 +0100
Subject: [PATCH 18/69] (landing): signup button do not use old Bootstrap
 `btn-` prefix

---
 src/apps/koohii/modules/home/templates/indexGuest.php | 2 +-
 src/vite/src/assets/sass/home.build.scss              | 1 +
 src/vite/src/assets/sass/pages/_landing-page.scss     | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/apps/koohii/modules/home/templates/indexGuest.php b/src/apps/koohii/modules/home/templates/indexGuest.php
index 5f580daa..9c16207e 100755
--- a/src/apps/koohii/modules/home/templates/indexGuest.php
+++ b/src/apps/koohii/modules/home/templates/indexGuest.php
@@ -113,7 +113,7 @@
 
         <div class="max-w-[540px] mx-auto md:flex md:items-center pt-8">
           <div class="mb-6 md:w-1/2 md:mb-0">
-            <?= _bs_button('Register', 'account/create', ['class' => 'btn btn-signup']); ?>
+            <?= _bs_button('Register', 'account/create', ['class' => 'ko-ButtonSignup']); ?>
           </div>
           <div class="md:w-1/2">
             <?= link_to('Learn more', '@learnmore', ['class' => 'learnmore whitespace-nowrap']); ?>
diff --git a/src/vite/src/assets/sass/home.build.scss b/src/vite/src/assets/sass/home.build.scss
index 42d24f96..b609a010 100644
--- a/src/vite/src/assets/sass/home.build.scss
+++ b/src/vite/src/assets/sass/home.build.scss
@@ -20,6 +20,7 @@
 @import "./layout/_layout.scss";
 
 // components
+@import "./components/_buttons.scss";
 @import "./_navbar.scss";
 
 // pages
diff --git a/src/vite/src/assets/sass/pages/_landing-page.scss b/src/vite/src/assets/sass/pages/_landing-page.scss
index 08ceb4d7..a5495365 100644
--- a/src/vite/src/assets/sass/pages/_landing-page.scss
+++ b/src/vite/src/assets/sass/pages/_landing-page.scss
@@ -201,13 +201,13 @@ section {
   text-decoration: none;
 }
 
-#its-free .btn-signup {
+#its-free .ko-ButtonSignup {
   background-color: #a4156c;
+  border-radius: 0.25rem;
   padding: 21px 82px;
   color: #fff;
   font-size: 21px;
   line-height: 1em;
-  margin-bottom: 1em;
   text-decoration: none;
   box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
 }

From 923dc8a34f94f736c99a3f4255dc0669e6062247 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 11:31:02 +0100
Subject: [PATCH 19/69] (buttons): refactor `btn-large` to new classes

---
 src/apps/koohii/modules/account/templates/createDone.php   | 2 +-
 src/apps/koohii/modules/account/templates/passwordDone.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/apps/koohii/modules/account/templates/createDone.php b/src/apps/koohii/modules/account/templates/createDone.php
index a49e1b92..1ad373bd 100755
--- a/src/apps/koohii/modules/account/templates/createDone.php
+++ b/src/apps/koohii/modules/account/templates/createDone.php
@@ -17,7 +17,7 @@
 
     <div>
       <?php $sf_user->setAttribute('login_username', $username); // cf. redirectToLogin() ?>
-      <?php echo _bs_button('Sign in','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success btn-lg']) ?>
+      <?php echo _bs_button('Sign in','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success ko-Btn--large']) ?>
     </div>
 
     <?php echo form_errors() ?>
diff --git a/src/apps/koohii/modules/account/templates/passwordDone.php b/src/apps/koohii/modules/account/templates/passwordDone.php
index 5a1b4c59..c905c91f 100755
--- a/src/apps/koohii/modules/account/templates/passwordDone.php
+++ b/src/apps/koohii/modules/account/templates/passwordDone.php
@@ -11,6 +11,6 @@
 
     <div>
       <?php $sf_user->setAttribute('login_username', $username); // cf. redirectToLogin() ?>
-      <?php echo _bs_button('Sign in with your new password','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success btn-lg']) ?>
+      <?php echo _bs_button('Sign in with your new password','@login', ['query_string' => 'username='.$username, 'class' => 'ko-Btn ko-Btn--success ko-Btn--large']) ?>
     </div>
 

From 7b573a99af150cfb7069c21c47e5109eeee3ca31 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 11:50:28 +0100
Subject: [PATCH 20/69] (buttons): move `button-color` mixin back to mixins for
 more generic use

---
 .../src/assets/sass/abstracts/_mixins.scss    | 48 +++++++++++++++++++
 .../src/assets/sass/components/_buttons.scss  | 43 -----------------
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index 82f082bd..6337be52 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -14,6 +14,54 @@
 //
 // ====================================================================
 
+@use "sass:color" as color;
+
+// --------------------------------------------------------------------
+// BUTTONS
+// 
+//   Helper to create CSS vars & handle states for each button style.
+// --------------------------------------------------------------------
+@mixin button-color($bg: blue, $text: #fff, $mix: true) {
+  --ko-btn-bg: #{$bg};
+  --ko-btn-border: #{$bg};
+  --ko-btn-text: #{$text};
+
+  // a darker shade of the main button color
+  --ko-btn-bg-darker: #{darken(saturate($bg, 5), 10)};
+
+  // :hover colors
+  --ko-btn-hover-text: #{$text};
+
+  @if $mix {
+    // $mix: $--color-mix-white;
+    --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
+    --ko-btn-hover-border: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
+
+    // --ko-btn-hover-bg: #{lighten(saturate($bg, 5), 10)};
+    // --ko-btn-hover-border: #{lighten(saturate($bg, 5), 10)};
+  } @else {
+    --ko-btn-hover-bg: #{$bg};
+    --ko-btn-hover-border: #{$bg};
+  }
+
+  // .is-disabled
+  $--disabled-bg: #{lighten(desaturate($bg, 15), 0)};
+  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
+  --ko-btn-disabled-bg: #{$--disabled-bg};
+  --ko-btn-disabled-border: #{$--disabled-bg};
+  --ko-btn-disabled-text: #757575;
+
+  // outline aka "ghost" buttons
+  &.is-ghost {
+    --ko-btn-bg: transparent;
+    --ko-btn-border: #{$bg};
+    --ko-btn-text: var(--ko-btn-bg-darker);
+    --ko-btn-hover-bg: transparent;
+    --ko-btn-hover-border: var(--ko-btn-bg-darker);
+    --ko-btn-hover-text: #{darken(saturate($bg, 10), 20)};
+  }
+}
+
 // --------------------------------------------------------------------
 // FONT
 //
diff --git a/src/vite/src/assets/sass/components/_buttons.scss b/src/vite/src/assets/sass/components/_buttons.scss
index 6b49a60e..9da92d62 100644
--- a/src/vite/src/assets/sass/components/_buttons.scss
+++ b/src/vite/src/assets/sass/components/_buttons.scss
@@ -29,49 +29,6 @@
 //
 // ====================================================================
 
-@use "sass:color" as color;
-
-@mixin button-color($bg: blue, $text: #fff, $mix: true) {
-  --ko-btn-bg: #{$bg};
-  --ko-btn-border: #{$bg};
-  --ko-btn-text: #{$text};
-
-  // a darker shade of the main button color
-  --ko-btn-bg-darker: #{darken(saturate($bg, 5), 10)};
-
-  // :hover colors
-  --ko-btn-hover-text: #{$text};
-
-  @if $mix {
-    // $mix: $--color-mix-white;
-    --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
-    --ko-btn-hover-border: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
-
-    // --ko-btn-hover-bg: #{lighten(saturate($bg, 5), 10)};
-    // --ko-btn-hover-border: #{lighten(saturate($bg, 5), 10)};
-  } @else {
-    --ko-btn-hover-bg: #{$bg};
-    --ko-btn-hover-border: #{$bg};
-  }
-
-  // .is-disabled
-  $--disabled-bg: #{lighten(desaturate($bg, 15), 0)};
-  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
-  --ko-btn-disabled-bg: #{$--disabled-bg};
-  --ko-btn-disabled-border: #{$--disabled-bg};
-  --ko-btn-disabled-text: #757575;
-
-  // outline aka "ghost" buttons
-  &.is-ghost {
-    --ko-btn-bg: transparent;
-    --ko-btn-border: #{$bg};
-    --ko-btn-text: var(--ko-btn-bg-darker);
-    --ko-btn-hover-bg: transparent;
-    --ko-btn-hover-border: var(--ko-btn-bg-darker);
-    --ko-btn-hover-text: #{darken(saturate($bg, 10), 20)};
-  }
-}
-
 // --------------------------------------------------------------------
 // Base class
 // --------------------------------------------------------------------

From ffefab79da1a212617e7f55805a709a10c20f8bd Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 11:51:07 +0100
Subject: [PATCH 21/69] (about/support): refactor Patreon/PayPal custom buttons
 using new classes

---
 .../modules/about/templates/supportSuccess.php  |  2 +-
 .../src/assets/sass/pages/_about-support.scss   | 17 +++++------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/apps/koohii/modules/about/templates/supportSuccess.php b/src/apps/koohii/modules/about/templates/supportSuccess.php
index 8e293b97..bdc92940 100755
--- a/src/apps/koohii/modules/about/templates/supportSuccess.php
+++ b/src/apps/koohii/modules/about/templates/supportSuccess.php
@@ -17,7 +17,7 @@
     
     <p>Patreon is a great way to support this website on an ongoing basis.</p>
 
-    <a class="btn btn-lg btn-patreon" href="https://www.patreon.com/kanjikoohii" target="_blank">
+    <a class="ko-Btn ko-Btn--large ko-Btn--patreon" href="https://www.patreon.com/kanjikoohii" target="_blank">
       Become a Patron (recurring pledge)
     </a>
     </div>
diff --git a/src/vite/src/assets/sass/pages/_about-support.scss b/src/vite/src/assets/sass/pages/_about-support.scss
index 5763aab8..8e79b531 100644
--- a/src/vite/src/assets/sass/pages/_about-support.scss
+++ b/src/vite/src/assets/sass/pages/_about-support.scss
@@ -38,18 +38,11 @@
   }
 }
 
-.btn-patreon {
-  color: #fff;
-  background: #eb491d;
-  &:hover {
-    color: #fff;
-  }
+// extend our base buttons
+.ko-Btn--patreon {
+  @include button-color($bg: #eb491d, $mix: false);
 }
 
-.btn-paypal {
-  color: #fff;
-  background: #40acda;
-  &:hover {
-    color: #fff;
-  }
+.ko-Btn--paypal {
+  @include button-color($bg: #40acda, $mix: false);
 }

From b96c1f698ea5c2d56191c724dfe7bc11224e3d4d Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 11:51:35 +0100
Subject: [PATCH 22/69] (bootstrap): remove unused `.btn-link`

---
 src/vite/src/assets/sass/vendor/_bootstrap.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/vite/src/assets/sass/vendor/_bootstrap.scss b/src/vite/src/assets/sass/vendor/_bootstrap.scss
index dc817434..6f64c3d5 100644
--- a/src/vite/src/assets/sass/vendor/_bootstrap.scss
+++ b/src/vite/src/assets/sass/vendor/_bootstrap.scss
@@ -132,11 +132,3 @@ textarea.form-control.is-invalid {
   padding-left: 0.5em;
   font-weight: normal;
 }
-
-// --------------------------------------------------------------------
-// BOOTSTRAP BUTTONS tweaks/overrides
-// --------------------------------------------------------------------
-
-.btn-link {
-  text-decoration: underline;
-}

From 54c228d5e760a5d19753aa2f393ac144ce4e9019 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 11:59:11 +0100
Subject: [PATCH 23/69] (bootstrap): FINALLY, completely remove Bootstrap
 buttons CSS

---
 .../src/assets/sass/vendor/_bootstrap.scss    | 25 +++----------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/vite/src/assets/sass/vendor/_bootstrap.scss b/src/vite/src/assets/sass/vendor/_bootstrap.scss
index 6f64c3d5..974e8003 100644
--- a/src/vite/src/assets/sass/vendor/_bootstrap.scss
+++ b/src/vite/src/assets/sass/vendor/_bootstrap.scss
@@ -1,18 +1,16 @@
 // ====================================================================
 // Selective import of Bootstrap 5 * FORMS *.
 //
-//   - we just want the forms, since styling forms is a PITA
+//   - we just want the forms, since styling forms is a PITA,
+//     and they are reset by tailwind's included `normalize`
 //
 //   - we want to avoid most everything else in Bootstrap since it
 //     does not mix well with the atomic css approach of BEM/tailwind
 //
-//   - we also need default styles to all form elements, since they are
-//     reset by tailwind's included `normalize`
-//
 //   - we DONT want Bootstrap's "reboot" since it is a fork of normalize,
 //     which is already included in tailwind
 //
-//   - design wise, Bootstrap's rounded input styles fits well on Koohii.
+//   - design wise, Bootstrap's rounded input styles fits well on Koohii
 //
 //   @see https://getbootstrap.com/docs/5.0/customize/sass/
 //
@@ -39,13 +37,6 @@ $input-disabled-border-color: $--clr-bg-1s;
 $input-font-size: 15px;
 $input-placeholder-color: #9b9b9b;
 
-$btn-border-radius: 0.25rem;
-$btn-font-size: 14px;
-$btn-transition: none;
-// $btn-padding-y-lg:            $input-btn-padding-y-lg;
-// $btn-padding-x-lg:            $input-btn-padding-x-lg;
-$btn-font-size-lg: 18px;
-
 $form-feedback-invalid-color: #a94442;
 // generated with icones.js <3
 $form-feedback-icon-invalid: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="#e68683" d="M10 3h4v11h-4V3m0 18v-4h4v4h-4Z"></path></svg>');
@@ -56,12 +47,6 @@ $form-feedback-icon-invalid: url('data:image/svg+xml,<svg xmlns="http://www.w3.o
 
 // 4. Include any optional Bootstrap components as you like
 
-// --------------------------------------------------------------------
-// Bootstrap 5 BUTTONS
-//   https://getbootstrap.com/docs/5.0/components/buttons/#variables
-// --------------------------------------------------------------------
-@import "bootstrap/scss/buttons";
-
 // --------------------------------------------------------------------
 // Bootstrap 5 FORMS
 //   https://getbootstrap.com/docs/5.0/forms/validation/#map
@@ -103,10 +88,6 @@ $form-feedback-icon-invalid: url('data:image/svg+xml,<svg xmlns="http://www.w3.o
   vertical-align: middle;
 }
 
-// --------------------------------------------------------------------
-// Changes to Boostrap5 FORMs
-// --------------------------------------------------------------------
-
 // Unlike BS5, we only output this div when there is an error, instead of
 //  relying on BS5 fancy selectors and regardless of parent/sibling divs,
 //  just show the div.

From a025cc4fa77462b9516ec6ad2c815e2a00f81544 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 18:12:04 +0100
Subject: [PATCH 24/69] (LeitnerChart.scss): fix font size of bar chart counts
 back to 14px

Old site has 14px, but our body font size now defaults to 16.
---
 src/vite/src/assets/sass/components/_LeitnerChart.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vite/src/assets/sass/components/_LeitnerChart.scss b/src/vite/src/assets/sass/components/_LeitnerChart.scss
index 49d8983f..4a6083f9 100644
--- a/src/vite/src/assets/sass/components/_LeitnerChart.scss
+++ b/src/vite/src/assets/sass/components/_LeitnerChart.scss
@@ -74,6 +74,7 @@
   width: 100%;
   padding: 0;
   color: #444;
+  font-size: 14px;
   font-weight: normal;
   white-space: nowrap;
   text-align: center;

From dbcf45a3720d612f61aac8d11ddd90b34e0f8c90 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 18:14:04 +0100
Subject: [PATCH 25/69] (LeitnerChart): use our "box" class

---
 src/apps/koohii/modules/review/templates/_LeitnerChart.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/review/templates/_LeitnerChart.php b/src/apps/koohii/modules/review/templates/_LeitnerChart.php
index e28b2f8c..bca31b81 100755
--- a/src/apps/koohii/modules/review/templates/_LeitnerChart.php
+++ b/src/apps/koohii/modules/review/templates/_LeitnerChart.php
@@ -26,7 +26,7 @@
 ?>
   </div>
 
-  <div id="leitner-chart_pane" class="min-h-[268px] md:min-h-[298px] p-4 bg-[#e7e1d3] no-gutter-xs-sm">
+  <div id="leitner-chart_pane" class="min-h-[268px] md:min-h-[298px] ko-Box no-gutter-xs-sm">
     <!-- Vue goes here -->
   </div>
 

From 95d51d22dacf7d654cd1b45632b36b1d794bd389 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 18:27:24 +0100
Subject: [PATCH 26/69] Refactor `.padded-box` and `ko-StrokeBox` in one "box"
 component

---
 .../modules/about/templates/learnmore.md      |  2 +-
 .../about/templates/supportSuccess.php        |  6 +-
 .../templates/_DeleteAccountConfirm.php       |  2 +-
 .../templates/_DeleteAccountStepOne.php       |  2 +-
 .../account/templates/createSuccess.php       | 12 ++--
 .../templates/forgotPasswordSuccess.php       |  2 +-
 .../account/templates/indexSuccess.php        |  2 +-
 .../modules/home/templates/contactSuccess.php |  4 +-
 .../modules/home/templates/indexMember.php    |  6 +-
 .../modules/manage/templates/_AddOrder.php    |  4 +-
 .../manage/templates/_CharacterSelection.php  |  2 +-
 .../manage/templates/flashcardlistSuccess.php | 22 +++----
 .../review/templates/_DueCardsGraph.php       |  2 +-
 .../review/templates/_summarySimple.php       |  2 +-
 .../review/templates/summarySuccess.php       |  6 +-
 .../modules/study/templates/_SideColumn.php   |  2 +-
 .../src/assets/sass/abstracts/_mixins.scss    | 19 +++++-
 src/vite/src/assets/sass/main.build.scss      | 40 ++++++------
 src/vite/src/vue/styleguide/index.vue         | 63 +++++++++++++++----
 19 files changed, 128 insertions(+), 72 deletions(-)

diff --git a/src/apps/koohii/modules/about/templates/learnmore.md b/src/apps/koohii/modules/about/templates/learnmore.md
index f708f7e6..49682fb1 100755
--- a/src/apps/koohii/modules/about/templates/learnmore.md
+++ b/src/apps/koohii/modules/about/templates/learnmore.md
@@ -14,7 +14,7 @@
 
 ## About the RTK book {#rtk}
 
-<div class="kk-DocMain-whatisrtk padded-box rounded no-gutter-xs-sm mb-8" markdown="1">
+<div class="kk-DocMain-whatisrtk ko-Box pt-6 no-gutter-xs-sm mb-8" markdown="1">
 
   <div class="kk-RtkBook float-left mr-6 mb-4 md:px-4">
     <img src="/images/3.0/help/rtk-book-cover.gif" width="137" height="205" />
diff --git a/src/apps/koohii/modules/about/templates/supportSuccess.php b/src/apps/koohii/modules/about/templates/supportSuccess.php
index bdc92940..bc601d5f 100755
--- a/src/apps/koohii/modules/about/templates/supportSuccess.php
+++ b/src/apps/koohii/modules/about/templates/supportSuccess.php
@@ -13,7 +13,7 @@
 
     <img class="block mb-8" style="width:126px" src="https://s3.amazonaws.com/patreon_public_assets/toolbox/patreon.png" />
 
-    <div class="padded-box rounded-lg no-gutter-xs-sm mb-8">
+    <div class="ko-Box no-gutter-xs-sm mb-8">
     
     <p>Patreon is a great way to support this website on an ongoing basis.</p>
 
@@ -24,7 +24,7 @@
 
     <img class="block mb-8" style="width:126px" src="/images/3.0/support/paypal.png" />
 
-    <div class="padded-box rounded-lg no-gutter-xs-sm mb-8">
+    <div class="ko-Box no-gutter-xs-sm mb-8">
       <p>
         PayPal is also a great way to support my work. (Note: if you chose the <em>recurring</em> option, you can cancel it at anytime from your PayPal account).
       </p>
@@ -43,7 +43,7 @@
 
     <?php $patrons = PatreonPeer::getPatronsList(); ?>
   
-    <div class="padded-box rounded-lg no-gutter-xs-sm">
+    <div class="ko-Box no-gutter-xs-sm">
       <ul class="kk-PatronsList">
 <?php //DBG::printr($patrons);?>
 <?php
diff --git a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
index 49beeddf..04e364a4 100755
--- a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
+++ b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
@@ -7,7 +7,7 @@
 
 <?php /* <p>What did you think of the website? <?= link_to('Your feedback', '@contact', ['target' => '_blank']) ?> may help improve the site.</p> */ ?>
 
-<div class="padded-box rounded mb-8 ux-maxWidth360">
+<div class="ko-Box mb-8 ux-maxWidth360">
 
   <?php
   echo form_tag('account/delete', ['class' => '', 'autocomplete' => 'off']);
diff --git a/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php b/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
index c0731c63..2d907a15 100755
--- a/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
+++ b/src/apps/koohii/modules/account/templates/_DeleteAccountStepOne.php
@@ -1,4 +1,4 @@
-<section class="padded-box rounded mt-12 mb-8">
+<section class="ko-Box mt-12 mb-8">
 
   <h2 class="mb-4">Delete Account</h2>
   
diff --git a/src/apps/koohii/modules/account/templates/createSuccess.php b/src/apps/koohii/modules/account/templates/createSuccess.php
index 22440b4b..e6becc39 100755
--- a/src/apps/koohii/modules/account/templates/createSuccess.php
+++ b/src/apps/koohii/modules/account/templates/createSuccess.php
@@ -14,7 +14,7 @@
 
 <?php echo form_tag('account/create', ['id' => 'signup-form', 'class' => 'JsFocusOnLoadError', 'autocomplete' => 'false']); ?>
 
-<div class="padded-box rounded mb-3 max-w-[380px]">
+<div class="ko-Box mb-3 max-w-[380px]">
 <?php
     // we use new 'validate' option to display error message below the input field
     // echo form_errors()
@@ -52,9 +52,9 @@
       ])
     );
 ?>
-</div><!-- /padded-box -->
+</div><!-- /ko-Box -->
 
-<div class="padded-box rounded mb-3" style="max-width:380px">
+<div class="ko-Box mb-3" style="max-width:380px">
 <?php
     echo _bs_form_group(
   [
@@ -70,9 +70,9 @@
 ?>
     <p>If you are stuck you can <?php echo link_to('request an account', '@contact'); ?></p>
 
-</div><!-- /padded-box -->
+</div><!-- /ko-Box -->
 
-<div class="padded-box rounded mb-3" style="max-width:380px">
+<div class="ko-Box mb-3" style="max-width:380px">
 <?php
     echo _bs_form_group(
       _bs_submit_tag(
@@ -83,6 +83,6 @@
       )
     );
 ?>
-</div><!-- /padded-box -->
+</div><!-- /ko-Box -->
 
 </form>
diff --git a/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php b/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
index 60e62a38..109e0fb7 100755
--- a/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
+++ b/src/apps/koohii/modules/account/templates/forgotPasswordSuccess.php
@@ -9,7 +9,7 @@
 
 <p class="text-[#822] font-bold">If you do not receive an email please check the SPAM folder!</p>
 
-<div class="padded-box rounded mb-3 max-w-[380px]">
+<div class="ko-Box mb-3 max-w-[380px]">
   <?php
     echo form_errors();
 
diff --git a/src/apps/koohii/modules/account/templates/indexSuccess.php b/src/apps/koohii/modules/account/templates/indexSuccess.php
index e9e06585..2f311481 100755
--- a/src/apps/koohii/modules/account/templates/indexSuccess.php
+++ b/src/apps/koohii/modules/account/templates/indexSuccess.php
@@ -43,7 +43,7 @@
 ?>
 
   <h3>Patreon</h3>
-  <div class="padded-box rounded">
+  <div class="ko-Box">
 <?php if (false !== $patron_info): ?>
   <p>Thank you for supporting Kanji Koohii, <strong><?php echo $patron_info['pa_full_name'] ?></strong>!</p>
 
diff --git a/src/apps/koohii/modules/home/templates/contactSuccess.php b/src/apps/koohii/modules/home/templates/contactSuccess.php
index 5c0859fc..3a34f4e3 100755
--- a/src/apps/koohii/modules/home/templates/contactSuccess.php
+++ b/src/apps/koohii/modules/home/templates/contactSuccess.php
@@ -13,7 +13,7 @@
 
     <p style="color:#484"><em><span class="required-legend">*</span> Please provide a valid email address, it will only be used to reply to your message.</em></p>
 
-    <div class="padded-box rounded mb-3 max-w-[600px]">
+    <div class="ko-Box mb-3 max-w-[600px]">
 
 <?php
     echo form_tag('home/contact', ['class'=>'block']);
@@ -57,7 +57,7 @@
       The <strong>contact form</strong> is available to members only (please <?= link_to('sign in', '@login') ?>).
     </p>
 
-    <div class="padded-box rounded mb-3 max-w-[600px]">
+    <div class="ko-Box mb-3 max-w-[600px]">
 
         <p class="mb-2">
           <strong>If you are unable to sign in</strong>, contact:<br>
diff --git a/src/apps/koohii/modules/home/templates/indexMember.php b/src/apps/koohii/modules/home/templates/indexMember.php
index c2b66863..ac41bd59 100755
--- a/src/apps/koohii/modules/home/templates/indexMember.php
+++ b/src/apps/koohii/modules/home/templates/indexMember.php
@@ -11,7 +11,7 @@
     <div class="row">
 
       <div class="col-lg-4">
-        <div class="box padded-box rounded mb-2">
+        <div class="box ko-Box mb-2">
           <div class="hd">
 <?php if ($countFailed <= 0)
 {
@@ -30,7 +30,7 @@
       </div>
 
       <div class="col-lg-4">
-        <div class="box padded-box rounded mb-2">
+        <div class="box ko-Box mb-2">
           <div class="hd">
 <?php if ($countExpired <= 0)
 {
@@ -49,7 +49,7 @@
       </div>
   
       <div class="col-lg-4">
-        <div class="box padded-box rounded mb-2">
+        <div class="box ko-Box mb-2">
           <div class="hd">
 <?php if ($progress->heisignum === false)
 {
diff --git a/src/apps/koohii/modules/manage/templates/_AddOrder.php b/src/apps/koohii/modules/manage/templates/_AddOrder.php
index 994f3415..cf92fde2 100755
--- a/src/apps/koohii/modules/manage/templates/_AddOrder.php
+++ b/src/apps/koohii/modules/manage/templates/_AddOrder.php
@@ -18,13 +18,13 @@
   );
 ?>
 
-  <div class="padded-box rounded text-body text-sm italic mb-4">
+  <div class="ko-Box text-body text-sm italic mb-4">
     Note! Adding flashcards here will always fill in the gaps if there are any
     missing cards.<br/>
     Use <?= link_to('Custom selection', 'manage/addcustom'); ?> if you do not plan to add all <?= _CJ('RTK'); ?> flashcards in order.
   </div>
 
-  <div class="padded-box rounded">
+  <div class="ko-Box">
 
       23 new characters from the
       <a href="http://nirc.nanzan-u.ac.jp/en/files/2012/12/RK1-Supplement.pdf" target="blank" class="link-pdf">RTK Supplement</a>
diff --git a/src/apps/koohii/modules/manage/templates/_CharacterSelection.php b/src/apps/koohii/modules/manage/templates/_CharacterSelection.php
index 81881ac0..edbcb473 100755
--- a/src/apps/koohii/modules/manage/templates/_CharacterSelection.php
+++ b/src/apps/koohii/modules/manage/templates/_CharacterSelection.php
@@ -1,5 +1,5 @@
 <?php use_helper('CJK') ?>
-<div id="mng-cards" class="padded-box rounded">
+<div id="mng-cards" class="ko-Box">
  <div class="scroll">
   <?php foreach($cards as $ucsId): ?>
     <div class="fc">
diff --git a/src/apps/koohii/modules/manage/templates/flashcardlistSuccess.php b/src/apps/koohii/modules/manage/templates/flashcardlistSuccess.php
index b2ed9ba3..880c0634 100755
--- a/src/apps/koohii/modules/manage/templates/flashcardlistSuccess.php
+++ b/src/apps/koohii/modules/manage/templates/flashcardlistSuccess.php
@@ -1,26 +1,24 @@
-<?php use_helper('Widgets', 'CJK', 'SimpleDate', 'Links') ?>
+<?php use_helper('Widgets', 'CJK', 'SimpleDate', 'Links'); ?>
 
-  <div class="row">
-    <div class="col-lg-6">
+  <h2>Flashcard List</h2>
 
-      <h2>Flashcard List</h2>
-      <p>
+  <div class="row mb-8">
+    <div class="col-lg-6">
       Click a column heading to sort
       the table on that column, click more than once to revert the sort order.
       Note that in addition to the column you selected, there is always a secondary
-      sorting on the frame number. Click in any row to go to the study area.<br/>
-      </p>
+      sorting on the frame number.
     </div>
 
     <div class="col-lg-6">
-      <div class="padded-box rounded" style="margin:0 0 1.5em;">
-        <strong>Statistics</strong><br />
-        <?php echo ReviewsPeer::getFlashcardCount($sf_user->getUserId()) ?> flashcards.<br />
+      <div class="ko-Box">
+        <h3 class="text-md font-bold">Statistics</h3>
+        <strong><?= ReviewsPeer::getFlashcardCount($sf_user->getUserId()); ?></strong> flashcards.<br />
       </div>
     </div>
 
   </div>
 
-<?php #DBG::user() ?>
-<?php echo ui_select_table($table, $pager) ?>
+<?php //DBG::user()?>
+<?= ui_select_table($table, $pager); ?>
 
diff --git a/src/apps/koohii/modules/review/templates/_DueCardsGraph.php b/src/apps/koohii/modules/review/templates/_DueCardsGraph.php
index 2d36fb7f..adfa2237 100755
--- a/src/apps/koohii/modules/review/templates/_DueCardsGraph.php
+++ b/src/apps/koohii/modules/review/templates/_DueCardsGraph.php
@@ -1,4 +1,4 @@
-<div id="due-cards" class="padded-box no-gutter-xs-sm mb-3">
+<div id="due-cards" class="ko-Box no-gutter-xs-sm mb-3">
   <div class="barchart-container">
     <div class="barchart-chart">
       <div class="barchart-grid"></div>
diff --git a/src/apps/koohii/modules/review/templates/_summarySimple.php b/src/apps/koohii/modules/review/templates/_summarySimple.php
index c350dc80..f92286fe 100755
--- a/src/apps/koohii/modules/review/templates/_summarySimple.php
+++ b/src/apps/koohii/modules/review/templates/_summarySimple.php
@@ -28,7 +28,7 @@
 
 <?php //echo DBG::printr($cards);?>
 
-<div id="fm-summary" class="padded-box rounded">
+<div id="fm-summary" class="ko-Box">
 <?php if (count($cards) > 0) { ?>
 
   <p><strong>Hint!</strong>  Click the <?= _CJ('kanji'); ?> to open the Study page</p>
diff --git a/src/apps/koohii/modules/review/templates/summarySuccess.php b/src/apps/koohii/modules/review/templates/summarySuccess.php
index 3384c283..4b65de9c 100755
--- a/src/apps/koohii/modules/review/templates/summarySuccess.php
+++ b/src/apps/koohii/modules/review/templates/summarySuccess.php
@@ -31,7 +31,7 @@
 
 <div class="row">
   <div class="col-lg-6 mb-8">
-    <h3><?= $title; ?></h3>
+    <h3 class="font-bold"><?= $title; ?></h3>
 
     <p>Below is the list of flashcards from your last review session.
     <?php if (!$fc_free) { ?>Click the column titles to sort on frame number, keyword, etc.<?php } ?></p>
@@ -59,7 +59,7 @@
   
   <div class="col-lg-6">
 <?php if ($fcr_total > 0) { ?>
-    <div class="padded-box rounded">
+    <div class="ko-Box">
 
       <?= ui_chart_vs([
         'valueLeft' => $fcr_pass,
@@ -72,7 +72,7 @@
 <?php } ?>
 
 <?php if (count($deletedCards)) { ?>
-    <div id="FcSummaryDeld" class="padded-box rounded">
+    <div id="FcSummaryDeld" class="ko-Box">
       <h3>Deleted flashcards <span>(<?= count($deletedCards); ?>)</span></h3>
       <p><?= cjk_lang_ja('&#'.implode(';&#', $deletedCards)); ?></p>
     </div>
diff --git a/src/apps/koohii/modules/study/templates/_SideColumn.php b/src/apps/koohii/modules/study/templates/_SideColumn.php
index a3801794..88259131 100755
--- a/src/apps/koohii/modules/study/templates/_SideColumn.php
+++ b/src/apps/koohii/modules/study/templates/_SideColumn.php
@@ -31,7 +31,7 @@
 
 ?>
 
-  <div class="visible-md-lg padded-box rounded mb-3">
+  <div class="visible-md-lg ko-Box mb-3">
     <h3>Links</h3>
     <div class="mb-2"><?php echo link_to('My stories','study/mystories') ?></div>
   </div>
diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index 6337be52..1b12ea49 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -5,6 +5,8 @@
 //
 //     button-color()
 //     font()
+//     px()
+//     py()
 //
 //   Responsive & Media Queries:
 //
@@ -18,7 +20,7 @@
 
 // --------------------------------------------------------------------
 // BUTTONS
-// 
+//
 //   Helper to create CSS vars & handle states for each button style.
 // --------------------------------------------------------------------
 @mixin button-color($bg: blue, $text: #fff, $mix: true) {
@@ -96,6 +98,21 @@
   }
 }
 
+// --------------------------------------------------------------------
+// PX / PY
+//
+//   Shorthand to set horizontal / vertical padding only.
+//
+// --------------------------------------------------------------------
+@mixin px($unit) {
+  padding-left: $unit;
+  padding-right: $unit;
+}
+@mixin py($unit) {
+  padding-top: $unit;
+  padding-bottom: $unit;
+}
+
 // --------------------------------------------------------------------
 // BREAKPOINT-UP (min-width)
 //
diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 9d9c2cde..43d105b5 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -122,27 +122,31 @@ a.admin-edit {
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 }
 
-/* content boxes */
-.padded-box {
-  @apply px-4 py-4;
-  background-color: $--clr-bg-1;
-}
-
-// a style of bordered box, clear filling
-.ko-StrokeBox {
-  @apply border-2 border-transparent rounded-md;
-  padding: 1rem;
-
-  &--danger {
-    border-color: #e579797a; // 48%
+.ko-Box {
+  --ko-box-px: 14px;
+  --ko-box-py: 14px;
+  --ko-box-bg: #e7e1d3;
+
+  background-color: var(--ko-box-bg);
+  border-color: var(--ko-box-bg);
+  border-width: 2px;
+  border-radius: $--border-radius-lg;
+  @include px(var(--ko-box-px));
+  @include py(var(--ko-box-py));
+
+  // a style of bordered box, clear filling
+  &--stroke {
+    background: transparent;
+    border-width: 2px;
+    border-color: var(--ko-box-bg, transparent);
   }
 
-  &--subdued {
-    border-color: #e7e1d3;
+  // colors
+  &--danger {
+    --ko-box-bg: #ff636399;
   }
-
   &--success {
-    border-color: #6ca02a7a; // 48%
+    --ko-box-bg: #6ca02a7a;
   }
 }
 
@@ -862,7 +866,7 @@ table.lessons td {
  * ---------------------------- */
 
 .ko-CustomReviewForm {
-  @extend .padded-box;
+  @extend .ko-Box;
   @apply rounded;
   font-size: 14px;
   min-height: 120px;
diff --git a/src/vite/src/vue/styleguide/index.vue b/src/vite/src/vue/styleguide/index.vue
index e406bea9..113e2354 100644
--- a/src/vite/src/vue/styleguide/index.vue
+++ b/src/vite/src/vue/styleguide/index.vue
@@ -1,10 +1,44 @@
 <template>
   <div class="p-8">
-    <h1><a href="/index_dev.php">Koohii</a> / UX Docs</h1>
+    <h1>
+      <a href="/index_dev.php">Koohii</a> / UX Docs
+    </h1>
+
+    <h2>PaddedBox</h2>
+
+    <section class="ux-docSection ux-docDemoblock">
+      <div class="flex mb-4">
+        <span class="self-center font-bold min-w-[100px]">plain</span>
+        <div class="min-w-[200px] ml-4 ko-Box">
+          <h3 class="text-md font-bold text-body">Card Title</h3>
+          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+      </div>
+      <div class="flex mb-0">
+        <span class="self-center font-bold min-w-[100px]">stroke</span>
+        <div class="min-w-[200px] ml-4 ko-Box ko-Box--stroke">
+          <h3 class="text-md font-bold">Card Title</h3>
+          <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <div class="min-w-[200px] ml-4 ko-Box ko-Box--stroke ko-Box--danger">
+          <h3 class="text-md font-bold text-danger-dark">Card Title</h3>
+          <p class="mb-0 text-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p>
+        </div>
+        <div class="min-w-[200px] ml-4 ko-Box ko-Box--stroke ko-Box--success">
+          <h3 class="text-md font-bold text-success-dark">Card Title</h3>
+          <p
+            class="mb-0 text-success-darker"
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+      </div>
+    </section>
 
     <h2>Buttons</h2>
 
-    <p>element-ui buttons using <code>type="primary"</code> (etc).</p>
+    <p>
+      element-ui buttons using
+      <code>type="primary"</code> (etc).
+    </p>
 
     <section class="ux-docSection ux-docDemoblock">
       <div class="mb-2">
@@ -25,7 +59,6 @@
         <el-button type="danger" round>Danger</el-button>
       </div>
     </section>
-   
 
     <p>Vanilla html buttons (eg. used in php templates)</p>
 
@@ -45,7 +78,7 @@
         <button class="ko-Btn ko-Btn--success">Success</button>
         <button class="ko-Btn ko-Btn--danger">Danger</button>
       </div>
-      
+
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">Size: large</span>
         <button class="ko-Btn ko-Btn--large">Default</button>
@@ -53,7 +86,7 @@
         <button class="ko-Btn ko-Btn--large ko-Btn--success">Success</button>
         <button class="ko-Btn ko-Btn--large ko-Btn--danger">Danger</button>
       </div>
-      
+
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">is-ghost</span>
         <button class="ko-Btn is-ghost ko-Btn--large">Default</button>
@@ -61,7 +94,7 @@
         <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--success">Success</button>
         <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--danger">Danger</button>
       </div>
-      
+
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">is-disabled</span>
         <button class="ko-Btn is-disabled ko-Btn--large" disabled>Default</button>
@@ -70,16 +103,23 @@
         <button class="ko-Btn is-disabled ko-Btn--large ko-Btn--danger" disabled>Danger</button>
       </div>
     </section>
-      
+
     <p>Example buttons with icons</p>
 
     <section class="ux-docSection ux-docDemoblock">
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">&lt;button&gt;</span>
-        <button class="ko-Btn ko-Btn--large ko-Btn--primary">Spaced Repetition<i class="fa fa-arrow-right ml-2"></i></button>
-        <button class="ko-Btn ko-Btn--large ko-Btn--success is-disabled" disabled>Start Review<i class="fa fa-arrow-right ml-2"></i></button>        
+        <button class="ko-Btn ko-Btn--large ko-Btn--primary">
+          Spaced Repetition
+          <i class="fa fa-arrow-right ml-2"></i>
+        </button>
+        <button class="ko-Btn ko-Btn--large ko-Btn--success is-disabled" disabled>
+          Start Review
+          <i class="fa fa-arrow-right ml-2"></i>
+        </button>
         <button class="ko-Btn is-ghost ko-Btn--large ko-Btn--primary">
-          Show Kanji<i class="fa fa-chevron-down ml-2"></i>
+          Show Kanji
+          <i class="fa fa-chevron-down ml-2"></i>
         </button>
       </div>
 
@@ -89,10 +129,7 @@
           <i class="fa fa-edit mr-2"></i>Edit Card
         </a>
       </div>
-
     </section>
-
-
   </div>
 </template>
 

From f5119d5341afc18e166c6855a005d6f233e7e7dd Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Mar 2022 18:28:52 +0100
Subject: [PATCH 27/69] (buttons): tweak the font sizes - use 14px for medium
 buttons (smaller)

---
 src/vite/src/assets/sass/abstracts/_variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vite/src/assets/sass/abstracts/_variables.scss b/src/vite/src/assets/sass/abstracts/_variables.scss
index f858b7ee..1552f7ea 100644
--- a/src/vite/src/assets/sass/abstracts/_variables.scss
+++ b/src/vite/src/assets/sass/abstracts/_variables.scss
@@ -26,8 +26,8 @@ $--border-radius-lg: 6px;
 // Buttons
 // --------------------------------------------------------------------
 $--button-font-size-sm: 14px;
-$--button-font-size-md: 15px;
-$--button-font-size-lg: 16px;
+$--button-font-size-md: 14px;
+$--button-font-size-lg: 15px;
 $--button-font-size-xl: 18px;
 
 // --------------------------------------------------------------------

From e6bfec13e2e1488735ddd801c1ef858f3c97ba05 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 11:42:14 +0100
Subject: [PATCH 28/69] Improve mobile layout, add icons, use `.ko-Box`

---
 .../study/templates/failedlistSuccess.php     | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index a15846bb..58cc94e0 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -6,28 +6,28 @@
 
 <h2>Restudy List</h2>
 
-<div class="row mb-8">
-  <div class="col-md-6">
+<div class="row md:items-stretch mb-8">
+  <div class="col-md-6 mb-4 md:mb-0">
 <?php if ($restudyCount): ?>
-    <div class="ko-StrokeBox ko-StrokeBox--danger">
+    <div class="ko-Box ko-Box--stroke ko-Box--danger md:h-full">
       <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
 <?php else: ?>
-    <div class="ko-StrokeBox ko-StrokeBox--success">
+    <div class="ko-Box ko-Box--stroke ko-Box--success">
       <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
 <?php endif; ?>
 
       <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#yaya', ['class' => 'whitespace-nowrap']); ?>
 
       <div class="flex items-center">
-        <button type="button" class="ko-Btn ko-Btn--success ko-Btn--large" disabled="disabled">
+        <button type="button" class="ko-Btn ko-Btn--danger ko-Btn--large" disabled="disabled">
           Begin Restudy<i class="fa fa-book ml-2"></i>
         </button>
 
         <?php if ($restudyCount): ?>
         <?= _bs_button(
-  'Review All Forgotten Kanji',
+  'Review All<i class="fa fa-arrow-right ml-2"></i>',
   '@review',
-  ['query_string' => 'box=1', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-ghost ml-6']
+  ['query_string' => 'box=1', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-ghost ml-4']
 );
         ?>
         <?php endif; ?>
@@ -36,15 +36,17 @@
   </div>
 
   <div class="col-md-6">
-    <div class="min-w-300px ml-auto padded-box rounded-md">
+    <div class="ko-Box md:h-full">
 
-      <div class="flex items-center justify-between">
+      <div class="flex">
         <h3 class="text-md font-bold text-body">Learned Kanji</h3>
-        <?= link_to(
+        <?php if ($learnedCount): ?>
+          <?= link_to(
           '<i class="fa fa-times mr-2"></i>Clear learned list ',
           'study/failedlist',
-          ['class' => 'text-danger-darker no-underline hover:underline']
-        ); ?>
+          ['class' => 'leading-1 text-danger-darker hover:underline ml-auto']
+          ); ?>
+        <?php endif; ?>
       </div>
       
       <?php if ($learnedCount): ?>
@@ -67,7 +69,7 @@
 
 <?php if (!$restudyCount): ?>
 
-  <div class="ko-StrokeBox ko-StrokeBox--subdued min-h-[336px] flex mb-8">
+  <div class="ko-Box  min-h-[336px] flex mb-8">
     <p class="text-warm m-auto">
       Hooray, your forgotten kanji list is empty!
     </p>

From 24c01bf0ccca916f1144c79e26a5892f285095ea Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 16:46:06 +0100
Subject: [PATCH 29/69] (styleguide): rename `index.vue` to something else

---
 src/vite/src/entry-styleguide.ts                          | 2 +-
 src/vite/src/vue/styleguide/{index.vue => Styleguide.vue} | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)
 rename src/vite/src/vue/styleguide/{index.vue => Styleguide.vue} (96%)

diff --git a/src/vite/src/entry-styleguide.ts b/src/vite/src/entry-styleguide.ts
index 62d9f6c0..cbb4fe98 100644
--- a/src/vite/src/entry-styleguide.ts
+++ b/src/vite/src/entry-styleguide.ts
@@ -5,7 +5,7 @@ import VueInstance from "@lib/helpers/vue-instance";
 
 import "@/assets/sass/pages/styleguide/docs.scss";
 
-import StyleguideApp from "@/vue/styleguide/index.vue";
+import StyleguideApp from "@/vue/styleguide/Styleguide.vue";
 
 domContentLoaded(() => {
   console.log("@entry-styleguide");
diff --git a/src/vite/src/vue/styleguide/index.vue b/src/vite/src/vue/styleguide/Styleguide.vue
similarity index 96%
rename from src/vite/src/vue/styleguide/index.vue
rename to src/vite/src/vue/styleguide/Styleguide.vue
index 113e2354..de9f6c75 100644
--- a/src/vite/src/vue/styleguide/index.vue
+++ b/src/vite/src/vue/styleguide/Styleguide.vue
@@ -109,6 +109,12 @@
     <section class="ux-docSection ux-docDemoblock">
       <div class="mb-4 ux-flexButtonRow">
         <span class="self-center font-bold min-w-[120px]">&lt;button&gt;</span>
+
+        <button type="button" class="ko-Btn ko-Btn--danger ko-Btn--large" disabled="disabled">
+          Begin Restudy
+          <i class="fa fa-book-open ml-2"></i>
+        </button>
+
         <button class="ko-Btn ko-Btn--large ko-Btn--primary">
           Spaced Repetition
           <i class="fa fa-arrow-right ml-2"></i>

From 31e8370758ffaf57b11d1ccd8fbe072ff6949d3e Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 15:24:16 +0100
Subject: [PATCH 30/69] (refactor/misc): remove unnecessary BootstrapHelper
 includes

It's already in settings.yml
---
 .../koohii/modules/account/templates/_DeleteAccountConfirm.php  | 2 +-
 src/apps/koohii/modules/account/templates/editSuccess.php       | 2 +-
 src/apps/koohii/modules/home/templates/loginSuccess.php         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
index 04e364a4..43aff14e 100755
--- a/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
+++ b/src/apps/koohii/modules/account/templates/_DeleteAccountConfirm.php
@@ -1,5 +1,5 @@
 <?php
-  use_helper('Bootstrap', 'Form', 'Validation');
+  use_helper('Form', 'Validation');
 ?>  
 <h2>Delete Your Account</h2>
 
diff --git a/src/apps/koohii/modules/account/templates/editSuccess.php b/src/apps/koohii/modules/account/templates/editSuccess.php
index 1310d005..e27abb6f 100755
--- a/src/apps/koohii/modules/account/templates/editSuccess.php
+++ b/src/apps/koohii/modules/account/templates/editSuccess.php
@@ -1,5 +1,5 @@
 <?php
-  use_helper('Bootstrap', 'Form', 'Validation', 'Widgets', 'Decorator');
+  use_helper('Form', 'Validation', 'Widgets', 'Decorator');
 ?>
 
 <?php decorate_start('SideTabs', ['active' => 'editaccount']); ?>
diff --git a/src/apps/koohii/modules/home/templates/loginSuccess.php b/src/apps/koohii/modules/home/templates/loginSuccess.php
index ca722d14..378386df 100755
--- a/src/apps/koohii/modules/home/templates/loginSuccess.php
+++ b/src/apps/koohii/modules/home/templates/loginSuccess.php
@@ -1,5 +1,5 @@
 <?php
-  use_helper('Bootstrap', 'Form', 'Validation');
+  use_helper('Form', 'Validation');
   $sf_request->setParameter('_homeFooter', true);
 ?>
 

From 3e814cbd65946ab3bdf2038d5e462ed59299fbe5 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 15:34:32 +0100
Subject: [PATCH 31/69] Add `KK_ENV_FORK` define (whether this is the private
 repo or not)

---
 src/apps/koohii/config/koohiiConfiguration.class.php       | 2 ++
 src/apps/koohii/modules/about/templates/supportSuccess.php | 6 +-----
 src/apps/koohii/modules/account/templates/indexSuccess.php | 2 +-
 src/apps/koohii/modules/home/templates/_homeFooter.php     | 2 +-
 src/apps/koohii/modules/news/templates/_recent.php         | 6 +-----
 src/apps/koohii/modules/news/templates/indexSuccess.php    | 6 +-----
 6 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/apps/koohii/config/koohiiConfiguration.class.php b/src/apps/koohii/config/koohiiConfiguration.class.php
index b897f133..1875f977 100644
--- a/src/apps/koohii/config/koohiiConfiguration.class.php
+++ b/src/apps/koohii/config/koohiiConfiguration.class.php
@@ -23,6 +23,8 @@ public function configure()
       define('KK_ENV_DEV', CORE_ENVIRONMENT === 'dev');
       define('KK_ENV_PROD', CORE_ENVIRONMENT === 'prod');
 
+      define('KK_ENV_FORK', sfConfig::get('app_fork'));
+
       // FIXME obsolete, clean up
       define('CJ_MODE', 'rtk');
       define('CJ_HANZI', false);
diff --git a/src/apps/koohii/modules/about/templates/supportSuccess.php b/src/apps/koohii/modules/about/templates/supportSuccess.php
index bc601d5f..581a46ee 100755
--- a/src/apps/koohii/modules/about/templates/supportSuccess.php
+++ b/src/apps/koohii/modules/about/templates/supportSuccess.php
@@ -29,11 +29,7 @@
         PayPal is also a great way to support my work. (Note: if you chose the <em>recurring</em> option, you can cancel it at anytime from your PayPal account).
       </p>
       <div class="kk-PaypalForm">
-<?php if (null === sfConfig::get('app_fork'))
-{
-  include_partial('_paypalDonateButton');
-}
-?>
+<?php if (!KK_ENV_FORK) { include_partial('_paypalDonateButton'); } ?>
       </div>
     </div>
  
diff --git a/src/apps/koohii/modules/account/templates/indexSuccess.php b/src/apps/koohii/modules/account/templates/indexSuccess.php
index 2f311481..40f91e68 100755
--- a/src/apps/koohii/modules/account/templates/indexSuccess.php
+++ b/src/apps/koohii/modules/account/templates/indexSuccess.php
@@ -37,7 +37,7 @@
   </section>
 
 <?php
-if (null === sfConfig::get('app_fork')) {
+if (!KK_ENV_FORK) {
   require_once(sfConfig::get('sf_lib_dir').'/vendor/Patreon/__patreon.php');
   $patron_info = PatreonPeer::getPatronInfo($sf_user->getUserId());
 ?>
diff --git a/src/apps/koohii/modules/home/templates/_homeFooter.php b/src/apps/koohii/modules/home/templates/_homeFooter.php
index a643a429..556628d8 100755
--- a/src/apps/koohii/modules/home/templates/_homeFooter.php
+++ b/src/apps/koohii/modules/home/templates/_homeFooter.php
@@ -17,7 +17,7 @@ function koohii_tweet_query() {
     <div class="container">
       <section>
 <p>Made in Belgium since 2006 by&nbsp;Fabrice.</p>
-<?php if ($sf_user->isAuthenticated() && null === sfConfig::get('app_fork')): ?>
+<?php if ($sf_user->isAuthenticated() && !KK_ENV_FORK): ?>
 <p><strong>Support my work</strong> with <?php echo link_to('Patreon, PayPal', 'about/support') ?>, <span class="break">and affiliate <?php use_helper('__Sponsor'); echo link_to_jpod101('JapanesePod101.com') ?>.</span></p>
 <?php endif ?>
 
diff --git a/src/apps/koohii/modules/news/templates/_recent.php b/src/apps/koohii/modules/news/templates/_recent.php
index 42b52ea5..f8285e39 100755
--- a/src/apps/koohii/modules/news/templates/_recent.php
+++ b/src/apps/koohii/modules/news/templates/_recent.php
@@ -1,11 +1,7 @@
 <div class="row">
   <div class="col-lg-10 mx-auto">
 
-<?php
-  if (null === sfConfig::get('app_fork')) {
-    include_partial('news/_jpodBanner');
-  }
-?>
+<?php if (!KK_ENV_FORK) { include_partial('news/_jpodBanner'); } ?>
 
 <h2>Blog</h2>
 
diff --git a/src/apps/koohii/modules/news/templates/indexSuccess.php b/src/apps/koohii/modules/news/templates/indexSuccess.php
index 67f568b4..02916f4d 100755
--- a/src/apps/koohii/modules/news/templates/indexSuccess.php
+++ b/src/apps/koohii/modules/news/templates/indexSuccess.php
@@ -26,11 +26,7 @@
 <div class="row">
   <div class="col-lg-9">
 
-<?php
-  if (null === sfConfig::get('app_fork')) {
-    include_partial('news/_jpodBanner');
-  }
-?>
+<?php if (!KK_ENV_FORK) { include_partial('news/_jpodBanner'); } ?>
 
     <h2><?php echo $title ?></h2>
 

From 03b57aed7d1ec027a347db9a94eadf80171c2c86 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 16:54:34 +0100
Subject: [PATCH 32/69] (navbar.php): use fa-book-open for "Study" in the
 mobile nav

---
 src/apps/koohii/templates/_navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/koohii/templates/_navbar.php b/src/apps/koohii/templates/_navbar.php
index e9f2726a..92ad8d0c 100755
--- a/src/apps/koohii/templates/_navbar.php
+++ b/src/apps/koohii/templates/_navbar.php
@@ -172,7 +172,7 @@ function nav_m_i($label, $id, $url) {
 
 } else {
 
-  $nav_items[] = nav_m_t('Study', 'study', 'fa-book', [
+  $nav_items[] = nav_m_t('Study', 'study', 'fa-book-open', [
     nav_m_i('Index',       's-i',  'study/index'),
     nav_m_i('Restudy',     's-r',  'study/failedlist' ),
     nav_m_i('My Stories',  's-ms', 'study/mystories' ),

From 15e7ab35691a97c2d75ee7bb3cd07c824e9353e6 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Wed, 23 Mar 2022 16:56:08 +0100
Subject: [PATCH 33/69] (fontawesome): use subset/pro/CDN versions

---
 .../koohii/lib/helper/BootstrapHelper.php     | 37 +++++++++++++++++--
 .../koohii/templates/fullscreenLayout.php     |  3 +-
 src/apps/koohii/templates/layout.php          |  3 +-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/apps/koohii/lib/helper/BootstrapHelper.php b/src/apps/koohii/lib/helper/BootstrapHelper.php
index c4b269d5..134a553f 100644
--- a/src/apps/koohii/lib/helper/BootstrapHelper.php
+++ b/src/apps/koohii/lib/helper/BootstrapHelper.php
@@ -46,7 +46,7 @@
  *   _bs_input_password($name, $options = array())
  *   _bs_input_text    ($name, $options = array())
  *   _bs_input_textarea($name, $options = array())
- * 
+ *
  *   _bs_submit_tag    ($label, $options = array())
  *
  *
@@ -247,14 +247,16 @@ function _bs_input_textarea($name, $options = [])
  * default unless a `ko-Btn` class is used in the `class` option.
  *
  * @param string $label
- * @param array $options Symfony tag helper options
+ * @param array  $options Symfony tag helper options
+ *
  * @return string
  */
 function _bs_submit_tag($label, $options = [])
 {
   // default to adding `success` style - unless a button class is used
   $classnames = $options['class'] ?? '';
-  if (false === strstr($classnames, 'ko-Btn')) {
+  if (false === strstr($classnames, 'ko-Btn'))
+  {
     _bs_class_merge($options, 'ko-Btn ko-Btn--success');
   }
 
@@ -325,3 +327,32 @@ function kk_globals_out()
     echo "\n<script>\nwindow.KK || (KK = {});\n".implode("\n", $lines)."\n</script>\n";
   }
 }
+
+/**
+ * Include FontAwesome 5 webfonts.
+ *
+ *   - github (public) repo points to the free CDN version
+ *
+ *   - private repo has the pro download with all icons
+ *     (temporarily uncomment code below to enable all icons)
+ *
+ *   - production should use the "subset" version compiled
+ *     locally with the subsetter tool
+ */
+function include_fontawesome()
+{
+  // TEMPORARILY uncomment this to test all pro icons (private repo)
+  // echo '<link href="/fonts/fa5pro/css/all-but-duo.min.css" rel="stylesheet">';
+  // return;
+
+  if (KK_ENV_FORK)
+  {
+    // use the free, CDN version
+    echo '<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">';
+  }
+  else
+  {
+    // use the pro "subset" version for reduced file sizes
+    echo '<link href="/fonts/fa5sub/css/all.min.css" rel="stylesheet">';
+  }
+}
diff --git a/src/apps/koohii/templates/fullscreenLayout.php b/src/apps/koohii/templates/fullscreenLayout.php
index 91189b2c..84211bf4 100644
--- a/src/apps/koohii/templates/fullscreenLayout.php
+++ b/src/apps/koohii/templates/fullscreenLayout.php
@@ -14,9 +14,8 @@
 
   include_stylesheets();
   include_javascripts();
+  include_fontawesome();
 ?>
-  <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
-
   <!-- thx realfavicongenerator.net -->
   <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=20170121b">
   <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png?v=20170121" sizes="32x32">
diff --git a/src/apps/koohii/templates/layout.php b/src/apps/koohii/templates/layout.php
index 23332438..278b1c4c 100644
--- a/src/apps/koohii/templates/layout.php
+++ b/src/apps/koohii/templates/layout.php
@@ -17,9 +17,8 @@
 
   include_stylesheets();
   include_javascripts();
+  include_fontawesome();
 ?>
-  <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
-
   <!-- thx realfavicongenerator.net -->
   <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=20170121">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=20170121">

From 3e8a6e7b08eff9e407a75cce2ce54a0e2efdce47 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 11:16:05 +0100
Subject: [PATCH 34/69] (BootstrapHelper): _bs_button() now actually outputs a
 <button>...

---
 .../koohii/lib/helper/BootstrapHelper.php     | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/apps/koohii/lib/helper/BootstrapHelper.php b/src/apps/koohii/lib/helper/BootstrapHelper.php
index 134a553f..a7865b7d 100644
--- a/src/apps/koohii/lib/helper/BootstrapHelper.php
+++ b/src/apps/koohii/lib/helper/BootstrapHelper.php
@@ -62,18 +62,43 @@
  */
 
 /**
- * Returns html for a Bootstrap button.
+ * Similar to sf's button_to(), but outputs a <button> (not an <input type=button>).
  *
- * Additional options as per Symfony's link_to() helper: 'absolute', 'query_string', 'anchor', etc.
+ * DOES NOT DO ANY ESCAPING of the button's contents!
  *
- * @param string $name
- * @param string $internal_uri
+ * <b>Options:</b>
+ * - 'absolute' - if set to true, the helper outputs an absolute URL
+ * - 'query_string' - to append a query string (starting by ?) to the routed url
+ * - 'anchor' - to append an anchor (starting by #) to the routed url
+ *
+ * @see lib/vendor/symfony/lib/helper/UrlHelper.php   button_to()
+ *
+ * @param string $label        valid  for the button
+ * @param string $internal_uri 'module/action' or '@rule' of the action
+ * @param array  $options      additional HTML compliant <input> tag parameters
  */
-function _bs_button($name, $internal_uri, array $options = [])
+function _bs_button($label, $internal_uri, array $options = [])
 {
-  // TODO
+  $html_options = _parse_attributes($options);
+
+  $url = url_for($internal_uri);
+
+  if (isset($html_options['query_string']))
+  {
+    $url = $url.'?'.$html_options['query_string'];
+    unset($html_options['query_string']);
+  }
+
+  if (isset($html_options['anchor']))
+  {
+    $url = $url.'#'.$html_options['anchor'];
+    unset($html_options['anchor']);
+  }
+
+  $html_options['onclick'] = "document.location.href='".$url."';";
+  $html_options = _convert_options_to_javascript($html_options);
 
-  return link_to($name, $internal_uri, $options);
+  return content_tag('button', $label, $html_options);
 }
 
 // Classnames are appended to $options['class'] if present.

From 3cf403b803513133ba5f33e871c4cb612770ff21 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 11:30:40 +0100
Subject: [PATCH 35/69] (doc/Development.md): minor clarification of hashed
 assets & .htaccess

---
 doc/Development.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/doc/Development.md b/doc/Development.md
index cab93660..e8030271 100644
--- a/doc/Development.md
+++ b/doc/Development.md
@@ -63,11 +63,21 @@ If an image changes, simply rename it eg. `logo-20210815.gif`. For now we'd rath
 
 ## Versioning of CSS/JS not handled by Vite
 
-Since removing Juicer, it is still possible to add versioning to JS/CSS that is not handled by Vite. There is still a mod_rewrite rule in `.htaccess` which can handle css/js files through `version/cache.php` based on file naming pattern:
+It is possible to add versioning to JS/CSS that is not handled by Vite.
 
-`/web/vendor/some-lib.min.js` => `/web/vendor/some-lib-v20210815.min.js`
+There is a mod_rewrite rule in `.htaccess` which matches a filename pattern containing a version number (eg. a YYYYMMDD date), and routes these through a php scrip that sets far future expire headers.
 
-This will cause the file to be gzipped and add far future expire headers + the client will refresh its cache if the hash changed.
+    RewriteRule ^(.*)\.[a-z0-9]+\.(css|js)$   /version/cache.php?file=$0 [L]
+
+A file named...
+
+    /web/vendor/some-lib.min.js
+
+... is referenced in the app (php/js) as:
+
+    /web/vendor/some-lib-v20210815.min.js
+
+The `htaccess` rule will match the pattern, and get the original file, add far future expire headers, and return it as gzipped content.
 
 # Scripts execution
 

From 6e30eb5e95ae901f24fbba92be0cc13ece3933af Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 11:31:10 +0100
Subject: [PATCH 36/69] (.htaccess): minor updates, sync with the production
 version

---
 src/web/.htaccess_default | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/web/.htaccess_default b/src/web/.htaccess_default
index fabcbed5..b1d2d6d6 100644
--- a/src/web/.htaccess_default
+++ b/src/web/.htaccess_default
@@ -1,7 +1,17 @@
+<IfModule mod_expires.c>
+  ExpiresActive On
+  # Media: images, video, audio (use file name versioning if file is modified)
+  ExpiresByType image/gif "access plus 1 month"
+  ExpiresByType image/jpg "access plus 1 month"
+  ExpiresByType image/jpeg "access plus 1 month"
+  ExpiresByType image/png "access plus 1 month"
+  ExpiresByType image/svg "access plus 1 month"
+</IfModule>
+
 <IfModule mod_rewrite.c>
   RewriteEngine On
 
-  # php handler for versioning of front end assets
+  # set far future expire headers for hashed assets
   RewriteRule ^(.*)\.[a-z0-9]+\.(css|js)$   /version/cache.php?file=$0 [L]
 
   # we skip all files with .something

From daca0c21e05ab1477e943eea0d20bc62ceab595f Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 22 Feb 2022 17:34:49 +0100
Subject: [PATCH 37/69] Fix hacks in obsolete yui2-container.css causing css
 minification warnings

Fixes warning messages when using `vite build`.

Just remove the `*hacks` since it was for IE7, and we will never need
to recompile this CSS from YUI2.
---
 src/vite/src/assets/sass/legacy/vendor/yui2-container.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vite/src/assets/sass/legacy/vendor/yui2-container.css b/src/vite/src/assets/sass/legacy/vendor/yui2-container.css
index e3c14ce1..3175466a 100644
--- a/src/vite/src/assets/sass/legacy/vendor/yui2-container.css
+++ b/src/vite/src/assets/sass/legacy/vendor/yui2-container.css
@@ -4,4 +4,4 @@ Code licensed under the BSD License:
 http://developer.yahoo.com/yui/license.html
 version: 2.9.0
 */
-.yui-overlay,.yui-panel-container{visibility:hidden;position:absolute;z-index:2}.yui-panel{position:relative}.yui-panel-container form{margin:0}.mask{z-index:1;display:none;position:absolute;top:0;left:0;right:0;bottom:0}.mask.block-scrollbars{overflow:auto}.masked select,.drag select,.hide-select select{_visibility:hidden}.yui-panel-container select{_visibility:inherit}.hide-scrollbars,.hide-scrollbars *{overflow:hidden}.hide-scrollbars select{display:none}.show-scrollbars{overflow:auto}.yui-panel-container.show-scrollbars,.yui-tt.show-scrollbars{overflow:visible}.yui-panel-container.show-scrollbars .underlay,.yui-tt.show-scrollbars .yui-tt-shadow{overflow:auto}.yui-panel-container.shadow .underlay.yui-force-redraw{padding-bottom:1px}.yui-effect-fade .underlay,.yui-effect-fade .yui-tt-shadow{display:none}.yui-tt-shadow{position:absolute}.yui-override-padding{padding:0!important}.yui-panel-container .container-close{overflow:hidden;text-indent:-10000em;text-decoration:none}.yui-overlay.yui-force-redraw,.yui-panel-container.yui-force-redraw{margin-bottom:1px}.yui-skin-sam .mask{background-color:#000;opacity:.25;filter:alpha(opacity=25)}.yui-skin-sam .yui-panel-container{padding:0 1px;*padding:2px}.yui-skin-sam .yui-panel{position:relative;left:0;top:0;border-style:solid;border-width:1px 0;border-color:#808080;z-index:1;*border-width:1px;*zoom:1;_zoom:normal}.yui-skin-sam .yui-panel .hd,.yui-skin-sam .yui-panel .bd,.yui-skin-sam .yui-panel .ft{border-style:solid;border-width:0 1px;border-color:#808080;margin:0 -1px;*margin:0;*border:0}.yui-skin-sam .yui-panel .hd{border-bottom:solid 1px #ccc}.yui-skin-sam .yui-panel .bd,.yui-skin-sam .yui-panel .ft{background-color:#f2f2f2}.yui-skin-sam .yui-panel .hd{padding:0 10px;font-size:93%;line-height:2;*line-height:1.9;font-weight:bold;color:#000;background:red}.yui-skin-sam .yui-panel .bd{padding:10px}.yui-skin-sam .yui-panel .ft{border-top:solid 1px #808080;padding:5px 10px;font-size:77%}.yui-skin-sam .container-close{position:absolute;top:5px;right:6px;width:25px;height:15px;background:red;cursor:pointer}.yui-skin-sam .yui-panel-container .underlay{right:-1px;left:-1px}.yui-skin-sam .yui-panel-container.matte{padding:9px 10px;background-color:#fff}.yui-skin-sam .yui-panel-container.shadow{_padding:2px 4px 0 2px}.yui-skin-sam .yui-panel-container.shadow .underlay{position:absolute;top:2px;left:-3px;right:-3px;bottom:-3px;*top:4px;*left:-1px;*right:-1px;*bottom:-1px;_top:0;_left:0;_right:0;_bottom:0;_margin-top:3px;_margin-left:-1px;background-color:#000;opacity:.12;filter:alpha(opacity=12)}.yui-skin-sam .yui-dialog .ft{border-top:0;padding:0 10px 10px 10px;font-size:100%}.yui-skin-sam .yui-dialog .ft .button-group{display:block;text-align:right}.yui-skin-sam .yui-dialog .ft button.default{font-weight:bold}.yui-skin-sam .yui-dialog .ft span.default{border-color:#304369;background-position:0 -1400px}.yui-skin-sam .yui-dialog .ft span.default .first-child{border-color:#304369}.yui-skin-sam .yui-dialog .ft span.default button{color:#fff}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled{background-position:0 -1500px;border-color:#ccc}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled .first-child{border-color:#ccc}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled button{color:#a6a6a6}.yui-skin-sam .yui-simple-dialog .bd .yui-icon{background:red;width:16px;height:16px;margin-right:10px;float:left}.yui-skin-sam .yui-simple-dialog .bd span.blckicon{background-position:0 -1100px}.yui-skin-sam .yui-simple-dialog .bd span.alrticon{background-position:0 -1050px}.yui-skin-sam .yui-simple-dialog .bd span.hlpicon{background-position:0 -1150px}.yui-skin-sam .yui-simple-dialog .bd span.infoicon{background-position:0 -1200px}.yui-skin-sam .yui-simple-dialog .bd span.warnicon{background-position:0 -1900px}.yui-skin-sam .yui-simple-dialog .bd span.tipicon{background-position:0 -1250px}.yui-skin-sam .yui-tt .bd{position:relative;top:0;left:0;z-index:1;color:#000;padding:2px 5px;border-color:#d4c237 #A6982b #a6982b #A6982B;border-width:1px;border-style:solid;background-color:#ffee69}.yui-skin-sam .yui-tt.show-scrollbars .bd{overflow:auto}.yui-skin-sam .yui-tt-shadow{top:2px;right:-3px;left:-3px;bottom:-3px;background-color:#000}.yui-skin-sam .yui-tt-shadow-visible{opacity:.12;filter:alpha(opacity=12)}
+.yui-overlay,.yui-panel-container{visibility:hidden;position:absolute;z-index:2}.yui-panel{position:relative}.yui-panel-container form{margin:0}.mask{z-index:1;display:none;position:absolute;top:0;left:0;right:0;bottom:0}.mask.block-scrollbars{overflow:auto}.masked select,.drag select,.hide-select select{_visibility:hidden}.yui-panel-container select{_visibility:inherit}.hide-scrollbars,.hide-scrollbars *{overflow:hidden}.hide-scrollbars select{display:none}.show-scrollbars{overflow:auto}.yui-panel-container.show-scrollbars,.yui-tt.show-scrollbars{overflow:visible}.yui-panel-container.show-scrollbars .underlay,.yui-tt.show-scrollbars .yui-tt-shadow{overflow:auto}.yui-panel-container.shadow .underlay.yui-force-redraw{padding-bottom:1px}.yui-effect-fade .underlay,.yui-effect-fade .yui-tt-shadow{display:none}.yui-tt-shadow{position:absolute}.yui-override-padding{padding:0!important}.yui-panel-container .container-close{overflow:hidden;text-indent:-10000em;text-decoration:none}.yui-overlay.yui-force-redraw,.yui-panel-container.yui-force-redraw{margin-bottom:1px}.yui-skin-sam .mask{background-color:#000;opacity:.25;filter:alpha(opacity=25)}.yui-skin-sam .yui-panel-container{padding:0 1px;}.yui-skin-sam .yui-panel{position:relative;left:0;top:0;border-style:solid;border-width:1px 0;border-color:#808080;z-index:1;}.yui-skin-sam .yui-panel .hd,.yui-skin-sam .yui-panel .bd,.yui-skin-sam .yui-panel .ft{border-style:solid;border-width:0 1px;border-color:#808080;margin:0 -1px;}.yui-skin-sam .yui-panel .hd{border-bottom:solid 1px #ccc}.yui-skin-sam .yui-panel .bd,.yui-skin-sam .yui-panel .ft{background-color:#f2f2f2}.yui-skin-sam .yui-panel .hd{padding:0 10px;font-size:93%;line-height:2;font-weight:bold;color:#000;background:red}.yui-skin-sam .yui-panel .bd{padding:10px}.yui-skin-sam .yui-panel .ft{border-top:solid 1px #808080;padding:5px 10px;font-size:77%}.yui-skin-sam .container-close{position:absolute;top:5px;right:6px;width:25px;height:15px;background:red;cursor:pointer}.yui-skin-sam .yui-panel-container .underlay{right:-1px;left:-1px}.yui-skin-sam .yui-panel-container.matte{padding:9px 10px;background-color:#fff}.yui-skin-sam .yui-panel-container.shadow{_padding:2px 4px 0 2px}.yui-skin-sam .yui-panel-container.shadow .underlay{position:absolute;top:2px;left:-3px;right:-3px;bottom:-3px;_top:0;_left:0;_right:0;_bottom:0;_margin-top:3px;_margin-left:-1px;background-color:#000;opacity:.12;filter:alpha(opacity=12)}.yui-skin-sam .yui-dialog .ft{border-top:0;padding:0 10px 10px 10px;font-size:100%}.yui-skin-sam .yui-dialog .ft .button-group{display:block;text-align:right}.yui-skin-sam .yui-dialog .ft button.default{font-weight:bold}.yui-skin-sam .yui-dialog .ft span.default{border-color:#304369;background-position:0 -1400px}.yui-skin-sam .yui-dialog .ft span.default .first-child{border-color:#304369}.yui-skin-sam .yui-dialog .ft span.default button{color:#fff}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled{background-position:0 -1500px;border-color:#ccc}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled .first-child{border-color:#ccc}.yui-skin-sam .yui-dialog .ft span.yui-button-disabled button{color:#a6a6a6}.yui-skin-sam .yui-simple-dialog .bd .yui-icon{background:red;width:16px;height:16px;margin-right:10px;float:left}.yui-skin-sam .yui-simple-dialog .bd span.blckicon{background-position:0 -1100px}.yui-skin-sam .yui-simple-dialog .bd span.alrticon{background-position:0 -1050px}.yui-skin-sam .yui-simple-dialog .bd span.hlpicon{background-position:0 -1150px}.yui-skin-sam .yui-simple-dialog .bd span.infoicon{background-position:0 -1200px}.yui-skin-sam .yui-simple-dialog .bd span.warnicon{background-position:0 -1900px}.yui-skin-sam .yui-simple-dialog .bd span.tipicon{background-position:0 -1250px}.yui-skin-sam .yui-tt .bd{position:relative;top:0;left:0;z-index:1;color:#000;padding:2px 5px;border-color:#d4c237 #A6982b #a6982b #A6982B;border-width:1px;border-style:solid;background-color:#ffee69}.yui-skin-sam .yui-tt.show-scrollbars .bd{overflow:auto}.yui-skin-sam .yui-tt-shadow{top:2px;right:-3px;left:-3px;bottom:-3px;background-color:#000}.yui-skin-sam .yui-tt-shadow-visible{opacity:.12;filter:alpha(opacity=12)}

From 579024df93e3359bd32b059b19e7cc47a8c864d4 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 17:10:12 +0100
Subject: [PATCH 38/69] (.htaccess): add mime types and expire headers for
 fonts

---
 src/web/.htaccess_default | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/web/.htaccess_default b/src/web/.htaccess_default
index b1d2d6d6..9d309772 100644
--- a/src/web/.htaccess_default
+++ b/src/web/.htaccess_default
@@ -1,11 +1,26 @@
+# webfonts
+AddType application/vnd.ms-fontobject .eot
+AddType application/x-font-opentype .otf
+AddType application/x-font-ttf .ttf
+AddType application/x-font-woff .woff
+AddType application/font-woff2 .woff2
+AddType image/svg+xml .svg
+
 <IfModule mod_expires.c>
   ExpiresActive On
-  # Media: images, video, audio (use file name versioning if file is modified)
+  # media (change the path/file name when updating those files)
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/svg "access plus 1 month"
+  ExpiresByType image/svg+xml "access plus 1 year"
+  # fonts (change the path/file name when updating those files)
+  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
+  ExpiresByType application/x-font-opentype "access plus 1 year"
+  ExpiresByType application/x-font-ttf "access plus 1 year"
+  ExpiresByType application/x-font-woff "access plus 1 year"
+  ExpiresByType application/font-woff2 "access plus 1 year"
 </IfModule>
 
 <IfModule mod_rewrite.c>

From 8691c8a417d49681d291b6ff09c60d5f2fd4293b Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 18:46:49 +0100
Subject: [PATCH 39/69] (learnmore.md): flesh out "Restudy List" section

---
 .../modules/about/templates/learnmore.md      | 35 ++++++++++++++++---
 .../src/assets/sass/components/_buttons.scss  | 26 ++++++++++++++
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/apps/koohii/modules/about/templates/learnmore.md b/src/apps/koohii/modules/about/templates/learnmore.md
index 49682fb1..d18b4f2b 100755
--- a/src/apps/koohii/modules/about/templates/learnmore.md
+++ b/src/apps/koohii/modules/about/templates/learnmore.md
@@ -87,6 +87,36 @@ This is done in order to provide meaningful results for Koohii users. The dictio
 
 As such, Koohii's dictionary is not an exhaustive reference. There are already excellent resources dedicated to this such as jisho.org. The goal for Koohii's dictionary is to help you stay focused while getting through the 2000+ common use kanji.
 
+### Restudy List {#restudy-list}
+
+The [Restudy List](/study/failedlist) page lets you see all the kanji that are currently in your failed cards pile (the red pile on the SRS bar chart).
+
+From here you can begin the "Restudy" process, which has two advantages:
+
+1. helps you navigate the Restudy List, so you don't have to manually search for each kanji
+2. lets you mark specific kanji as "learned", and then review just those
+
+You can also select <span class="ko-ExBtn ko-ExBtn--danger">Review All</span> to start a SRS review of all the kanji in your failed pile.
+
+#### Begin Restudy
+
+Select <span class="ko-ExBtn ko-ExBtn--danger">Begin Restudy</span> to restudy, and review, parts or all of your forgotten kanji.
+
+- After you are done re-learning a kanji (perhaps updating your story, or using another one), select <span class="ko-ExBtn ko-ExBtn--success">Add to learned list</span> below the story.
+- Each time you mark a kanji as "learned" this way, you will move to the next kanji in your Restudy List, _in Heisig index order_.
+- You can go back to the Restudy List page at any time and you will see the LEARNED kanji marked in the list. Select "Begin Restudy" again to continue with the remaining kanji.
+
+**Tip!** _If you want to re-study only specific kanji in no particular order, simply click them in the Restudy List to navigate to those Study pages (and select "Add to learned list" each time)._
+
+#### Learned Kanji
+
+Use the Restudy process described above, to add kanji to the Learned Kanji list. "LEARNED" kanji will remain in this state until you either review the kanji succesfully (only SRS reviews), or manually clear the list.
+
+Select <span class="ko-ExBtn ko-ExBtn--success">Review Learned</span> to start a SRS review of only those forgotten kanji that you have marked as learned. This effectively allows you to review only parts of your forgotten kanji. You may want to leave some difficult kanji in this pile indefinitely for example - to restudy only when you'll need them.
+
+Select <span class="ko-ExBtn ko-ExBtn--danger">Clear learned list</span> to "reset" the learned kanji. You will rarely need this, but perhaps if you took a long break, and you had some "learned" kanji left over you may want to start the re-study process again.
+  
+At the end of this review (in fact, _any SRS review_), forgotten kanji will remain in the failed pile but please note _they will be cleared from the learned list_. Kanji that were succesfully reviewed (including "Hard" answer) are no longer in the Restudy List - well done!
 
 ## Using Flashcards
 
@@ -179,11 +209,6 @@ long term memory, therefore it is not possible to select the green piles. Often
 
 </div>
 
-### Restudy List
-
-If you have previously forgotten kanji from SRS reviews, select **Restudy > Start**. This will take you to the first failed kanji. Once you have revised your story, select **Add to learned list**. This will take you to the next failed kanji. When you have finished working through failed kanji, select **Review** in the sidebar (top on mobile) to do a first review of these cards. Successfull reviews will move these cards into the SRS cycle, and your failed kanji list will eventually be cleared.
-
-
 ### Review Session
 
 Clicking any of the stacks in the Leitner graph will take you to the reviewing screen :
diff --git a/src/vite/src/assets/sass/components/_buttons.scss b/src/vite/src/assets/sass/components/_buttons.scss
index 9da92d62..c6a9ab05 100644
--- a/src/vite/src/assets/sass/components/_buttons.scss
+++ b/src/vite/src/assets/sass/components/_buttons.scss
@@ -208,3 +208,29 @@
     border-bottom-color: #3d83ac;
   }
 }
+
+// --------------------------------------------------------------------
+// A "sample" button as used in the Help page, when documentation
+//  refers to a button (ie. "select *Some Button* to do xyz").
+//
+//   <span class="ko-ExBtn ko-ExBtn--success">The Button</span>
+// --------------------------------------------------------------------
+.ko-ExBtn {
+  padding: 0.2em 0.4em;
+  border-radius: 0.25em;
+  @include mx(0.25em);
+  border: 1px solid #d4cdba;
+  color: #6f6961;
+
+  &--danger {
+    $text: $--color-btn-danger;
+    border-color: $text;
+    color: #{darken(saturate($text, 5), 10)};
+  }
+  
+  &--success {
+    $text: $--color-btn-success;
+    border-color: $text;
+    color: #{darken(saturate($text, 5), 10)};
+  }
+}

From 3aff311c9422afa768608dbded0b9fb12cfc5ea3 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 18:47:21 +0100
Subject: [PATCH 40/69] (markdown.scss): style numbered lists ( <ol> )

---
 src/vite/src/assets/sass/_markdown.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/vite/src/assets/sass/_markdown.scss b/src/vite/src/assets/sass/_markdown.scss
index c10153ed..a6ab43c6 100644
--- a/src/vite/src/assets/sass/_markdown.scss
+++ b/src/vite/src/assets/sass/_markdown.scss
@@ -51,6 +51,12 @@
   padding-left: 2em;
 }
 
+.markdown ol {
+  list-style-type: decimal;
+  margin: 0 0 calc(var(--vunit) * 1.5);
+  padding-left: 2em;
+}
+
 // blockquote
 .markdown blockquote {
   @apply text-body-light pl-[2em] italic;

From 64ac91736cdc7ee8d264d85ca11e948d971bf5f3 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Thu, 24 Mar 2022 18:47:55 +0100
Subject: [PATCH 41/69] (_mixins.scss): add mx/my()

---
 .../src/assets/sass/abstracts/_mixins.scss    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index 1b12ea49..d6f4160e 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -5,6 +5,8 @@
 //
 //     button-color()
 //     font()
+//     mx()
+//     my()
 //     px()
 //     py()
 //
@@ -98,6 +100,25 @@
   }
 }
 
+// --------------------------------------------------------------------
+// MX / MY
+//
+//   Shorthand to set horizontal margins.
+//
+//   Commonly used for negative margins, eg:
+//
+//     @include mx(-10px);
+//
+// --------------------------------------------------------------------
+@mixin mx($unit) {
+  margin-left: $unit;
+  margin-right: $unit;
+}
+@mixin my($unit) {
+  margin-top: $unit;
+  margin-bottom: $unit;
+}
+
 // --------------------------------------------------------------------
 // PX / PY
 //

From 8c45a02e475b5a17bed3731434e140fe1753477c Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 11:43:40 +0100
Subject: [PATCH 42/69] (about/config/view.yml): remove unused "advertise"
 route

---
 src/apps/koohii/modules/about/config/view.yml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/apps/koohii/modules/about/config/view.yml b/src/apps/koohii/modules/about/config/view.yml
index 4f0030c6..e713b18c 100755
--- a/src/apps/koohii/modules/about/config/view.yml
+++ b/src/apps/koohii/modules/about/config/view.yml
@@ -3,11 +3,6 @@ aboutSuccess:
     title: 'About - Kanji Koohii'
     robots: 'noindex,follow'
 
-advertiseSuccess:
-  metas:
-    title: 'Advertise with Kanji Koohii'
-    robots: 'noindex,nofollow'
-
 learnmoreSuccess:
   metas:
     title: 'Learn more - Kanji Koohii'

From e66414f34c64e139a1c6defa47735078333ac078 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 11:52:22 +0100
Subject: [PATCH 43/69] (*/view.yml): fix a bunch of page titles

---
 src/apps/koohii/modules/about/config/view.yml  |  2 +-
 src/apps/koohii/modules/manage/config/view.yml | 14 +++-----------
 src/apps/koohii/modules/review/config/view.yml | 12 ++++++++----
 src/apps/koohii/modules/study/config/view.yml  | 17 ++++++++---------
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/apps/koohii/modules/about/config/view.yml b/src/apps/koohii/modules/about/config/view.yml
index e713b18c..6d42616e 100755
--- a/src/apps/koohii/modules/about/config/view.yml
+++ b/src/apps/koohii/modules/about/config/view.yml
@@ -9,5 +9,5 @@ learnmoreSuccess:
 
 supportSuccess:
   metas:
-    title: 'Support Kanji Koohii'
+    title: 'Support - Kanji Koohii'
     robots: 'noindex,follow'
diff --git a/src/apps/koohii/modules/manage/config/view.yml b/src/apps/koohii/modules/manage/config/view.yml
index d8a073e8..a32e7874 100755
--- a/src/apps/koohii/modules/manage/config/view.yml
+++ b/src/apps/koohii/modules/manage/config/view.yml
@@ -1,22 +1,14 @@
 flashcardlistSuccess:
   metas:
-    title: "Detailed flashcard list"
-
-addcustom:
-  metas:
-    title: "Add custom selection"
-
-removelist:
-  metas:
-    title: "Remove from list"
+    title: "Flashcard List - Kanji Koohii"
 
 editkeywords:
   metas:
-    title: "Edit Keywords"
+    title: "Edit Keywords - Kanji Koohii"
 
 all:
   metas:
-    title: "Manage Flashcards"
+    title: "Manage Flashcards - Kanji Koohii"
 
   javascripts:
     - src/entry-manage.ts
diff --git a/src/apps/koohii/modules/review/config/view.yml b/src/apps/koohii/modules/review/config/view.yml
index dbc5b7cb..2e30ff7d 100755
--- a/src/apps/koohii/modules/review/config/view.yml
+++ b/src/apps/koohii/modules/review/config/view.yml
@@ -1,19 +1,23 @@
+customSuccess:
+  metas:
+    title: "Custom Kanji Review - Kanji Koohii"
+
 indexSuccess:
   metas:
-    title: 'Spaced Repetition - Kanji Koohii'
+    title: "Spaced Repetition - Kanji Koohii"
   javascripts:
     - src/entry-review.ts
 
 reviewSuccess:
   metas:
-    title: 'Flashcard Review'
+    title: "Flashcard Review - Kanji Koohii"
   javascripts:
     - src/entry-review.ts
 
 summarySuccess:
   metas:
-    title: 'Review Summary'
+    title: "Review Summary - Kanji Koohii"
 
 vocabSuccess:
   metas:
-    title: 'Vocab Shuffle Review'
+    title: "Vocab Shuffle - Kanji Koohii"
diff --git a/src/apps/koohii/modules/study/config/view.yml b/src/apps/koohii/modules/study/config/view.yml
index 71ac36f2..1787e48b 100755
--- a/src/apps/koohii/modules/study/config/view.yml
+++ b/src/apps/koohii/modules/study/config/view.yml
@@ -1,19 +1,18 @@
-index:
+editSuccess:
   metas:
-    title: "Study: Introduction"
+    title: "Study - Kanji Koohii"
 
-edit:
+failedlistSuccess:
   metas:
-    title: "Index"
+    title: "Restudy List - Kanji Koohii"
 
-failedlist:
+mystoriesSuccess:
   metas:
-    title: "Study: Failed Kanji List"
+    title: "My Stories - Kanji Koohii"
 
-mystories:
+all:
   metas:
-    title: "Study: My Stories List"
+    title: "Study - Kanji Koohii"
 
-all:
   javascripts:
     - src/entry-study.ts

From cf5ec11912e623f35d183feae5b5e09a85934ca9 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 11:54:18 +0100
Subject: [PATCH 44/69] (about/support): improve vertical spacing

---
 src/apps/koohii/modules/about/templates/supportSuccess.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/apps/koohii/modules/about/templates/supportSuccess.php b/src/apps/koohii/modules/about/templates/supportSuccess.php
index 581a46ee..119cfd61 100755
--- a/src/apps/koohii/modules/about/templates/supportSuccess.php
+++ b/src/apps/koohii/modules/about/templates/supportSuccess.php
@@ -7,11 +7,11 @@
 
     <h2>Support Kanji Koohii<span class="visible-md-lg"> Development</span></h2>
 
-    <p>
+    <p class="mb-8">
       Maintaining and developing new features takes a considerable amount of time. Your support is very important and could allow me to free up more time for development. <em>Thank you!</em>
     </p>
 
-    <img class="block mb-8" style="width:126px" src="https://s3.amazonaws.com/patreon_public_assets/toolbox/patreon.png" />
+    <img class="block mb-4" style="width:126px" src="https://s3.amazonaws.com/patreon_public_assets/toolbox/patreon.png" />
 
     <div class="ko-Box no-gutter-xs-sm mb-8">
     
@@ -22,7 +22,7 @@
     </a>
     </div>
 
-    <img class="block mb-8" style="width:126px" src="/images/3.0/support/paypal.png" />
+    <img class="block mb-4" style="width:126px" src="/images/3.0/support/paypal.png" />
 
     <div class="ko-Box no-gutter-xs-sm mb-8">
       <p>

From 76a80d7a68877bc63c569ec20f0fe6e3833c5641 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:04:23 +0100
Subject: [PATCH 45/69] (_mixins): `button-color()` add support for
 lighten/darken hover colors

---
 src/vite/src/assets/sass/abstracts/_mixins.scss | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/vite/src/assets/sass/abstracts/_mixins.scss b/src/vite/src/assets/sass/abstracts/_mixins.scss
index d6f4160e..22f3062b 100644
--- a/src/vite/src/assets/sass/abstracts/_mixins.scss
+++ b/src/vite/src/assets/sass/abstracts/_mixins.scss
@@ -25,7 +25,7 @@
 //
 //   Helper to create CSS vars & handle states for each button style.
 // --------------------------------------------------------------------
-@mixin button-color($bg: blue, $text: #fff, $mix: true) {
+@mixin button-color($bg: blue, $text: #fff, $mix: darken) {
   --ko-btn-bg: #{$bg};
   --ko-btn-border: #{$bg};
   --ko-btn-text: #{$text};
@@ -36,14 +36,13 @@
   // :hover colors
   --ko-btn-hover-text: #{$text};
 
-  @if $mix {
-    // $mix: $--color-mix-white;
-    --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
-    --ko-btn-hover-border: #{darken(saturate($bg, 5), 10)}; //mix($mix, $bg, 30%);
-
-    // --ko-btn-hover-bg: #{lighten(saturate($bg, 5), 10)};
-    // --ko-btn-hover-border: #{lighten(saturate($bg, 5), 10)};
-  } @else {
+  @if $mix == "darken" {
+    --ko-btn-hover-bg: #{darken(saturate($bg, 5), 10)};
+    --ko-btn-hover-border: #{darken(saturate($bg, 5), 10)};
+  } @else if $mix == "lighten" {
+    --ko-btn-hover-bg: #{lighten(saturate($bg, 5), 10)};
+    --ko-btn-hover-border: #{lighten(saturate($bg, 5), 10)};
+  } @else if $mix == false {
     --ko-btn-hover-bg: #{$bg};
     --ko-btn-hover-border: #{$bg};
   }

From d98413420f902257b8963d9084c437ed6b84a150 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:05:07 +0100
Subject: [PATCH 46/69] (about/support): use `lighten` hovers for the buttons
 (looks nicer)

---
 src/vite/src/assets/sass/pages/_about-support.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vite/src/assets/sass/pages/_about-support.scss b/src/vite/src/assets/sass/pages/_about-support.scss
index 8e79b531..f031f86e 100644
--- a/src/vite/src/assets/sass/pages/_about-support.scss
+++ b/src/vite/src/assets/sass/pages/_about-support.scss
@@ -40,9 +40,9 @@
 
 // extend our base buttons
 .ko-Btn--patreon {
-  @include button-color($bg: #eb491d, $mix: false);
+  @include button-color($bg: #eb491d, $mix: lighten);
 }
 
 .ko-Btn--paypal {
-  @include button-color($bg: #40acda, $mix: false);
+  @include button-color($bg: #40acda, $mix: lighten);
 }

From 1ac960da1ec62ea812b79335907144e2ff886b33 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:07:25 +0100
Subject: [PATCH 47/69] (Restudy List): implement "Clear learned list" action

---
 .../koohii/modules/study/actions/actions.class.php  | 13 ++++++-------
 .../modules/study/templates/failedlistSuccess.php   |  4 ++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/apps/koohii/modules/study/actions/actions.class.php b/src/apps/koohii/modules/study/actions/actions.class.php
index cf558e7f..c8806da5 100755
--- a/src/apps/koohii/modules/study/actions/actions.class.php
+++ b/src/apps/koohii/modules/study/actions/actions.class.php
@@ -143,21 +143,20 @@ public function executeEdit($request)
   }
 
   /**
-   * Clear learned list, then redirect to kanji
+   * Clear learned list, then redirect.
    * 
-   * study/clear?goto=< kanji | 0 >
+   * Because of the redirect, browser history doesn't keep
+   * this step, so the user can go "Back" without repeating this action.
    * 
    */
   public function executeClear($request)
   {
     LearnedKanjiPeer::clearAll($this->getUser()->getUserId());
 
-    // redirect
-    if (null !== ($gotoKanji = $request->getParameter('goto'))) {
-      $this->redirect('study/edit?id=' . $gotoKanji);
-    }
+    $goto =  $request->getParameter('goto');
+    $routeTo = $goto === 'restudy' ? 'study/failedlist' : 'study/kanji/1';
 
-    $this->forward404();
+    $this->redirect($routeTo);
   }
 
   /**
diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 58cc94e0..7c98125b 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -43,9 +43,9 @@
         <?php if ($learnedCount): ?>
           <?= link_to(
           '<i class="fa fa-times mr-2"></i>Clear learned list ',
-          'study/failedlist',
+          'study/clear?goto=restudy',
           ['class' => 'leading-1 text-danger-darker hover:underline ml-auto']
-          ); ?>
+        ); ?>
         <?php endif; ?>
       </div>
       

From 602379a8778b6285e6875f76908024f2ad706556 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:08:13 +0100
Subject: [PATCH 48/69] (Restudy List): fix link to the relevant "Learn More"
 section

---
 src/apps/koohii/modules/study/templates/failedlistSuccess.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 7c98125b..8e07698f 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -16,7 +16,7 @@
       <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
 <?php endif; ?>
 
-      <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#yaya', ['class' => 'whitespace-nowrap']); ?>
+      <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#restudy-list', ['class' => 'whitespace-nowrap']); ?>
 
       <div class="flex items-center">
         <button type="button" class="ko-Btn ko-Btn--danger ko-Btn--large" disabled="disabled">

From 4d84573fe3054bf80f53be17277e1c8ed1e3ebad Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:14:17 +0100
Subject: [PATCH 49/69] (Restudy List): fix "Begin Restudy" button route

---
 .../koohii/modules/study/templates/failedlistSuccess.php | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 8e07698f..28ad148f 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -19,15 +19,12 @@
       <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#restudy-list', ['class' => 'whitespace-nowrap']); ?>
 
       <div class="flex items-center">
-        <button type="button" class="ko-Btn ko-Btn--danger ko-Btn--large" disabled="disabled">
-          Begin Restudy<i class="fa fa-book ml-2"></i>
-        </button>
 
         <?php if ($restudyCount): ?>
         <?= _bs_button(
-  'Review All<i class="fa fa-arrow-right ml-2"></i>',
-  '@review',
-  ['query_string' => 'box=1', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-ghost ml-4']
+  'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
+  'study/edit',
+  ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large']
 );
         ?>
         <?php endif; ?>

From 37772a52e1e059c9f8cae7382bfe69756c02ae62 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 12:24:01 +0100
Subject: [PATCH 50/69] (Restudy List): "Begin Restudy" + disabled state +
 "Review All" buttons

---
 .../study/templates/failedlistSuccess.php     | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 28ad148f..46690a16 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -13,21 +13,44 @@
       <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
 <?php else: ?>
     <div class="ko-Box ko-Box--stroke ko-Box--success">
-      <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji !</h3>
+      <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji - Hooray!</h3>
 <?php endif; ?>
 
       <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#restudy-list', ['class' => 'whitespace-nowrap']); ?>
 
       <div class="flex items-center">
-
-        <?php if ($restudyCount): ?>
-        <?= _bs_button(
-  'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
-  'study/edit',
-  ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large']
-);
-        ?>
-        <?php endif; ?>
+<?php
+      if ($restudyCount)
+      {
+        echo _bs_button(
+          'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
+          'study/edit',
+          ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large']
+        );
+      }
+      else
+      {
+        echo _bs_button(
+          'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
+          '@review',
+          [
+            'query_string' => 'box=1',
+            'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-disabled',
+            'disabled' => true,
+          ]
+        );
+      }
+?>
+<?php
+      if ($restudyCount)
+      {
+        echo _bs_button(
+          'Review All<i class="fa fa-arrow-right ml-2"></i>',
+          '@review',
+          ['query_string' => 'box=1', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large is-ghost ml-4']
+        );
+      }
+?>
       </div>
     </div>
   </div>

From 4f58520874a6a952fb1886cb6ecbc75af56ca63f Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 15:41:28 +0100
Subject: [PATCH 51/69] (Restudy List): use "Begin" or "Continue" label on the
 restudy button

---
 src/apps/koohii/modules/study/templates/failedlistSuccess.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 46690a16..885bada4 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -20,10 +20,11 @@
 
       <div class="flex items-center">
 <?php
+      $restudyLabel = $learnedCount ? 'Continue Restudy' : 'Begin Restudy';
       if ($restudyCount)
       {
         echo _bs_button(
-          'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
+          $restudyLabel.'<i class="fa fa-book-open ml-2"></i>',
           'study/edit',
           ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger ko-Btn--large']
         );

From 5f2d1c351e434799d4cc2c6d91aa29f08aed6a40 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 16:05:31 +0100
Subject: [PATCH 52/69] (Restudy List): Learned Kanji empty state, fix review
 url

---
 .../study/templates/failedlistSuccess.php     | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 885bada4..70efa1d4 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -61,27 +61,44 @@
 
       <div class="flex">
         <h3 class="text-md font-bold text-body">Learned Kanji</h3>
-        <?php if ($learnedCount): ?>
+<?php if ($learnedCount): ?>
           <?= link_to(
-          '<i class="fa fa-times mr-2"></i>Clear learned list ',
-          'study/clear?goto=restudy',
-          ['class' => 'leading-1 text-danger-darker hover:underline ml-auto']
-        ); ?>
-        <?php endif; ?>
+  '<i class="fa fa-times mr-2"></i>Clear learned list ',
+  'study/clear?goto=restudy',
+  ['class' => 'leading-1 text-danger-darker hover:underline ml-auto']
+); ?>
+<?php endif; ?>
       </div>
       
-      <?php if ($learnedCount): ?>
-        <p><strong><?= $learnedCount; ?></strong> learned kanji are ready for review.</p>
-
-<?= _bs_button(
-          'Review Learned Kanji<i class="fa fa-arrow-right ml-2"></i>',
+<?php if ($learnedCount): ?>
+        <p>You have learned kanji ready for review!</p>
+<?php else: ?>
+        <p>No learned kanji to review.</p>
+<?php endif; ?>
+<?php
+      if ($learnedCount)
+      {
+        echo _bs_button(
+          "Review <strong>{$learnedCount}</strong> Learned Kanji".'<i class="fa fa-arrow-right ml-2"></i>',
           '@review',
           [
-            'query_string' => 'box=1',
+            'query_string' => 'type=relearned',
             'class' => 'ko-Btn ko-Btn--success ko-Btn--large',
           ]
-        ); ?>
-      <?php endif; ?>
+        );
+      }
+      else {
+        echo _bs_button(
+          'Review Learned Kanji<i class="fa fa-arrow-right ml-2"></i>',
+          '@review',
+          [
+            'query_string' => 'type=relearned',
+            'class' => 'ko-Btn ko-Btn--success ko-Btn--large is-disabled',
+            'disabled' => true,
+          ]
+        );
+      }
+?>
 
     </div>
   </div>

From 085946fda7c401ed0d95832e2634765f657ce400 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 17:00:21 +0100
Subject: [PATCH 53/69] (_SideColumn.php): clean up a bit the restudy/learned
 count handling

---
 .../modules/study/actions/actions.class.php   |  4 +--
 .../modules/study/templates/_LearnedPanel.php |  6 ++--
 .../modules/study/templates/_SideColumn.php   | 28 ++++++++++++-------
 3 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/apps/koohii/modules/study/actions/actions.class.php b/src/apps/koohii/modules/study/actions/actions.class.php
index c8806da5..041328a0 100755
--- a/src/apps/koohii/modules/study/actions/actions.class.php
+++ b/src/apps/koohii/modules/study/actions/actions.class.php
@@ -64,9 +64,7 @@ public function executeEdit($request)
         $ucsId = ReviewsPeer::getNextUnlearnedKanji($userId);
         $this->forward404Unless($ucsId !== false);
 
-        // the flag is also the restudy total
-        $restudyCount = ReviewsPeer::getRestudyKanjiCount($userId);
-        $this->getUser()->setAttribute(rtkUser::IS_RESTUDY_SESSION, $restudyCount);
+        $this->getUser()->setAttribute(rtkUser::IS_RESTUDY_SESSION, true);
       }
       // study
       else
diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 6561926a..7c683df1 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -1,7 +1,7 @@
 <?php
-  // the restudy session flag is also a cache of the count of failed cards
-  $failedCount = $sf_user->getAttribute(rtkUser::IS_RESTUDY_SESSION, 0);
-  $ofTotal = $failedCount > 0 ? " of {$failedCount}" : '';
+  $restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId());
+
+  $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
 <div id="study-learned" class="study-action-comp no-gutter-xs-sm dsk:mb-4">
 
diff --git a/src/apps/koohii/modules/study/templates/_SideColumn.php b/src/apps/koohii/modules/study/templates/_SideColumn.php
index 88259131..74f7c31d 100755
--- a/src/apps/koohii/modules/study/templates/_SideColumn.php
+++ b/src/apps/koohii/modules/study/templates/_SideColumn.php
@@ -1,6 +1,6 @@
 <?php
   use_helper('CJK', 'Form');
-  
+
   // file hash matches the ones output by Vite build (cf .htaccess rule)
   $FILEHASH = '20211019';
   $rtkIndex = $sf_user->getUserSequence(); // 0 = OLD, 1 = NEW
@@ -16,27 +16,35 @@
 ?>
 
 <div class="col-lg-3 mb-3">
-<?php 
+<?php
   include_partial('study/StudySearch', ['framenum' => $framenum]);
 
-  //FIXME : optimizer avec une cache, on cache le learnedcount !!
+  $isRestudyStarted = $sf_user->hasAttribute(rtkUser::IS_RESTUDY_SESSION);
+  $restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId());
   $learnedCount = LearnedKanjiPeer::getCount($sf_user->getUserId());
 
-  if ($sf_user->hasAttribute(rtkUser::IS_RESTUDY_SESSION) || $learnedCount > 0) {
-    include_partial('study/LearnedPanel', ['learnedCount' => $learnedCount, 'kanji' => $cur_kanji]);
+  if ($isRestudyStarted || $learnedCount > 0)
+  {
+    include_partial('study/LearnedPanel', [
+      'learnedCount' => $learnedCount,
+      'restudyCount' => $restudyCount,
+      'kanji' => $cur_kanji,
+    ]);
   }
-  else if ($restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId())) {
-    include_partial('RestudyList', ['restudy_count' => $restudyCount, 'kanji' => $cur_kanji]);
+  elseif ($restudyCount)
+  {
+    include_partial('RestudyList', [
+      'restudyCount' => $restudyCount,
+    ]);
   }
-
 ?>
 
   <div class="visible-md-lg ko-Box mb-3">
     <h3>Links</h3>
-    <div class="mb-2"><?php echo link_to('My stories','study/mystories') ?></div>
+    <div class="mb-2"><?= link_to('My stories', 'study/mystories'); ?></div>
   </div>
   
 
 </div><!-- /col -->
 
-<?php kk_globals_put('STUDY_SEARCH_URL', url_for('study/kanji', true)) ?>
\ No newline at end of file
+<?php kk_globals_put('STUDY_SEARCH_URL', url_for('study/kanji', true)); ?>
\ No newline at end of file

From d86792f62679ab7f56ef36ba5b94676636212e62 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 17:00:55 +0100
Subject: [PATCH 54/69] (Restudy List): implement sidebar "Restudy" pane,
 delete old css

---
 .../modules/study/templates/_RestudyList.php  | 30 ++++++++-----------
 .../src/assets/sass/study-base.build.scss     | 29 ------------------
 2 files changed, 13 insertions(+), 46 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_RestudyList.php b/src/apps/koohii/modules/study/templates/_RestudyList.php
index 873319e5..730c0300 100755
--- a/src/apps/koohii/modules/study/templates/_RestudyList.php
+++ b/src/apps/koohii/modules/study/templates/_RestudyList.php
@@ -1,17 +1,13 @@
-<?php 
-  // $ucsId    = ReviewsPeer::getNextUnlearnedKanji($sf_user->getUserId());
-  // $kanji    = KanjisPeer::getKanjiByUCS($ucsId);
-  // $next_uri = 'study/edit?id='.$kanji->kanji;
- ?>
-
-<div id="study-restudy" class="study-action-comp no-gutter-xs-sm dsk:mb-4">
-  <div class="mbl:flex items-center">
-
-    <h3 class="">Restudy <strong><?php echo $restudy_count ?></strong></h3>
-
-    <div class="mbl:ml-auto">
-      <?php echo link_to('Start', 'study/edit', ['query_string' => "restudy", 'class' => 'ko-Btn is-ghost']) ?>
-    </div>
-
-  </div>
-</div>
+<?php
+?>
+<div class="ko-Box ko-Box--danger ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
+  <h3 class="text-danger-dark font-bold leading-1 mb-2">Restudy</h3>
+  <p class="text-danger-darker text-sm mb-2">
+    <strong><?= $restudyCount; ?></strong> Forgotten Kanji
+  </p>
+<?= _bs_button(
+  'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
+  'study/edit',
+  ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger']
+); ?>
+</div>
\ No newline at end of file
diff --git a/src/vite/src/assets/sass/study-base.build.scss b/src/vite/src/assets/sass/study-base.build.scss
index c6a21458..170d81fc 100644
--- a/src/vite/src/assets/sass/study-base.build.scss
+++ b/src/vite/src/assets/sass/study-base.build.scss
@@ -354,35 +354,6 @@
 /* Learned            */
 /* ------------------ */
 
-/* unlike search box, these blocks do not extend to edges, so they are distinct
-    from the search bar, and appear as part of the main content */
-.study-action-comp {
-  @apply py-2 px-4;
-}
-.study-action-comp h3,
-.study-action-comp .btn {
-  font-size: 18px;
-}
-.study-action-comp h3 {
-  font-weight: normal;
-  line-height: 34px;
-}
-
-/* tighten buttons a bit*/
-.study-action-comp .btn {
-  padding: 7px 12px;
-  line-height: 1em;
-}
-
-/* restudy pane */
-#study-restudy {
-  background: #ff7875;
-}
-#study-restudy,
-#study-restudy h3 {
-  color: #861c1c;
-}
-
 /* learned pane */
 #study-learned {
   background: #c7dfa9;

From f6a8e1b2df04fcdcb405c91d5092d1928830205e Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Fri, 25 Mar 2022 17:09:51 +0100
Subject: [PATCH 55/69] (Restudy List): implement sidebar "Learned" pane

---
 .../modules/study/templates/_LearnedPanel.php | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 7c683df1..701cedd5 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -3,23 +3,36 @@
 
   $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
-<div id="study-learned" class="study-action-comp no-gutter-xs-sm dsk:mb-4">
-
-  <div class="mbl:flex items-center">
-
-    <h3 class="m-0 dsk:mb-2">Learned <strong><?= $learnedCount; ?></strong><?= $ofTotal; ?></h3>
-
-    <div class="flex items-center -mx-1 mbl:w-[182px] mbl:ml-auto dsk:mb-2">
-      <div class="w-1/2 mx-1">
-        <?= link_to('Clear', 'study/clear?goto='.$kanji, ['class' => 'ko-Btn ko-Btn--danger']); ?>
-      </div>
-  
-      <div class="w-1/2 mx-1 mbl:ml-4">
-<?php if ($learnedCount > 0): ?>
-        <?= link_to('Review', '@review', ['query_string' => 'type=relearned', 'class' => 'ko-Btn ko-Btn--success']); ?>
-<?php endif; ?>
-      </div>
-
-    </div>
-  </div>
-</div>
\ No newline at end of file
+<div class="ko-Box ko-Box--success ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
+  <h3 class="text-success-dark font-bold leading-1 mb-2">Learned</h3>
+  <p class="text-success-darker text-sm mb-2">
+    <strong><?= $learnedCount; ?></strong>
+    of
+    <strong><?= $restudyCount; ?></strong> Forgotten Kanji
+  </p>
+<?php
+      if ($learnedCount)
+      {
+        echo _bs_button(
+          'Review Learned'.'<i class="fa fa-arrow-right ml-2"></i>',
+          '@review',
+          [
+            'query_string' => 'type=relearned',
+            'class' => 'ko-Btn ko-Btn--success',
+          ]
+        );
+      }
+      else
+      {
+        echo _bs_button(
+          'Review Learned<i class="fa fa-arrow-right ml-2"></i>',
+          '@review',
+          [
+            'query_string' => 'type=relearned',
+            'class' => 'ko-Btn ko-Btn--success is-disabled',
+            'disabled' => true,
+          ]
+        );
+      }
+?>
+</div>

From 0ddfdc02af5d4c48f7d826f47afcf3bfe4fc1dac Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 12:12:00 +0200
Subject: [PATCH 56/69] (Restudy List): simplify conditional

Show the "Learned 0 of X" pane after user clicks "Begin Restudy".

If user moves to another kanji, then the pane goes back to "Restudy"
(red) - until there is at least one kanji in the learned list, in which
case the "Learned" pane is shown.
---
 src/apps/koohii/lib/rtkUser.php                         | 3 ---
 src/apps/koohii/modules/study/actions/actions.class.php | 3 ++-
 src/apps/koohii/modules/study/templates/_SideColumn.php | 3 +--
 src/apps/koohii/modules/study/templates/editSuccess.php | 5 ++++-
 src/lib/peer/LearnedKanjiPeer.php                       | 3 ---
 5 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/apps/koohii/lib/rtkUser.php b/src/apps/koohii/lib/rtkUser.php
index 9c73f47b..c45aa04c 100644
--- a/src/apps/koohii/lib/rtkUser.php
+++ b/src/apps/koohii/lib/rtkUser.php
@@ -40,9 +40,6 @@ class rtkUser extends sfBasicSecurityUser
   public const CREDENTIAL_ADMIN = 'admin';
   public const CREDENTIAL_MEMBER = 'member';
 
-  // Misc. states that do not need database permanence
-  public const IS_RESTUDY_SESSION = 'study.restudy.start';
-
   // misc. session attributes
   public const KNOWN_KANJI = 'kanji.known';
 
diff --git a/src/apps/koohii/modules/study/actions/actions.class.php b/src/apps/koohii/modules/study/actions/actions.class.php
index 041328a0..878c8189 100755
--- a/src/apps/koohii/modules/study/actions/actions.class.php
+++ b/src/apps/koohii/modules/study/actions/actions.class.php
@@ -64,7 +64,8 @@ public function executeEdit($request)
         $ucsId = ReviewsPeer::getNextUnlearnedKanji($userId);
         $this->forward404Unless($ucsId !== false);
 
-        $this->getUser()->setAttribute(rtkUser::IS_RESTUDY_SESSION, true);
+        // show the "Learned" pane
+        $this->isBeginRestudy = true;
       }
       // study
       else
diff --git a/src/apps/koohii/modules/study/templates/_SideColumn.php b/src/apps/koohii/modules/study/templates/_SideColumn.php
index 74f7c31d..7ab7ddae 100755
--- a/src/apps/koohii/modules/study/templates/_SideColumn.php
+++ b/src/apps/koohii/modules/study/templates/_SideColumn.php
@@ -19,11 +19,10 @@
 <?php
   include_partial('study/StudySearch', ['framenum' => $framenum]);
 
-  $isRestudyStarted = $sf_user->hasAttribute(rtkUser::IS_RESTUDY_SESSION);
   $restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId());
   $learnedCount = LearnedKanjiPeer::getCount($sf_user->getUserId());
 
-  if ($isRestudyStarted || $learnedCount > 0)
+  if ($isBeginRestudy || $learnedCount > 0)
   {
     include_partial('study/LearnedPanel', [
       'learnedCount' => $learnedCount,
diff --git a/src/apps/koohii/modules/study/templates/editSuccess.php b/src/apps/koohii/modules/study/templates/editSuccess.php
index 53b90e34..b237d540 100755
--- a/src/apps/koohii/modules/study/templates/editSuccess.php
+++ b/src/apps/koohii/modules/study/templates/editSuccess.php
@@ -48,7 +48,10 @@ function get_flashcard_button($userId, $context, $ucsId) {
 
 <div class="row">
 
-<?php include_partial('SideColumn', ['kanjiData' => $kanjiData, 'intro' => false ]) ?>
+<?php include_partial('SideColumn', [
+  'kanjiData' => $kanjiData,
+  'isBeginRestudy' => $isBeginRestudy ?? false
+  ]) ?>
 
   <div class="col-lg-9">
 
diff --git a/src/lib/peer/LearnedKanjiPeer.php b/src/lib/peer/LearnedKanjiPeer.php
index f9c982ec..e7a9e8c7 100755
--- a/src/lib/peer/LearnedKanjiPeer.php
+++ b/src/lib/peer/LearnedKanjiPeer.php
@@ -118,9 +118,6 @@ public static function clearKanjis($userId, array $ucsIds)
    */
   public static function clearAll($userId)
   {
-    $user = sfContext::getInstance()->getUser();
-    $user->getAttributeHolder()->remove(rtkUser::IS_RESTUDY_SESSION);
-
     return self::getInstance()->delete('userid = ?', $userId);
   }
 

From 65446ced7e00f4a268b5d1b79bd57213bc8d2f81 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 12:12:52 +0200
Subject: [PATCH 57/69] (Restudy List): add Restudy List link to the Restudy &
 Learned panes

---
 src/apps/koohii/modules/study/templates/_LearnedPanel.php | 5 ++++-
 src/apps/koohii/modules/study/templates/_RestudyList.php  | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 701cedd5..7c05bf98 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -4,7 +4,10 @@
   $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
 <div class="ko-Box ko-Box--success ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
-  <h3 class="text-success-dark font-bold leading-1 mb-2">Learned</h3>
+  <div class="flex items-center mb-2">
+    <h3 class="text-success-dark font-bold leading-1 mb-0">Learned</h3>
+    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
+  </div>
   <p class="text-success-darker text-sm mb-2">
     <strong><?= $learnedCount; ?></strong>
     of
diff --git a/src/apps/koohii/modules/study/templates/_RestudyList.php b/src/apps/koohii/modules/study/templates/_RestudyList.php
index 730c0300..14c9abd7 100755
--- a/src/apps/koohii/modules/study/templates/_RestudyList.php
+++ b/src/apps/koohii/modules/study/templates/_RestudyList.php
@@ -1,7 +1,10 @@
 <?php
 ?>
 <div class="ko-Box ko-Box--danger ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
-  <h3 class="text-danger-dark font-bold leading-1 mb-2">Restudy</h3>
+  <div class="flex items-center mb-2">
+    <h3 class="text-danger-dark font-bold leading-1 mb-0">Restudy</h3>
+    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
+  </div>
   <p class="text-danger-darker text-sm mb-2">
     <strong><?= $restudyCount; ?></strong> Forgotten Kanji
   </p>

From 3f75a4db1c3a011170a5705b8078118d869949af Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 12:36:48 +0200
Subject: [PATCH 58/69] (styleguide): add plain (filled) danger/success boxes,
 tweak bg colors

---
 src/vite/src/assets/sass/main.build.scss   |  8 ++++++--
 src/vite/src/vue/styleguide/Styleguide.vue | 10 ++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/vite/src/assets/sass/main.build.scss b/src/vite/src/assets/sass/main.build.scss
index 43d105b5..6cf2884f 100644
--- a/src/vite/src/assets/sass/main.build.scss
+++ b/src/vite/src/assets/sass/main.build.scss
@@ -143,10 +143,14 @@ a.admin-edit {
 
   // colors
   &--danger {
-    --ko-box-bg: #ff636399;
+    --ko-box-bg: #ffd1c9;
   }
+  &--danger#{&}--stroke {
+    --ko-box-bg: #F2A5A5; // slightly darker for border variant
+  }
+
   &--success {
-    --ko-box-bg: #6ca02a7a;
+    --ko-box-bg: #d1e2bb;
   }
 }
 
diff --git a/src/vite/src/vue/styleguide/Styleguide.vue b/src/vite/src/vue/styleguide/Styleguide.vue
index de9f6c75..be7568ae 100644
--- a/src/vite/src/vue/styleguide/Styleguide.vue
+++ b/src/vite/src/vue/styleguide/Styleguide.vue
@@ -13,6 +13,16 @@
           <h3 class="text-md font-bold text-body">Card Title</h3>
           <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         </div>
+        <div class="min-w-[200px] ml-4 ko-Box ko-Box--danger">
+          <h3 class="text-md font-bold text-danger-darker">Card Title</h3>
+          <p class="mb-0 text-danger-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p>
+        </div>
+        <div class="min-w-[200px] ml-4 ko-Box ko-Box--success">
+          <h3 class="text-md font-bold text-success-darker">Card Title</h3>
+          <p
+            class="mb-0 text-success-dark"
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
       </div>
       <div class="flex mb-0">
         <span class="self-center font-bold min-w-[100px]">stroke</span>

From 6bd81e5ec33817309668aca1623cdb3c2d5cdb3a Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 12:37:09 +0200
Subject: [PATCH 59/69] (Restudy List): use plain (filled) styles for Learned &
 Restudy panes

---
 src/apps/koohii/modules/study/templates/_LearnedPanel.php | 2 +-
 src/apps/koohii/modules/study/templates/_RestudyList.php  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 7c05bf98..cc758b35 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -3,7 +3,7 @@
 
   $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
-<div class="ko-Box ko-Box--success ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
+<div class="ko-Box ko-Box--success no-gutter-xs-sm dsk:mb-4">
   <div class="flex items-center mb-2">
     <h3 class="text-success-dark font-bold leading-1 mb-0">Learned</h3>
     <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
diff --git a/src/apps/koohii/modules/study/templates/_RestudyList.php b/src/apps/koohii/modules/study/templates/_RestudyList.php
index 14c9abd7..306cc034 100755
--- a/src/apps/koohii/modules/study/templates/_RestudyList.php
+++ b/src/apps/koohii/modules/study/templates/_RestudyList.php
@@ -1,8 +1,8 @@
 <?php
 ?>
-<div class="ko-Box ko-Box--danger ko-Box--stroke no-gutter-xs-sm dsk:mb-4">
+<div class="ko-Box ko-Box--danger no-gutter-xs-sm dsk:mb-4">
   <div class="flex items-center mb-2">
-    <h3 class="text-danger-dark font-bold leading-1 mb-0">Restudy</h3>
+    <h3 class="text-danger-darker font-bold leading-1 mb-0">Restudy</h3>
     <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
   </div>
   <p class="text-danger-darker text-sm mb-2">

From a982b517a313ffa04957e57bbb7d944de9e30e35 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 15:45:53 +0200
Subject: [PATCH 60/69] (Restudy List): rename _RestudyList.php

---
 .../study/templates/{_RestudyList.php => _RestudyPanel.php}   | 0
 src/apps/koohii/modules/study/templates/_SideColumn.php       | 4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename src/apps/koohii/modules/study/templates/{_RestudyList.php => _RestudyPanel.php} (100%)

diff --git a/src/apps/koohii/modules/study/templates/_RestudyList.php b/src/apps/koohii/modules/study/templates/_RestudyPanel.php
similarity index 100%
rename from src/apps/koohii/modules/study/templates/_RestudyList.php
rename to src/apps/koohii/modules/study/templates/_RestudyPanel.php
diff --git a/src/apps/koohii/modules/study/templates/_SideColumn.php b/src/apps/koohii/modules/study/templates/_SideColumn.php
index 7ab7ddae..f8cfeb95 100755
--- a/src/apps/koohii/modules/study/templates/_SideColumn.php
+++ b/src/apps/koohii/modules/study/templates/_SideColumn.php
@@ -24,7 +24,7 @@
 
   if ($isBeginRestudy || $learnedCount > 0)
   {
-    include_partial('study/LearnedPanel', [
+    include_partial('LearnedPanel', [
       'learnedCount' => $learnedCount,
       'restudyCount' => $restudyCount,
       'kanji' => $cur_kanji,
@@ -32,7 +32,7 @@
   }
   elseif ($restudyCount)
   {
-    include_partial('RestudyList', [
+    include_partial('RestudyPanel', [
       'restudyCount' => $restudyCount,
     ]);
   }

From 44aaeb593e0a786bb6d904eab8670aee43c7dac0 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 15:50:15 +0200
Subject: [PATCH 61/69] (Restudy List): mobile layout for the Restudy & Learned
 panes

---
 .../modules/study/templates/_LearnedPanel.php    | 16 +++++++++-------
 .../modules/study/templates/_RestudyPanel.php    | 14 ++++++++------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index cc758b35..21632320 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -3,16 +3,17 @@
 
   $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
-<div class="ko-Box ko-Box--success no-gutter-xs-sm dsk:mb-4">
+<div class="ko-Box ko-Box--success no-gutter-xs-sm dsk:mb-4 mbl:rounded-none">
   <div class="flex items-center mb-2">
     <h3 class="text-success-dark font-bold leading-1 mb-0">Learned</h3>
-    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
+    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm leading-1 ml-auto mbl:ml-4']); ?>
   </div>
-  <p class="text-success-darker text-sm mb-2">
-    <strong><?= $learnedCount; ?></strong>
-    of
-    <strong><?= $restudyCount; ?></strong> Forgotten Kanji
-  </p>
+  <div class="mbl:flex flex-wrap items-center justify-between">
+    <p class="text-success-darker text-sm mb-2 mbl:mb-0">
+      <strong><?= $learnedCount; ?></strong>
+      of
+      <strong><?= $restudyCount; ?></strong> Forgotten Kanji
+    </p>
 <?php
       if ($learnedCount)
       {
@@ -38,4 +39,5 @@
         );
       }
 ?>
+  </div>
 </div>
diff --git a/src/apps/koohii/modules/study/templates/_RestudyPanel.php b/src/apps/koohii/modules/study/templates/_RestudyPanel.php
index 306cc034..3b0fce1d 100755
--- a/src/apps/koohii/modules/study/templates/_RestudyPanel.php
+++ b/src/apps/koohii/modules/study/templates/_RestudyPanel.php
@@ -1,16 +1,18 @@
 <?php
 ?>
-<div class="ko-Box ko-Box--danger no-gutter-xs-sm dsk:mb-4">
+<div class="ko-Box ko-Box--danger no-gutter-xs-sm dsk:mb-4 mbl:rounded-none">
   <div class="flex items-center mb-2">
     <h3 class="text-danger-darker font-bold leading-1 mb-0">Restudy</h3>
-    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm ml-auto']); ?>
+    <?= link_to('List', 'study/failedlist', ['class' => 'text-sm leading-1 ml-auto mbl:ml-4']); ?>
   </div>
-  <p class="text-danger-darker text-sm mb-2">
-    <strong><?= $restudyCount; ?></strong> Forgotten Kanji
-  </p>
+  <div class="mbl:flex flex-wrap items-center justify-between">
+    <p class="text-danger-darker text-sm mb-2 mbl:mb-0">
+      <strong><?= $restudyCount; ?></strong> Forgotten Kanji
+    </p>
 <?= _bs_button(
   'Begin Restudy<i class="fa fa-book-open ml-2"></i>',
   'study/edit',
   ['query_string' => 'restudy', 'class' => 'ko-Btn ko-Btn--danger']
 ); ?>
-</div>
\ No newline at end of file
+  </div>
+</div>

From 80904da2166ae6c6721a767dcd01bddadfb8a942 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:06:31 +0200
Subject: [PATCH 62/69] (rtkValidators.php): add static method to normalize
 booleans

---
 src/apps/koohii/lib/rtkValidators.php | 40 +++++++++++++++++++--------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/apps/koohii/lib/rtkValidators.php b/src/apps/koohii/lib/rtkValidators.php
index 7938cf9c..b681f057 100644
--- a/src/apps/koohii/lib/rtkValidators.php
+++ b/src/apps/koohii/lib/rtkValidators.php
@@ -6,32 +6,31 @@
  * an integer, the value argument is always a string coming from GET/POST requests.
  *
  * Validate methods:
- *   
+ *
  *   validateUsername($value)
  *   validateNoHtmlTags($value)
  *
  * Sanitize methods (validate & return value in the expected type or throws exception):
- *   
+ *
  *   sanitizeCJKUnifiedUCS($value)
- * 
- * 
+ *
  * @author     Fabrice Denis
  */
-
 class rtkValidators
 {
   /**
    * Validate RevTK username.
-   * 
-   * @return 
+   *
    * @param object $value
    * @param object $params
+   *
+   * @return
    */
   public static function validateUsername($value)
   {
     // no special characters
     $valid = (preg_match('/^[a-zA-Z0-9_]+$/', $value) > 0);
-    
+
     // no leet prefix, suffix or multiple non-alphanumeric characters
     $valid = $valid && (preg_match('/^[0-9_]|_$|__/', $value) === 0);
 
@@ -40,20 +39,39 @@ public static function validateUsername($value)
 
   public static function validateUserLocation($value)
   {
-    return BaseValidators::validateNoHtmlTags($value) &&
-           BaseValidators::validateMysqlUtf8($value);
+    return BaseValidators::validateNoHtmlTags($value)
+           && BaseValidators::validateMysqlUtf8($value);
+  }
+
+  /**
+   * Always returns a bool. Best used for checking boolean request parameters,
+   * to accept 'truthy' values. Less prone to break when updating forms.
+   *
+   * @param mixed $value
+   *
+   * @return bool
+   */
+  public static function sanitizeBool($value)
+  {
+    return
+      true === $value
+      || 'true' === $value
+      || 0 !== intval($value);
   }
 
   /**
    * Cast value to an int, and makes sure it checks against supported CJK range.
    *
+   * @param mixed $value
+   *
    * @return int
    */
   public static function sanitizeCJKUnifiedUCS($value)
   {
     $ucs_code = BaseValidators::sanitizeInteger($value);
 
-    if (!CJK::isCJKUnifiedUCS($ucs_code)) {
+    if (!CJK::isCJKUnifiedUCS($ucs_code))
+    {
       throw new sfException(__METHOD__);
     }
 

From 8a2eb79adb05ef2bfc3cfce369229409f1e189a4 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:08:29 +0200
Subject: [PATCH 63/69] (Restudy List): return user to the list if using
 "Study" from the table

Attempt to improve the flow, if the user doesn't use "Continue Restudy"
but instead wants to pick from the list. The "Study" link will return
the user to the Restudy List, after they select "Add to learned list"
on the Study page.
---
 .../study/actions/FailedListTableComponent.class.php      | 8 ++++++--
 src/apps/koohii/modules/study/actions/actions.class.php   | 8 ++++++++
 src/apps/koohii/modules/study/templates/editSuccess.php   | 1 +
 src/vite/src/vue/KoohiiEditStory.vue                      | 2 ++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php b/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
index a2bba7de..b773df74 100755
--- a/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
+++ b/src/apps/koohii/modules/study/actions/FailedListTableComponent.class.php
@@ -87,7 +87,7 @@ public function getConfig()
         {
           "caption":   "Learned",
           "width":     1,
-          "cssClass":  "text-right",
+          "cssClass":  "text-center",
           "colData":   "is_learned",
           "colDisplay":  "_learned"
         }
@@ -107,9 +107,13 @@ public function filterDisplayData(uiSelectTableRow $row)
     $rowData['_lastreview'] = simple_format_date((int)$rowData['ts_lastreview'], rtkLocale::DATE_SHORT);
     
     $isLearned = (int)$rowData['is_learned'];
+    
     $rowData['_learned'] = $isLearned
       ? '<span class="ko-RestudyList-learned">LEARNED</span>'
-      : '';
+      : link_to_keyword('Study', $rowData['kanji'], [
+        'class' => 'text-danger',
+        'query_string' => 'from=restudy-list'
+      ]);
   }
   
   public function validateRowData(array $rowData)
diff --git a/src/apps/koohii/modules/study/actions/actions.class.php b/src/apps/koohii/modules/study/actions/actions.class.php
index 878c8189..a9ec3662 100755
--- a/src/apps/koohii/modules/study/actions/actions.class.php
+++ b/src/apps/koohii/modules/study/actions/actions.class.php
@@ -34,6 +34,8 @@ public function executeIndex($request)
    * Convert the search term to a framenum parameter and forward to index.
    * 
    * @url  /study/kanji/:id
+   * 
+   * @param coreRequest $request
    *
    */
   public function executeEdit($request)
@@ -93,6 +95,12 @@ public function executeEdit($request)
       {
         LearnedKanjiPeer::addKanji($userId, $ucsId);
 
+        // if user navigates from the Restudy List, goes back there
+        if (rtkValidators::sanitizeBool($request->getParameter('fromRestudyList')))
+        {
+          $this->redirect('study/failedlist');
+        }
+
         // redirect to next restudy kanji
         $nextId = ReviewsPeer::getNextUnlearnedKanji($userId);
         if ($nextId !== false)
diff --git a/src/apps/koohii/modules/study/templates/editSuccess.php b/src/apps/koohii/modules/study/templates/editSuccess.php
index b237d540..157b479b 100755
--- a/src/apps/koohii/modules/study/templates/editSuccess.php
+++ b/src/apps/koohii/modules/study/templates/editSuccess.php
@@ -169,6 +169,7 @@ function get_flashcard_button($userId, $context, $ucsId) {
       'custKeyword' => $custKeyword,
 
       // Study page only (not for flashcards "edit story" dialog)
+      'fromRestudyList' => $sf_request->getParameter('from') === 'restudy-list',
       'showLearnButton' => $showLearnButton,
       'showLearnedMessage' => $showLearnedMessage,
     ];
diff --git a/src/vite/src/vue/KoohiiEditStory.vue b/src/vite/src/vue/KoohiiEditStory.vue
index 4997afdb..14f766df 100644
--- a/src/vite/src/vue/KoohiiEditStory.vue
+++ b/src/vite/src/vue/KoohiiEditStory.vue
@@ -3,6 +3,7 @@
     <form name="EditStory" method="post" action="/study/kanji/1">
       <!-- we still need this for the "Add to learned list" submit which is NOT ajax -->
       <input :value="kanjiData.ucs_id" type="hidden" name="ucs_code" />
+      <input :value="fromRestudyList" type="hidden" name="fromRestudyList" />
 
       <div id="my-story" lang="ja">
         <div ref="maskArea" class="padding rtkframe flex">
@@ -222,6 +223,7 @@ export default defineComponent({
     initFavoriteStory: { type: Boolean, default: false },
 
     // Study page only, "Add to learned list" functionality
+    fromRestudyList: { type: Boolean, default: false },
     showLearnButton: { type: Boolean, default: false },
     showLearnedMessage: { type: Boolean, default: false },
 

From 9e3f01b92c23c2c80b20f8800ecbf96a5ea06e84 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:10:08 +0200
Subject: [PATCH 64/69] (Restudy List): dont show "Review All" if all forgotten
 kanji are "learned"

Avoid confusing UX where two buttons with different styles end up
doing the same thing when in this state (user now should pick
"Review Learned Kanji")
---
 src/apps/koohii/modules/study/templates/failedlistSuccess.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 70efa1d4..2496fc86 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -43,7 +43,8 @@
       }
 ?>
 <?php
-      if ($restudyCount)
+      // don't show if all are learned (less confusing)
+      if ($restudyCount && $restudyCount > $learnedCount)
       {
         echo _bs_button(
           'Review All<i class="fa fa-arrow-right ml-2"></i>',

From 7fe1417ee9db0df0d85235accfc90091b90d0a72 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:10:35 +0200
Subject: [PATCH 65/69] (Restudy List): disable the Restudy button if all are
 learned

---
 src/apps/koohii/modules/study/templates/failedlistSuccess.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 2496fc86..58fac4bb 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -21,7 +21,8 @@
       <div class="flex items-center">
 <?php
       $restudyLabel = $learnedCount ? 'Continue Restudy' : 'Begin Restudy';
-      if ($restudyCount)
+      // also disable when all are learned!
+      if ($restudyCount && $learnedCount < $restudyCount)
       {
         echo _bs_button(
           $restudyLabel.'<i class="fa fa-book-open ml-2"></i>',

From b411ea05690678bc19eb52c1a3e0a6ad65a74ed4 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:12:44 +0200
Subject: [PATCH 66/69] (package.json): typescript 4.6.2, vue-tsc 0.33.7 ...

... attempt to fix error when running vue-tsc, stopped working for
whatever reason. Still doesn't work.
---
 src/vite/package-lock.json | 529 +++++--------------------------------
 src/vite/package.json      |   4 +-
 2 files changed, 72 insertions(+), 461 deletions(-)

diff --git a/src/vite/package-lock.json b/src/vite/package-lock.json
index 4899b18b..1f38a2a5 100644
--- a/src/vite/package-lock.json
+++ b/src/vite/package-lock.json
@@ -206,7 +206,8 @@
     "@babel/helper-validator-identifier": {
       "version": "7.14.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
-      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g=="
+      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.12.17",
@@ -291,7 +292,8 @@
     "@babel/parser": {
       "version": "7.15.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.5.tgz",
-      "integrity": "sha512-2hQstc6I7T6tQsWzlboMh3SgMRPaS4H6H7cPQsJkdzTzEGqQrpLDsE2BGASU5sBPoEQyHzeqU6C8uKbFeEk6sg=="
+      "integrity": "sha512-2hQstc6I7T6tQsWzlboMh3SgMRPaS4H6H7cPQsJkdzTzEGqQrpLDsE2BGASU5sBPoEQyHzeqU6C8uKbFeEk6sg==",
+      "dev": true
     },
     "@babel/template": {
       "version": "7.12.13",
@@ -352,6 +354,7 @@
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.4.tgz",
       "integrity": "sha512-0f1HJFuGmmbrKTCZtbm3cU+b/AqdEYk5toj5iQur58xkVMlS0JWaKxTBSmCXd47uiN7vbcozAupm6Mvs80GNhw==",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.14.9",
         "to-fast-properties": "^2.0.0"
@@ -362,27 +365,6 @@
       "resolved": "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz",
       "integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
     },
-    "@emmetio/abbreviation": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@emmetio/abbreviation/-/abbreviation-2.2.3.tgz",
-      "integrity": "sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA==",
-      "requires": {
-        "@emmetio/scanner": "^1.0.0"
-      }
-    },
-    "@emmetio/css-abbreviation": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@emmetio/css-abbreviation/-/css-abbreviation-2.1.4.tgz",
-      "integrity": "sha512-qk9L60Y+uRtM5CPbB0y+QNl/1XKE09mSO+AhhSauIfr2YOx/ta3NJw2d8RtCFxgzHeRqFRr8jgyzThbu+MZ4Uw==",
-      "requires": {
-        "@emmetio/scanner": "^1.0.0"
-      }
-    },
-    "@emmetio/scanner": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.0.tgz",
-      "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA=="
-    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -822,151 +804,75 @@
       "dev": true
     },
     "@volar/code-gen": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.31.4.tgz",
-      "integrity": "sha512-ngivMEbBNd19v+EHdLyCJoIGRaoD9J4P20ZgdCEGf2voztja59u3Tilpf9r9ENy/731nG7XncToYm4+c1t/LhA==",
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.33.7.tgz",
+      "integrity": "sha512-h3mezVitiCtd3KUI8ydHNK+dJFi6T1l4Uh733ulaZJxUn8aBfRIFgrQpQtwuNJVtR6qpRU9Kbjo+ePfMVWNdpQ==",
       "requires": {
-        "@volar/shared": "0.31.4",
-        "@volar/source-map": "0.31.4"
+        "@volar/source-map": "0.33.7"
       }
     },
-    "@volar/html2pug": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/html2pug/-/html2pug-0.31.4.tgz",
-      "integrity": "sha512-+whoP4C34kbCIRyoojZE6luqs7Ep/0YDBD9yEWu82G1ECLIFoujtkZXHbAHiQH8MIs/GwjUmozd85pUGAVQf1w==",
+    "@volar/pug-language-service": {
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/pug-language-service/-/pug-language-service-0.33.7.tgz",
+      "integrity": "sha512-WbDpG8l5QxhJjMoaaDiaEIeoI0B2T5is5t0AsENIRMEYi0RLVLSHJj7Q5pH5A/tRLW2/0Y2Uu+zIryOVpxc+vA==",
       "requires": {
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.3.0",
-        "htmlparser2": "^7.2.0",
-        "pug": "^3.0.2"
-      },
-      "dependencies": {
-        "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-          },
-          "dependencies": {
-            "entities": {
-              "version": "2.2.0",
-              "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-              "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
-            }
-          }
-        },
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
-        },
-        "domhandler": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
-          "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
-          "requires": {
-            "domelementtype": "^2.2.0"
-          }
-        },
-        "domutils": {
-          "version": "2.8.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-          }
-        },
-        "entities": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
-          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
-        },
-        "htmlparser2": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
-          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.2",
-            "domutils": "^2.8.0",
-            "entities": "^3.0.1"
-          }
-        }
+        "@volar/code-gen": "0.33.7",
+        "@volar/shared": "0.33.7",
+        "@volar/source-map": "0.33.7",
+        "@volar/transforms": "0.33.7",
+        "pug-lexer": "^5.0.1",
+        "pug-parser": "^6.0.0",
+        "vscode-languageserver-textdocument": "^1.0.3",
+        "vscode-languageserver-types": "^3.17.0-next.6"
       }
     },
     "@volar/shared": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/shared/-/shared-0.31.4.tgz",
-      "integrity": "sha512-mKSH4GKFde2t3GVEGibBu84jbCk7O1sccELxTgCGHX7ue4nJqgHup8lXhwyfUOfdJ7eyx9luyDsVuJ4BY3gfeg==",
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/shared/-/shared-0.33.7.tgz",
+      "integrity": "sha512-c2A+cpNqniUK3p6/77X5zm1ED82PzW5mP5PXk2/sIG34zbm+rK2MhkajbAhr+bG9O1XhgdPZljpalhpsdLedpw==",
       "requires": {
         "upath": "^2.0.1",
-        "vscode-html-languageservice": "^4.2.1",
         "vscode-jsonrpc": "^8.0.0-next.5",
         "vscode-uri": "^3.0.3"
       }
     },
     "@volar/source-map": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.31.4.tgz",
-      "integrity": "sha512-lX/XKKc3ESNt6QArq1T54LSxXvu7ARDctQfkt6qUSNLVR/ccUXwzM+4qiOj39WBbmoDzET33riVYnMXMeGJMvg==",
-      "requires": {
-        "@volar/shared": "0.31.4",
-        "vscode-languageserver-textdocument": "^1.0.3"
-      }
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.33.7.tgz",
+      "integrity": "sha512-2mfZg97iAuKx3XcYUrCfLfGmmBW/ku0G6XfwjRKeTOmYAx0j+7/mCiwGbDbR1X8RoS8H1Y5vD+ulc8MdHJS75A=="
     },
     "@volar/transforms": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/transforms/-/transforms-0.31.4.tgz",
-      "integrity": "sha512-081QI2zBvdja4XN3eAtIWmBqDkAyDuuK3xP5mD04T9vMrVfy+WKrzB7n3/Zru7z4DiM70Qo5PoTapQ3Xnz9NzQ==",
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/transforms/-/transforms-0.33.7.tgz",
+      "integrity": "sha512-76VYq5j5mXTD2vysuews0CCyVNVnwPPe42aLtNSXeTXx4NzFkwJe3Jp+R72vC8asUCEPP/X88CMUlSn8eHiJHw==",
       "requires": {
-        "@volar/shared": "0.31.4",
+        "@volar/shared": "0.33.7",
         "vscode-languageserver-types": "^3.17.0-next.6"
-      },
-      "dependencies": {
-        "vscode-languageserver-types": {
-          "version": "3.17.0-next.7",
-          "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.7.tgz",
-          "integrity": "sha512-KH4zdG1qBXxoso61ChgpeoZYyHGJo8bV7Jv4I+fwQ1Ryy59JAxoZ9GAbhR5TeeafHctLcg6RFvY3m8Jqfu17cg=="
-        }
       }
     },
     "@volar/vue-code-gen": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.31.4.tgz",
-      "integrity": "sha512-1ypZfzQfH+lV8JcOOKfYMTAmD6OUeBQSDwu7YRHQkuvoSQzPiXXrjupi0DvHrcWR0hQfh4yRnme6I+ChutW69w==",
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.33.7.tgz",
+      "integrity": "sha512-5OmWKwHyD+wyhZcxPqozg6NB3FKgxdVmbIJMXzTTROYFMxpwHunFR6yXeaWRBA/nvOZted41QSGej2gzyl77Uw==",
       "requires": {
-        "@volar/code-gen": "0.31.4",
-        "@volar/shared": "0.31.4",
-        "@volar/source-map": "0.31.4",
+        "@volar/code-gen": "0.33.7",
+        "@volar/source-map": "0.33.7",
         "@vue/compiler-core": "^3.2.27",
         "@vue/compiler-dom": "^3.2.27",
-        "@vue/shared": "^3.2.27",
-        "upath": "^2.0.1"
+        "@vue/shared": "^3.2.27"
       }
     },
-    "@vscode/emmet-helper": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.8.4.tgz",
-      "integrity": "sha512-lUki5QLS47bz/U8IlG9VQ+1lfxMtxMZENmU5nu4Z71eOD5j9FK0SmYGL5NiVJg9WBWeAU0VxRADMY2Qpq7BfVg==",
-      "requires": {
-        "emmet": "^2.3.0",
-        "jsonc-parser": "^2.3.0",
-        "vscode-languageserver-textdocument": "^1.0.1",
-        "vscode-languageserver-types": "^3.15.1",
-        "vscode-nls": "^5.0.0",
-        "vscode-uri": "^2.1.2"
-      },
-      "dependencies": {
-        "vscode-uri": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-2.1.2.tgz",
-          "integrity": "sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A=="
-        }
+    "@volar/vue-typescript": {
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.33.7.tgz",
+      "integrity": "sha512-NPB7/esOe617J96jRAMTab3gVFc5a/+zXiwKns3+1osNIckfpe2VUbdK8P6v+XSmN9RPA5AXXRG47z4epK8zcg==",
+      "requires": {
+        "@volar/code-gen": "0.33.7",
+        "@volar/pug-language-service": "0.33.7",
+        "@volar/source-map": "0.33.7",
+        "@volar/vue-code-gen": "0.33.7",
+        "@vue/compiler-sfc": "^3.2.27",
+        "@vue/reactivity": "^3.2.27"
       }
     },
     "@vue/compiler-core": {
@@ -1280,11 +1186,6 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -1293,11 +1194,6 @@
         "safer-buffer": "~2.1.0"
       }
     },
-    "assert-never": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
-      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
-    },
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
@@ -1400,14 +1296,6 @@
         "follow-redirects": "^1.14.4"
       }
     },
-    "babel-walk": {
-      "version": "3.0.0-canary-5",
-      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
-      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
-      "requires": {
-        "@babel/types": "^7.9.6"
-      }
-    },
     "bail": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
@@ -1799,15 +1687,6 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
-    "constantinople": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
-      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
-      "requires": {
-        "@babel/parser": "^7.6.0",
-        "@babel/types": "^7.6.1"
-      }
-    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -1998,11 +1877,6 @@
         "esutils": "^2.0.2"
       }
     },
-    "doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
-    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -2095,15 +1969,6 @@
         "normalize-wheel-es": "^1.1.0"
       }
     },
-    "emmet": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.3.6.tgz",
-      "integrity": "sha512-pLS4PBPDdxuUAmw7Me7+TcHbykTsBKN/S9XJbUOMFQrNv9MoshzyMFK/R57JBm94/6HSL4vHnDeEmxlC82NQ4A==",
-      "requires": {
-        "@emmetio/abbreviation": "^2.2.3",
-        "@emmetio/css-abbreviation": "^2.1.4"
-      }
-    },
     "emoji-regex": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -3063,9 +2928,9 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
     },
     "has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
@@ -3293,6 +3158,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
       "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -3385,11 +3251,6 @@
       "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
       "dev": true
     },
-    "is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
-    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -3441,11 +3302,6 @@
       "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
       "integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo="
     },
-    "js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3518,11 +3374,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "jsonc-parser": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-2.3.1.tgz",
-      "integrity": "sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg=="
-    },
     "jsonlines": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsonlines/-/jsonlines-0.1.1.tgz",
@@ -3544,15 +3395,6 @@
         "verror": "1.10.0"
       }
     },
-    "jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
-      "requires": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
-      }
-    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -4442,7 +4284,8 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
     },
     "path-type": {
       "version": "4.0.0",
@@ -4922,14 +4765,6 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -4958,63 +4793,11 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
       "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
-    "pug": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.2.tgz",
-      "integrity": "sha512-bp0I/hiK1D1vChHh6EfDxtndHji55XP/ZJKwsRqrz6lRia6ZC2OZbdAymlxdVFwd1L70ebrVJw4/eZ79skrIaw==",
-      "requires": {
-        "pug-code-gen": "^3.0.2",
-        "pug-filters": "^4.0.0",
-        "pug-lexer": "^5.0.1",
-        "pug-linker": "^4.0.0",
-        "pug-load": "^3.0.0",
-        "pug-parser": "^6.0.0",
-        "pug-runtime": "^3.0.1",
-        "pug-strip-comments": "^2.0.0"
-      }
-    },
-    "pug-attrs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
-      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
-      "requires": {
-        "constantinople": "^4.0.1",
-        "js-stringify": "^1.0.2",
-        "pug-runtime": "^3.0.0"
-      }
-    },
-    "pug-code-gen": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.2.tgz",
-      "integrity": "sha512-nJMhW16MbiGRiyR4miDTQMRWDgKplnHyeLvioEJYbk1RsPI3FuA3saEP8uwnTb2nTJEKBU90NFVWJBk4OU5qyg==",
-      "requires": {
-        "constantinople": "^4.0.1",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.2",
-        "pug-attrs": "^3.0.0",
-        "pug-error": "^2.0.0",
-        "pug-runtime": "^3.0.0",
-        "void-elements": "^3.1.0",
-        "with": "^7.0.0"
-      }
-    },
     "pug-error": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
       "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
     },
-    "pug-filters": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
-      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
-      "requires": {
-        "constantinople": "^4.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0",
-        "resolve": "^1.15.1"
-      }
-    },
     "pug-lexer": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
@@ -5025,24 +4808,6 @@
         "pug-error": "^2.0.0"
       }
     },
-    "pug-linker": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
-      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
-      "requires": {
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "pug-load": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
-      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "pug-walk": "^2.0.0"
-      }
-    },
     "pug-parser": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
@@ -5052,24 +4817,6 @@
         "token-stream": "1.0.0"
       }
     },
-    "pug-runtime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg=="
-    },
-    "pug-strip-comments": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
-      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
-      "requires": {
-        "pug-error": "^2.0.0"
-      }
-    },
-    "pug-walk": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
-    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -5370,6 +5117,7 @@
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
       "requires": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
@@ -6310,7 +6058,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
     },
     "to-readable-stream": {
       "version": "1.0.0",
@@ -6402,9 +6151,9 @@
       }
     },
     "typescript": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.4.tgz",
-      "integrity": "sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
+      "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
       "dev": true
     },
     "uc.micro": {
@@ -6812,72 +6561,10 @@
         }
       }
     },
-    "void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
-    },
-    "vscode-css-languageservice": {
-      "version": "5.1.13",
-      "resolved": "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-5.1.13.tgz",
-      "integrity": "sha512-FA0foqMzMmEoO0WJP+MjoD4dRERhKS+Ag+yBrtmWQDmw2OuZ1R/5FkvI/XdTkCpHmTD9VMczugpHRejQyTXCNQ==",
-      "requires": {
-        "vscode-languageserver-textdocument": "^1.0.1",
-        "vscode-languageserver-types": "^3.16.0",
-        "vscode-nls": "^5.0.0",
-        "vscode-uri": "^3.0.2"
-      }
-    },
-    "vscode-html-languageservice": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-4.2.1.tgz",
-      "integrity": "sha512-PgaToZVXJ44nFWEBuSINdDgVV6EnpC3MnXBsysR3O5TKcAfywbYeRGRy+Y4dVR7YeUgDvtb+JkJoSkaYC0mxXQ==",
-      "requires": {
-        "vscode-languageserver-textdocument": "^1.0.1",
-        "vscode-languageserver-types": "^3.16.0",
-        "vscode-nls": "^5.0.0",
-        "vscode-uri": "^3.0.2"
-      }
-    },
-    "vscode-json-languageservice": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.2.0.tgz",
-      "integrity": "sha512-XNawv0Vdy/sUK0S+hGf7cq/qsVAbIniGJr89TvZOqMCNJmpgKTy1e8PL1aWW0uy6BfWMG7vxa5lZb3ypuFtuGQ==",
-      "requires": {
-        "jsonc-parser": "^3.0.0",
-        "vscode-languageserver-textdocument": "^1.0.3",
-        "vscode-languageserver-types": "^3.16.0",
-        "vscode-nls": "^5.0.0",
-        "vscode-uri": "^3.0.3"
-      },
-      "dependencies": {
-        "jsonc-parser": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
-          "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA=="
-        }
-      }
-    },
     "vscode-jsonrpc": {
-      "version": "8.0.0-next.6",
-      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.6.tgz",
-      "integrity": "sha512-6Ld3RYjygn5Ih7CkAtcAwiDQC+rakj2O+PnASfNyYv3sLmm44eJpEKzuPUN30Iy2UB09AZg8T6LBKWTJTEJDVw=="
-    },
-    "vscode-languageserver-protocol": {
-      "version": "3.17.0-next.14",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.0-next.14.tgz",
-      "integrity": "sha512-iangobY8dL6sFZkOx4OhRPJM9gN0I1caUsOVR+MnPozsqQUtwMXmbIcfaIf0Akp0pd3KhJDPf/tdwRX68QGeeA==",
-      "requires": {
-        "vscode-jsonrpc": "8.0.0-next.6",
-        "vscode-languageserver-types": "3.17.0-next.7"
-      },
-      "dependencies": {
-        "vscode-languageserver-types": {
-          "version": "3.17.0-next.7",
-          "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.7.tgz",
-          "integrity": "sha512-KH4zdG1qBXxoso61ChgpeoZYyHGJo8bV7Jv4I+fwQ1Ryy59JAxoZ9GAbhR5TeeafHctLcg6RFvY3m8Jqfu17cg=="
-        }
-      }
+      "version": "8.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.7.tgz",
+      "integrity": "sha512-JX/F31LEsims0dAlOTKFE4E+AJMiJvdRSRViifFJSqSN7EzeYyWlfuDchF7g91oRNPZOIWfibTkDf3/UMsQGzQ=="
     },
     "vscode-languageserver-textdocument": {
       "version": "1.0.4",
@@ -6885,79 +6572,15 @@
       "integrity": "sha512-/xhqXP/2A2RSs+J8JNXpiiNVvvNM0oTosNVmQnunlKvq9o4mupHOBAnnzH0lwIPKazXKvAKsVp1kr+H/K4lgoQ=="
     },
     "vscode-languageserver-types": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz",
-      "integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA=="
-    },
-    "vscode-nls": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-5.0.0.tgz",
-      "integrity": "sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA=="
-    },
-    "vscode-pug-languageservice": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/vscode-pug-languageservice/-/vscode-pug-languageservice-0.31.4.tgz",
-      "integrity": "sha512-StQWV+v1v+an/pGKNPg4YkODFyKeYpUEzaSAoXIUsIoh7O4Nuv6zjd1M/fPxaMSD6Kk+OH/JGE36hbXsKXOz5A==",
-      "requires": {
-        "@volar/code-gen": "0.31.4",
-        "@volar/shared": "0.31.4",
-        "@volar/source-map": "0.31.4",
-        "@volar/transforms": "0.31.4",
-        "pug-lexer": "^5.0.1",
-        "pug-parser": "^6.0.0",
-        "vscode-languageserver-textdocument": "^1.0.3",
-        "vscode-languageserver-types": "^3.17.0-next.6"
-      },
-      "dependencies": {
-        "vscode-languageserver-types": {
-          "version": "3.17.0-next.7",
-          "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.7.tgz",
-          "integrity": "sha512-KH4zdG1qBXxoso61ChgpeoZYyHGJo8bV7Jv4I+fwQ1Ryy59JAxoZ9GAbhR5TeeafHctLcg6RFvY3m8Jqfu17cg=="
-        }
-      }
-    },
-    "vscode-typescript-languageservice": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.31.4.tgz",
-      "integrity": "sha512-nsnRPEfg9t3oDlwzm3WTAv0p83vceqCuxvRo/+N7hXbmtaO7WMGCMvJx0xyIuUDS4NgaEK31oMR9FnX9JNcEQQ==",
-      "requires": {
-        "@volar/shared": "0.31.4",
-        "semver": "^7.3.5",
-        "upath": "^2.0.1",
-        "vscode-languageserver-protocol": "^3.17.0-next.12",
-        "vscode-languageserver-textdocument": "^1.0.3",
-        "vscode-nls": "^5.0.0"
-      }
+      "version": "3.17.0-next.9",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.9.tgz",
+      "integrity": "sha512-9/PeDNPYduaoXRUzYpqmu4ZV9L01HGo0wH9FUt+sSHR7IXwA7xoXBfNUlv8gB9H0D2WwEmMomSy1NmhjKQyn3A=="
     },
     "vscode-uri": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz",
       "integrity": "sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA=="
     },
-    "vscode-vue-languageservice": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/vscode-vue-languageservice/-/vscode-vue-languageservice-0.31.4.tgz",
-      "integrity": "sha512-Pyvtj5iokBilGDH8KY6bocJh8NcIGoFmUksPOOZKBb+4usEHTBtWw/uoH4hjxWwLszMRQuStkXLMaSKtBIv3gQ==",
-      "requires": {
-        "@volar/code-gen": "0.31.4",
-        "@volar/html2pug": "0.31.4",
-        "@volar/shared": "0.31.4",
-        "@volar/source-map": "0.31.4",
-        "@volar/transforms": "0.31.4",
-        "@volar/vue-code-gen": "0.31.4",
-        "@vscode/emmet-helper": "^2.8.3",
-        "@vue/reactivity": "^3.2.27",
-        "@vue/shared": "^3.2.27",
-        "upath": "^2.0.1",
-        "vscode-css-languageservice": "^5.1.9",
-        "vscode-html-languageservice": "^4.2.1",
-        "vscode-json-languageservice": "^4.1.10",
-        "vscode-languageserver-protocol": "^3.17.0-next.12",
-        "vscode-languageserver-textdocument": "^1.0.3",
-        "vscode-pug-languageservice": "0.31.4",
-        "vscode-typescript-languageservice": "0.31.4"
-      }
-    },
     "vue": {
       "version": "3.2.31",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.31.tgz",
@@ -7016,12 +6639,11 @@
       }
     },
     "vue-tsc": {
-      "version": "0.31.4",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.31.4.tgz",
-      "integrity": "sha512-8RnKGmQRo/0rbXkyZmKCOdT62fNWyEaMdS/BDAPE+saGNAniUZsjpOSOjAiLwsQc5qgeI9/mY1W3o4tX7H/7MA==",
+      "version": "0.33.7",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.33.7.tgz",
+      "integrity": "sha512-m5Pl4QsrNjfRmtrbsuQJgNnnvXgMtBFT6/P4kgyqIj0EsrWtcyzj/xrFGIvONuU8+o/ui2AQJxWCF9eoC3yOgQ==",
       "requires": {
-        "@volar/shared": "0.31.4",
-        "vscode-vue-languageservice": "0.31.4"
+        "@volar/vue-typescript": "0.33.7"
       }
     },
     "wanakana": {
@@ -7088,17 +6710,6 @@
         }
       }
     },
-    "with": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
-      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
-      "requires": {
-        "@babel/parser": "^7.9.6",
-        "@babel/types": "^7.9.6",
-        "assert-never": "^1.2.1",
-        "babel-walk": "3.0.0-canary-5"
-      }
-    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
diff --git a/src/vite/package.json b/src/vite/package.json
index da649e36..6ecc455c 100644
--- a/src/vite/package.json
+++ b/src/vite/package.json
@@ -27,7 +27,7 @@
     "esbuild": "^0.14.23",
     "npm-check-updates": "^11.8.5",
     "vue": "^3.2.31",
-    "vue-tsc": "^0.31.4",
+    "vue-tsc": "^0.33.7",
     "wanakana": "^4.0.2"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "stylelint-config-recommended-scss": "4.3.x",
     "stylelint-scss": "3.21.x",
     "tailwindcss": "^3.0.x",
-    "typescript": "^4.4.4",
+    "typescript": "^4.6.2",
     "vite": "^2.8.4",
     "vite-plugin-element-plus": "^0.0.12",
     "vite-plugin-md": "^0.11.8"

From 1f1d635f526a01fddc7e039ce521ceacd7ecc071 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Mon, 28 Mar 2022 17:18:31 +0200
Subject: [PATCH 67/69] (_LearnedPanel): fix unnecessary query (received from
 parent template)

---
 src/apps/koohii/modules/study/templates/_LearnedPanel.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/_LearnedPanel.php b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
index 21632320..7e5ab8c0 100755
--- a/src/apps/koohii/modules/study/templates/_LearnedPanel.php
+++ b/src/apps/koohii/modules/study/templates/_LearnedPanel.php
@@ -1,6 +1,4 @@
 <?php
-  $restudyCount = ReviewsPeer::getRestudyKanjiCount($sf_user->getUserId());
-
   $ofTotal = $restudyCount > 0 ? " of {$restudyCount}" : '';
 ?>
 <div class="ko-Box ko-Box--success no-gutter-xs-sm dsk:mb-4 mbl:rounded-none">

From b872996fee604bedca2c47d79e6c29d39c8b98ee Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 29 Mar 2022 11:45:03 +0200
Subject: [PATCH 68/69] (Restudy List): tweak empty states (success bg, minor
 text changes)

---
 .../koohii/modules/study/templates/failedlistSuccess.php    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/apps/koohii/modules/study/templates/failedlistSuccess.php b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
index 58fac4bb..22933ea1 100755
--- a/src/apps/koohii/modules/study/templates/failedlistSuccess.php
+++ b/src/apps/koohii/modules/study/templates/failedlistSuccess.php
@@ -12,8 +12,8 @@
     <div class="ko-Box ko-Box--stroke ko-Box--danger md:h-full">
       <h3 class="text-md font-bold text-danger-dark"><?= $restudyCount; ?> Kanji to Restudy</h3>
 <?php else: ?>
-    <div class="ko-Box ko-Box--stroke ko-Box--success">
-      <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji - Hooray!</h3>
+    <div class="ko-Box ko-Box--success">
+      <h3 class="text-md font-bold text-success-darker">No Forgotten Kanji</h3>
 <?php endif; ?>
 
       <p>Restudy your forgotten kanji, <em>in index order</em>. <?= link_to('Learn More', '@learnmore#restudy-list', ['class' => 'whitespace-nowrap']); ?>
@@ -111,7 +111,7 @@
 
   <div class="ko-Box  min-h-[336px] flex mb-8">
     <p class="text-warm m-auto">
-      Hooray, your forgotten kanji list is empty!
+      Hooray! Your restudy list is empty!
     </p>
   </div>
 

From 355c28499726a100cd0a18e95f3479938121a772 Mon Sep 17 00:00:00 2001
From: fabd <fabrice.denis@gmail.com>
Date: Tue, 29 Mar 2022 12:18:31 +0200
Subject: [PATCH 69/69] (Restudy List): fix undefined on /study/index action

---
 src/apps/koohii/modules/study/templates/indexSuccess.php | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/apps/koohii/modules/study/templates/indexSuccess.php b/src/apps/koohii/modules/study/templates/indexSuccess.php
index 983d28fe..605d9f12 100755
--- a/src/apps/koohii/modules/study/templates/indexSuccess.php
+++ b/src/apps/koohii/modules/study/templates/indexSuccess.php
@@ -1,6 +1,9 @@
 <div class="row">
 
-  <?php include_partial('SideColumn', ['kanjiData' => false, 'intro' => true /* <- could be "false" */ ]) ?>
+<?php include_partial('SideColumn', [
+  'kanjiData' => false,
+  'isBeginRestudy' => false
+  ]) ?>
 
   <div class="col-lg-9">
     <?php include_partial('study/StudyIntro') ?>