From 14b9c76047df0c19d04e7b2a123ce636fcd8b694 Mon Sep 17 00:00:00 2001
From: Nur Muhammad <blog.nurmuhammad@gmail.com>
Date: Sun, 1 Dec 2024 22:08:06 +0800
Subject: [PATCH] Improve surah list naming and search

---
 src/components/SurahChangerDialog.vue     |  15 +-
 src/data/surah-list/corrections.js        | 122 +++--
 src/data/surah-list/index.js              |  35 +-
 src/data/surah-list/surah-list-kemenag.js | 572 ++++++++++++++++++++++
 src/pages/quran/QuranReader.vue           |  16 +-
 5 files changed, 692 insertions(+), 68 deletions(-)
 create mode 100644 src/data/surah-list/surah-list-kemenag.js

diff --git a/src/components/SurahChangerDialog.vue b/src/components/SurahChangerDialog.vue
index 963c6e9..923acf4 100644
--- a/src/components/SurahChangerDialog.vue
+++ b/src/components/SurahChangerDialog.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-import surahList from "src/data/surah-list";
+import { getFilteredSurahList } from "src/data/surah-list";
 export default {
   name: "SurahChangerDialog",
   props: {
@@ -72,7 +72,6 @@ export default {
   },
   data() {
     return {
-      surahList: surahList,
       showDialog: false,
       keyword: ""
     };
@@ -97,17 +96,7 @@ export default {
   },
   computed: {
     surahListFiltered() {
-      if (this.keyword) {
-        const q = this.keyword.toLowerCase();
-        return this.surahList.filter(s => {
-          return (
-            s.nameSimple.toLowerCase().includes(q) ||
-            s.nameArabic.toLowerCase().includes(q) ||
-            s.nameTranslated.toLowerCase().includes(q)
-          );
-        });
-      }
-      return this.surahList;
+      return getFilteredSurahList(this.keyword);
     }
   },
   methods: {
diff --git a/src/data/surah-list/corrections.js b/src/data/surah-list/corrections.js
index 808cd07..75d0dc7 100644
--- a/src/data/surah-list/corrections.js
+++ b/src/data/surah-list/corrections.js
@@ -1,6 +1,6 @@
 /**
  * We make some corrections for the surah list
- * E.g. Follows Indonesian Ministry of Religion naming
+ * by comparing naming from some printed Mushaf, the API and Kemenag
  *
  * Data structures
  * We use surah id as object key for performance access
@@ -13,75 +13,115 @@
 // }
 
 export default {
-  9: {
-    nameSimple: "At-Taubah"
+  1: {
+    nameTranslated: "Pembukaan"
   },
-  21: {
-    nameSimple: "Al-Anbiya’"
+  2: {
+    nameTranslated: "Sapi Betina"
   },
-  26: {
-    nameSimple: "Asy-Syu'ara'"
+  30: {
+    nameTranslated: "Bangsa Romawi"
   },
   34: {
-    nameSimple: "Saba’"
+    nameTranslated: "Kaum Saba'"
   },
-  36: {
-    nameSimple: "Yasin"
+  41: {
+    nameTranslated: "Yang Dijelaskan"
   },
-  42: {
-    nameSimple: "Asy-Syura"
+  43: {
+    nameTranslated: "Perhiasan"
+  },
+  44: {
+    nameTranslated: "Kabut"
   },
   45: {
-    nameSimple: "Al-Jasiyah"
+    nameTranslated: "Yang Berlutut"
+  },
+  46: {
+    nameTranslated: "Bukit-Bukit Pasir"
   },
   51: {
-    nameSimple: "Adz-Dzariyat"
+    nameTranslated: "Angin Yang Menerbangkan"
+  },
+  52: {
+    nameTranslated: "Bukit"
+  },
+  55: {
+    nameTranslated: "Yang Maha Pemurah"
   },
-  58: {
-    nameSimple: "Al-Mujadalah"
+  56: {
+    nameTranslated: "Hari Kiamat"
   },
-  59: {
-    nameSimple: "Al-Hasyr"
+  62: {
+    nameTranslated: "Hari Jum'at"
   },
-  61: {
-    nameSimple: "Ash-Shaf"
+  64: {
+    nameTranslated: "Hari Dinampakkan Kesalahan"
+  },
+  66: {
+    nameTranslated: "Mengharamkan"
+  },
+  69: {
+    nameTranslated: "Hari Kiamat"
+  },
+  73: {
+    nameTranslated: "Orang Yang Berselimut"
   },
   74: {
-    nameSimple: "Al-Muddassir"
+    nameTranslated: "Orang Yang Berkemul"
   },
   78: {
-    nameSimple: "An-Naba'"
+    nameTranslated: "Berita Besar"
   },
-  84: {
-    nameSimple: "Al-Insyiqaq"
+  79: {
+    nameTranslated: "Malaikat Yang Mencabut"
   },
-  88: {
-    nameSimple: "Al-Gasyiyah"
+  80: {
+    nameTranslated: "Bermuka Masam"
   },
-  91: {
-    nameSimple: "Asy-Syams"
+  81: {
+    nameTranslated: "Menggulung"
   },
-  92: {
-    nameSimple: "Al-Lail"
+  86: {
+    nameTranslated: "Yang Datang di Malam Hari"
+  },
+  87: {
+    nameTranslated: "Yang Paling Tinggi"
+  },
+  88: {
+    nameTranslated: "Hari Pembalasan"
+  },
+  93: {
+    nameTranslated: "Waktu Matahari Sepenggalahan Naik"
   },
   94: {
-    nameSimple: "Asy-Syarh"
+    nameTranslated: "Melapangkan"
+  },
+  97: {
+    nameTranslated: "Kemuliaan"
+  },
+  98: {
+    nameTranslated: "Pembuktian"
+  },
+  99: {
+    nameTranslated: "Kegoncangan"
+  },
+  101: {
+    nameTranslated: "Hari Kiamat"
   },
   102: {
-    nameSimple: "At-Takasur"
+    nameTranslated: "Bermegah-Megahan"
   },
   106: {
-    nameSimple: "Quraisy"
+    nameTranslated: "Suku Quraisy"
   },
-  108: {
-    nameSimple: "Al-Kausar"
+  107: {
+    nameTranslated: "Barang-Barang Yang Berguna"
   },
-  111: {
-    nameArabic: "اللهب",
-    nameSimple: "Al-Lahab",
-    nameTranslated: "Gejolak Api"
+  109: {
+    nameTranslated: "Orang-Orang Kafir"
   },
-  112: {
-    nameTranslated: "Ikhlas"
+  113: {
+    nameTranslated: "Waktu Subuh"
   }
 };
diff --git a/src/data/surah-list/index.js b/src/data/surah-list/index.js
index 758d9d2..9181ff1 100644
--- a/src/data/surah-list/index.js
+++ b/src/data/surah-list/index.js
@@ -1,19 +1,48 @@
 import surahListByApi from "./surah-list-by-api";
+import surahListKemenag from "./surah-list-kemenag";
 import surahListCorrections from "./corrections";
+import createFuzzySearch from "@nozbe/microfuzz";
+import { normalizeLatinText } from "src/lib/search-helper";
 
 const surahList = [];
 
 surahListByApi.forEach(item => {
+  const kemenag = surahListKemenag[item.id] ?? null;
   const correction = surahListCorrections[item.id] ?? null;
+
   surahList.push({
     id: item.id,
     versesCount: item.verses_count,
     bismillahPre: item.bismillah_pre,
-    nameArabic: correction?.nameArabic ?? item.name_arabic,
-    nameSimple: correction?.nameSimple ?? item.name_simple,
-    nameTranslated: correction?.nameTranslated ?? item.translated_name.name,
+    nameArabic: correction?.nameArabic ?? kemenag?.nameArabic,
+    nameSimple: correction?.nameSimple ?? kemenag?.nameSimple,
+    nameTranslated: correction?.nameTranslated ?? kemenag?.nameTranslated,
     pages: item.pages
   });
 });
 
+const getFilteredSurahList = keyword => {
+  if (!keyword) {
+    return surahList;
+  }
+
+  const q = normalizeLatinText(keyword);
+  const fuzzySearch = createFuzzySearch(surahList, {
+    getText: item => [item.nameSimple, item.nameArabic, item.nameTranslated]
+  });
+
+  const filtered = fuzzySearch(q).map(item => {
+    return {
+      ...item.item
+    };
+  });
+
+  // Keep order
+  filtered.sort((a, b) => a.id - b.id);
+
+  return filtered;
+};
+
+export { surahList, getFilteredSurahList };
+
 export default surahList;
diff --git a/src/data/surah-list/surah-list-kemenag.js b/src/data/surah-list/surah-list-kemenag.js
new file mode 100644
index 0000000..44b2aff
--- /dev/null
+++ b/src/data/surah-list/surah-list-kemenag.js
@@ -0,0 +1,572 @@
+export default {
+  "1": {
+    nameArabic: " الفاتحة",
+    nameSimple: "Al-Fātiḥah ",
+    nameTranslated: "Pembuka"
+  },
+  "2": {
+    nameArabic: " البقرة",
+    nameSimple: "Al-Baqarah ",
+    nameTranslated: "Sapi"
+  },
+  "3": {
+    nameArabic: " اٰل عمرٰن",
+    nameSimple: "Āli ‘Imrān",
+    nameTranslated: "Keluarga Imran"
+  },
+  "4": {
+    nameArabic: "النّساۤء",
+    nameSimple: "An-Nisā' ",
+    nameTranslated: "Perempuan"
+  },
+  "5": {
+    nameArabic: " الماۤئدة",
+    nameSimple: "Al-Mā'idah",
+    nameTranslated: "Hidangan"
+  },
+  "6": {
+    nameArabic: " الانعام",
+    nameSimple: "Al-An‘ām ",
+    nameTranslated: "Binatang Ternak"
+  },
+  "7": {
+    nameArabic: " الاعراف",
+    nameSimple: "Al-A‘rāf",
+    nameTranslated: "Tempat Tertinggi"
+  },
+  "8": {
+    nameArabic: " الانفال",
+    nameSimple: "Al-Anfāl",
+    nameTranslated: "Rampasan Perang"
+  },
+  "9": {
+    nameArabic: "التّوبة",
+    nameSimple: "At-Taubah",
+    nameTranslated: "Pengampunan"
+  },
+  "10": {
+    nameArabic: " يونس",
+    nameSimple: "Yūnus",
+    nameTranslated: "Yunus"
+  },
+  "11": {
+    nameArabic: " هود",
+    nameSimple: "Hūd",
+    nameTranslated: "Hud"
+  },
+  "12": {
+    nameArabic: " يوسف",
+    nameSimple: "Yūsuf",
+    nameTranslated: "Yusuf"
+  },
+  "13": {
+    nameArabic: " الرّعد",
+    nameSimple: "Ar-Ra‘d",
+    nameTranslated: "Guruh"
+  },
+  "14": {
+    nameArabic: " ابرٰهيم",
+    nameSimple: "Ibrāhīm",
+    nameTranslated: "Ibrahim"
+  },
+  "15": {
+    nameArabic: " الحجر",
+    nameSimple: "Al-Ḥijr",
+    nameTranslated: "Hijr"
+  },
+  "16": {
+    nameArabic: "النّحل",
+    nameSimple: "An-Naḥl",
+    nameTranslated: "Lebah"
+  },
+  "17": {
+    nameArabic: " الاسراۤء",
+    nameSimple: "Al-Isrā'",
+    nameTranslated: "Memperjalankan di Malam Hari"
+  },
+  "18": {
+    nameArabic: " الكهف",
+    nameSimple: "Al-Kahf",
+    nameTranslated: "Gua"
+  },
+  "19": {
+    nameArabic: " مريم",
+    nameSimple: "Maryam",
+    nameTranslated: "Maryam"
+  },
+  "20": {
+    nameArabic: " طٰهٰ",
+    nameSimple: "Ṭāhā",
+    nameTranslated: "Taha"
+  },
+  "21": {
+    nameArabic: " الانبياۤء",
+    nameSimple: "Al-Anbiyā' ",
+    nameTranslated: "Para Nabi"
+  },
+  "22": {
+    nameArabic: "الحجّ",
+    nameSimple: "Al-Ḥajj",
+    nameTranslated: "Haji"
+  },
+  "23": {
+    nameArabic: " المؤمنون",
+    nameSimple: "Al-Mu'minūn",
+    nameTranslated: "Orang-Orang Mukmin"
+  },
+  "24": {
+    nameArabic: " النّور",
+    nameSimple: "An-Nūr",
+    nameTranslated: "Cahaya"
+  },
+  "25": {
+    nameArabic: " الفرقان",
+    nameSimple: "Al-Furqān",
+    nameTranslated: "Pembeda"
+  },
+  "26": {
+    nameArabic: "الشّعراۤء",
+    nameSimple: "Asy-Syu‘arā'",
+    nameTranslated: "Para Penyair"
+  },
+  "27": {
+    nameArabic: "النّمل",
+    nameSimple: "An-Naml",
+    nameTranslated: "Semut"
+  },
+  "28": {
+    nameArabic: " القصص",
+    nameSimple: "Al-Qaṣaṣ",
+    nameTranslated: "Kisah-Kisah"
+  },
+  "29": {
+    nameArabic: " العنكبوت",
+    nameSimple: "Al-‘Ankabūt",
+    nameTranslated: "Laba-Laba"
+  },
+  "30": {
+    nameArabic: " الرّوم",
+    nameSimple: "Ar-Rūm",
+    nameTranslated: "Romawi"
+  },
+  "31": {
+    nameArabic: " لقمٰن",
+    nameSimple: "Luqmān ",
+    nameTranslated: "Luqman"
+  },
+  "32": {
+    nameArabic: " السّجدة",
+    nameSimple: "As-Sajdah",
+    nameTranslated: "Sajdah"
+  },
+  "33": {
+    nameArabic: " الاحزاب",
+    nameSimple: "Al-Aḥzāb",
+    nameTranslated: "Golongan Yang Bersekutu"
+  },
+  "34": {
+    nameArabic: " سبأ",
+    nameSimple: "Saba' ",
+    nameTranslated: "Saba'"
+  },
+  "35": {
+    nameArabic: " فاطر",
+    nameSimple: "Fāṭir",
+    nameTranslated: "Pencipta"
+  },
+  "36": {
+    nameArabic: " يٰسۤ",
+    nameSimple: "Yāsīn",
+    nameTranslated: "Yasin"
+  },
+  "37": {
+    nameArabic: " الصّٰۤفّٰت",
+    nameSimple: "Aṣ-Ṣāffāt",
+    nameTranslated: "Barisan-Barisan"
+  },
+  "38": {
+    nameArabic: "صۤ",
+    nameSimple: "Ṣād ",
+    nameTranslated: "Ṣād "
+  },
+  "39": {
+    nameArabic: "الزّمر",
+    nameSimple: "Az-Zumar",
+    nameTranslated: "Rombongan"
+  },
+  "40": {
+    nameArabic: " غافر",
+    nameSimple: "Gāfir ",
+    nameTranslated: "Maha Pengampun"
+  },
+  "41": {
+    nameArabic: " فصّلت",
+    nameSimple: "Fuṣṣilat",
+    nameTranslated: "Dijelaskan"
+  },
+  "42": {
+    nameArabic: "الشّورٰى",
+    nameSimple: "Asy-Syūrā",
+    nameTranslated: "Musyawarah"
+  },
+  "43": {
+    nameArabic: "الزّخرف",
+    nameSimple: "Az-Zukhruf",
+    nameTranslated: "Perhiasan dari Emas"
+  },
+  "44": {
+    nameArabic: "الدّخان",
+    nameSimple: "Ad-Dukhān",
+    nameTranslated: "Kabut Asap"
+  },
+  "45": {
+    nameArabic: " الجاثية",
+    nameSimple: "Al-Jāṡiyah",
+    nameTranslated: "Berlutut"
+  },
+  "46": {
+    nameArabic: " الاحقاف",
+    nameSimple: "Al-Aḥqāf",
+    nameTranslated: "Ahqaf"
+  },
+  "47": {
+    nameArabic: " محمّد",
+    nameSimple: "Muḥammad ",
+    nameTranslated: "Nabi Muhammad"
+  },
+  "48": {
+    nameArabic: " الفتح",
+    nameSimple: "Al-Fatḥ",
+    nameTranslated: "Kemenangan"
+  },
+  "49": {
+    nameArabic: " الحجرٰت",
+    nameSimple: "Al-Ḥujurāt",
+    nameTranslated: "Kamar-Kamar"
+  },
+  "50": {
+    nameArabic: "قۤ",
+    nameSimple: "Qāf",
+    nameTranslated: "Qaf"
+  },
+  "51": {
+    nameArabic: " الذّٰريٰت",
+    nameSimple: "Aż-Żāriyāt",
+    nameTranslated: "Yang Menerbangkan"
+  },
+  "52": {
+    nameArabic: "الطّور",
+    nameSimple: "Aṭ-Ṭūr",
+    nameTranslated: "Gunung"
+  },
+  "53": {
+    nameArabic: "النّجم",
+    nameSimple: "An-Najm",
+    nameTranslated: "Bintang"
+  },
+  "54": {
+    nameArabic: " القمر",
+    nameSimple: "Al-Qamar",
+    nameTranslated: "Bulan"
+  },
+  "55": {
+    nameArabic: "الرّحمٰن",
+    nameSimple: "Ar-Raḥmān",
+    nameTranslated: "Yang Maha Pengasih"
+  },
+  "56": {
+    nameArabic: " الواقعة",
+    nameSimple: "Al-Wāqi‘ah",
+    nameTranslated: "Hari Kiamat Yang Pasti Terjadi"
+  },
+  "57": {
+    nameArabic: " الحديد",
+    nameSimple: "Al-Ḥadīd",
+    nameTranslated: "Besi"
+  },
+  "58": {
+    nameArabic: " المجادلة",
+    nameSimple: "Al-Mujādalah",
+    nameTranslated: "Gugatan"
+  },
+  "59": {
+    nameArabic: " الحشر",
+    nameSimple: "Al-Ḥasyr",
+    nameTranslated: "Pengusiran"
+  },
+  "60": {
+    nameArabic: " الممتحنة",
+    nameSimple: "Al-Mumtaḥanah",
+    nameTranslated: "Wanita Yang Diuji"
+  },
+  "61": {
+    nameArabic: " الصّفّ",
+    nameSimple: "Aṣ-Ṣaff",
+    nameTranslated: "Barisan"
+  },
+  "62": {
+    nameArabic: " الجمعة",
+    nameSimple: "Al-Jumu‘ah",
+    nameTranslated: "Jumat"
+  },
+  "63": {
+    nameArabic: " المنٰفقون",
+    nameSimple: "Al-Munāfiqūn",
+    nameTranslated: "Orang-Orang Munafik"
+  },
+  "64": {
+    nameArabic: "التّغابن",
+    nameSimple: "At-Tagābun",
+    nameTranslated: "Pengungkapan Kesalahan"
+  },
+  "65": {
+    nameArabic: "الطّلاق",
+    nameSimple: "Aṭ-Ṭalāq",
+    nameTranslated: "Talak"
+  },
+  "66": {
+    nameArabic: "التّحريم",
+    nameSimple: "At-taḥrīm",
+    nameTranslated: "Pengharaman"
+  },
+  "67": {
+    nameArabic: "المُلك",
+    nameSimple: "Al-Mulk",
+    nameTranslated: "Kerajaan"
+  },
+  "68": {
+    nameArabic: " القلم",
+    nameSimple: "Al-Qalam",
+    nameTranslated: "Pena"
+  },
+  "69": {
+    nameArabic: " الحاۤقّة",
+    nameSimple: "Al-Ḥāqqah",
+    nameTranslated: "Hari Kiamat Yang Pasti Terjadi"
+  },
+  "70": {
+    nameArabic: " المعارج",
+    nameSimple: "Al-Ma‘ārij",
+    nameTranslated: "Tempat-Tempat Naik"
+  },
+  "71": {
+    nameArabic: " نوح",
+    nameSimple: "Nūḥ",
+    nameTranslated: "Nuh"
+  },
+  "72": {
+    nameArabic: "الجنّ",
+    nameSimple: "Al-Jinn",
+    nameTranslated: "Jin"
+  },
+  "73": {
+    nameArabic: " المزّمّل",
+    nameSimple: "Al-Muzzammil",
+    nameTranslated: "Orang Berkelumun"
+  },
+  "74": {
+    nameArabic: " المدّثّر",
+    nameSimple: "Al-Muddaṡṡir",
+    nameTranslated: "Orang Berselimut"
+  },
+  "75": {
+    nameArabic: " القيٰمة",
+    nameSimple: "Al-Qiyāmah",
+    nameTranslated: "Hari Kiamat"
+  },
+  "76": {
+    nameArabic: " الانسان",
+    nameSimple: "Al-Insān",
+    nameTranslated: "Manusia"
+  },
+  "77": {
+    nameArabic: " المرسلٰت",
+    nameSimple: "Al-Mursalāt",
+    nameTranslated: "Malaikat Yang Diutus"
+  },
+  "78": {
+    nameArabic: "النّبأ",
+    nameSimple: "An-Naba'",
+    nameTranslated: "Berita"
+  },
+  "79": {
+    nameArabic: " النّٰزعٰت",
+    nameSimple: "An-Nāzi‘āt",
+    nameTranslated: "Yang Mencabut Dengan Keras"
+  },
+  "80": {
+    nameArabic: " عبس",
+    nameSimple: "‘Abasa",
+    nameTranslated: "Berwajah Masam"
+  },
+  "81": {
+    nameArabic: "التّكوير",
+    nameSimple: "At-Takwīr",
+    nameTranslated: "Penggulungan"
+  },
+  "82": {
+    nameArabic: " الانفطار",
+    nameSimple: "Al-Infiṭār",
+    nameTranslated: "Terbelah"
+  },
+  "83": {
+    nameArabic: " المطفّفين",
+    nameSimple: "Al-Muṭaffifīn",
+    nameTranslated: "Orang-Orang Yang Curang"
+  },
+  "84": {
+    nameArabic: " الانشقاق",
+    nameSimple: "Al-Insyiqāq",
+    nameTranslated: "Terbelah"
+  },
+  "85": {
+    nameArabic: " البروج",
+    nameSimple: "Al-Burūj",
+    nameTranslated: "Gugusan Bintang"
+  },
+  "86": {
+    nameArabic: "الطّارق",
+    nameSimple: "Aṭ-Ṭāriq",
+    nameTranslated: "Yang Datang Pada Malam Hari"
+  },
+  "87": {
+    nameArabic: " الاعلى",
+    nameSimple: "Al-A‘lā",
+    nameTranslated: "Yang Maha Tinggi"
+  },
+  "88": {
+    nameArabic: " الغاشية",
+    nameSimple: "Al-Gāsyiyah",
+    nameTranslated: "Hari Kiamat Yang Menghilangkan Kesadaran"
+  },
+  "89": {
+    nameArabic: " الفجر",
+    nameSimple: "Al-Fajr",
+    nameTranslated: "Fajar"
+  },
+  "90": {
+    nameArabic: " البلد",
+    nameSimple: "Al-Balad",
+    nameTranslated: "Negeri"
+  },
+  "91": {
+    nameArabic: "الشّمس",
+    nameSimple: "Asy-Syams",
+    nameTranslated: "Matahari"
+  },
+  "92": {
+    nameArabic: " الّيل",
+    nameSimple: "Al-Lail",
+    nameTranslated: "Malam"
+  },
+  "93": {
+    nameArabic: "الضّحى",
+    nameSimple: "Aḍ-Ḍuḥā",
+    nameTranslated: "Duha"
+  },
+  "94": {
+    nameArabic: "الشّرح",
+    nameSimple: "Asy-Syarḥ",
+    nameTranslated: "Pelapangan"
+  },
+  "95": {
+    nameArabic: "التّين",
+    nameSimple: "At-Tīn",
+    nameTranslated: "Buah Tin"
+  },
+  "96": {
+    nameArabic: " العلق",
+    nameSimple: "Al-‘Alaq",
+    nameTranslated: "Segumpal Darah"
+  },
+  "97": {
+    nameArabic: " القدر",
+    nameSimple: "Al-Qadr",
+    nameTranslated: "Al-Qadar"
+  },
+  "98": {
+    nameArabic: " البيّنة",
+    nameSimple: "Al-Bayyinah",
+    nameTranslated: "Bukti Nyata"
+  },
+  "99": {
+    nameArabic: "الزّلزلة",
+    nameSimple: "Az-Zalzalah",
+    nameTranslated: "Guncangan"
+  },
+  "100": {
+    nameArabic: " العٰديٰت",
+    nameSimple: "Al-‘Ādiyāt",
+    nameTranslated: "Kuda Perang Yang Berlari Kencang"
+  },
+  "101": {
+    nameArabic: " القارعة",
+    nameSimple: "Al-Qāri‘ah",
+    nameTranslated: "Al-Qāri‘ah"
+  },
+  "102": {
+    nameArabic: "التّكاثر",
+    nameSimple: "At-Takāṡur",
+    nameTranslated: "Berbangga-Bangga Dalam Memperbanyak Dunia"
+  },
+  "103": {
+    nameArabic: " العصر",
+    nameSimple: "Al-‘Aṣr",
+    nameTranslated: "Masa"
+  },
+  "104": {
+    nameArabic: " الهمزة",
+    nameSimple: "Al-Humazah",
+    nameTranslated: "Pengumpat"
+  },
+  "105": {
+    nameArabic: " الفيل",
+    nameSimple: "Al-Fīl",
+    nameTranslated: "Gajah"
+  },
+  "106": {
+    nameArabic: " قريش",
+    nameSimple: "Quraisy",
+    nameTranslated: "Orang Quraisy"
+  },
+  "107": {
+    nameArabic: " الماعون",
+    nameSimple: "Al-Mā‘ūn",
+    nameTranslated: "Bantuan"
+  },
+  "108": {
+    nameArabic: " الكوثر",
+    nameSimple: "Al-Kauṡar",
+    nameTranslated: "Nikmat Yang Banyak"
+  },
+  "109": {
+    nameArabic: " الكٰفرون",
+    nameSimple: "Al-Kāfirūn",
+    nameTranslated: "Orang-Orang kafir"
+  },
+  "110": {
+    nameArabic: "النّصر",
+    nameSimple: "An-Naṣr",
+    nameTranslated: "Pertolongan"
+  },
+  "111": {
+    nameArabic: "اللّهب",
+    nameSimple: "Al-Lahab",
+    nameTranslated: "Gejolak Api"
+  },
+  "112": {
+    nameArabic: " الاخلاص",
+    nameSimple: "Al-Ikhlāṣ",
+    nameTranslated: "Ikhlas"
+  },
+  "113": {
+    nameArabic: " الفلق",
+    nameSimple: "Al-Falaq",
+    nameTranslated: "Fajar"
+  },
+  "114": {
+    nameArabic: "النّاس",
+    nameSimple: "An-Nās",
+    nameTranslated: "Manusia"
+  }
+};
diff --git a/src/pages/quran/QuranReader.vue b/src/pages/quran/QuranReader.vue
index ded4a8e..23ba472 100644
--- a/src/pages/quran/QuranReader.vue
+++ b/src/pages/quran/QuranReader.vue
@@ -144,8 +144,9 @@
 <script>
 import QuranLogo from "src/components/QuranLogo.vue";
 import ToTop from "src/components/ToTop.vue";
-import surahList from "src/data/surah-list";
 import PageScrollPositionHandler from "src/components/PageScrollPositionHandler.vue";
+import { getFilteredSurahList } from "src/data/surah-list";
+
 export default {
   name: "QuranReader",
   components: {
@@ -157,7 +158,6 @@ export default {
     return {
       init: true,
       page: "quran-reader",
-      surahList: surahList,
       surahFilter: "",
       showSurahFilter: false
     };
@@ -177,17 +177,11 @@ export default {
       return this.getSurahLastRead();
     },
     surahListFiltered() {
+      let keyword = "";
       if (this.surahFilter && this.showSurahFilter) {
-        const q = this.surahFilter.toLowerCase();
-        return this.surahList.filter(s => {
-          return (
-            s.nameSimple.toLowerCase().includes(q) ||
-            s.nameArabic.toLowerCase().includes(q) ||
-            s.nameTranslated.toLowerCase().includes(q)
-          );
-        });
+        keyword = this.surahFilter;
       }
-      return this.surahList ?? [];
+      return getFilteredSurahList(keyword);
     }
   },
   methods: {