Ajuste Layout, Dashboard Terapeuta, Timeline, Suporte técnico, Documentação e FAQ

src/layout/AppConfigurator.vue

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue'
 import { useLayout } from '@/layout/composables/layout'
 import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options'
 
-const { layoutConfig, isDarkTheme, changeMenuMode } = useLayout()
+const { layoutConfig, isDarkTheme, changeMenuMode, setVariant } = useLayout()
 
 // ✅ vem do AppTopbar (mesma instância)
 const queuePatch = inject('queueUserSettingsPatch', null)
@@ -101,7 +101,8 @@ function updateColors (type, item) {
         <SelectButton v-model="presetModel" :options="presetOptions" :allowEmpty="false" />
       </div>
 
-      <div class="flex flex-col gap-2">
+      <!-- Menu Mode: visível apenas no Layout Clássico -->
+      <div v-show="layoutConfig.variant === 'classic'" class="flex flex-col gap-2">
         <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
         <SelectButton
           v-model="menuModeModel"
@@ -111,6 +112,98 @@ function updateColors (type, item) {
           optionValue="value"
         />
       </div>
+
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">Layout</span>
+        <div class="flex flex-col gap-1">
+          <!-- Layout Rail -->
+          <button
+            type="button"
+            class="layout-option"
+            :class="{ 'layout-option--active': layoutConfig.variant === 'rail' }"
+            @click="setVariant('rail')"
+          >
+            <i
+              :class="layoutConfig.variant === 'rail' ? 'pi pi-check-circle' : 'pi pi-circle'"
+              class="layout-option__icon"
+            />
+            <span class="layout-option__label">Layout Rail</span>
+            <span v-if="layoutConfig.variant === 'rail'" class="layout-option__badge layout-option__badge--default">Padrão</span>
+          </button>
+
+          <!-- Layout Clássico -->
+          <button
+            type="button"
+            class="layout-option"
+            :class="{ 'layout-option--active': layoutConfig.variant === 'classic' }"
+            @click="setVariant('classic')"
+          >
+            <i
+              :class="layoutConfig.variant === 'classic' ? 'pi pi-check-circle' : 'pi pi-circle'"
+              class="layout-option__icon"
+            />
+            <span class="layout-option__label">Layout Clássico</span>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
-</template>
+</template>
+
+<style scoped>
+.layout-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: var(--border-radius, 6px);
+  border: 1px solid var(--surface-border);
+  background: var(--surface-ground);
+  font-size: 0.8rem;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+  width: 100%;
+}
+
+.layout-option:hover {
+  border-color: var(--primary-color);
+}
+
+.layout-option--active {
+  border-color: var(--primary-color);
+  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+}
+
+.layout-option__icon {
+  font-size: 0.85rem;
+  color: var(--text-color-secondary);
+  flex-shrink: 0;
+}
+
+.layout-option--active .layout-option__icon {
+  color: var(--primary-color);
+}
+
+.layout-option__label {
+  flex: 1;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.layout-option__badge {
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.layout-option__badge--default {
+  background: var(--primary-color);
+  color: var(--primary-color-text, #fff);
+}
+
+</style>