From 7dcb4acb6d4697462c08a5730ee2e4b8d49283ec Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Apr 2023 20:00:40 +0100
Subject: [PATCH 01/15] multiple panels support

---
 src/components/partials/Nav/SectionsNav.vue   | 34 ++++++++++++++++---
 .../partials/Nav/SectionsNavElement.vue       | 32 +++--------------
 src/stores/settings.js                        |  6 ----
 src/views/HomeView.vue                        |  3 ++
 4 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/components/partials/Nav/SectionsNav.vue b/src/components/partials/Nav/SectionsNav.vue
index 51e26d7..f5efdf0 100644
--- a/src/components/partials/Nav/SectionsNav.vue
+++ b/src/components/partials/Nav/SectionsNav.vue
@@ -3,7 +3,7 @@
     <div class="flex space-x-1 rounded-lg bg-gray-100 p-1.5" role="tablist" aria-orientation="horizontal">
       <SectionsNavElement
               v-for="menuItem in menuItems"
-              @parent-selectnavitem="selectNavItem"
+              @click="selectItem(menuItem.id)"
               :selected="selected"
               :id="menuItem.id"
               :label="menuItem.label"
@@ -17,16 +17,40 @@
 
 <script setup>
 import SectionsNavElement from "@/components/partials/Nav/SectionsNavElement.vue";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {useSettingsStore} from "@/stores/settings";
 
 const settingsStore = useSettingsStore();
 const selected = ref(settingsStore.selectedSection)
 const menuItems = [
     {id: 1, label: "مواقيت الصلوات", route: "#", name: "salatetimes"},
-    // {id: 2, label: "رمضان", route: "#", name: "ramadanmode"},
-    // {id: 3, label: "الإعدادات", route: "#", name: "settings"},
+    {id: 2, label: "الإعدادات", route: "#", name: "settings"},
 ]
-const selectNavItem = (i) => selected.value = i;
 
+onMounted(() => {
+    selectItem(settingsStore.selectedSection)
+})
+
+
+const selectItem = (i) => {
+    i === false ? i = 1 : null;
+
+    selected.value = i
+    console.info('i', i)
+    settingsStore.updateSelectedSection(i)
+
+    settingsStore.hideVisibilitySalateTimes()
+    settingsStore.hideVisibilitySettings()
+
+    switch (i) {
+        case 1:
+            settingsStore.showVisibilitySalateTimes()
+            break
+        case 2:
+            settingsStore.showVisibilitySettings()
+            break
+        default:
+            settingsStore.showVisibilitySalateTimes()
+    }
+}
 </script>
diff --git a/src/components/partials/Nav/SectionsNavElement.vue b/src/components/partials/Nav/SectionsNavElement.vue
index a9332d5..19ab602 100644
--- a/src/components/partials/Nav/SectionsNavElement.vue
+++ b/src/components/partials/Nav/SectionsNavElement.vue
@@ -1,26 +1,20 @@
 <template>
     <button
       type="button"
-      @click="selectItem(id)"
-      :aria-selected="selected === id"
-      :class="selected === id ? 'bg-white shadow' : null"
+      :aria-selected="parseInt(selected) === id"
+      :class="parseInt(selected) === id ? 'bg-white shadow' : null"
       class="flex items-center rounded-md py-4 px-4 text-sm font-semibold lg:pr-3"
     >
         <span class="sr-only xl:not-sr-only lg:ml-2 text-slate-900">{{ label }}</span>
-        <IconMoonFilled v-if="name === 'ramadanmode'" :color="selected === id ? 'black' : 'gray'" />
-        <IconClock2 v-if="name === 'salatetimes'" :color="selected === id ? 'black' : 'gray'" />
-        <IconSettings v-if="name === 'settings'" :color="selected === id ? 'black' : 'gray'" />
+        <IconMoonFilled v-if="name === 'ramadanmode'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
+        <IconClock2 v-if="name === 'salatetimes'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
+        <IconSettings v-if="name === 'settings'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
 
     </button>
 </template>
 
 <script setup>
 import {IconClock2, IconMoonFilled, IconSettings} from "@tabler/icons-vue";
