feat(ui): sidebar: beta badge

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();