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/components/documents/DocumentCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white border border-gray-200 rounded-xl p-4 hover:border-indigo-300 hover:shadow-sm transition-all cursor-pointer"
+    class="group bg-white border border-gray-200 rounded-xl p-4 hover:border-indigo-300 hover:shadow-sm transition-all cursor-pointer relative"
     @click="$router.push(`/document/${doc.id}`)"
   >
     <div class="flex items-start gap-3">
@@ -26,20 +26,51 @@
           />
           <span v-if="!doc.topics?.length" class="text-xs text-gray-300 italic">unclassified</span>
         </div>
+
+        <!-- Shared indicator pill -->
+        <div v-if="doc.share_count > 0" class="mt-2">
+          <span class="bg-indigo-50 text-indigo-600 text-xs font-medium px-2 py-1 rounded-full">Shared</span>
+        </div>
       </div>
+
+      <!-- Share button (hover-reveal) -->
+      <button
+        @click.stop="openShareModal"
+        aria-label="Share document"
+        class="opacity-0 group-hover:opacity-100 transition-opacity min-h-[44px] min-w-[44px] flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 transition-colors 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+        </svg>
+      </button>
     </div>
+
+    <!-- ShareModal -->
+    <ShareModal
+      v-if="showShareModal"
+      :doc="doc"
+      @close="showShareModal = false"
+    />
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { useTopicsStore } from '../../stores/topics.js'
 import TopicBadge from '../topics/TopicBadge.vue'
+import ShareModal from '../sharing/ShareModal.vue'
 
 const props = defineProps({
   doc: Object,
 })
 
 const topicsStore = useTopicsStore()
+const showShareModal = ref(false)
+
+function openShareModal() {
+  showShareModal.value = true
+}
 
 function topicColor(name) {
   return topicsStore.topics.find(t => t.name === name)?.color ?? '#6366f1'