From 63a68296a56d5e4b61da9cf2277daa7dc357d7c9 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Fri, 29 May 2026 08:12:36 +0200
Subject: [PATCH] feat(05-07): 3-tab SettingsView, SettingsCloudTab,
 CloudCredentialModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert SettingsView to 3-tab layout (Preferences/AI/Cloud) matching AdminView pattern
- Extract SettingsPreferencesTab.vue and SettingsAiTab.vue from original SettingsView
- Create SettingsCloudTab.vue with all 4 providers, status badges, action buttons
- Create CloudCredentialModal.vue for WebDAV/Nextcloud credential input
- Handle OAuth callback query params (cloud_connected/cloud_error) in SettingsView.onMounted
- Add success toast (auto-dismiss 5s) and persistent error banner for OAuth results
- Fix pre-existing build failure: add build.target=esnext to vite.config.js for top-level await support
- 2 SettingsCloudTab mount tests passing (W4 — CLAUDE.md)
---
 .../components/cloud/CloudCredentialModal.vue | 195 +++++++++++++
 .../src/components/settings/SettingsAiTab.vue |   9 +
 .../components/settings/SettingsCloudTab.vue  | 260 ++++++++++++++++++
 .../settings/SettingsPreferencesTab.vue       |  65 +++++
 .../__tests__/SettingsCloudTab.test.js        |  59 ++++
 frontend/src/views/SettingsView.vue           | 175 ++++++++----
 frontend/vite.config.js                       |   4 +
 7 files changed, 706 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/cloud/CloudCredentialModal.vue
 create mode 100644 frontend/src/components/settings/SettingsAiTab.vue
 create mode 100644 frontend/src/components/settings/SettingsCloudTab.vue
 create mode 100644 frontend/src/components/settings/SettingsPreferencesTab.vue
 create mode 100644 frontend/src/components/settings/__tests__/SettingsCloudTab.test.js