-import {useSettingsStore} from "@/stores/settings";
-import {onMounted} from "vue";
-
-const emit = defineEmits(['parent-selectnavitem'])
-const settingsStore = useSettingsStore();
 
 const props = defineProps({
     selected: { required: true },
@@ -30,20 +24,4 @@ const props = defineProps({
     name: {required: true },
 });
 
-const selectItem = (i) => {
-    emit('parent-selectnavitem', i);
-    settingsStore.updateSelectedSection(i)
-    
-    settingsStore.hideVisibilitySalateTimes()
-    settingsStore.hideVisibilityRamadanDashboard()
-    settingsStore.hideVisibilitySettings()
-    
-    props.name === 'ramadanmode' ? settingsStore.showVisibilityRamadanDashboard() : null
-    props.name === 'salatetimes' ? settingsStore.showVisibilitySalateTimes() : null
-    props.name === 'settings' ? settingsStore.showVisibilitySettings() : null
-}
-
-onMounted(() => {
-    selectItem(settingsStore.selectedSection)
-})
 </script>
\ No newline at end of file
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 4eee9a5..8682e4b 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -6,7 +6,6 @@ export const useSettingsStore = defineStore("settings", () => {
     const selectedSection = ref(useLocalStorage('selectedSection', 1));
     
     const displayMode = ref(useLocalStorage('displayMode', displayModes.isFull));
-    const showRamadanDashboard = ref(useLocalStorage('showRamadanDashboard', false));
     const showSalateTimes = ref(useLocalStorage('showSalateTimes', false));
     const showSettings = ref(useLocalStorage('showSettings', false));
     
@@ -17,10 +16,6 @@ export const useSettingsStore = defineStore("settings", () => {
     // const showDisplayMode = () => displayMode.value = true;
     // const hideDisplayMode = () => displayMode.value = false;
    
-    const switchVisibilityRamadanDashboard = () => showRamadanDashboard.value = !showRamadanDashboard.value;
-    const showVisibilityRamadanDashboard = () => showRamadanDashboard.value = true;
-    const hideVisibilityRamadanDashboard = () => showRamadanDashboard.value = false;
-   
     const switchVisibilitySalateTimes = () => showSalateTimes.value = !showSalateTimes.value;
     const showVisibilitySalateTimes = () => showSalateTimes.value = true;
     const hideVisibilitySalateTimes = () => showSalateTimes.value = false;
@@ -31,7 +26,6 @@ export const useSettingsStore = defineStore("settings", () => {
     
     return { 
         displayMode, switchDisplayMode,
-        showRamadanDashboard, switchVisibilityRamadanDashboard, showVisibilityRamadanDashboard, hideVisibilityRamadanDashboard,
         showSalateTimes, switchVisibilitySalateTimes, showVisibilitySalateTimes, hideVisibilitySalateTimes,
         showSettings, switchVisibilitySettings, showVisibilitySettings, hideVisibilitySettings,
         selectedSection, updateSelectedSection,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 293f3de..cc324e4 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,6 +3,7 @@
     <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'"/>
     <div class="w-full md:w-auto h-screen md:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white my-10" v-if="data && showPanel">
       <SalateTimes class="flex w-full h-5/6" v-if="showSalateTimes"/>
+      <Settings class="flex w-full h-full" v-if="showSettings"/>
       <SectionsNav class="p-5"/>
     </div>
 
@@ -20,6 +21,7 @@ import Spinner from "@/components/partials/SpinnerLoader.vue";
 import {useCityStore} from "@/stores/city"
 import {useSettingsStore} from "@/stores/settings"
 import SalateTimes from "@/components/sections/SalateTimes.vue";
+import Settings from "@/components/sections/Settings.vue";
 import SectionsNav from "@/components/partials/Nav/SectionsNav.vue";
 import { IconLayoutCards } from '@tabler/icons-vue';
 
@@ -56,5 +58,6 @@ const isTooSmall = computed(() => windowWidth.value <= 500)
 const refreshTheDay = (cityId) => cityId ? fetchData(cityId) : fetchData(selectedCityId.value)
 const showPanel = computed(() => settingsStore.displayMode)
 const showSalateTimes = computed(() => settingsStore.showSalateTimes)
+const showSettings = computed(() => settingsStore.showSettings)
 
 </script>

From 0ab2f1ab08fad79e9cbcd0020814dff0df79c2ac Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Apr 2023 20:01:13 +0100
Subject: [PATCH 02/15] responsive ui improved

---
 src/components/partials/Nav/SectionsNav.vue        |  2 --
 src/components/partials/Nav/SectionsNavElement.vue |  2 +-
 src/views/HomeView.vue                             | 10 +++++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/partials/Nav/SectionsNav.vue b/src/components/partials/Nav/SectionsNav.vue
index f5efdf0..e82398f 100644
--- a/src/components/partials/Nav/SectionsNav.vue
+++ b/src/components/partials/Nav/SectionsNav.vue
@@ -31,12 +31,10 @@ onMounted(() => {
     selectItem(settingsStore.selectedSection)
 })
 
-
 const selectItem = (i) => {
     i === false ? i = 1 : null;
 
     selected.value = i
-    console.info('i', i)
     settingsStore.updateSelectedSection(i)
 
     settingsStore.hideVisibilitySalateTimes()
diff --git a/src/components/partials/Nav/SectionsNavElement.vue b/src/components/partials/Nav/SectionsNavElement.vue
index 19ab602..91d32a7 100644
--- a/src/components/partials/Nav/SectionsNavElement.vue
+++ b/src/components/partials/Nav/SectionsNavElement.vue
@@ -5,7 +5,7 @@
       :class="parseInt(selected) === id ? 'bg-white shadow' : null"
       class="flex items-center rounded-md py-4 px-4 text-sm font-semibold lg:pr-3"
     >
-        <span class="sr-only xl:not-sr-only lg:ml-2 text-slate-900">{{ label }}</span>
+        <span class="sr-only lg:not-sr-only lg:ml-2 text-slate-900">{{ label }}</span>
         <IconMoonFilled v-if="name === 'ramadanmode'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
         <IconClock2 v-if="name === 'salatetimes'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
         <IconSettings v-if="name === 'settings'" :color="parseInt(selected) === id ? 'black' : 'gray'" />
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cc324e4..a1b3ed1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,10 @@
 <template>
-  <div v-auto-animate="{ duration: 500 }" class="gap-16">
-    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'"/>
-    <div class="w-full md:w-auto h-screen md:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white my-10" v-if="data && showPanel">
+  <div v-auto-animate="{ duration: 500 }" class="gap-0">
+    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'" class=" lg:m-10"/>
+    <div class="w-full 2xl:w-3/6 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel">
       <SalateTimes class="flex w-full h-5/6" v-if="showSalateTimes"/>
-      <Settings class="flex w-full h-full" v-if="showSettings"/>
-      <SectionsNav class="p-5"/>
+      <Settings class="flex w-full h-5/6" v-if="showSettings"/>
+      <SectionsNav class="mt-10"/>
     </div>
 
     <button @click="settingsStore.switchDisplayMode()" :class="isTooSmall ? 'hidden' : null" class="fixed bottom-10 right-8 bg-gray-50 w-12 h-12 rounded-full drop-shadow-lg flex justify-center items-center hover:drop-shadow-xl">

From 81353f64aef5d05afa3f47266246f1df69168cad Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Apr 2023 20:13:45 +0100
Subject: [PATCH 03/15] minor ui fix

---
 src/views/HomeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a1b3ed1..4b4ec92 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-auto-animate="{ duration: 500 }" class="gap-0">
     <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'" class=" lg:m-10"/>
-    <div class="w-full 2xl:w-3/6 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel">
+    <div class="w-full 2xl:w-7/12 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel">
       <SalateTimes class="flex w-full h-5/6" v-if="showSalateTimes"/>
       <Settings class="flex w-full h-5/6" v-if="showSettings"/>
       <SectionsNav class="mt-10"/>

From 9bfeced4fee52704c836c6db724531323b7ccdfa Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sat, 10 Jun 2023 20:48:32 +0100
Subject: [PATCH 04/15] cities dropdown component with limit of 8

---
 src/components/partials/CitiesDropdown.vue | 54 ++++++++++++++++++++++
 src/components/sections/Settings.vue       | 32 +++++++++++--
 2 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 src/components/partials/CitiesDropdown.vue

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
new file mode 100644
index 0000000..e5ec6ae
--- /dev/null
+++ b/src/components/partials/CitiesDropdown.vue
@@ -0,0 +1,54 @@
+<template>
+  <div dir="rtl">
+
+      <button id="dropdownSearchButton" @click="clicked = !clicked" data-dropdown-toggle="dropdownSearch" data-dropdown-placement="bottom" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">Dropdown search <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
+
+      <!-- Dropdown menu -->
+      <div id="dropdownSearch" class="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700" v-show="clicked">
+          <div class="p-3">
+              <label for="input-group-search" class="sr-only">Search</label>
+              <div class="relative">
+                  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                      <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
+                  </div>
+                  <input type="text" id="input-group-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="Search city">
+              </div>
+          </div>
+          <ul class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
+              <li v-for="city in props.cities" :key="city.id">
+                  <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
+                      <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" value="" class="w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                  </div>
+              </li>
+          </ul>
+          <a href="#" class="flex items-center p-3 text-sm font-medium text-red-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline">
+              <svg class="w-5 h-5 mr-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 17a6 6 0 00-12 0h12zM13 8a1 1 0 100 2h4a1 1 0 100-2h-4z"></path></svg>
+              Reset selection
+          </a>
+      </div>
+
+  </div>
+</template>
+
+<script setup>
+import {computed, onMounted, ref} from "vue";
+
+const props = defineProps({
+  cities: { required: true },
+});
+
+const clicked = ref(false)
+const selectedCities = ref([]);
+
+const refreshSelected = (cityId) => {
+  selectedCities.value.includes(cityId) 
+    ? selectedCities.value.splice(selectedCities.value.indexOf(cityId), 1) 
+    : selectedCities.value.length < 8 
+        ? selectedCities.value.push(cityId) 
+        : null
+}
+
+const disableCheckbox = computed(() => selectedCities.value.length >= 8)
+
+</script>
diff --git a/src/components/sections/Settings.vue b/src/components/sections/Settings.vue
index 9ee173a..3823052 100644
--- a/src/components/sections/Settings.vue
+++ b/src/components/sections/Settings.vue
@@ -1,10 +1,34 @@
 <template>
-  <div>
-    <IconSettings color="black" />
-    settings
+  <div class="p-5 bg-gray-100 flex flex-col">
+      <div class="flex flex-row justify-center p-5 pt-0">
+          الإعدادات
+      </div>
+      <div class="flex flex-col bg-white h-full rounded-lg">
+        <CitiesDropdown :cities="cities"/>
+      </div>
   </div>
 </template>
 
 <script setup>
-import {IconSettings} from "@tabler/icons-vue";
+import {onMounted, ref} from "vue";
+import CitiesDropdown from "@/components/partials/CitiesDropdown.vue";
+const cities = ref(null);
+
+onMounted(() => fetchData())
+
+async function fetchData() {
+    const HOST   = process.env.RA_HOST || import.meta.env.VITE_BOUAYADAPP_API_URL;
+    const SECRET = process.env.RA_SECRET || import.meta.env.VITE_BOUAYADAPP_API_SECRET;
+
+    const options = {
+        "method": "GET",
+        "headers": {
+            "x-rapidapi-host": HOST,
+            "x-rapidapi-key": SECRET
+        }
+    };
+    const response = await fetch(`https://${HOST}/cities`, options);
+    cities.value = await response.json();
+    cities.value = cities.value.data;
+}
 </script>

From 16d6f8016b3ae78c229fd998aacae6c1724f7cd9 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sat, 10 Jun 2023 21:50:17 +0100
Subject: [PATCH 05/15] to arabic & replace svg icons

---
 src/components/partials/CitiesDropdown.vue | 31 +++++++++++++++-------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index e5ec6ae..23fb302 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -1,37 +1,41 @@
 <template>
   <div dir="rtl">
 
-      <button id="dropdownSearchButton" @click="clicked = !clicked" data-dropdown-toggle="dropdownSearch" data-dropdown-placement="bottom" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">Dropdown search <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
+      <button id="dropdownSearchButton" @click="clicked = !clicked" data-dropdown-toggle="dropdownSearch" data-dropdown-placement="bottom" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
+        اختيار المدن
+        <IconCaretDown class="w-5 h-5"/>
+      </button>
 
       <!-- Dropdown menu -->
       <div id="dropdownSearch" class="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700" v-show="clicked">
           <div class="p-3">
-              <label for="input-group-search" class="sr-only">Search</label>
+              <label for="input-group-search" class="sr-only">بحث</label>
               <div class="relative">
                   <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                      <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
+                    <IconSearch class="w-5 h-5 text-gray-500 dark:text-gray-400"/>
                   </div>
-                  <input type="text" id="input-group-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="Search city">
+                  <input type="text" id="input-group-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="بحث">
               </div>
           </div>
           <ul class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
               <li v-for="city in props.cities" :key="city.id">
                   <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                       <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
-                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" value="" class="w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" class="js-city-checkbox-item w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                   </div>
               </li>
           </ul>
-          <a href="#" class="flex items-center p-3 text-sm font-medium text-red-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500 hover:underline">
-              <svg class="w-5 h-5 mr-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 17a6 6 0 00-12 0h12zM13 8a1 1 0 100 2h4a1 1 0 100-2h-4z"></path></svg>
-              Reset selection
-          </a>
+          <span @click="clearSelected" class="cursor-pointer flex justify-between p-3 pl-4 text-sm font-medium text-red-600 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-red-500">
+            مسح كل الاختيارات
+            <IconZoomCancel/>
+          </span>
       </div>
 
   </div>
 </template>
 
 <script setup>
+import {IconZoomCancel, IconSearch, IconCaretDown} from "@tabler/icons-vue";
 import {computed, onMounted, ref} from "vue";
 
 const props = defineProps({
@@ -41,6 +45,15 @@ const props = defineProps({
 const clicked = ref(false)
 const selectedCities = ref([]);
 
+const clearSelected = () => {
+  selectedCities.value.splice(0);
+  
+  const checkboxes = document.querySelectorAll('input.js-city-checkbox-item[type="checkbox"]');
+  checkboxes.forEach((checkbox) => {
+    checkbox.checked = false;
+  });
+}
+
 const refreshSelected = (cityId) => {
   selectedCities.value.includes(cityId) 
     ? selectedCities.value.splice(selectedCities.value.indexOf(cityId), 1) 

From c9446d143ebf70ffce3204cd2dfd3d3e7d02acab Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sat, 10 Jun 2023 22:34:15 +0100
Subject: [PATCH 06/15] filter cities

---
 src/components/partials/CitiesDropdown.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index 23fb302..3fe094e 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -11,17 +11,17 @@
           <div class="p-3">
               <label for="input-group-search" class="sr-only">بحث</label>
               <div class="relative">
-                  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                    <IconSearch class="w-5 h-5 text-gray-500 dark:text-gray-400"/>
+                  <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <IconX v-if="cityQuery" @click="cityQuery=''" class="cursor-pointer w-5 h-5 text-gray-500 dark:text-gray-400"/>
                   </div>
-                  <input type="text" id="input-group-search" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="بحث">
+                  <input type="text" v-model="cityQuery" id="input-group-search" placeholder="بحث" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500">
               </div>
           </div>
           <ul class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
-              <li v-for="city in props.cities" :key="city.id">
+              <li v-for="city in filteredCities" :key="city.id">
                   <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                       <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
-                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" class="js-city-checkbox-item w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.includes(city.id)" class="js-city-checkbox-item w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                   </div>
               </li>
           </ul>
@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import {IconZoomCancel, IconSearch, IconCaretDown} from "@tabler/icons-vue";
+import {IconZoomCancel, IconX, IconCaretDown} from "@tabler/icons-vue";
 import {computed, onMounted, ref} from "vue";
 
 const props = defineProps({
@@ -44,6 +44,7 @@ const props = defineProps({
 
 const clicked = ref(false)
 const selectedCities = ref([]);
+const cityQuery = ref('');
 
 const clearSelected = () => {
   selectedCities.value.splice(0);
@@ -64,4 +65,13 @@ const refreshSelected = (cityId) => {
 
 const disableCheckbox = computed(() => selectedCities.value.length >= 8)
 
+const filteredCities = computed(() => {
+  if(!props.cities) return [];
+  return props.cities.filter(city =>
+    city.name.toLowerCase().includes(cityQuery.value.toLowerCase()) ||
+    city.name_ar.includes(cityQuery.value) ||
+    city.id.toString().includes(cityQuery.value)
+  );
+});
+
 </script>

From e8d3104f9605f72f0a0d3ddf31876227ae6d64b3 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 11 Jun 2023 12:08:29 +0100
Subject: [PATCH 07/15] selected cities to store and localstorage

---
 src/components/partials/CitiesDropdown.vue | 8 ++++++--
 src/stores/settings.js                     | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index 3fe094e..1d6b52f 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -21,7 +21,7 @@
               <li v-for="city in filteredCities" :key="city.id">
                   <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                       <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
-                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.includes(city.id)" class="js-city-checkbox-item w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.includes(city.id)" class="js-city-checkbox-item accent-gray-600 w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                   </div>
               </li>
           </ul>
@@ -37,13 +37,15 @@
 <script setup>
 import {IconZoomCancel, IconX, IconCaretDown} from "@tabler/icons-vue";
 import {computed, onMounted, ref} from "vue";
+import {useSettingsStore} from "@/stores/settings";
+const settingsStore = useSettingsStore();
 
 const props = defineProps({
   cities: { required: true },
 });
 
 const clicked = ref(false)
-const selectedCities = ref([]);
+const selectedCities = ref(settingsStore.selectedCities);
 const cityQuery = ref('');
 
 const clearSelected = () => {
@@ -61,6 +63,8 @@ const refreshSelected = (cityId) => {
     : selectedCities.value.length < 8 
         ? selectedCities.value.push(cityId) 
         : null
+
+  settingsStore.selectedCities = selectedCities.value;
 }
 
 const disableCheckbox = computed(() => selectedCities.value.length >= 8)
diff --git a/src/stores/settings.js b/src/stores/settings.js
index 8682e4b..2e2929b 100644
--- a/src/stores/settings.js
+++ b/src/stores/settings.js
@@ -4,6 +4,7 @@ import { useLocalStorage } from "@vueuse/core"
 
 export const useSettingsStore = defineStore("settings", () => {
     const selectedSection = ref(useLocalStorage('selectedSection', 1));
+    const selectedCities = ref(useLocalStorage('selectedCities', []));
     
     const displayMode = ref(useLocalStorage('displayMode', displayModes.isFull));
     const showSalateTimes = ref(useLocalStorage('showSalateTimes', false));
@@ -12,6 +13,9 @@ export const useSettingsStore = defineStore("settings", () => {
     const updateSelectedSection = (id) => {
         selectedSection.value = id
     }
+    const updateSelectedCities = (cities) => {
+        selectedCities.value = cities
+    }
     const switchDisplayMode = () => displayMode.value = !displayMode.value;
     // const showDisplayMode = () => displayMode.value = true;
     // const hideDisplayMode = () => displayMode.value = false;
@@ -29,5 +33,6 @@ export const useSettingsStore = defineStore("settings", () => {
         showSalateTimes, switchVisibilitySalateTimes, showVisibilitySalateTimes, hideVisibilitySalateTimes,
         showSettings, switchVisibilitySettings, showVisibilitySettings, hideVisibilitySettings,
         selectedSection, updateSelectedSection,
+        selectedCities, updateSelectedCities,
     };
 });

From 5f2a31eff8bd57d7edf221785cc52ca4f3ff0851 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 11 Jun 2023 18:03:30 +0100
Subject: [PATCH 08/15] storing selected cities with names in pinia

---
 src/components/partials/CitiesDropdown.vue | 23 ++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index 1d6b52f..c02397c 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -36,7 +36,7 @@
 
 <script setup>
 import {IconZoomCancel, IconX, IconCaretDown} from "@tabler/icons-vue";
-import {computed, onMounted, ref} from "vue";
+import {computed, ref} from "vue";
 import {useSettingsStore} from "@/stores/settings";
 const settingsStore = useSettingsStore();
 
@@ -50,6 +50,7 @@ const cityQuery = ref('');
 
 const clearSelected = () => {
   selectedCities.value.splice(0);
+  settingsStore.updateSelectedCities(selectedCities.value);
   
   const checkboxes = document.querySelectorAll('input.js-city-checkbox-item[type="checkbox"]');
   checkboxes.forEach((checkbox) => {
@@ -58,14 +59,20 @@ const clearSelected = () => {
 }
 
 const refreshSelected = (cityId) => {
-  selectedCities.value.includes(cityId) 
-    ? selectedCities.value.splice(selectedCities.value.indexOf(cityId), 1) 
-    : selectedCities.value.length < 8 
-        ? selectedCities.value.push(cityId) 
-        : null
+  const selectedCity = props.cities.find(city => city.id === cityId);
 
-  settingsStore.selectedCities = selectedCities.value;
-}
+  if (selectedCity) {
+    const cityIndex = selectedCities.value.findIndex(city => city.id === cityId);
+
+    if (cityIndex !== -1) {
+      selectedCities.value.splice(cityIndex, 1);
+    } else if (selectedCities.value.length < 8) {
+      selectedCities.value.push({ id: cityId, name_ar: selectedCity.name_ar, name: selectedCity.name });
+    }
+
+    settingsStore.updateSelectedCities(selectedCities.value);
+  }
+};
 
 const disableCheckbox = computed(() => selectedCities.value.length >= 8)
 

From 137433aac05e704a373045c51a86ce1244a69031 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 11 Jun 2023 18:04:09 +0100
Subject: [PATCH 09/15] using selected cities from store if filled

---
 src/components/TheDay.vue | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/TheDay.vue b/src/components/TheDay.vue
index 506c954..537ff49 100644
--- a/src/components/TheDay.vue
+++ b/src/components/TheDay.vue
@@ -72,20 +72,20 @@
                   </td>
                 </tr>
                 <!--section 2: cites-->
-                <tr class="border-b">
+                <tr class="border-b" v-auto-animate>
                   <td @click="getByCity(city)"
                       :class="[!isTooSmall ? 'text-base' : 'text-sm', selectedCityId === city.id ? 'bg-gray-50': '']"
                       class="font-light py-2 cursor-pointer hover:bg-gray-100 transition-all"
                       v-for="city in RTLCities.slice(4, 8)" :key="city.id">
-                    {{ city.name }}
+                    {{ city.name_ar }}
                   </td>
                 </tr>
-                <tr class="border-b">
+                <tr class="border-b" v-auto-animate>
                   <td @click="getByCity(city)"
                       :class="[!isTooSmall ? 'text-base' : 'text-sm', selectedCityId === city.id ? 'bg-gray-50': '']"
                       class="font-light py-2 cursor-pointer hover:bg-gray-100 transition-all"
                       v-for="city in RTLCities.slice(0, 4)" :key="city.id">
-                    {{ city.name }}
+                    {{ city.name_ar }}
                   </td>
                 </tr>
                 <!--section 3: filahi date with salate times-->
@@ -127,7 +127,9 @@
 import {ref, computed, toRefs, onMounted} from "vue";
 import SalateElement from "@/components/partials/salateElement.vue";
 import { useCityStore } from "@/stores/city"
+import {useSettingsStore} from "@/stores/settings";
 
+const settingsStore = useSettingsStore();
 const store = useCityStore();
 const props = defineProps({
   data: {
@@ -144,18 +146,22 @@ const currentTime = ref(new Date());
 const showBack = ref(false);
 const showFirstHikma = ref(true);
 const defaultCities = ref([
-  {id: 1, name: "الرباط"},
-  {id: 99, name: "مكناس"},
-  {id: 81, name: "فاس"},
-  {id: 31, name: "وجدة"},
-  {id: 156, name: "العيون"},
-  {id: 117, name: "أغادير"},
-  {id: 107, name: "مراكش"},
-  {id: 58, name: "البيضاء"},
+  {id: 1, name_ar: "الرباط"},
+  {id: 99, name_ar: "مكناس"},
+  {id: 81, name_ar: "فاس"},
+  {id: 31, name_ar: "وجدة"},
+  {id: 156, name_ar: "العيون"},
+  {id: 117, name_ar: "أغادير"},
+  {id: 107, name_ar: "مراكش"},
+  {id: 58, name_ar: "البيضاء"},
 ])
+const selectedCities = ref(settingsStore.selectedCities)
 
-const RTLCities = computed(() => defaultCities.value.slice(0).reverse())
-
+const RTLCities = computed(() => {
+  return selectedCities.value.length > 0
+    ? selectedCities.value.slice(0).reverse()
+    : defaultCities.value.slice(0).reverse()
+})
 const countHikamsFront = computed(() => data.value.events.hikams_front.length)
 const firstHikmaF = computed(() => data.value.events.hikams_front[0])
 const secondHikmaF = computed(() => data.value.events.hikams_front[1])

From 6264417551dcd4bdec1d6e8524c130de9d3e9e5e Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 11 Jun 2023 18:26:32 +0100
Subject: [PATCH 10/15] checkbox status with filter animation

---
 src/components/partials/CitiesDropdown.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index c02397c..82a22b7 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -17,11 +17,11 @@
                   <input type="text" v-model="cityQuery" id="input-group-search" placeholder="بحث" class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500">
               </div>
           </div>
-          <ul class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
+          <ul v-auto-animate class="h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownSearchButton">
               <li v-for="city in filteredCities" :key="city.id">
                   <div class="flex items-center pl-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                       <label :for="'checkbox-item-' + city.id" class="w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300">{{ city.name_ar }}</label>
-                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.includes(city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.includes(city.id)" class="js-city-checkbox-item accent-gray-600 w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
+                      <input @change="refreshSelected(city.id)" :id="'checkbox-item-' + city.id" :disabled="!selectedCities.some(c => c.id === city.id) && disableCheckbox ? disableCheckbox : false" type="checkbox" :checked="selectedCities.some(c => c.id === city.id)" class="js-city-checkbox-item accent-gray-600 w-4 h-4 text-gray-600 bg-gray-100 border-gray-300 rounded focus:ring-gray-500 dark:focus:ring-gray-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                   </div>
               </li>
           </ul>
@@ -44,7 +44,7 @@ const props = defineProps({
   cities: { required: true },
 });
 
-const clicked = ref(false)
+const clicked = ref(true)
 const selectedCities = ref(settingsStore.selectedCities);
 const cityQuery = ref('');
 

From 29d0ac0ab4c2acda0b581d536bea7b91044be289 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 11 Jun 2023 18:28:15 +0100
Subject: [PATCH 11/15] dropdown default status restored

---
 src/components/partials/CitiesDropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index 82a22b7..a88049b 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -44,7 +44,7 @@ const props = defineProps({
   cities: { required: true },
 });
 
-const clicked = ref(true)
+const clicked = ref(false)
 const selectedCities = ref(settingsStore.selectedCities);
 const cityQuery = ref('');
 

From bd492d9a8c2d51cf4aab372a63113cb29511d017 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Jun 2024 17:49:28 +0100
Subject: [PATCH 12/15] disable calendar view for browsers extension's webview

---
 src/views/HomeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 4b4ec92..e6ff4b6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-auto-animate="{ duration: 500 }" class="gap-0">
-    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel ? '' : 'hidden xl:flex'" class=" lg:m-10"/>
-    <div class="w-full 2xl:w-7/12 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel">
+    <TheDay v-if="data" :data="data" @parent-refreshtheday="refreshTheDay" :selectedCityId="selectedCityId" :class="!showPanel || isTooSmall ? '' : 'hidden xl:flex'" class=" lg:m-10"/>
+    <div class="w-full 2xl:w-7/12 h-screen lg:h-5/6 flex flex-col items-center rounded-lg shadow-lg bg-white lg:m-10" v-if="data && showPanel && !isTooSmall">
       <SalateTimes class="flex w-full h-5/6" v-if="showSalateTimes"/>
       <Settings class="flex w-full h-5/6" v-if="showSettings"/>
       <SectionsNav class="mt-10"/>

From 8fd04f6acdbd34dd22695ab9b7be15d4ef22ad3a Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Jun 2024 18:11:56 +0100
Subject: [PATCH 13/15] add label for cities dropdown

---
 src/components/sections/Settings.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/sections/Settings.vue b/src/components/sections/Settings.vue
index 3823052..5c4cc5d 100644
--- a/src/components/sections/Settings.vue
+++ b/src/components/sections/Settings.vue
@@ -3,8 +3,11 @@
       <div class="flex flex-row justify-center p-5 pt-0">
           الإعدادات
       </div>
-      <div class="flex flex-col bg-white h-full rounded-lg">
-        <CitiesDropdown :cities="cities"/>
+      <div class="flex flex-col bg-white h-full rounded-lg p-12">
+        <div class="flex flex-row align-middle justify-between">
+          <span>إختر المدن المفظلة لديك (في حدود 8 مدن)</span>
+          <CitiesDropdown :cities="cities"/>
+        </div>
       </div>
   </div>
 </template>

From 87ac3d5f71f7cc3a053ec396508c9a3d75068e2e Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Sun, 30 Jun 2024 18:20:20 +0100
Subject: [PATCH 14/15] cities dropdown: typo and layout fixed

---
 src/components/partials/CitiesDropdown.vue | 10 +++++++---
 src/components/sections/Settings.vue       |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/partials/CitiesDropdown.vue b/src/components/partials/CitiesDropdown.vue
index a88049b..7161f23 100644
--- a/src/components/partials/CitiesDropdown.vue
+++ b/src/components/partials/CitiesDropdown.vue
@@ -1,13 +1,17 @@
 <template>
-  <div dir="rtl">
+  <div>
 
-      <button id="dropdownSearchButton" @click="clicked = !clicked" data-dropdown-toggle="dropdownSearch" data-dropdown-placement="bottom" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
+      <button id="dropdownSearchButton"
+              @click="clicked = !clicked"
+              data-dropdown-toggle="dropdownSearch"
+              data-dropdown-placement="bottom"
+              class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800" type="button">
         اختيار المدن
         <IconCaretDown class="w-5 h-5"/>
       </button>
 
       <!-- Dropdown menu -->
-      <div id="dropdownSearch" class="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700" v-show="clicked">
+      <div dir="rtl" id="dropdownSearch" class="z-10 bg-white rounded-lg shadow w-60 dark:bg-gray-700" v-show="clicked">
           <div class="p-3">
               <label for="input-group-search" class="sr-only">بحث</label>
               <div class="relative">
diff --git a/src/components/sections/Settings.vue b/src/components/sections/Settings.vue
index 5c4cc5d..723a7dd 100644
--- a/src/components/sections/Settings.vue
+++ b/src/components/sections/Settings.vue
@@ -5,8 +5,8 @@
       </div>
       <div class="flex flex-col bg-white h-full rounded-lg p-12">
         <div class="flex flex-row align-middle justify-between">
-          <span>إختر المدن المفظلة لديك (في حدود 8 مدن)</span>
           <CitiesDropdown :cities="cities"/>
+          <span>إختر المدن المفضلة لديك (في حدود 8 مدن)</span>
         </div>
       </div>
   </div>

From 7d23572ff3f25a8baaa5f8ce05efde51069fef21 Mon Sep 17 00:00:00 2001
From: moghwan <chaoui.mar2@gmail.com>
Date: Fri, 5 Jul 2024 20:15:36 +0100
Subject: [PATCH 15/15] bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3731f09..86f96b5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bouayadapp-front",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "vite",