feat(phase-4-09): wire components into views — sidebar, cards, home, folder, shared, settings, admin

- AppSidebar: add 'Shared with me' entry (purple icon, count badge) and Folders section with New folder CTA
- DocumentCard: add group class, hover-reveal share button, ShareModal v-if, shared indicator pill
- HomeView: add SearchBar + SortControls above document list; fetchFolders on mount
- FolderView: new view with FolderBreadcrumb, FolderRow list, inline new-subfolder input, document list
- SharedView: new view fetching /api/shares/received with owner_handle display and empty state
- DocumentView: add PDF preview logic (in_app=DocumentPreviewModal, new_tab=window.open); load preferences on mount
- SettingsView: add Document Preferences card with pdf_open_mode radio buttons, auto-save on change
- AdminView: add Audit Log tab alongside Users/Quotas/AI Config tabs

frontend/src/views/SettingsView.vue

@@ -3,17 +3,77 @@
     <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>
 
-    <section class="bg-white border border-gray-200 rounded-xl p-6">
+    <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>
+
+    <!-- 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>
+
+      <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>
   </div>
 </template>
 
 <script setup>
-// SettingsView is a static placeholder after Phase 3 D-12 settings retirement.
-// No store usage, no API calls — AI config is admin-only via /api/admin/users/{id}/ai-config.
+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>