diff --git a/frontend/src/components/cloud/CloudCredentialModal.vue b/frontend/src/components/cloud/CloudCredentialModal.vue
new file mode 100644
index 0000000..81f85b7
--- /dev/null
+++ b/frontend/src/components/cloud/CloudCredentialModal.vue
@@ -0,0 +1,195 @@
+<template>
+  <div
+    v-if="show"
+    class="fixed inset-0 bg-gray-900 bg-opacity-40 z-40 flex items-center justify-center p-4"
+    @click.self="handleOverlayClick"
+    @keydown.escape.window="handleEscape"
+  >
+    <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between mb-5">
+        <h3 class="text-xl font-semibold text-gray-900">Connect {{ provider?.label }}</h3>
+        <button
+          @click="close"
+          aria-label="Close modal"
+          class="text-gray-400 hover:text-gray-600 transition-colors"
+        >
+          <svg class="w-5 h-5" 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>
+
+      <!-- Form -->
+      <form @submit.prevent="submit">
+        <!-- Server URL -->
+        <div>
+          <label class="block text-sm font-semibold text-gray-900 mb-1">Server URL</label>
+          <input
+            type="url"
+            v-model="serverUrl"
+            placeholder="https://nextcloud.example.com/remote.php/dav/files/username/"
+            class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+          />
+          <p class="text-xs text-gray-500 mt-1">Full WebDAV endpoint URL including username path segment.</p>
+        </div>
+
+        <!-- Username -->
+        <div>
+          <label class="block text-sm font-semibold text-gray-900 mb-1 mt-4">Username</label>
+          <input
+            type="text"
+            v-model="username"
+            autocomplete="username"
+            class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+          />
+        </div>
+
+        <!-- Auth method toggle -->
+        <div class="mt-4 mb-2">
+          <p class="text-sm font-semibold text-gray-900 mb-2">Authentication method</p>
+          <div class="space-y-2">
+            <label class="flex items-start gap-3 cursor-pointer">
+              <input
+                type="radio"
+                value="app_password"
+                v-model="authMethod"
+                class="mt-0.5 text-indigo-600 focus:ring-indigo-500"
+              />
+              <div>
+                <span class="text-sm font-semibold text-gray-900">App password</span>
+                <span class="ml-2 bg-green-100 text-green-700 text-xs font-semibold px-1.5 py-0.5 rounded">Recommended</span>
+                <p class="text-xs text-gray-500 mt-0.5">
+                  Can be revoked individually without changing your main account password.
+                </p>
+              </div>
+            </label>
+            <label class="flex items-start gap-3 cursor-pointer">
+              <input
+                type="radio"
+                value="account_password"
+                v-model="authMethod"
+                class="mt-0.5 text-indigo-600 focus:ring-indigo-500"
+              />
+              <div>
+                <span class="text-sm font-semibold text-gray-900">Account password</span>
+                <p class="text-xs text-gray-500 mt-0.5">
+                  Simpler to set up, but revoking access requires changing your entire account password.
+                </p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Password field -->
+        <div>
+          <label class="block text-sm font-semibold text-gray-900 mb-1 mt-4">
+            {{ authMethod === 'app_password' ? 'App password' : 'Password' }}
+          </label>
+          <input
+            type="password"
+            v-model="password"
+            autocomplete="current-password"
+            class="block w-full rounded-lg px-3 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors"
+          />
+        </div>
+
+        <!-- Connection error -->
+        <div
+          v-if="connectError"
+          class="mt-4 p-3 rounded-lg bg-red-50 border border-red-200"
+        >
+          <p class="text-sm font-semibold text-red-700">Connection failed</p>
+          <p class="text-sm text-red-600 mt-0.5">{{ connectError }}</p>
+          <p class="text-xs text-red-500 mt-1">Check that the server URL is correct, the credentials are valid, and the server allows WebDAV access from external clients.</p>
+        </div>
+
+        <!-- Footer buttons -->
+        <div class="flex justify-end gap-3 mt-6">
+          <button
+            type="button"
+            @click="close"
+            class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Keep current settings
+          </button>
+          <button
+            type="submit"
+            :disabled="saving"
+            class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg disabled:opacity-50 transition-colors min-h-[44px] min-w-[80px]"
+          >
+            <svg v-if="saving" class="w-4 h-4 animate-spin mx-auto" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            <span v-else>Connect {{ provider?.label }}</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import * as api from '../../api/client.js'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: true,
+  },
+  provider: {
+    type: Object,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['close', 'connected'])
+
+const serverUrl = ref('')
+const username = ref('')
+const authMethod = ref('app_password')
+const password = ref('')
+const saving = ref(false)
+const connectError = ref('')
+
+// Reset form when modal opens
+watch(() => props.show, (val) => {
+  if (val) {
+    serverUrl.value = ''
+    username.value = ''
+    authMethod.value = 'app_password'
+    password.value = ''
+    connectError.value = ''
+    saving.value = false
+  }
+})
+
+function close() {
+  if (saving.value) return
+  emit('close')
+}
+
+function handleOverlayClick() {
+  close()
+}
+
+function handleEscape() {
+  close()
+}
+
+async function submit() {
+  connectError.value = ''
+  saving.value = true
+  try {
+    await api.connectWebDav(props.provider.key, serverUrl.value, username.value, password.value)
+    emit('connected')
+    emit('close')
+  } catch (e) {
+    connectError.value = e.message || 'Connection failed. Please check your credentials.'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
diff --git a/frontend/src/components/settings/SettingsAiTab.vue b/frontend/src/components/settings/SettingsAiTab.vue
new file mode 100644
index 0000000..dcf04f6
--- /dev/null
+++ b/frontend/src/components/settings/SettingsAiTab.vue
@@ -0,0 +1,9 @@
+<template>
+  <section class="bg-white border border-gray-200 rounded-xl p-6">
+    <h3 class="text-xl font-semibold text-gray-800 mb-2">AI configuration</h3>
+    <p class="text-sm text-gray-600">
+      AI provider and model are managed by your administrator. Contact your admin
+      to request changes to which AI provider is used for your documents.
+    </p>
+  </section>
+</template>
diff --git a/frontend/src/components/settings/SettingsCloudTab.vue b/frontend/src/components/settings/SettingsCloudTab.vue
new file mode 100644
index 0000000..a2d0cde
--- /dev/null
+++ b/frontend/src/components/settings/SettingsCloudTab.vue
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <section class="bg-white border border-gray-200 rounded-xl p-6">
+      <h3 class="text-xl font-semibold text-gray-800 mb-1">Cloud Storage</h3>
+      <p class="text-sm text-gray-600 mb-5">Connect a cloud storage provider to use as a document destination.</p>
+
+      <!-- Loading state -->
+      <div v-if="store.loading" class="text-sm text-gray-500 py-4">Loading...</div>
+
+      <!-- Provider list -->
+      <div v-else class="divide-y divide-gray-100">
+        <template v-for="provider in PROVIDERS" :key="provider.key">
+          <!-- Provider row -->
+          <div class="flex items-center justify-between py-3 gap-4">
+            <!-- Left: icon + name + status badge -->
+            <div class="flex items-center gap-3 min-w-0">
+              <!-- Provider icon -->
+              <div class="w-8 h-8 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center">
+                <svg class="w-5 h-5" :class="provider.iconColor" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                </svg>
+              </div>
+              <div class="min-w-0">
+                <span class="text-sm font-semibold text-gray-900">{{ provider.label }}</span>
+                <!-- Status badge -->
+                <span
+                  class="ml-2 text-xs font-semibold px-2 py-0.5 rounded-full"
+                  :class="statusBadgeClasses(connectionFor(provider.key)?.status ?? 'not_connected')"
+                >
+                  {{ statusBadgeLabel(connectionFor(provider.key)?.status ?? 'not_connected') }}
+                </span>
+                <!-- Connected-at date for ACTIVE and ERROR -->
+                <div
+                  v-if="connectionFor(provider.key)?.status === 'ACTIVE' || connectionFor(provider.key)?.status === 'ERROR'"
+                  class="text-xs text-gray-500 mt-0.5"
+                >
+                  Connected {{ new Date(connectionFor(provider.key).connected_at).toLocaleDateString() }}
+                </div>
+              </div>
+            </div>
+
+            <!-- Right: action buttons -->
+            <div class="flex items-center gap-2 shrink-0">
+              <!-- not_connected -->
+              <template v-if="!connectionFor(provider.key)">
+                <button
+                  @click="handleConnect(provider)"
+                  class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors min-w-[160px]"
+                >
+                  Connect {{ provider.label }}
+                </button>
+              </template>
+
+              <!-- ACTIVE -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'ACTIVE'">
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+
+              <!-- REQUIRES_REAUTH -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'">
+                <button
+                  @click="handleConnect(provider)"
+                  class="bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors min-w-[160px]"
+                >
+                  Reconnect {{ provider.label }}
+                </button>
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-3 py-2 text-gray-500 hover:text-gray-700 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+
+              <!-- ERROR -->
+              <template v-else-if="connectionFor(provider.key)?.status === 'ERROR'">
+                <button
+                  v-if="confirmRemoveId !== connectionFor(provider.key)?.id"
+                  @click="confirmRemoveId = connectionFor(provider.key)?.id"
+                  class="text-sm px-4 py-2 border border-red-300 rounded-lg hover:bg-red-50 text-red-600 transition-colors"
+                >
+                  Remove {{ provider.label }}
+                </button>
+                <ConfirmBlock
+                  v-else
+                  :message="`This will permanently remove your ${provider.label} credentials from DocuVault. Your cloud documents will remain in your ${provider.label} account.`"
+                  :confirm-label="`Remove ${provider.label}`"
+                  cancel-label="Keep connected"
+                  confirm-class="bg-red-600 hover:bg-red-700 text-white"
+                  @confirmed="handleDisconnect(connectionFor(provider.key)?.id)"
+                  @cancelled="confirmRemoveId = null"
+                />
+              </template>
+            </div>
+          </div>
+
+          <!-- REQUIRES_REAUTH inline banner -->
+          <div
+            v-if="connectionFor(provider.key)?.status === 'REQUIRES_REAUTH'"
+            class="mx-0 mb-2 p-3 rounded-lg bg-yellow-50 border border-yellow-200 flex items-start gap-2"
+          >
+            <svg class="w-4 h-4 text-yellow-600 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <p class="text-sm text-yellow-800">
+              Your {{ provider.label }} connection needs to be re-authorized.
+              Click <strong>Reconnect {{ provider.label }}</strong> to restore access.
+            </p>
+          </div>
+        </template>
+      </div>
+
+      <!-- Disconnect all (shown only when any connection is ACTIVE or ERROR) -->
+      <div v-if="hasActiveOrErrorConnections" class="pt-4 border-t border-gray-100 flex justify-end">
+        <button
+          v-if="!showDisconnectAll"
+          @click="showDisconnectAll = true"
+          class="text-sm text-red-600 hover:text-red-700 hover:underline font-medium transition-colors"
+        >
+          Disconnect all cloud storage
+        </button>
+        <ConfirmBlock
+          v-else
+          message="This will permanently delete all cloud storage credentials. Your documents will remain in DocuVault, but cloud documents may become inaccessible."
+          confirm-label="Disconnect all"
+          cancel-label="Keep all connected"
+          confirm-class="bg-red-600 hover:bg-red-700 text-white"
+          @confirmed="handleDisconnectAll"
+          @cancelled="showDisconnectAll = false"
+        />
+      </div>
+    </section>
+
+    <!-- CloudCredentialModal for WebDAV/Nextcloud -->
+    <CloudCredentialModal
+      :show="showModal"
+      :provider="activeProvider"
+      @close="closeModal"
+      @connected="handleConnected"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useCloudConnectionsStore } from '../../stores/cloudConnections.js'
+import ConfirmBlock from '../ui/ConfirmBlock.vue'
+import CloudCredentialModal from '../cloud/CloudCredentialModal.vue'
+
+const store = useCloudConnectionsStore()
+
+const PROVIDERS = [
+  { key: 'google_drive', label: 'Google Drive', iconColor: 'text-blue-500' },
+  { key: 'onedrive', label: 'OneDrive', iconColor: 'text-sky-500' },
+  { key: 'nextcloud', label: 'Nextcloud', iconColor: 'text-orange-500' },
+  { key: 'webdav', label: 'WebDAV server', iconColor: 'text-gray-500' },
+]
+
+// OAuth providers use window.location.href redirect
+const OAUTH_PROVIDERS = new Set(['google_drive', 'onedrive'])
+
+const showModal = ref(false)
+const activeProvider = ref(null)
+const confirmRemoveId = ref(null)
+const showDisconnectAll = ref(false)
+
+onMounted(() => {
+  store.fetchConnections()
+})
+
+function connectionFor(providerKey) {
+  return store.connections.find(c => c.provider === providerKey) ?? null
+}
+
+const hasActiveOrErrorConnections = computed(() =>
+  store.connections.some(c => c.status === 'ACTIVE' || c.status === 'ERROR')
+)
+
+function statusBadgeClasses(status) {
+  switch (status) {
+    case 'ACTIVE': return 'bg-green-100 text-green-700'
+    case 'REQUIRES_REAUTH': return 'bg-yellow-100 text-yellow-800'
+    case 'ERROR': return 'bg-red-100 text-red-700'
+    default: return 'bg-gray-100 text-gray-600'
+  }
+}
+
+function statusBadgeLabel(status) {
+  switch (status) {
+    case 'ACTIVE': return 'Active'
+    case 'REQUIRES_REAUTH': return 'Reconnect needed'
+    case 'ERROR': return 'Error'
+    default: return 'Not connected'
+  }
+}
+
+function handleConnect(provider) {
+  if (OAUTH_PROVIDERS.has(provider.key)) {
+    window.location.href = `/api/cloud/oauth/initiate/${provider.key}`
+  } else {
+    activeProvider.value = provider
+    showModal.value = true
+  }
+}
+
+function closeModal() {
+  showModal.value = false
+  activeProvider.value = null
+}
+
+async function handleDisconnect(id) {
+  if (!id) return
+  try {
+    await store.disconnect(id)
+  } catch {
+    // Error handled by store
+  }
+  confirmRemoveId.value = null
+}
+
+async function handleDisconnectAll() {
+  try {
+    await store.disconnectAll()
+  } catch {
+    // Error handled by store
+  }
+  showDisconnectAll.value = false
+}
+
+async function handleConnected() {
+  await store.fetchConnections()
+}
+</script>
diff --git a/frontend/src/components/settings/SettingsPreferencesTab.vue b/frontend/src/components/settings/SettingsPreferencesTab.vue
new file mode 100644
index 0000000..f7b5f33
--- /dev/null
+++ b/frontend/src/components/settings/SettingsPreferencesTab.vue
@@ -0,0 +1,65 @@
+<template>
+  <section class="bg-white border border-gray-200 rounded-xl p-6">
+    <h3 class="text-xl font-semibold text-gray-800 mb-2">Document Preferences</h3>
+    <p class="text-sm text-gray-600 mb-4">Choose how PDF documents open when you click on them.</p>
+
+    <div class="space-y-3">
+      <label class="flex items-center gap-3 cursor-pointer">
+        <input
+          type="radio"
+          name="pdf_open_mode"
+          value="in_app"
+          v-model="pdfOpenMode"
+          class="text-indigo-600 focus:ring-indigo-500"
+        />
+        <span class="text-sm text-gray-700">Open documents in-app</span>
+      </label>
+      <label class="flex items-center gap-3 cursor-pointer">
+        <input
+          type="radio"
+          name="pdf_open_mode"
+          value="new_tab"
+          v-model="pdfOpenMode"
+          class="text-indigo-600 focus:ring-indigo-500"
+        />
+        <span class="text-sm text-gray-700">Open documents in new tab</span>
+      </label>
+    </div>
+
+    <!-- Save feedback -->
+    <p v-if="saveFeedback" class="text-xs text-green-600 mt-3">{{ saveFeedback }}</p>
+    <p v-if="saveError" class="text-xs text-red-600 mt-3">{{ saveError }}</p>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import * as api from '../../api/client.js'
+
+const pdfOpenMode = ref('new_tab')
+const saveFeedback = ref('')
+const saveError = ref('')
+let feedbackTimer = null
+
+onMounted(async () => {
+  try {
+    const prefs = await api.getMyPreferences()
+    pdfOpenMode.value = prefs.pdf_open_mode || 'new_tab'
+  } catch {
+    // Default to new_tab if preferences can't be loaded
+  }
+})
+
+watch(pdfOpenMode, async (newValue) => {
+  saveFeedback.value = ''
+  saveError.value = ''
+  clearTimeout(feedbackTimer)
+  try {
+    await api.updateMyPreferences({ pdf_open_mode: newValue })
+    saveFeedback.value = 'Preferences saved.'
+    feedbackTimer = setTimeout(() => { saveFeedback.value = '' }, 3000)
+  } catch (e) {
+    saveError.value = e.message || 'Failed to save preferences.'
+  }
+})
+</script>
diff --git a/frontend/src/components/settings/__tests__/SettingsCloudTab.test.js b/frontend/src/components/settings/__tests__/SettingsCloudTab.test.js
new file mode 100644
index 0000000..562cac1
--- /dev/null
+++ b/frontend/src/components/settings/__tests__/SettingsCloudTab.test.js
@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+
+// Mock store module before importing component (W4 — CLAUDE.md unit test requirement)
+vi.mock('../../../stores/cloudConnections.js', () => ({
+  useCloudConnectionsStore: () => ({
+    connections: [],
+    loading: false,
+    error: null,
+    fetchConnections: vi.fn(),
+    disconnect: vi.fn(),
+    disconnectAll: vi.fn(),
+  }),
+}))
+
+// Mock api/client.js to avoid HTTP calls
+vi.mock('../../../api/client.js', () => ({
+  connectWebDav: vi.fn(),
+  listCloudConnections: vi.fn(),
+  disconnectCloud: vi.fn(),
+}))
+
+import SettingsCloudTab from '../SettingsCloudTab.vue'
+
+const globalPlugins = {
+  plugins: [createPinia()],
+  stubs: {
+    // Stub CloudCredentialModal to avoid portal/teleport complexity in tests
+    CloudCredentialModal: {
+      template: '<div />',
+      props: ['show', 'provider'],
+    },
+  },
+}
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  vi.clearAllMocks()
+})
+
+describe('SettingsCloudTab', () => {
+  it('renders all 4 provider rows', () => {
+    const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
+    expect(wrapper.text()).toContain('Google Drive')
+    expect(wrapper.text()).toContain('OneDrive')
+    expect(wrapper.text()).toContain('Nextcloud')
+    expect(wrapper.text()).toContain('WebDAV')
+  })
+
+  it('shows Connect buttons when no connections active', () => {
+    const wrapper = mount(SettingsCloudTab, { global: globalPlugins })
+    const buttons = wrapper.findAll('button')
+    expect(buttons.length).toBeGreaterThan(0)
+    // At least some "Connect" buttons should be visible when no connections
+    const buttonTexts = buttons.map(b => b.text()).join(' ')
+    expect(buttonTexts).toContain('Connect')
+  })
+})
diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 4c54837..708082c 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -1,79 +1,132 @@
 <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-8">Account-level options for your DocuVault workspace.</p>
