From 0732cfa19c03aab4453c051a07f783c6888a4941 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 12 Aug 2024 21:39:40 +0530
Subject: [PATCH] feat: app switcher

---
 frontend/src/components/Apps.vue           | 68 ++++++++++++++++++++++
 frontend/src/components/Icons/AppsIcon.vue | 17 ++++++
 frontend/src/components/UserDropdown.vue   |  7 +--
 3 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Apps.vue
 create mode 100644 frontend/src/components/Icons/AppsIcon.vue

diff --git a/frontend/src/components/Apps.vue b/frontend/src/components/Apps.vue
new file mode 100644
index 00000000..cbe00983
--- /dev/null
+++ b/frontend/src/components/Apps.vue
@@ -0,0 +1,68 @@
+<template>
+  <Popover placement="right-start" class="flex w-full">
+    <template #target="{ togglePopover }">
+      <button
+        :class="[
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+        ]"
+        @click.prevent="togglePopover()"
+      >
+        <div class="flex gap-2">
+          <AppsIcon class="size-4" />
+          <span class="whitespace-nowrap">
+            {{ __('Apps') }}
+          </span>
+        </div>
+        <FeatherIcon name="chevron-right" class="size-4 text-gray-600" />
+      </button>
+    </template>
+    <template #body>
+      <div
+        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+      >
+        <div v-for="app in apps.data" key="name">
+          <a
+            :href="app.route"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+          >
+            <img class="size-8" :src="app.logo" />
+            <div class="text-sm" @click="app.onClick">
+              {{ app.title }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+<script setup>
+import AppsIcon from '@/components/Icons/AppsIcon.vue'
+import { Popover, createResource } from 'frappe-ui'
+
+const apps = createResource({
+  url: 'frappe.apps.get_apps',
+  cache: 'apps',
+  auto: true,
+  transform: (data) => {
+    let _apps = [
+      {
+        name: 'frappe',
+        logo: '/assets/frappe/images/frappe-framework-logo.svg',
+        title: __('Desk'),
+        route: '/app',
+      },
+    ]
+    data.map((app) => {
+      if (app.name === 'crm') return
+      _apps.push({
+        name: app.name,
+        logo: app.logo,
+        title: __(app.title),
+        route: app.route,
+      })
+    })
+
+    return _apps
+  },
+})
+</script>
diff --git a/frontend/src/components/Icons/AppsIcon.vue b/frontend/src/components/Icons/AppsIcon.vue
new file mode 100644
index 00000000..2b314745
--- /dev/null
+++ b/frontend/src/components/Icons/AppsIcon.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    fill="none"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class=""
+      clip-rule="evenodd"
+      d="M13.8496 4.69692L12.0062 6.54029C11.8109 6.73555 11.4944 6.73555 11.2991 6.54028L9.45572 4.69692C9.26046 4.50166 9.26046 4.18508 9.45572 3.98981L11.2991 2.14645C11.4944 1.95118 11.8109 1.95118 12.0062 2.14645L13.8496 3.98981C14.0448 4.18507 14.0448 4.50166 13.8496 4.69692ZM14.5567 3.28271C15.1425 3.86849 15.1425 4.81824 14.5567 5.40403L12.7133 7.24739C12.1275 7.83318 11.1778 7.83318 10.592 7.24739L8.74862 5.40402C8.16283 4.81824 8.16283 3.86849 8.74862 3.28271L10.592 1.43934C11.1778 0.853553 12.1275 0.853554 12.7133 1.43934L14.5567 3.28271ZM5.60691 4.34338C5.60691 5.3394 4.79948 6.14683 3.80346 6.14683C2.80743 6.14683 2 5.3394 2 4.34338C2 3.34736 2.80743 2.53992 3.80346 2.53992C4.79948 2.53992 5.60691 3.34736 5.60691 4.34338ZM6.60691 4.34338C6.60691 5.89168 5.35176 7.14683 3.80346 7.14683C2.25515 7.14683 1 5.89168 1 4.34338C1 2.79507 2.25515 1.53992 3.80346 1.53992C5.35176 1.53992 6.60691 2.79507 6.60691 4.34338ZM12.9565 10.3897H10.3495C10.0734 10.3897 9.84954 10.6136 9.84954 10.8897V13.4966C9.84954 13.7728 10.0734 13.9966 10.3495 13.9966H12.9565C13.2326 13.9966 13.4565 13.7728 13.4565 13.4966V10.8897C13.4565 10.6136 13.2326 10.3897 12.9565 10.3897ZM10.3495 9.38971C9.52112 9.38971 8.84954 10.0613 8.84954 10.8897V13.4966C8.84954 14.325 9.52111 14.9966 10.3495 14.9966H12.9565C13.7849 14.9966 14.4565 14.325 14.4565 13.4966V10.8897C14.4565 10.0613 13.7849 9.38971 12.9565 9.38971H10.3495ZM2.5 10.3897H5.10691C5.38305 10.3897 5.60691 10.6136 5.60691 10.8897V13.4966C5.60691 13.7728 5.38306 13.9966 5.10691 13.9966H2.5C2.22386 13.9966 2 13.7728 2 13.4966V10.8897C2 10.6136 2.22386 10.3897 2.5 10.3897ZM1 10.8897C1 10.0613 1.67157 9.38971 2.5 9.38971H5.10691C5.93534 9.38971 6.60691 10.0613 6.60691 10.8897V13.4966C6.60691 14.325 5.93534 14.9966 5.10691 14.9966H2.5C1.67157 14.9966 1 14.325 1 13.4966V10.8897Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    ></path>
+  </svg>
+</template>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 8ec7ca2f..cf5bf263 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -50,10 +50,11 @@
 <script setup>
 import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { Dropdown } from 'frappe-ui'
-import { computed, ref } from 'vue'
+import { computed, ref, markRaw} from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -75,9 +76,7 @@ let dropdownOptions = ref([
     hideLabel: true,
     items: [
       {
-        icon: 'corner-up-left',
-        label: computed(() => __('Switch to Desk')),
-        onClick: () => window.location.replace('/app'),
+        component: markRaw(Apps),
       },
       {
         icon: 'life-buoy',