feat(ui): sidebar: beta badge (#1272)

desk/src/components/desk/sidebar/SideBar.vue

@@ -75,6 +75,7 @@ const menuOptions = computed(() => [
     label: "Knowledge base",
     icon: IconKnowledgeBase,
     to: "DeskKBHome",
+    isBeta: true,
   },
   {
     label: showExtra.value ? "Less" : "More",
@@ -108,6 +109,7 @@ const extraOptions = [
     label: "Canned responses",
     icon: IconCannedResponse,
     to: AGENT_PORTAL_CANNED_RESPONSE_LIST,
+    isBeta: true,
   },
   {
     label: "Customers",

desk/src/components/desk/sidebar/SidebarLink.vue

@@ -12,31 +12,40 @@
   >
     <component :is="icon" class="h-4 w-4 shrink-0"></component>
     <div
-      class="ml-2 shrink-0 text-base transition-all duration-300 ease-in-out"
+      class="ml-2 flex shrink-0 grow items-center justify-between text-base transition-all duration-300 ease-in-out"
       :class="{
         'opacity-100': sidebarStore.isExpanded,
         'opacity-0': !sidebarStore.isExpanded,
         '-z-50': !sidebarStore.isExpanded,
       }"
     >
       {{ label }}
+      <Tooltip :text="betaText">
+        <Badge v-if="isBeta" theme="orange" variant="subtle">beta</Badge>
+      </Tooltip>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { Badge, Tooltip } from "frappe-ui";
 import { useSidebarStore } from "@/stores/sidebar";
 
 const props = defineProps({
+  icon: {
+    type: Object,
+    required: true,
+  },
   label: {
     type: String,
     required: true,
   },
-  icon: {
-    type: Object,
-    required: true,
+  isBeta: {
+    type: Boolean,
+    required: false,
+    default: false,
   },
   to: {
     type: String,
@@ -54,6 +63,7 @@ const route = useRoute();
 const router = useRouter();
 const sidebarStore = useSidebarStore();
 const isActive = computed(() => props.to.includes(route.name.toString()));
+const betaText = "This feature is a work in progress. Use with caution";
 
 function handle() {
   props.onClick();