+    <p class="text-sm text-gray-500 mb-6">Account-level options for your DocuVault workspace.</p>
 
-    <section class="bg-white border border-gray-200 rounded-xl p-6 mb-6">
-      <h3 class="text-xl font-semibold text-gray-800 mb-2">AI configuration</h3>
-      <p class="text-sm text-gray-600">
-        AI provider and model are managed by your administrator. Contact your admin
-        to request changes to which AI provider is used for your documents.
-      </p>
-    </section>
+    <!-- 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>
 
-    <!-- Document Preferences section -->
-    <section class="bg-white border border-gray-200 rounded-xl p-6">
-      <h3 class="text-xl font-semibold text-gray-800 mb-2">Document Preferences</h3>
-      <p class="text-sm text-gray-600 mb-4">Choose how PDF documents open when you click on them.</p>
+    <!-- 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>
 
-      <div class="space-y-3">
-        <label class="flex items-center gap-3 cursor-pointer">
-          <input
-            type="radio"
-            name="pdf_open_mode"
-            value="in_app"
-            v-model="pdfOpenMode"
-            class="text-indigo-600 focus:ring-indigo-500"
-          />
-          <span class="text-sm text-gray-700">Open documents in-app</span>
-        </label>
-        <label class="flex items-center gap-3 cursor-pointer">
-          <input
-            type="radio"
-            name="pdf_open_mode"
-            value="new_tab"
-            v-model="pdfOpenMode"
-            class="text-indigo-600 focus:ring-indigo-500"
-          />
-          <span class="text-sm text-gray-700">Open documents in new tab</span>
-        </label>
+    <!-- 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>
 
