Merge pull request #214 from fabd/feature/improve-dictionary-empty-state

Feature/improve dictionary empty state

src/apps/koohii/modules/about/templates/learnmore.md

@@ -57,10 +57,13 @@ the user has not yet learned 合 which is kanji #269 and will be seen later. Yet
 This works in Flashcard Review too! So as you do reviews over weeks and months, and you open the dictionary you may discover new words which weren't highlighted before.
 
 
-### Technical Information
-Kanji Koohii's dictionary uses Jim Breen's [JMdict/EDICT](http://www.edrdg.org/jmdict/edict_doc.html) Japanese-English dictionary (full acknowlegments in the About page).
+### About Kanji Koohii's Dictionary sources {#help-dictionary-data}
 
-**Koohii's dictionary only shows "priority" entries, approx. 16000 of the most common words**. This is done in order to provide meaningful results for Koohii users. The dictionary would otherwise show rare, archaic and obsolete words as well as place names from a total of 170,000+ entries which you'll likely never use even after being fully fluent in Japanese.
+Kanji Koohii's dictionary uses Jim Breen's [JMdict/EDICT](https://www.edrdg.org/wiki/index.php/JMdict-EDICT_Dictionary_Project) Japanese-English dictionary (see acknowlegments in the [About](/about) page).
+
+**Koohii's dictionary only includes "priority" entries, approx. 16000 of the most common words**. Specifically: <samp>ichi1, news1, spec1, gai1</samp> of JMdict's [word priority markings](https://www.edrdg.org/wiki/index.php/JMdict-EDICT_Dictionary_Project#Word_Priority_Marking).
+
+This is done in order to provide meaningful results for Koohii users. The dictionary would otherwise show rare, archaic and obsolete words as well as place names from a total of 170,000+ entries which you'll probably never use even after being fluent in Japanese.
 
 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.
 

src/vite/.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 80,
+  printWidth: 120,
   tabWidth: 2,
   useTabs: false,
   semi: true,

src/vite/src/assets/css/main.build.scss

@@ -1542,16 +1542,14 @@ table.lessons td {
 .rtk-skin-dlg .yui-panel .bd {
   padding: 10px 10px 10px;
   background: none;
-  font-size: 12px;
   line-height: 19px;
-  color: #000;
+  @apply text-body;
 }
 .rtk-skin-dlg .yui-panel .ft {
   padding: 5px 10px 10px;
   background: none;
-  font-size: 12px;
   line-height: 1.2em;
-  color: #000;
+  @apply text-body;
 }
 
 /* dialog body wrapper for extra css styling (.rtk-skin-dlg .yui-panel .bd .body) */

src/vite/src/vue/KoohiiDictList.vue

@@ -15,17 +15,32 @@
         />
       </template>
       <template v-else class="dict-list_info">
-        <!-- items.length === 0 -->
-        <p>There are no common words using this character.</p>
+        <div class="p-4">
+          <p class="mb-4"><strong>No common words found</strong> using this kanji.</p>
+          <ul class="fa-ul mb-0">
+            <li class="mb-2">
+              <span class="fa-li"><i class="fas fa-search"></i></span>
+              <a :href="jishoSearchUrl" target="blank" class="no-underline hover:underline"
+                >Search words using {{ curKanji }} on <strong>jisho.org</strong></a
+              >
+            </li>
+            <li class="mb-2">
+              <span class="fa-li"><i class="fas fa-arrow-right"></i></span>
+              <a href="/learnmore#help-dictionary-data" target="blank" class="no-underline hover:underline"
+                >Learn more about Kanji Koohii’s builtin dictionary</a
+              >
+            </li>
+          </ul>
+        </div>
       </template>
     </div>
 
     <!-- (legacy code) "Close" button for mobile portait will be handled by KoohiiDialog if/when we implement that -->
     <div v-if="isMobile" class="uiBMenu">
       <div class="uiBMenuItem">
-        <a class="uiFcBtnGreen JSDialogHide uiIBtn uiIBtnDefault" href="#"
-          ><span>Close</span></a
-        >
+        <a class="uiFcBtnGreen JSDialogHide uiIBtn uiIBtnDefault" href="#">
+          <span>Close</span>
+        </a>
       </div>
     </div>
   </div>
@@ -96,6 +111,14 @@ export default defineComponent({
       // (legacy code) cf. lib/front/corejs/ui/mobile.js
       return window.innerWidth <= 720;
     },
+
+    curKanji(): string {
+      return String.fromCodePoint(this.ucsId);
+    },
+
+    jishoSearchUrl(): string {
+      return `https://jisho.org/search/${this.curKanji}`;
+    },
   },
 
   created() {
@@ -123,13 +146,7 @@ export default defineComponent({
       return inst;
     },
 
-    onVocabSelect({
-      item,
-      selected,
-    }: {
-      item: DictListEntry;
-      selected: boolean;
-    }) {
+    onVocabSelect({ item, selected }: { item: DictListEntry; selected: boolean }) {
       console.log("onVocabSelect %o", item);
 
       if (!this.KanjiReview) return;