kite/frontend/src/views/SettingsView.vue

<template>
  <div class="p-8 max-w-3xl mx-auto">
    <h2 class="text-2xl font-semibold text-gray-900 mb-1">Settings</h2>
    <p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>

    <!-- OAuth success toast (fixed top-right, auto-dismisses 5s) -->
    <div
      v-if="oauthSuccessProvider"
      class="fixed top-4 right-4 z-50 flex items-center gap-3 bg-white border border-green-200 rounded-xl shadow-lg px-5 py-4 max-w-sm"
    >
      <svg class="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-semibold text-gray-900">{{ providerDisplayName(oauthSuccessProvider) }} connected</p>
        <p class="text-xs text-gray-500 mt-0.5">Your files are now available in the sidebar.</p>
      </div>
      <button
        @click="oauthSuccessProvider = null"
        aria-label="Dismiss notification"
        class="text-gray-400 hover:text-gray-600 shrink-0"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Tab strip (copy AdminView pattern verbatim) -->
    <div class="flex border-b border-gray-200 mb-6">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        @click="activeTab = tab.id"
        class="px-4 py-2 text-sm font-semibold border-b-2 transition-colors"
        :class="activeTab === tab.id
          ? 'text-indigo-600 border-indigo-600'
          : 'text-gray-500 hover:text-gray-700 border-transparent'"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- Tab: Preferences -->
    <SettingsPreferencesTab v-if="activeTab === 'preferences'" />

    <!-- Tab: AI Configuration -->
    <SettingsAiTab v-if="activeTab === 'ai'" />

    <!-- Tab: Cloud Storage -->
    <div v-if="activeTab === 'cloud'">
      <!-- OAuth error banner (persistent until dismissed) -->
      <div
        v-if="oauthError"
        class="mb-6 flex items-start gap-3 bg-red-50 border border-red-200 rounded-xl px-5 py-4"
      >
        <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-semibold text-red-700">Connection failed</p>
          <p class="text-sm text-red-600 mt-0.5">{{ oauthError }}</p>
          <p class="text-xs text-red-500 mt-1">Try connecting again. If the problem persists, check that the app has the correct permissions in your provider's account settings.</p>
        </div>
        <button
          @click="oauthError = null"
          aria-label="Dismiss error"
          class="text-red-400 hover:text-red-600 shrink-0"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <SettingsCloudTab />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SettingsPreferencesTab from '../components/settings/SettingsPreferencesTab.vue'
import SettingsAiTab from '../components/settings/SettingsAiTab.vue'
import SettingsCloudTab from '../components/settings/SettingsCloudTab.vue'

const router = useRouter()

const tabs = [
  { id: 'preferences', label: 'Preferences' },
  { id: 'ai', label: 'AI Configuration' },
  { id: 'cloud', label: 'Cloud Storage' },
]

const activeTab = ref('preferences')
const oauthSuccessProvider = ref(null)
const oauthError = ref(null)

const PROVIDER_NAMES = {
  google_drive: 'Google Drive',
  onedrive: 'OneDrive',
  nextcloud: 'Nextcloud',
  webdav: 'WebDAV server',
}

function providerDisplayName(key) {
  return PROVIDER_NAMES[key] || key
}

onMounted(() => {
  const params = new URLSearchParams(window.location.search)
  const connectedProvider = params.get('cloud_connected')
  const errorMsg = params.get('cloud_error')

  if (connectedProvider || errorMsg) {
    activeTab.value = 'cloud'
    router.replace({ path: '/settings' })

    if (connectedProvider) {
      oauthSuccessProvider.value = connectedProvider
      setTimeout(() => { oauthSuccessProvider.value = null }, 5000)
    }

    if (errorMsg) {
      oauthError.value = decodeURIComponent(errorMsg)
    }
  }
})
</script>