-      <!-- Save feedback -->
-      <p v-if="saveFeedback" class="text-xs text-green-600 mt-3">{{ saveFeedback }}</p>
-      <p v-if="saveError" class="text-xs text-red-600 mt-3">{{ saveError }}</p>
-    </section>
+      <SettingsCloudTab />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
-import * as api from '../api/client.js'
+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 pdfOpenMode = ref('new_tab')
-const saveFeedback = ref('')
-const saveError = ref('')
-let feedbackTimer = null
+const router = useRouter()
 
-onMounted(async () => {
-  try {
-    const prefs = await api.getMyPreferences()
-    pdfOpenMode.value = prefs.pdf_open_mode || 'new_tab'
-  } catch {
-    // Default to new_tab if preferences can't be loaded
-  }
-})
+const tabs = [
+  { id: 'preferences', label: 'Preferences' },
+  { id: 'ai', label: 'AI Configuration' },
+  { id: 'cloud', label: 'Cloud Storage' },
+]
 
-watch(pdfOpenMode, async (newValue) => {
-  saveFeedback.value = ''
-  saveError.value = ''
-  clearTimeout(feedbackTimer)
-  try {
-    await api.updateMyPreferences({ pdf_open_mode: newValue })
-    saveFeedback.value = 'Preferences saved.'
-    feedbackTimer = setTimeout(() => { saveFeedback.value = '' }, 3000)
-  } catch (e) {
-    saveError.value = e.message || 'Failed to save preferences.'
+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>
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index ebd6662..7d0bf9e 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -3,6 +3,10 @@ import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   plugins: [vue()],
+  build: {
+    // top-level await in main.js requires esnext target
+    target: 'esnext',
+  },
   server: {
     host: '0.0.0.0',
     port: 5173,