Feat/ocisdev 524/mode switch

changelog/unreleased/enhancement-add-new-theme-colors.md

@@ -0,0 +1,11 @@
+Enhancement: Add new theme colors
+
+We've added new theme colors. These new colors are:
+
+- background-sidebar
+- search-input-text-default
+- search-input-text-muted
+- search-input-border
+- search-input-bg
+
+https://github.com/owncloud/web/pull/13795

changelog/unreleased/enhancement-add-vault-to-search.md

@@ -0,0 +1,5 @@
+Enhancement: Add vault search separation
+
+We've implemented vault search separation by adding the `vault:true` query token to the `<oc:pattern>` search payload. The token is now included in both "All files" and "Current folder" search requests, ensuring vault content is correctly scoped in all search scenarios.
+
+https://github.com/owncloud/web/pull/13769

changelog/unreleased/enhancement-check-vault-permission.md

@@ -0,0 +1,5 @@
+Enhancement: Check vault permission
+
+When the user has the `VaultMode.ReadWriteEnabled.own` permission, the mode switch will be shown in the topbar.
+
+https://github.com/owncloud/web/pull/13802

changelog/unreleased/enhancement-mfa-session-expiry-warning.md

@@ -0,0 +1,5 @@
+Enhancement: MFA session expiry warning
+
+We've added a warning modal that notifies users before their multi-factor authentication session expires. Users can extend the session via silent OIDC renewal or dismiss the warning. The modal state is synchronized across multiple browser tabs using a BroadcastChannel.
+
+https://github.com/owncloud/web/pull/13803

changelog/unreleased/enhancement-show-correct-modal-for-save-as-and-open.md

@@ -0,0 +1,5 @@
+Enhancement: Show correct modal for saveAs and open actions
+
+We've added logic to show the correct modal when the user clicks on "Save As" or "Open" from the 3 dots context menu.
+
+https://github.com/owncloud/web/pull/13759

changelog/unreleased/enhancement-vault-aware-breadcrumbs.md

@@ -0,0 +1,5 @@
+Enhancement: Vault-aware breadcrumbs
+
+We've introduced vault-aware breadcrumbs that show Vault or Drive as the root item depending on the active scope. Users without vault access see the original labels instead.
+
+https://github.com/owncloud/web/pull/13803

packages/design-system/src/components/OcButton/OcButton.vue

