From 7cd49274fbd6a19ac5d8a1288f3af41ff380e98f Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 8 Sep 2025 12:02:16 +0200
Subject: [PATCH 1/4] feat: add view mode switch to mobile view

---
 .../composables/extensions/useFolderViews.ts  |  6 +--
 .../web-pkg/src/components/ViewOptions.vue    | 41 ++++++++++++++++++-
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index da65628fcb..4d727b4395 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -16,7 +16,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
       extensionPointIds: [folderViewsFolderExtensionPoint.id],
       folderView: {
         name: 'resource-table-condensed',
-        label: $gettext('Switch to condensed table view'),
+        label: $gettext('Condensed table view'),
         icon: {
           name: 'menu-line-condensed',
           fillType: 'none'
@@ -34,7 +34,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
       ],
       folderView: {
         name: 'resource-table',
-        label: $gettext('Switch to default table view'),
+        label: $gettext('Default table view'),
         icon: {
           name: 'menu-line',
           fillType: 'none'
@@ -52,7 +52,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
       ],
       folderView: {
         name: 'resource-tiles',
-        label: $gettext('Switch to tiles view'),
+        label: $gettext('Tiles view'),
         icon: {
           name: 'apps-2',
           fillType: 'line'
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index e7d3f2bc3b..20368fb2c6 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -1,5 +1,42 @@
 <template>
   <div class="flex items-center">
+    <oc-button
+      v-if="viewModes.length"
+      id="mobile-viewmode-switch-toggle"
+      v-oc-tooltip="$gettext('Switch view mode')"
+      :aria-label="$gettext('Switch view mode')"
+      appearance="raw"
+      class="my-2 mx-1 p-1 align-middle sm:hidden"
+    >
+      <oc-icon name="list-view" fill-type="none" />
+    </oc-button>
+    <oc-drop
+      :title="$gettext('View mode')"
+      drop-id="mobile-viewmode-switch-drop"
+      toggle="#mobile-viewmode-switch-toggle"
+      class="w-auto"
+      padding-size="medium"
+      close-on-click
+    >
+      <oc-list>
+        <li v-for="viewMode in viewModes" :key="viewMode.name">
+          <oc-button appearance="raw" justify-content="left" @click="setViewMode(viewMode)">
+            <div class="flex justify-between w-full">
+              <span class="flex items-center">
+                <oc-icon
+                  :name="viewMode.icon.name"
+                  :fill-type="viewMode.icon.fillType"
+                  size="small"
+                  class="mr-1"
+                />
+                <span v-text="viewMode.label" />
+              </span>
+              <oc-icon v-if="viewModeCurrent === viewMode.name" name="check" size="small" />
+            </div>
+          </oc-button>
+        </li>
+      </oc-list>
+    </oc-drop>
     <div
       v-if="viewModes.length > 1"
       class="viewmode-switch-buttons oc-button-group hidden sm:inline-flex mr-2"
@@ -7,12 +44,12 @@
       <oc-button
         v-for="viewMode in viewModes"
         :key="viewMode.name"
-        v-oc-tooltip="$gettext(viewMode.label)"
+        v-oc-tooltip="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label.toLowerCase() })"
         :no-hover="viewModeCurrent === viewMode.name"
         :class="[viewMode.name]"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
         :color-role="viewModeCurrent === viewMode.name ? 'secondaryContainer' : 'secondary'"
-        :aria-label="$gettext(viewMode.label)"
+        :aria-label="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label.toLowerCase() })"
         @click="setViewMode(viewMode)"
       >
         <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />

From 7f617ebd39495442102f0c9e2c90232a6c2290a3 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 8 Sep 2025 13:40:50 +0200
Subject: [PATCH 2/4] don't use to lower

---
 packages/web-pkg/src/components/ViewOptions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 20368fb2c6..f3f3ff4d3b 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -44,12 +44,12 @@
       <oc-button
         v-for="viewMode in viewModes"
         :key="viewMode.name"
-        v-oc-tooltip="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label.toLowerCase() })"
+        v-oc-tooltip="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label })"
         :no-hover="viewModeCurrent === viewMode.name"
         :class="[viewMode.name]"
         :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'outline'"
         :color-role="viewModeCurrent === viewMode.name ? 'secondaryContainer' : 'secondary'"
-        :aria-label="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label.toLowerCase() })"
+        :aria-label="$gettext('Switch to %{viewMode}', { viewMode: viewMode.label })"
         @click="setViewMode(viewMode)"
       >
         <oc-icon :name="viewMode.icon.name" :fill-type="viewMode.icon.fillType" size="small" />

From dfaf5281cbd9a0d03fd19a9b7a92cb98328d8d10 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 8 Sep 2025 13:55:46 +0200
Subject: [PATCH 3/4] adjust styling

---
 packages/web-pkg/src/components/ViewOptions.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index f3f3ff4d3b..4423e95395 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -20,18 +20,23 @@
     >
       <oc-list>
         <li v-for="viewMode in viewModes" :key="viewMode.name">
-          <oc-button appearance="raw" justify-content="left" @click="setViewMode(viewMode)">
+          <oc-button
+            :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'raw'"
+            :color-role="viewModeCurrent === viewMode.name ? 'secondaryContainer' : 'secondary'"
+            justify-content="left"
+            @click="setViewMode(viewMode)"
+          >
             <div class="flex justify-between w-full">
               <span class="flex items-center">
                 <oc-icon
                   :name="viewMode.icon.name"
                   :fill-type="viewMode.icon.fillType"
-                  size="small"
+                  size="medium"
                   class="mr-1"
                 />
                 <span v-text="viewMode.label" />
               </span>
-              <oc-icon v-if="viewModeCurrent === viewMode.name" name="check" size="small" />
+              <oc-icon v-if="viewModeCurrent === viewMode.name" name="check" size="medium" />
             </div>
           </oc-button>
         </li>

From 2e5d594f714c4b5cbb9cc22a94e34272266bf293 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Mon, 8 Sep 2025 14:29:05 +0200
Subject: [PATCH 4/4] fix ui glitch when no view modes are present

---
 .../web-pkg/src/components/ViewOptions.vue    | 85 ++++++++++---------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 4423e95395..263c202e63 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -1,47 +1,48 @@
 <template>
   <div class="flex items-center">
-    <oc-button
-      v-if="viewModes.length"
-      id="mobile-viewmode-switch-toggle"
-      v-oc-tooltip="$gettext('Switch view mode')"
-      :aria-label="$gettext('Switch view mode')"
-      appearance="raw"
-      class="my-2 mx-1 p-1 align-middle sm:hidden"
-    >
-      <oc-icon name="list-view" fill-type="none" />
-    </oc-button>
-    <oc-drop
-      :title="$gettext('View mode')"
-      drop-id="mobile-viewmode-switch-drop"
-      toggle="#mobile-viewmode-switch-toggle"
-      class="w-auto"
-      padding-size="medium"
-      close-on-click
-    >
-      <oc-list>
-        <li v-for="viewMode in viewModes" :key="viewMode.name">
-          <oc-button
-            :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'raw'"
-            :color-role="viewModeCurrent === viewMode.name ? 'secondaryContainer' : 'secondary'"
-            justify-content="left"
-            @click="setViewMode(viewMode)"
-          >
-            <div class="flex justify-between w-full">
-              <span class="flex items-center">
-                <oc-icon
-                  :name="viewMode.icon.name"
-                  :fill-type="viewMode.icon.fillType"
-                  size="medium"
-                  class="mr-1"
-                />
-                <span v-text="viewMode.label" />
-              </span>
-              <oc-icon v-if="viewModeCurrent === viewMode.name" name="check" size="medium" />
-            </div>
-          </oc-button>
-        </li>
-      </oc-list>
-    </oc-drop>
+    <template v-if="viewModes.length">
+      <oc-button
+        id="mobile-viewmode-switch-toggle"
+        v-oc-tooltip="$gettext('Switch view mode')"
+        :aria-label="$gettext('Switch view mode')"
+        appearance="raw"
+        class="my-2 mx-1 p-1 align-middle sm:hidden"
+      >
+        <oc-icon name="list-view" fill-type="none" />
+      </oc-button>
+      <oc-drop
+        :title="$gettext('View mode')"
+        drop-id="mobile-viewmode-switch-drop"
+        toggle="#mobile-viewmode-switch-toggle"
+        class="w-auto"
+        padding-size="medium"
+        close-on-click
+      >
+        <oc-list>
+          <li v-for="viewMode in viewModes" :key="viewMode.name">
+            <oc-button
+              :appearance="viewModeCurrent === viewMode.name ? 'filled' : 'raw'"
+              :color-role="viewModeCurrent === viewMode.name ? 'secondaryContainer' : 'secondary'"
+              justify-content="left"
+              @click="setViewMode(viewMode)"
+            >
+              <div class="flex justify-between w-full">
+                <span class="flex items-center">
+                  <oc-icon
+                    :name="viewMode.icon.name"
+                    :fill-type="viewMode.icon.fillType"
+                    size="medium"
+                    class="mr-1"
+                  />
+                  <span v-text="viewMode.label" />
+                </span>
+                <oc-icon v-if="viewModeCurrent === viewMode.name" name="check" size="medium" />
+              </div>
+            </oc-button>
+          </li>
+        </oc-list>
+      </oc-drop>
+    </template>
     <div
       v-if="viewModes.length > 1"
       class="viewmode-switch-buttons oc-button-group hidden sm:inline-flex mr-2"