feat(05): cloud folder browser views, routing, and sidebar nav

Add CloudStorageView (/cloud) and CloudFolderView (/cloud/:provider/:folderId).
Tree items filter to directories only (is_dir) to hide files in the nav tree.
CloudProviderTreeItem root click navigates to /cloud/{provider}/root instead
of /settings. AppSidebar Cloud Storage link upgraded to router-link with
active-class highlighting. Router registers both cloud routes with requiresAuth.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/views/CloudStorageView.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="flex flex-col h-full">
+
+    <!-- Toolbar -->
+    <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
+      <div class="px-6 py-3 flex items-center gap-3">
+        <span class="text-sm font-medium text-gray-700">Cloud Storage</span>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+
+      <!-- Column headers -->
+      <div class="px-4 py-2 grid grid-cols-[2rem_1fr_8rem] gap-3 items-center rounded-lg bg-gray-50 text-xs font-semibold text-gray-400 uppercase tracking-wider select-none mb-1">
+        <span></span>
+        <span>Name</span>
+        <span>Status</span>
+      </div>
+
+      <div v-if="loading" class="text-sm text-gray-400 py-8 text-center">Loading…</div>
+
+      <div v-else-if="connections.length === 0" class="text-center py-12 text-gray-400">
+        <p class="text-sm">No cloud storage connected.</p>
+        <router-link to="/settings" class="text-sm text-indigo-600 hover:underline mt-1 inline-block">
+          Add a connection in Settings
+        </router-link>
+      </div>
+
+      <div v-else class="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
+        <div
+          v-for="conn in connections"
+          :key="conn.id"
+          class="px-4 py-2.5 grid grid-cols-[2rem_1fr_8rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors"
+          @click="openProvider(conn)"
+        >
+          <!-- Provider icon -->
+          <div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0" :class="providerBg(conn.provider)">
+            <svg class="w-4 h-4" :class="providerColor(conn.provider)" 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>
+
+          <span class="text-sm font-medium text-gray-900 truncate">{{ conn.display_name }}</span>
+
+          <span class="text-xs" :class="conn.status === 'ACTIVE' ? 'text-green-600' : 'text-amber-500'">
+            {{ conn.status === 'ACTIVE' ? 'Connected' : 'Needs reauth' }}
+          </span>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCloudConnectionsStore } from '../stores/cloudConnections.js'
+
+const router = useRouter()
+const cloudStore = useCloudConnectionsStore()
+
+const loading = computed(() => cloudStore.loading)
+const connections = computed(() => cloudStore.connections)
+
+function openProvider(conn) {
+  router.push(`/cloud/${conn.provider}/root`)
+}
+
+function providerColor(provider) {
+  return {
+    google_drive: 'text-blue-500',
+    onedrive: 'text-sky-500',
+    nextcloud: 'text-orange-500',
+    webdav: 'text-gray-500',
+  }[provider] ?? 'text-gray-400'
+}
+
+function providerBg(provider) {
+  return {
+    google_drive: 'bg-blue-50',
+    onedrive: 'bg-sky-50',
+    nextcloud: 'bg-orange-50',
+    webdav: 'bg-gray-100',
+  }[provider] ?? 'bg-gray-50'
+}
+</script>