<template>
  <div class="settings-popover">
    <DisplayModeSettings />
    <el-divider />
    <ThemeSettings />
    <el-divider />
    <InterfaceSettings />
    <el-divider />
    <VoiceInputSettings />
  </div>
</template>

<script setup>
import { ElDivider } from 'element-plus';
import DisplayModeSettings from './DisplayModeSettings.vue';
import ThemeSettings from './ThemeSettings.vue';
import InterfaceSettings from './InterfaceSettings.vue';
import VoiceInputSettings from './VoiceInputSettings.vue';
</script>

<style lang="scss" scoped>
.settings-popover {
  padding: 15px;
  min-width: 240px;

  h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .el-divider {
    margin: 18px 0;
  }
}
</style> 