Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/dashboard/components-next/Settings/SettingsAccordion.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  defaultOpen: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const [isOpen, toggle] = useToggle(props.defaultOpen);
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    class="flex items-center justify-between w-full cursor-pointer pb-2 pt-4 border-t border-n-weak"
+    @click="toggle()"
+  >
+    <span class="text-heading-2 text-n-slate-12 w-full">
+      {{ title }}
+    </span>
+  </div>
+  <div v-if="isOpen" class="w-full space-y-4 pt-4 mb-4">
+    <slot />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/Settings/SettingsFieldSection.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  helpText: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="w-full py-2 mb-2 [interpolate-size:allow-keywords]">
+    <div
+      class="grid grid-cols-1 lg:grid-cols-8 gap-1.5 lg:gap-4 items-start lg:items-center"
+    >
+      <label class="text-heading-3 text-n-slate-12 col-span-1 lg:col-span-2">
+        {{ label }}
+      </label>
+      <div class="col-span-1 lg:col-span-6">
+        <slot />
+      </div>
+    </div>
+    <div v-if="helpText" class="grid grid-cols-1 lg:grid-cols-8">
+      <div class="col-span-1 lg:col-span-2 invisible" />
+      <p
+        v-if="helpText"
+        class="mt-1.5 col-span-1 lg:col-span-6 text-label-small text-n-slate-11 ltr:ml-1 rtl:mr-1"
+      >
+        {{ helpText }}
+      </p>
+    </div>
+    <slot name="extra" />
+  </div>
+</template>

research/chatwoot/app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -0,0 +1,45 @@
+<script setup>
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
+
+defineProps({
+  header: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const modelValue = defineModel({ type: Boolean, default: false });
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start outline outline-1 -outline-offset-1 outline-n-weak rounded-xl [interpolate-size:allow-keywords]"
+  >
+    <div class="flex flex-col gap-1 items-start w-full px-4 py-3">
+      <div class="flex items-center gap-3 w-full justify-between">
+        <span class="text-heading-3 text-n-slate-12">
+          {{ header }}
+        </span>
+        <ToggleSwitch v-model="modelValue" />
+      </div>
+      <span v-if="description" class="text-body-main text-n-slate-11">
+        {{ description }}
+      </span>
+    </div>
+    <div
+      v-if="$slots.editor"
+      class="w-full border-t border-n-weak"
+      :class="{ 'p-0': compact, 'px-4 pb-4 pt-2': !compact }"
+    >
+      <slot name="editor" />
+    </div>
+  </div>
+</template>