feat: Add new sidebar for Chatwoot V4 (#10291)

This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes

- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.

----

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -1,52 +1,122 @@
 <script setup>
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { computed, ref, watch } from 'vue';
+import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
   src: {
     type: String,
     default: '',
   },
+  name: {
+    type: String,
+    required: true,
+  },
   size: {
     type: Number,
-    default: 72,
+    default: 32,
+  },
+  allowUpload: {
+    type: Boolean,
+    default: false,
+  },
+  roundedFull: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: null,
+    validator: value => {
+      if (!value) return true;
+      return wootConstants.AVAILABILITY_STATUS_KEYS.includes(value);
+    },
   },
 });
-
 const emit = defineEmits(['upload']);
 
-const avatarSize = computed(() => `${props.size}px`);
-const iconSize = computed(() => `${props.size / 2}px`);
+const isImageValid = ref(true);
 
-const handleUploadAvatar = () => {
-  emit('upload');
-};
+function invalidateCurrentImage() {
+  isImageValid.value = false;
+}
+
+const initials = computed(() => {
+  const splitNames = props.name.split(' ');
+
+  if (splitNames.length > 1) {
+    const firstName = splitNames[0];
+    const lastName = splitNames[splitNames.length - 1];
+
+    return firstName[0] + lastName[0];
+  }
+
+  const firstName = splitNames[0];
+  return firstName[0];
+});
+
+watch(
+  () => props.src,
+  () => {
+    isImageValid.value = true;
+  }
+);
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
+  <span
+    class="relative inline"
     :style="{
-      width: avatarSize,
-      height: avatarSize,
+      width: `${size}px`,
+      height: `${size}px`,
     }"
   >
-    <img
-      v-if="src"
-      :src="props.src"
-      alt="avatar"
-      class="w-full h-full shadow-sm rounded-xl"
-    />
-    <div
-      class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleUploadAvatar"
-    >
-      <FluentIcon
-        icon="upload-lucide"
-        icon-lib="lucide"
-        :size="iconSize"
-        class="text-white dark:text-white"
+    <slot name="badge" :size>
+      <div
+        class="rounded-full w-2.5 h-2.5 absolute z-20"
+        :style="{
+          top: `${size - 10}px`,
+          left: `${size - 10}px`,
+        }"
+        :class="{
+          'bg-n-teal-10': status === 'online',
+          'bg-n-amber-10': status === 'busy',
+          'bg-n-slate-10': status === 'offline',
+        }"
       />
-    </div>
-  </div>
+    </slot>
+    <span
+      role="img"
+      class="inline-flex relative items-center justify-center object-cover overflow-hidden font-medium bg-woot-50 text-woot-500 group/avatar"
+      :class="{
+        'rounded-full': roundedFull,
+        'rounded-xl': !roundedFull,
+      }"
+      :style="{
+        width: `${size}px`,
+        height: `${size}px`,
+      }"
+    >
+      <img
+        v-if="src && isImageValid"
+        :src="src"
+        :alt="name"
+        @error="invalidateCurrentImage"
+      />
+      <span v-else>
+        {{ initials }}
+      </span>
+      <div
+        v-if="allowUpload"
+        role="button"
+        class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="emit('upload')"
+      >
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white dark:text-white size-4"
+        />
+      </div>
+    </span>
+  </span>
 </template>