@@ -187,13 +187,31 @@ const handlers = computed(() => {
     .oc-icon > svg {
       fill: $color;
     }
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]) {
+      color: $hover-color;
+
+      .oc-icon > svg {
+        fill: $hover-color;
+      }
+    }
   }
   &-raw-inverse {
     color: $contrast-color;
 
     .oc-icon > svg {
       fill: $contrast-color;
     }
+
+    &:focus:not([disabled]),
+    &:hover:not([disabled]) {
+      color: $contrast-color;
+
+      .oc-icon > svg {
+        fill: $contrast-color;
+      }
+    }
   }
 
   &-filled {
@@ -340,12 +358,12 @@ const handlers = computed(() => {
     &-outline {
       &:focus:not([disabled]),
       &:hover:not([disabled]) {
-        color: var(--oc-color-swatch-passive-default);
+        color: var(--oc-color-swatch-passive-contrast);
         background-color: var(--oc-color-swatch-passive-hover-outline);
         border-color: var(--oc-color-swatch-passive-hover-outline);
 
         .oc-icon > svg {
-          fill: var(--oc-color-swatch-passive-default);
+          fill: var(--oc-color-swatch-passive-contrast);
         }
       }
     }

packages/web-app-files/src/components/AppBar/SharesNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <nav id="shares-navigation" class="oc-py-s" :aria-label="$gettext('Shares pages navigation')">
     <oc-list class="oc-flex oc-visible@s">
-      <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.to}`">
+      <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.id}`">
         <oc-button
           type="router-link"
           class="oc-mr-m oc-py-s shares-nav-desktop"
@@ -20,7 +20,7 @@
       </oc-button>
       <oc-drop toggle="#shares_navigation_mobile" mode="click" close-on-click padding-size="small">
         <oc-list>
-          <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.to}`">
+          <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.id}`">
             <oc-button
               type="router-link"
               class="oc-my-xs shares-nav-mobile"
@@ -53,16 +53,45 @@
 import { useRouter } from '@ownclouders/web-pkg'
 import { useActiveLocation } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { RouteRecordNormalized } from 'vue-router'
+import { RouteLocationRaw } from 'vue-router'
 
 const { $gettext } = useGettext()
 const router = useRouter()
-const sharesRoutes = [locationSharesWithMe, locationSharesWithOthers, locationSharesViaLink].reduce<
-  Record<string, RouteRecordNormalized>
->((routes, route) => {
-  routes[route.name as string] = router.getRoutes().find((r) => r.name === route.name)
-  return routes
-}, {})
+
+const resolveScopeTemplatePath = (path: string, scopePrefix: string) =>
+  path.replace(/^\/:scope\(vault\)\?/, scopePrefix)
+
+const locationToPath = (location: RouteLocationRaw) => {
+  const scope = unref(router.currentRoute).params?.scope
+  const scopePrefix = scope === 'vault' ? '/vault' : ''
+
+  if (typeof location === 'string') {
+    return location
+  }
+
+  const locationWithScope: RouteLocationRaw = {
+    ...location,
+    ...(scope && {
+      params: {
+        ...((location as { params?: Record<string, unknown> }).params || {}),
+        scope
+      }
+    })
+  }
+
+  const resolvedPath = router.resolve(locationWithScope).path
+  if (resolvedPath) {
+    return resolvedPath
+  }
+
+  const routeName = (location as { name?: string }).name
+  const route = routeName ? router.getRoutes().find((r) => r.name === routeName) : undefined
+  if (route?.path) {
+    return resolveScopeTemplatePath(route.path, scopePrefix)
+  }
+
+  return ''
+}
 const sharesWithMeActive = useActiveLocation(
   isLocationSharesActive,
   locationSharesWithMe.name as RouteShareTypes
@@ -77,20 +106,23 @@
 )
 const navItems = computed(() => [
   {
+    id: locationSharesWithMe.name as string,
     icon: 'share-forward',
-    to: sharesRoutes[locationSharesWithMe.name as string].path,
+    to: locationToPath(locationSharesWithMe),
     text: $gettext('Shared with me'),
     active: unref(sharesWithMeActive)
   },
   {
+    id: locationSharesWithOthers.name as string,
     icon: 'reply',
-    to: sharesRoutes[locationSharesWithOthers.name as string].path,
+    to: locationToPath(locationSharesWithOthers),
     text: $gettext('Shared with others'),
     active: unref(sharesWithOthersActive)
   },
   {
+    id: locationSharesViaLink.name as string,
     icon: 'link',
-    to: sharesRoutes[locationSharesViaLink.name as string].path,
+    to: locationToPath(locationSharesViaLink),
     text: $gettext('Shared via link'),
     active: unref(sharesViaLinkActive)
   }

packages/web-app-files/src/components/Search/List.vue

@@ -346,7 +346,8 @@ const doSearch = (manuallyUpdateFilterChip = false) => {
     lastModified,
     mediaType,
     scope: queryItemAsString(unref(scopeQuery)),
-    useScope: unref(doUseScope) === 'true'
+    useScope: unref(doUseScope) === 'true',
+    isVault: unref(route).params?.scope === 'vault'
   })
 
   const updateFilter = (v: Ref<InstanceType<typeof ItemFilter>>) => {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -398,8 +398,8 @@ watch(
 
 .details-preview,
 .details-icon-wrapper {
-  background-color: var(--oc-color-background-muted);
-  border: 10px solid var(--oc-color-background-muted);
+  background-color: var(--oc-color-background-highlight);
+  border: 10px solid var(--oc-color-background-highlight);
   height: 230px;
 
   background-size: contain;

packages/web-app-files/src/components/SideBar/Shares/SharesPanel.vue

@@ -8,9 +8,9 @@
       </p>
     </div>
     <template v-else>
-      <space-members v-if="showSpaceMembers" class="oc-background-highlight oc-p-m oc-mb-s" />
-      <file-shares v-else class="oc-background-highlight oc-p-m oc-mb-s" />
-      <file-links v-if="showLinks" class="oc-background-highlight oc-p-m" />
+      <space-members v-if="showSpaceMembers" class="oc-background-muted oc-p-m oc-mb-s" />
+      <file-shares v-else class="oc-background-muted oc-p-m oc-mb-s" />
+      <file-links v-if="showLinks" class="oc-background-muted oc-p-m" />
     </template>
   </div>
 </template>

packages/web-app-files/src/index.ts

@@ -40,6 +40,8 @@
 }
 
 export const navItems = (context: ComponentCustomProperties): AppNavigationItem[] => {
+  const currentPath = window.location.pathname
+  const isVault = currentPath.startsWith('/vault')
   const spacesStores = useSpacesStore()
   const userStore = useUserStore()
   const capabilityStore = useCapabilityStore()
@@ -48,7 +50,7 @@
   return [
     {
       name() {
-        return $gettext('Personal')
+        return isVault ? $gettext('Safe-Personal') : $gettext('Personal')
       },
       icon: appInfo.icon,
       route: {
@@ -101,7 +103,7 @@
       priority: 30
     },
     {
-      name: $gettext('Spaces'),
+      name: isVault ? $gettext('Safe-Spaces') : $gettext('Spaces'),
       icon: 'layout-grid',
       route: {
         path: `/${appInfo.id}/spaces/projects`

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -129,6 +129,7 @@ import {
 import {
   ResourceTransfer,
   TransferType,
+  useAbility,
   useConfigStore,
   useExtensionRegistry,
   useFileActions,
@@ -158,7 +159,8 @@ import {
   useKeyboardActions,
   useRoute,
   useRouteQuery,
-  FolderLoaderOptions
+  FolderLoaderOptions,
+  useCapabilityStore
 } from '@ownclouders/web-pkg'
 import CreateAndUpload from '../../components/AppBar/CreateAndUpload.vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
@@ -189,6 +191,8 @@ interface Props {
 const { space = null, item = null, itemId = null } = defineProps<Props>()
 
 const router = useRouter()
+const { can } = useAbility()
+const capabilityStore = useCapabilityStore()
 const userStore = useUserStore()
 const { $gettext, $ngettext } = useGettext()
 const openWithDefaultAppQuery = useRouteQuery('openWithDefaultApp')
@@ -256,12 +260,26 @@ const titleSegments = computed(() => {
 useDocumentTitle({ titleSegments })
 
 const route = useRoute()
+const canAccessVault = computed(() => capabilityStore.vaultEnabled && can('read-all', 'Vault'))
+
+const getSpacesBreadcrumbText = () => {
+  if (!unref(canAccessVault)) {
+    return $gettext('Spaces')
+  }
+
+  if (unref(route).params.scope === 'vault') {
+    return $gettext('Vault')
+  }
+
+  return $gettext('Drive')
+}
+
 const breadcrumbs = computed(() => {
   const rootBreadcrumbItems: BreadcrumbItem[] = []
   if (isProjectSpaceResource(unref(space))) {
     rootBreadcrumbItems.push({
       id: uuidV4(),
-      text: $gettext('Spaces'),
+      text: getSpacesBreadcrumbText(),
       to: createLocationSpaces('files-spaces-projects'),
       isStaticNav: true
     })
@@ -286,6 +304,17 @@ const breadcrumbs = computed(() => {
   let { params, query } = createFileRouteOptions(unref(space), { fileId: unref(space).fileId })
   query = omit({ ...unref(route).query, ...query }, 'page')
   if (isPersonalSpaceResource(unref(space))) {
+    if (unref(canAccessVault)) {
+      const vaultText =
+        unref(route).params.scope === 'vault' ? $gettext('Vault') : $gettext('Drive')
+      rootBreadcrumbItems.push({
+        id: uuidV4(),
+        text: vaultText,
+        to: createLocationSpaces('files-spaces-projects'),
+        isStaticNav: true
+      })
+    }
+
     spaceBreadcrumbItem = {
       id: uuidV4(),
       text: unref(space).name,

packages/web-app-files/src/views/spaces/Projects.vue

@@ -186,7 +186,8 @@ import {
   useRoute,
   Pagination,
   FileSideBar,
-  NoContentMessage
+  NoContentMessage,
+  useCapabilityStore
 } from '@ownclouders/web-pkg'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import {
@@ -221,6 +222,7 @@ const { $gettext } = language
 const filterTerm = ref('')
 const markInstance = ref(undefined)
 const includeDisabledParam = useRouteQuery('q_includeDisabled')
+const capabilityStore = useCapabilityStore()
 
 const { setSelection, initResourceList, clearResourceList, setAncestorMetaData } =
   useResourcesStore()
@@ -230,7 +232,8 @@ const loadResourcesTask = useTask(function* (signal) {
   setAncestorMetaData({})
   yield spacesStore.reloadProjectSpaces({
     graphClient: clientService.graphAuthenticated,
-    signal
+    signal,
+    isInVault: unref(route)?.params?.scope === 'vault'
   })
   initResourceList({ currentFolder: null, resources: unref(spaces) })
 })
@@ -248,7 +251,7 @@ let loadPreviewToken: string = null
 const { isSideBarOpen, sideBarActivePanel } = useSideBar()
 
 const runtimeSpaces = computed(() => {
-  return spacesStore.spaces.filter(isProjectSpaceResource) || []
+  return spacesStore.spaces.filter((space) => isProjectSpaceResource(space)) || []
 })
 const selectedSpace = computed(() => {
   if (
@@ -334,6 +337,7 @@ watch(filterTerm, async () => {
 })
 
 const hasCreatePermission = computed(() => can('create-all', 'Drive'))
+const canAccessVault = computed(() => capabilityStore.vaultEnabled && can('read-all', 'Vault'))
 
 const extensionRegistry = useExtensionRegistry()
 const viewModes = computed(() => {
@@ -458,10 +462,22 @@ const spacesHelpList = computed(() => {
     }
   ]
 })
+const getBreadcrumbText = () => {
+  if (!unref(canAccessVault)) {
+    return $gettext('Spaces')
+  }
+
+  if (unref(route).params.scope === 'vault') {
+    return $gettext('Vault')
+  }
+
+  return $gettext('Drive')
+}
+
 const breadcrumbs = computed(() => {
   return [
     {
-      text: $gettext('Spaces'),
+      text: getBreadcrumbText(),
       onClick: () => loadResourcesTask.perform(),
       isStativNav: true
     }