From deacdb74f004271d1497d4adc646c0c9d156fb9b Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 12 Dec 2023 16:52:26 +0100
Subject: [PATCH 01/10] Added: first prototype of bredcrumbs based on router

---
 web-app/packages/app/src/router.ts            | 11 +++-
 web-app/packages/lib/components.d.ts          |  1 +
 .../layout/components/AppBreadcrumbs.vue      | 62 +++++++++++++++++++
 .../layout/components/AppHeaderTemplate.vue   | 37 ++++++-----
 .../src/modules/layout/components/index.ts    |  1 +
 .../packages/lib/src/modules/project/types.ts |  1 +
 .../project/views/ProjectViewTemplate.vue     |  9 ++-
 .../packages/lib/src/shims-vue-router.d.ts    |  9 +++
 8 files changed, 114 insertions(+), 17 deletions(-)
 create mode 100644 web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
 create mode 100644 web-app/packages/lib/src/shims-vue-router.d.ts

diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 9d5917d6..06e41914 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -141,6 +141,9 @@ export const createRouter = (pinia: Pinia) => {
         props: {
           default: true
         },
+        meta: {
+          title: 'Projects'
+        },
         redirect: { name: 'project-tree' },
         children: [
           {
@@ -182,7 +185,13 @@ export const createRouter = (pinia: Pinia) => {
             props: true,
             meta: { public: true }
           }
-        ]
+        ].map((child) => ({
+          ...child,
+          beforeEnter: (to, from, next) => {
+            to.meta.title = to.params.projectName as string
+            next()
+          }
+        }))
       },
       {
         path: '/:pathMatch(.*)*',
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index e70c1e8b..5ae03a03 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     PAvatar: typeof import('primevue/avatar')['default']
+    PBreadcrumb: typeof import('primevue/breadcrumb')['default']
     PButton: typeof import('primevue/button')['default']
     PColumn: typeof import('primevue/column')['default']
     PDataTable: typeof import('primevue/datatable')['default']
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
new file mode 100644
index 00000000..5952793a
--- /dev/null
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -0,0 +1,62 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PBreadcrumb
+    v-if="items.length > 0"
+    :model="items"
+    :pt="{
+      root: {
+        style: {
+          backgroundColor: 'transparent'
+        },
+        class: 'border-none'
+      }
+    }"
+  >
+    <template #item="{ item, props }">
+      <router-link
+        v-if="item.route"
+        v-slot="{ href, navigate }"
+        :to="{
+          params: item.params,
+          name: item.route
+        }"
+        custom
+      >
+        <a :href="href" v-bind="props.action" @click="navigate">
+          <span :class="[item.icon, 'text-color']" />
+          <span
+            :class="[
+              'opacity-80 text-sm',
+              item.active ? 'text-color-forest font-semibold' : 'text-color'
+            ]"
+            >{{ item.label }}</span
+          >
+        </a>
+      </router-link>
+    </template>
+  </PBreadcrumb>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const items: MenuItem[] = route.matched.map<MenuItem>((item) => ({
+  label: route.name === item.name ? route.meta.title : item.meta.title,
+  active: route.name === item.name,
+  route: item.name,
+  params: route.params
+}))
+</script>
+
+<style scoped lang="scss">
+.text-color-forest {
+  color: var(--forest-color);
+}
+</style>
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 30a7b99b..4a06909b 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -5,10 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <PMenubar class="app-header pt-0 pb-2 px-4 justify-content-between">
+  <PMenubar
+    class="app-header pt-0 pb-2 px-2"
+    :pt="{
+      start: {
+        class: 'w-10'
+      },
+      end: {
+        class: 'align-self-start lg:align-self-center'
+      }
+    }"
+  >
     <template #start
       ><slot name="menu">
-        <div class="flex align-items-center">
+        <div
+          class="flex flex-column lg:flex-row align-items-start lg:align-items-center"
+        >
           <PButton
             class="mr-2"
             icon="ti ti-menu-2"
@@ -18,24 +30,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             @click="setDrawer({ drawer: !drawer })"
             :pt="{ icon: { class: 'text-3xl' } }"
           />
-          <h1 class="text-3xl mb-0 mt-1">
-            <slot name="title">{{ title }}</slot>
-          </h1>
+          <app-breadcrumbs></app-breadcrumbs>
         </div>
       </slot>
     </template>
 
     <template #end>
-      <div class="flex align-items-center">
+      <div>
         <slot name="invitationsIcon"></slot>
         <PButton
-          plain
           text
-          type="button"
-          label="Toggle"
           aria-haspopup="true"
           aria-controls="app-header-profile"
-          class="text-color"
+          class="text-color p-0"
           @click="toggleMenu"
           size="small"
         >
@@ -90,7 +97,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { MenuItem } from 'primevue/menuitem'
 import { defineComponent, ref, PropType } from 'vue'
-import { useRoute } from 'vue-router'
+
+import { AppBreadcrumbs } from '.'
 
 import { useLayoutStore } from '@/modules/layout/store'
 import { useProjectStore } from '@/modules/project/store'
@@ -98,6 +106,9 @@ import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'app-header-template',
+  components: {
+    AppBreadcrumbs
+  },
   props: {
     renderNamespace: {
       type: Boolean,
@@ -109,7 +120,6 @@ export default defineComponent({
   },
   setup() {
     const menu = ref()
-    const route = useRoute()
 
     const toggleMenu = (event) => {
       menu.value.toggle(event)
@@ -117,8 +127,7 @@ export default defineComponent({
 
     return {
       menu,
-      toggleMenu,
-      title: route.meta.title ?? 'Dashboard'
+      toggleMenu
     }
   },
   computed: {
diff --git a/web-app/packages/lib/src/modules/layout/components/index.ts b/web-app/packages/lib/src/modules/layout/components/index.ts
index 2c66aaee..016e43f4 100644
--- a/web-app/packages/lib/src/modules/layout/components/index.ts
+++ b/web-app/packages/lib/src/modules/layout/components/index.ts
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
+export { default as AppBreadcrumbs } from './AppBreadcrumbs.vue'
 export { default as AppHeaderTemplate } from './AppHeaderTemplate.vue'
 export { default as PageView } from './PageView.vue'
 export { default as SideBarItem } from './SideBarItem.vue'
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index ac9a6815..4c3c05eb 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -116,6 +116,7 @@ export interface ProjectListItemFiles extends FileInfo, HistoryFileInfo {
 export interface ProjectDetail extends ProjectListItem {
   role: ProjectRoleName
   files?: ProjectListItemFiles[]
+  workspace_id: number
 }
 
 export interface PaginatedProjectsResponse extends PaginatedResponseDefaults {
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index bbd2662a..8da0567d 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -191,6 +191,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { defineComponent, PropType } from 'vue'
+import { useRoute } from 'vue-router'
 import { CopyIcon, DownloadIcon, SquareMinusIcon } from 'vue-tabler-icons'
 
 import ActionButton from '@/common/components/ActionButton.vue'
@@ -271,7 +272,7 @@ export default defineComponent({
         return ProjectApi.constructDownloadProjectVersionUrl(
           this.namespace,
           this.projectName,
-          this.$route.params.version_id
+          this.$route.params.version_id as string
         )
       } else {
         return this.constructDownloadProjectUrl({
@@ -372,7 +373,11 @@ export default defineComponent({
       }
       this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: {
+          props,
+          listeners,
+          dialog: { maxWidth: 500, header: 'Leave project' }
+        }
       })
     }
   }
diff --git a/web-app/packages/lib/src/shims-vue-router.d.ts b/web-app/packages/lib/src/shims-vue-router.d.ts
new file mode 100644
index 00000000..0395864a
--- /dev/null
+++ b/web-app/packages/lib/src/shims-vue-router.d.ts
@@ -0,0 +1,9 @@
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    public?: boolean
+    allowedForNoWorkspace?: boolean
+    title?: string
+  }
+}

From 76cea50bdfe57a6d52be7b058ca7f99d42db6670 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Tue, 12 Dec 2023 17:51:58 +0100
Subject: [PATCH 02/10] Tuning of breadcrumbs and layout

---
 web-app/packages/app/components.d.ts               |  1 +
 web-app/packages/app/src/App.vue                   |  1 +
 web-app/packages/app/src/router.ts                 |  9 ++++++++-
 .../sass/themes/mm-theme-light/_variables.scss     |  2 +-
 .../modules/layout/components/AppBreadcrumbs.vue   | 14 ++++++++------
 .../layout/components/AppHeaderTemplate.vue        |  2 +-
 .../project/views/ProjectsListViewTemplate.vue     |  4 ++--
 7 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/web-app/packages/app/components.d.ts b/web-app/packages/app/components.d.ts
index 808106d3..f6b8a28b 100644
--- a/web-app/packages/app/components.d.ts
+++ b/web-app/packages/app/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PDivider: typeof import('primevue/divider')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VApp: typeof import('vuetify/components')['VApp']
diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index c1743bd0..9ece0f1e 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
         </transition>
       </router-view>
+      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 06e41914..084bf291 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -188,7 +188,14 @@ export const createRouter = (pinia: Pinia) => {
         ].map((child) => ({
           ...child,
           beforeEnter: (to, from, next) => {
-            to.meta.title = to.params.projectName as string
+            // added project name to matched route
+            to.matched = to.matched.map((route) => ({
+              ...route,
+              meta: {
+                ...route.meta,
+                title: route.name === to.name ? to.params.projectName as string : route.meta.title
+              }
+            }))
             next()
           }
         }))
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
index 87d51280..1bb0b551 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -79,7 +79,7 @@ $colors: (
     --content-padding:#{$panelContentPadding};
     --inline-spacing:#{$inlineSpacing};
     --border-radius:#{$borderRadius};
-    --surface-ground: #EFF5F3;
+    --surface-ground: #{map-get($map: $colors, $key: light-green)};
     --surface-section:#ffffff;
     --surface-card:#ffffff;
     --surface-overlay:#ffffff;
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
index 5952793a..d3cf922b 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -47,12 +47,14 @@ import { MenuItem } from 'primevue/menuitem'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
-const items: MenuItem[] = route.matched.map<MenuItem>((item) => ({
-  label: route.name === item.name ? route.meta.title : item.meta.title,
-  active: route.name === item.name,
-  route: item.name,
-  params: route.params
-}))
+const items: MenuItem[] = route.matched
+  .filter((item) => item.meta.title)
+  .map<MenuItem>((item) => ({
+    label: item.meta.title,
+    active: route.name === item.name,
+    route: item.name,
+    params: route.params
+  }))
 </script>
 
 <style scoped lang="scss">
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 4a06909b..3659d06f 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <PMenubar
-    class="app-header pt-0 pb-2 px-2"
+    class="app-header pt-0 px-2"
     :pt="{
       start: {
         class: 'w-10'
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index 3b7c73bb..9c0f9f89 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -7,9 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container>
     <template v-if="!namespace">
-      <app-section ground class="py-4">
+      <app-section ground class="pb-4">
         <!-- Title with buttons -->
-        <header class="flex flex-wrap align-items-center">
+        <header class="flex flex-column lg:flex-row lg:align-items-center">
           <h1 class="text-3xl font-semibold">
             {{ header }}
           </h1>

From aaceddb728413557dd2a5863e2a0d8834a455c6d Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 13 Dec 2023 18:33:35 +0100
Subject: [PATCH 03/10] Added: - app togleable panel for upload files - new
 class text-color-forest - files browser base layout

---
 web-app/packages/app/components.d.ts          |   1 +
 .../project/views/ProjectSettingsView.vue     |   4 +-
 .../src/modules/project/views/ProjectView.vue |   2 +-
 web-app/packages/lib/.eslintrc.cjs            |   2 +-
 web-app/packages/lib/components.d.ts          |   5 +-
 .../packages/lib/src/assets/Icon/24/QGIS.svg  |   5 +
 .../themes/mm-theme-light/_extensions.scss    |  10 +
 .../src/common/components/AppContainer.vue    |   2 +-
 .../common/components/AppPanelToggleable.vue  |  45 ++
 .../lib/src/common/components/index.ts        |   1 +
 .../layout/components/AppBreadcrumbs.vue      |   3 -
 .../modules/project/components/DropArea.vue   |  20 +-
 .../modules/project/components/FileIcon.vue   | 103 -----
 .../components/ProjectAccessRequests.vue      |   4 +-
 .../src/modules/project/components/index.ts   |   1 -
 .../modules/project/views/FileBrowserView.vue | 294 ++++++-------
 .../project/views/ProjectViewTemplate.vue     | 402 +++++++-----------
 17 files changed, 370 insertions(+), 534 deletions(-)
 create mode 100644 web-app/packages/lib/src/assets/Icon/24/QGIS.svg
 create mode 100644 web-app/packages/lib/src/common/components/AppPanelToggleable.vue
 delete mode 100644 web-app/packages/lib/src/modules/project/components/FileIcon.vue

diff --git a/web-app/packages/app/components.d.ts b/web-app/packages/app/components.d.ts
index f6b8a28b..ad258e38 100644
--- a/web-app/packages/app/components.d.ts
+++ b/web-app/packages/app/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     PDivider: typeof import('primevue/divider')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VApp: typeof import('vuetify/components')['VApp']
diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
index 8ccf5768..75c8a7f8 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -11,13 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :asAdmin="asAdmin"
     :show-settings="projectStore.isProjectOwner"
   >
-    <template #permissions="{ settings, keyProp, saveProject }">
+    <!-- <template #permissions="{ settings, keyProp, saveProject }">
       <project-permissions-template
         v-model="settings.access"
         :key="keyProp"
         @save-project="saveProject(...arguments)"
       />
-    </template>
+    </template> -->
   </project-settings-view-template>
 </template>
 
diff --git a/web-app/packages/app/src/modules/project/views/ProjectView.vue b/web-app/packages/app/src/modules/project/views/ProjectView.vue
index 37b06ce0..b495a588 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectView.vue
@@ -59,7 +59,7 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true }
+      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({
diff --git a/web-app/packages/lib/.eslintrc.cjs b/web-app/packages/lib/.eslintrc.cjs
index 6eae861f..85505c99 100644
--- a/web-app/packages/lib/.eslintrc.cjs
+++ b/web-app/packages/lib/.eslintrc.cjs
@@ -21,6 +21,6 @@ module.exports = {
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
     'vue/no-multiple-template-root': 'off',
-    'vue/no-v-model-argument': 'off',
+    'vue/no-v-model-argument': 'off'
   }
 }
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 5ae03a03..64f576f9 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -20,6 +20,9 @@ declare module 'vue' {
     PMenubar: typeof import('primevue/menubar')['default']
     PMessage: typeof import('primevue/message')['default']
     POverlayPanel: typeof import('primevue/overlaypanel')['default']
+    PPanel: typeof import('primevue/panel')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
+    PTabView: typeof import('primevue/tabview')['default']
     PTag: typeof import('primevue/tag')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -54,8 +57,6 @@ declare module 'vue' {
     VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VTab: typeof import('vuetify/components')['VTab']
-    VTabs: typeof import('vuetify/components')['VTabs']
     VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
     VToolbar: typeof import('vuetify/components')['VToolbar']
diff --git a/web-app/packages/lib/src/assets/Icon/24/QGIS.svg b/web-app/packages/lib/src/assets/Icon/24/QGIS.svg
new file mode 100644
index 00000000..9d41a106
--- /dev/null
+++ b/web-app/packages/lib/src/assets/Icon/24/QGIS.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8762 12.798H15.4034L13.2646 10.627H10.6442V13.2121L12.8762 15.4962V12.798Z" fill="#004C45"/>
+<path d="M20.9819 18.4607L16.4729 13.8838H13.9335V16.5783L18.2544 21.0001H20.9819V18.4607Z" fill="#004C45"/>
+<path d="M13.2348 17.2445C12.8519 17.335 12.4538 17.3841 12.0431 17.3841C9.10569 17.3841 6.60749 14.904 6.60749 11.6884C6.60749 8.47279 9.0782 6.04734 12.0431 6.04734C15.008 6.04734 17.3689 8.47267 17.3689 11.6884C17.3689 12.2114 17.3055 12.7146 17.1881 13.1913L19.9069 15.9823C20.6079 14.7213 21 13.2551 21 11.6669C21 6.71085 17.1479 3 11.9881 3C6.85196 3 3 6.68648 3 11.6669C3 16.6717 6.85208 20.4315 11.9881 20.4315C13.3141 20.4315 14.5532 20.1811 15.6632 19.7255L13.2348 17.2445Z" fill="#004C45"/>
+</svg>
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 78e7f08f..78c702cf 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -8,3 +8,13 @@ h5,
 h6 {
   color: $primaryDarkColor;
 }
+
+// Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
+.p-tabview-nav-content {
+  border: $tabviewNavBorder;
+  border-width: $tabviewNavBorderWidth;
+}
+
+.text-color-forest {
+  color: $primaryDarkColor;
+}
diff --git a/web-app/packages/lib/src/common/components/AppContainer.vue b/web-app/packages/lib/src/common/components/AppContainer.vue
index 18a1db7a..d90317a4 100644
--- a/web-app/packages/lib/src/common/components/AppContainer.vue
+++ b/web-app/packages/lib/src/common/components/AppContainer.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="app-container mx-auto py-4 px-4 xl:px-0">
+  <div class="app-container mx-auto py-3 px-4 xl:px-0">
     <slot></slot>
   </div>
 </template>
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
new file mode 100644
index 00000000..0e0f3e9a
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -0,0 +1,45 @@
+<template>
+  <PPanel
+    toggleable
+    v-bind="$props"
+    :pt="{
+      header(options) {
+        return {
+          class: [
+            'surface-section border-none p-4',
+            // Toggle border radius by open / closed panel
+            options.state.d_collapsed
+              ? 'border-round-2xl'
+              : 'border-round-top-2xl'
+          ]
+        }
+      },
+      content: {
+        class: 'border-none border-round-bottom-2xl p-4 pt-2'
+      }
+    }"
+  >
+    <template #header>
+      <h3 class="text-color-forest font-semibold m-0">
+        <slot name="header"></slot>
+      </h3>
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+    <template #icons>
+      <slot name="icons"></slot>
+    </template>
+    <slot></slot>
+    <template #togglericon="{ collapsed }">
+      <i
+        :class="[
+          'font-semibold text-color-forest ti',
+          collapsed ? 'ti-chevron-compact-down' : 'ti-chevron-compact-up'
+        ]"
+      ></i>
+    </template>
+  </PPanel>
+</template>
+
+<script lang="ts" setup></script>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index db764d43..10657315 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -6,6 +6,7 @@ export * from './base'
 
 export { default as AppSection } from './AppSection.vue'
 export { default as AppContainer } from './AppContainer.vue'
+export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
index d3cf922b..d1e79d3a 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -58,7 +58,4 @@ const items: MenuItem[] = route.matched
 </script>
 
 <style scoped lang="scss">
-.text-color-forest {
-  color: var(--forest-color);
-}
 </style>
diff --git a/web-app/packages/lib/src/modules/project/components/DropArea.vue b/web-app/packages/lib/src/modules/project/components/DropArea.vue
index e6fda660..dd899ea7 100644
--- a/web-app/packages/lib/src/modules/project/components/DropArea.vue
+++ b/web-app/packages/lib/src/modules/project/components/DropArea.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div
-    class="drop-area"
+    class="drop-area h-full"
     :class="{ active: dragOver }"
     @dragover.prevent="onDragOver"
     @dragleave.capture="setOver(false)"
@@ -30,7 +30,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         multiple
       />
     </div>
-    <slot />
+    <slot>
+      <div
+        class="flex flex-column justify-content-center align-items-center text-center h-full p-4 pt-6"
+      >
+        <div
+          class="text-2xl surface-section border-circle p-4 text-color-forest w-5rem h-5rem rotate-180"
+        >
+          <i class="ti ti-download" />
+        </div>
+        <h4 class="text-lg font-semibold text-color-forest">
+          Drag and drop files
+        </h4>
+        <p class="text-sm opacity-80">
+          You can drop files from your computer to start uploading
+        </p>
+      </div>
+    </slot>
   </div>
 </template>
 
diff --git a/web-app/packages/lib/src/modules/project/components/FileIcon.vue b/web-app/packages/lib/src/modules/project/components/FileIcon.vue
deleted file mode 100644
index 63ce726a..00000000
--- a/web-app/packages/lib/src/modules/project/components/FileIcon.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <div>
-    <template v-if="icon">
-      <span>
-        <img :src="icon" />
-      </span>
-    </template>
-    <template v-else>
-      <v-icon>{{ mdi }}</v-icon>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import mIconDbSchema from '@/assets/qgis-icons/mIconDbSchema.svg'
-import mIconFolder from '@/assets/qgis-icons/mIconFolder.svg'
-import mIconRaster from '@/assets/qgis-icons/mIconRaster.svg'
-import mIconTableLayer from '@/assets/qgis-icons/mIconTableLayer.svg'
-import mIconZip from '@/assets/qgis-icons/mIconZip.svg'
-import providerQgis from '@/assets/qgis-icons/providerQgis.svg'
-
-const mdiByExtensionDict = {
-  jpg: 'image',
-  jpeg: 'image',
-  png: 'image'
-}
-
-const iconByExtensionDict = {
-  folder: mIconFolder,
-  gpkg: mIconDbSchema,
-  qgs: providerQgis,
-  qgz: providerQgis,
-  rar: mIconZip,
-  sql: mIconDbSchema,
-  tif: mIconRaster,
-  tiff: mIconRaster,
-  xls: mIconTableLayer,
-  xlsx: mIconTableLayer
-}
-
-export default defineComponent({
-  props: {
-    file: Object
-  },
-  computed: {
-    icon: function () {
-      const file = this.file
-      const splittedName = file.name.split('.')
-      let ext = splittedName[splittedName.length - 1].toLowerCase()
-      if (file.type === 'folder') {
-        if (file.name !== '..') {
-          ext = 'folder'
-        } else {
-          return null
-        }
-      }
-      return iconByExtensionDict[ext] ? iconByExtensionDict[ext] : null
-    },
-    mdi: function () {
-      const file = this.file
-      let mdi
-      if (file.type === 'folder') {
-        if (file.name !== '..') {
-          mdi = 'folder'
-        }
-      } else {
-        const splittedName = file.name.split('.')
-        const ext = splittedName[splittedName.length - 1].toLowerCase()
-        mdi = mdiByExtensionDict[ext] ? mdiByExtensionDict[ext] : 'description'
-      }
-      return mdi
-    }
-  }
-})
-</script>
-<style lang="scss" scoped>
-div {
-  display: inline-block;
-}
-
-span {
-  position: relative;
-  display: inline-block;
-  margin-right: 5px;
-  height: 18px;
-  width: 23px;
-}
-
-img {
-  height: 100%;
-  position: absolute;
-  top: 3px;
-  left: 2px;
-}
-</style>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 4e6948fb..2e825398 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <v-layout class="no-shrink column">
     <label class="mt-4 text-grey-darken-1">Access requests:</label>
-    <v-data-table
+    <!-- <v-data-table
       :loading="loading"
       :headers="tableHeaders"
       :items="accessRequests"
@@ -129,7 +129,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </v-tooltip>
         </div>
       </template>
-    </v-data-table>
+    </v-data-table> -->
     <button
       ref="hidden-btn"
       id="accept-request-access-btn"
diff --git a/web-app/packages/lib/src/modules/project/components/index.ts b/web-app/packages/lib/src/modules/project/components/index.ts
index 3f1f2889..92d854d9 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -7,7 +7,6 @@ export { default as CloneDialog } from './CloneDialog.vue'
 export { default as CloneDialogTemplate } from './CloneDialogTemplate.vue'
 export { default as DropArea } from './DropArea.vue'
 export { default as FileChangesetSummaryTable } from './FileChangesetSummaryTable.vue'
-export { default as FileIcon } from './FileIcon.vue'
 export { default as FileMenu } from './FileMenu.vue'
 export { default as FolderDiff } from './FolderDiff.vue'
 export { default as PermissionInfo } from './PermissionInfo.vue'
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index b4235cf6..4f0f2b72 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -6,92 +6,116 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div>
-    <v-layout class="column">
-      <v-row>
-        <v-col class="pa-0">
-          <v-text-field
-            class="search"
-            placeholder="Find file"
-            append-icon="search"
-            v-model="searchFilter"
-            hide-details
-            style="padding-left: 7px; padding-bottom: 10px"
-            v-if="searchFilter !== '' || items.length > 0"
-          />
-        </v-col>
-      </v-row>
-      <v-data-table
-        v-if="
-          searchFilter !== '' ||
-          items.length ||
-          (project && !project.permissions.upload) ||
-          filter !== ''
-        "
-        class="file-table"
-        :headers="header"
-        :items="items"
-        color="primary"
-        no-data-text="No files found."
-        :items-per-page="itemPerPage"
-        :hide-default-footer="items.length <= itemPerPage"
-        :options="options"
-        v-model="selected"
-        item-key="path"
-        data-cy="file-browser-table"
-      >
-        <template #item.name="{ item }">
-          <router-link :to="item.link">
-            <file-icon :file="item" />
-            <span data-cy="file-browser-item">{{ item.name }}</span>
-          </router-link>
-          <v-spacer />
-          <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
-        </template>
-        <template #item.mtime="{ value }">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
+    <!-- Searching -->
+    <app-container v-if="searchFilter !== '' || items.length > 0">
+      <app-section ground>
+        <div class="flex">
+          <span class="p-input-icon-left flex-grow-1">
+            <i class="ti ti-search text-xl"></i>
+            <PInputText
+              placeholder="Search files"
+              v-model="searchFilter"
+              :pt="{ root: { class: 'border-round-xl w-full' } }"
+            />
+          </span>
+        </div>
+      </app-section>
+    </app-container>
+
+    <app-container>
+      <app-panel-toggleable :collapsed="dataTableOpen">
+        <template #header>Upload files</template>
+        <div class="flex flex-column lg:flex-row">
+          <div
+            class="flex flex-column align-items-center w-12 lg:w-6 mb-4 lg:mb-0 lg:mr-4 border-round-xl surface-ground p-4"
+          >
+            <div class="w-full flex justify-content-end">
+              <PTag severity="success">Recommended</PTag>
+            </div>
+
+            <div
+              class="flex align-items-center justify-content-center text-2xl surface-section border-circle p-4 text-color-forest w-5rem h-5rem"
+            >
+              <img src="@/assets/Icon/24/QGIS.svg" width="24" height="24" />
+            </div>
+
+            <h4 class="text-lg font-semibold text-color-forest">
+              Mergin Maps plugin for QGIS
+            </h4>
+            <p class="text-sm opacity-80">
+              This is the easiest and recommended way.
+              <a
+                target="_blank"
+                class="text-color-forest font-semibold no-underline"
+                :href="docsLinkManageCreateProject"
+                >Learn how to use it.</a
+              >
+            </p>
+          </div>
+          <div class="w-12 lg:w-6 border-round-xl surface-ground">
+            <drop-area
+              v-if="
+                project &&
+                $route.name === 'project-tree' &&
+                project.permissions &&
+                project.permissions.upload
+              "
+              :location="location"
+              data-cy="project-drop-area"
+            >
+            </drop-area>
+          </div>
+        </div>
+      </app-panel-toggleable>
+    </app-container>
+
+    <app-container v-if="dataTableOpen">
+      <app-section>
+        <v-data-table
+          class="file-table"
+          :headers="header"
+          :items="items"
+          color="primary"
+          no-data-text="No files found."
+          :items-per-page="itemPerPage"
+          :hide-default-footer="items.length <= itemPerPage"
+          :options="options"
+          v-model="selected"
+          item-key="path"
+          data-cy="file-browser-table"
+        >
+          <template #item.name="{ item }">
+            <router-link :to="item.link">
+              <file-icon :file="item" />
+              <span data-cy="file-browser-item">{{ item.name }}</span>
+            </router-link>
+            <v-spacer />
+            <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
+          </template>
+          <template #item.mtime="{ value }">
+            <v-tooltip location="bottom">
+              <template v-slot:activator="{ props }">
+                <span v-bind="props">
+                  <template v-if="value">
+                    {{ $filters.timediff(value) }}
+                  </template>
+                </span>
+              </template>
+              <span>
                 <template v-if="value">
-                  {{ $filters.timediff(value) }}
+                  {{ $filters.datetime(value) }}
                 </template>
               </span>
+            </v-tooltip>
+          </template>
+          <template #item.size="{ value }">
+            <template v-if="value !== undefined">
+              {{ $filters.filesize(value) }}
             </template>
-            <span>
-              <template v-if="value">
-                {{ $filters.datetime(value) }}
-              </template>
-            </span>
-          </v-tooltip>
-        </template>
-        <template #item.size="{ value }">
-          <template v-if="value !== undefined">
-            {{ $filters.filesize(value) }}
           </template>
-        </template>
-      </v-data-table>
-      <v-card v-else style="-webkit-box-shadow: none; box-shadow: none">
-        <v-card-title style="padding-left: 0"
-          ><strong>
-            Well done! The next step is adding some data.
-          </strong></v-card-title
-        >
-        <v-card-text style="padding-left: 0">
-          There are two options: <br />
-          <br />
-          1. Use the Mergin Maps plugin for QGIS to upload data. This is the
-          easiest and <strong>recommended</strong> way. See the documentation on
-          <a target="_blank" :href="docsLinkManageCreateProject"
-            >how to install and use the plugin</a
-          >. <br />
-          <br />
-          2. Drag and drop files from your computer to the lower part of this
-          page. This option is convenient if your project files are already
-          fully prepared and only need uploading.
-        </v-card-text>
-      </v-card>
-      <v-spacer />
-      <file-menu ref="menu" />
-    </v-layout>
+        </v-data-table>
+      </app-section>
+    </app-container>
   </div>
 </template>
 
@@ -105,18 +129,28 @@ import Path from 'path'
 import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import {
+  AppSection,
+  AppContainer,
+  AppPanelToggleable
+} from '@/common/components'
 import { formatDateTime } from '@/common/date_utils'
 import { dirname } from '@/common/path_utils'
 import { removeAccents } from '@/common/text_utils'
 import { useInstanceStore } from '@/modules/instance/store'
-import FileIcon from '@/modules/project/components/FileIcon.vue'
-import FileMenu from '@/modules/project/components/FileMenu.vue'
+import DropArea from '@/modules/project/components/DropArea.vue'
 import FolderDiff from '@/modules/project/components/FolderDiff.vue'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
   name: 'FileBrowserView',
-  components: { FileIcon, FolderDiff, FileMenu },
+  components: {
+    FolderDiff,
+    AppSection,
+    AppContainer,
+    AppPanelToggleable,
+    DropArea
+  },
   props: {
     namespace: String,
     projectName: String,
@@ -293,6 +327,14 @@ export default defineComponent({
     },
     allSelected() {
       return this.items.every((i) => this.selected.includes(i.path))
+    },
+    dataTableOpen() {
+      return (
+        this.searchFilter !== '' ||
+        this.items.length ||
+        (this.project && !this.project.permissions.upload) ||
+        this.filter !== ''
+      )
     }
   },
   methods: {
@@ -384,86 +426,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.search {
-  max-width: 260px;
-  margin: 0 0.25em;
-}
-
-.v-menu__content {
-  .v-list__tile__title {
-    text-align: right;
-  }
-}
-
-:deep(.v-data-table) {
-  tr {
-    color: #555;
-
-    &.updated {
-      color: orange;
-    }
-
-    &.removed,
-    &.rmoved {
-      color: red;
-    }
-
-    &.added,
-    &.nmoved {
-      color: green;
-    }
-
-    a,
-    .v-icon {
-      color: inherit;
-    }
-
-    .v-icon {
-      opacity: 0.75;
-    }
-  }
-
-  td {
-    text-align: left;
-
-    a {
-      text-decoration: none;
-
-      .v-icon {
-        line-height: 18px;
-        margin-right: 4px;
-      }
-    }
-  }
-
-  th,
-  tr {
-    min-width: 0;
-
-    .v-input--checkbox {
-      opacity: 0.75;
-      align-items: flex-end;
-      justify-content: flex-end;
-
-      .v-input--selection-controls__input {
-        margin: 0;
-      }
-
-      .v-icon {
-        pointer-events: none;
-      }
-    }
-  }
-}
-
-.v-speed-dial {
-  position: absolute;
-}
-
-.v-data-table {
-  :deep(.v-data-footer__select) {
-    display: none;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index 8da0567d..bc3f02eb 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -5,56 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <page-view
-    :style="`padding-left: ${
-      drawer ? 260 : 20
-    }px; overflow-y: auto; padding-right:20px; margin-right: 0px;`"
-  >
-    <div slot="left" class="panel" />
-    <v-layout class="column fill-height project-page main-content">
-      <v-card v-if="project" style="margin-bottom: 0" variant="outlined">
-        <!-- Toolbar -->
-        <v-layout class="row align-center toolbar">
-          <div class="breadcrumbs" style="font-size: 20px">
-            <v-icon color="primary">map</v-icon>
-            <span v-if="showNamespace" class="text-primary"
-              >{{ project.namespace }} /</span
-            >
-            <router-link
-              :to="{
-                name: 'project',
-                project: project
-              }"
-            >
-              <b>{{ project.name }}</b></router-link
-            >
-
-            <router-link
-              :to="{
-                name: 'project-versions-detail'
-              }"
-              v-slot="{ href, route, navigate }"
-            >
-              <span v-if="route.params.version_id">
-                &gt;
-                <a :href="href" @click="navigate">
-                  {{ route.params.version_id }}
-                </a>
-              </span>
-            </router-link>
-            <router-link
-              :to="{ name: 'file-version-detail' }"
-              v-slot="{ href, route, navigate }"
-            >
-              <span v-if="route.params.path">
-                &gt;
-                <a :href="href" @click="navigate">
-                  {{ route.params.path }}
-                </a>
-              </span>
-            </router-link>
-          </div>
-          <v-spacer />
+  <div>
+    <template v-if="project">
+      <app-container class="flex justify-content-end xl:pb-1 -mb-6">
+        <!-- Z indexes based on minus margin, its not possible to add additional buttons to tab view -->
+        <div class="relative z-1">
+          <!-- Toolbar -->
           <portal-target name="project-toolbar" class="layout row shrink" />
           <slot name="shareButton">
             <project-share-button />
@@ -88,138 +44,123 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </template>
             Leave project
           </action-button>
-        </v-layout>
+        </div>
+      </app-container>
 
-        <v-card
-          class="layout column fill-height"
-          variant="flat"
-          slider-color="primary"
-        >
-          <v-card-title>
-            <v-tabs left-active v-model="tab" show-arrows>
-              <div color="primary"></div>
-              <v-tab
-                key="files"
-                :to="{
-                  name: `project-tree`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >Files
-              </v-tab>
-              <slot name="map.tab" v-if="loggedUser" />
-              <v-tab
-                key="history"
-                v-if="loggedUser && showHistory"
-                :to="{
-                  name: `project-versions`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >History
-              </v-tab>
-              <v-tab
-                key="settings"
-                v-if="loggedUser && showSettings"
-                :to="{
-                  name: `project-settings`,
-                  params: { namespace: namespace, projectName: project.name }
-                }"
-                >Settings
-              </v-tab>
-            </v-tabs>
-          </v-card-title>
-          <v-divider></v-divider>
+      <PTabView
+        :active-index="activeTabIndex"
+        @tab-click="(e) => tabClick(e.index)"
+        lazy
+        :pt="{
+          root: {
+            class: 'relative z-auto'
+          },
+          nav: {
+            style: {
+              backgroundColor: 'transparent',
+              maxWidth: '1120px'
+            },
+            class: 'mx-auto border-transparent'
+          },
+          panelContainer: {
+            style: {
+              backgroundColor: 'transparent'
+            },
+            class: 'p-0'
+          }
+        }"
+      >
+        <PTabPanel header="Files" :pt="ptHeaderAction">
           <router-view v-if="project" class="content-container" />
-        </v-card>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 403">
-        <v-layout
-          class="public-private-zone"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <v-btn id="request-access-btn" @click="createAccessRequest"
-            >Request access
-          </v-btn>
-          <span class="private-public-text">
-            <b>This is a private project</b><br />
-            You don't have permissions to access this project.
-          </span>
-        </v-layout>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 404">
-        <span
-          class="private-public-text"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <b>Project not found</b><br />
-          Please check if address is written correctly
-        </span>
-      </v-card>
-      <v-card v-else-if="fetchProjectsResponseStatus === 409">
-        <span
-          class="private-public-text"
-          style="padding-top: 25px; padding-left: 25px"
-        >
-          <b>You don't have permission to access this project</b><br />
-          You already requested access
+        </PTabPanel>
+        <slot name="map.tab" :ptHeaderAction="ptHeaderAction" />
+        <PTabPanel
+          v-if="tabs.some((item) => item.route === `project-versions`)"
+          header="History"
+          :pt="ptHeaderAction"
+          ><router-view v-if="project" class="content-container" />
+        </PTabPanel>
+        <PTabPanel
+          v-if="tabs.some((item) => item.route === `project-settings`)"
+          header="Settings"
+          :pt="ptHeaderAction"
+          ><router-view v-if="project" class="content-container" />
+        </PTabPanel>
+      </PTabView>
+    </template>
+    <app-section v-else-if="fetchProjectsResponseStatus === 403">
+      <v-layout
+        class="public-private-zone"
+        style="padding-top: 25px; padding-left: 25px"
+      >
+        <v-btn id="request-access-btn" @click="createAccessRequest"
+          >Request access
+        </v-btn>
+        <span class="private-public-text">
+          <b>This is a private project</b><br />
+          You don't have permissions to access this project.
         </span>
-      </v-card>
-      <drop-area
-        v-if="
-          project &&
-          $route.name === 'project-tree' &&
-          project.permissions &&
-          project.permissions.upload
-        "
-        class="drop-area"
-        :location="location"
-        data-cy="project-drop-area"
+      </v-layout>
+    </app-section>
+    <app-section v-else-if="fetchProjectsResponseStatus === 404">
+      <span
+        class="private-public-text"
+        style="padding-top: 25px; padding-left: 25px"
+      >
+        <b>Project not found</b><br />
+        Please check if address is written correctly
+      </span>
+    </app-section>
+    <app-section v-else-if="fetchProjectsResponseStatus === 409">
+      <span
+        class="private-public-text"
+        style="padding-top: 25px; padding-left: 25px"
       >
-        <v-layout row wrap align-center class="drag-drop-text">
-          <span>
-            <v-icon>publish</v-icon> Drag & drop here or click and select
-            file(s) to upload
-          </span>
-        </v-layout>
-      </drop-area>
-    </v-layout>
+        <b>You don't have permission to access this project</b><br />
+        You already requested access
+      </span>
+    </app-section>
     <div slot="right" class="panel">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
-  </page-view>
+  </div>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { TabPanelPassThroughOptions } from 'primevue/tabpanel'
 import { defineComponent, PropType } from 'vue'
-import { useRoute } from 'vue-router'
 import { CopyIcon, DownloadIcon, SquareMinusIcon } from 'vue-tabler-icons'
 
+import { AppContainer, AppSection } from '@/common'
 import ActionButton from '@/common/components/ActionButton.vue'
 import { waitCursor } from '@/common/html_utils'
 import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
-import PageView from '@/modules/layout/components/PageView.vue'
 import { useLayoutStore } from '@/modules/layout/store'
 import { useNotificationStore } from '@/modules/notification/store'
-import DropArea from '@/modules/project/components/DropArea.vue'
 import ProjectShareButton from '@/modules/project/components/ProjectShareButton.vue'
 import UploadPanel from '@/modules/project/components/UploadPanel.vue'
 import { ProjectApi } from '@/modules/project/projectApi'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
 
+interface TabItem {
+  route: string
+}
+
 export default defineComponent({
   name: 'ProjectViewTemplate',
   components: {
     ActionButton,
     ProjectShareButton,
-    PageView,
     UploadPanel,
-    DropArea,
     CopyIcon,
     DownloadIcon,
-    SquareMinusIcon
+    SquareMinusIcon,
+    AppContainer,
+    AppSection
   },
   props: {
     /**  Show namespace (ws) label in breadcrumb of page */
@@ -238,7 +179,8 @@ export default defineComponent({
     hideCloneButton: {
       type: Boolean,
       default: false
-    }
+    },
+    mapRoute: String
   },
   data() {
     return {
@@ -253,6 +195,56 @@ export default defineComponent({
     ...mapState(useProjectStore, ['isProjectOwner']),
     ...mapState(useUserStore, ['currentWorkspace', 'isLoggedIn']),
 
+    tabs(): TabItem[] {
+      const defaultTabs: TabItem[] = [
+        {
+          route: 'project-tree'
+        }
+      ]
+
+      if (this.loggedUser) {
+        // If map in slots, add route to map tab
+        if (this.$slots['map.tab']) {
+          defaultTabs.push({
+            route: this.mapRoute
+          })
+        }
+        if (this.showHistory) {
+          defaultTabs.push({
+            route: 'project-versions'
+          })
+        }
+        if (this.showSettings) {
+          defaultTabs.push({
+            route: 'project-settings'
+          })
+        }
+      }
+      return defaultTabs
+    },
+
+    activeTabIndex(): number {
+      return this.tabs.findIndex((item) => item.route === this.$route.name)
+    },
+
+    /** Rewrite of styles for TabPanels */
+    ptHeaderAction(): TabPanelPassThroughOptions {
+      return {
+        headerAction({ context }) {
+          // Custom handling of active styles for tabs
+          return {
+            style: {
+              backgroundColor: 'transparent',
+              borderBottomColor: context.active
+                ? 'var(--forest-color)'
+                : 'transparent'
+            },
+            class: ['hover:border-400', { 'text-color-forest': context.active }]
+          }
+        }
+      }
+    },
+
     canCloneProject() {
       return this.isLoggedIn && !this.hideCloneButton
     },
@@ -379,109 +371,21 @@ export default defineComponent({
           dialog: { maxWidth: 500, header: 'Leave project' }
         }
       })
+    },
+
+    /**
+     * Handles clicking on a tab by index.
+     *
+     * @param index - The index of the clicked tab.
+     */
+    tabClick(index: number) {
+      this.$router.push({
+        name: this.tabs[index].route,
+        params: { namespace: this.namespace, projectName: this.project.name }
+      })
     }
   }
 })
 </script>
 
-<style lang="scss" scoped>
-.project-page {
-  .drop-area {
-    max-height: 100%;
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-  }
-
-  .v-card {
-    display: flex;
-    flex-direction: column;
-    margin: 0.25em;
-    overflow: unset;
-    flex-grow: 0;
-
-    .content-container {
-      padding: 0.25em 0;
-      background-color: #fff;
-      flex: 1;
-    }
-  }
-
-  small {
-    opacity: 0.6;
-    margin-bottom: 2px;
-  }
-}
-
-.theme--light.v-card.v-sheet--outlined {
-  border: none;
-}
-
-.panel {
-  flex: 1 1;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.v-card__subtitle,
-.v-card__text,
-.v-card__title {
-  padding: 16px 0 16px 0;
-}
-
-.toolbar {
-  max-width: 100%;
-  margin-right: 0;
-  margin-left: 0;
-  flex-shrink: 0;
-  flex-grow: 0;
-  padding: 0.5em 1em;
-  background-color: #fafafa;
-  border: solid #eee;
-  border-width: 1px 0;
-
-  :deep(*) {
-    .v-text-field {
-      padding-top: 0;
-      margin-top: 0;
-      font-size: 15px;
-    }
-
-    .v-btn {
-      padding: 0 0.5em;
-      margin: 0.25em;
-      min-width: 2em;
-    }
-  }
-}
-
-.breadcrumbs {
-  color: #777;
-
-  a {
-    text-decoration: none;
-    margin: 0 0.25em;
-  }
-}
-
-.drop-area {
-  margin-top: 5px;
-  padding-left: 5px;
-
-  .drag-drop-text {
-    border: 1px dashed rgba(0, 0, 0, 0.6);
-    opacity: 0.6;
-    margin: 0.25em 0.25em 0.25em 0.25em;
-
-    span {
-      width: 100%;
-      text-align: center;
-      margin: 20px;
-    }
-
-    i {
-      transform: rotate(180deg);
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

From d0fcf01183d485e6f048acd379c8e89f6b3e35d7 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 15 Dec 2023 14:19:29 +0100
Subject: [PATCH 04/10] Update router Added: - Sidebar for file detail mapped
 to new file_path query string

---
 web-app/packages/app/package.json             |   2 +-
 .../project/views/ProjectSettingsView.vue     |   9 +-
 web-app/packages/app/src/router.ts            |  33 ++-
 web-app/packages/lib/components.d.ts          |   6 +-
 web-app/packages/lib/package.json             |   2 +-
 .../themes/mm-theme-light/_extensions.scss    |   1 +
 .../themes/mm-theme-light/_variables.scss     |   3 +
 .../common/components/AppPanelToggleable.vue  |   2 +-
 .../src/common/components/AppSidebarRight.vue |  68 +++++
 .../lib/src/common/components/index.ts        |   1 +
 .../layout/components/AppBreadcrumbs.vue      |   3 +-
 .../packages/lib/src/modules/layout/store.ts  |   8 +-
 .../project/components/FileDetailSidebar.vue  | 241 ++++++++++++++++++
 .../modules/project/components/FileIcon.vue   | 103 ++++++++
 .../modules/project/components/FileMenu.vue   |  54 ----
 .../ProjectAccessRequestTableTemplate.vue     |   1 -
 .../project/components/UploadPanel.vue        | 177 +++++++------
 .../src/modules/project/components/index.ts   |   3 +-
 .../modules/project/views/FileBrowserView.vue | 107 ++++----
 .../modules/project/views/FileDetailView.vue  | 235 -----------------
 .../project/views/ProjectViewTemplate.vue     |  12 +-
 .../lib/src/modules/project/views/index.ts    |   1 -
 web-app/yarn.lock                             |  12 +-
 23 files changed, 615 insertions(+), 469 deletions(-)
 create mode 100644 web-app/packages/lib/src/common/components/AppSidebarRight.vue
 create mode 100644 web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
 create mode 100644 web-app/packages/lib/src/modules/project/components/FileIcon.vue
 delete mode 100644 web-app/packages/lib/src/modules/project/components/FileMenu.vue
 delete mode 100644 web-app/packages/lib/src/modules/project/views/FileDetailView.vue

diff --git a/web-app/packages/app/package.json b/web-app/packages/app/package.json
index 873251cf..0b4a0579 100644
--- a/web-app/packages/app/package.json
+++ b/web-app/packages/app/package.json
@@ -38,7 +38,7 @@
     "vue": "^3.3.8",
     "vue-i18n": "^9.7.1",
     "vue-meta": "^3.0.0-alpha.10",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "3.4.3"
   }
diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
index 75c8a7f8..18875700 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -5,20 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <project-settings-view-template
+  Hopaa
+  <!-- <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
     :show-settings="projectStore.isProjectOwner"
   >
-    <!-- <template #permissions="{ settings, keyProp, saveProject }">
+    <template #permissions="{ settings, keyProp, saveProject }">
       <project-permissions-template
         v-model="settings.access"
         :key="keyProp"
         @save-project="saveProject(...arguments)"
       />
-    </template> -->
-  </project-settings-view-template>
+    </template>
+  </project-settings-view-template> -->
 </template>
 
 <script lang="ts">
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 084bf291..2dd8f2c8 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -5,7 +5,6 @@
 import {
   ChangePasswordView,
   FileBrowserView,
-  FileDetailView,
   FileVersionDetailView,
   ProjectVersionsView,
   VersionDetailView,
@@ -130,6 +129,23 @@ export const createRouter = (pinia: Pinia) => {
           }
         ]
       },
+      /** Redirect of unused /blob path to /tree */
+      {
+        path: '/projects/:namespace/:projectName/blob/:location?',
+        name: 'blob',
+        component: NotFoundView,
+        props: true,
+        meta: { public: true },
+        beforeEnter: (to, from, next) => {
+          next({
+            path: `/projects/${to.params.namespace}/${
+              to.params.projectName
+            }/tree${from.params.location ? `/${from.params.location}` : ''}`,
+            query: { file_path: to.params.location }
+          })
+          return
+        }
+      },
       {
         path: '/projects/:namespace/:projectName',
         name: 'project',
@@ -145,16 +161,10 @@ export const createRouter = (pinia: Pinia) => {
           title: 'Projects'
         },
         redirect: { name: 'project-tree' },
+
         children: [
           {
-            path: 'blob/:location*',
-            name: 'blob',
-            component: FileDetailView,
-            props: true,
-            meta: { public: true }
-          },
-          {
-            path: 'tree/:location*',
+            path: 'tree/:location?',
             name: 'project-tree',
             component: FileBrowserView,
             props: true,
@@ -193,7 +203,10 @@ export const createRouter = (pinia: Pinia) => {
               ...route,
               meta: {
                 ...route.meta,
-                title: route.name === to.name ? to.params.projectName as string : route.meta.title
+                title:
+                  route.name === to.name
+                    ? (to.params.projectName as string)
+                    : route.meta.title
               }
             }))
             next()
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 64f576f9..605e4b89 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -15,12 +15,15 @@ declare module 'vue' {
     PDataView: typeof import('primevue/dataview')['default']
     PDialog: typeof import('primevue/dialog')['default']
     PDropdown: typeof import('primevue/dropdown')['default']
+    PImage: typeof import('primevue/image')['default']
+    PInlineMessage: typeof import('primevue/inlinemessage')['default']
     PInputText: typeof import('primevue/inputtext')['default']
     PMenu: typeof import('primevue/menu')['default']
     PMenubar: typeof import('primevue/menubar')['default']
     PMessage: typeof import('primevue/message')['default']
     POverlayPanel: typeof import('primevue/overlaypanel')['default']
     PPanel: typeof import('primevue/panel')['default']
+    PSidebar: typeof import('primevue/sidebar')['default']
     PTabPanel: typeof import('primevue/tabpanel')['default']
     PTabView: typeof import('primevue/tabview')['default']
     PTag: typeof import('primevue/tag')['default']
@@ -49,7 +52,6 @@ declare module 'vue' {
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VMenu: typeof import('vuetify/components')['VMenu']
     VPagination: typeof import('vuetify/components')['VPagination']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
@@ -59,8 +61,6 @@ declare module 'vue' {
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
-    VToolbar: typeof import('vuetify/components')['VToolbar']
-    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VTooltip: typeof import('vuetify/components')['VTooltip']
   }
 }
diff --git a/web-app/packages/lib/package.json b/web-app/packages/lib/package.json
index b71cb5b4..937cfa99 100644
--- a/web-app/packages/lib/package.json
+++ b/web-app/packages/lib/package.json
@@ -48,7 +48,7 @@
     "primevue": "^3.43.0",
     "universal-cookie": "^4.0.4",
     "vue": "^3.3.8",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "^3.4.3"
   },
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 78c702cf..c3d25673 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -7,6 +7,7 @@ h4,
 h5,
 h6 {
   color: $primaryDarkColor;
+  font-weight: 600;
 }
 
 // Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
index 1bb0b551..98cd5328 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -94,5 +94,8 @@ $colors: (
     // TODO: use primary-classes primary-100 ... ??
     --light-green-color: #{map-get($colors, "light-green")};
     --deep-ocean-color: #{map-get($colors, "light-ocean")};
+    --negative-color: #{map-get($colors, "negative")};
+    --warning-color: #{map-get($colors, "warning")};
+    --positive-color: #{map-get($colors, "positive")};
     color-scheme: light;
 }
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
index 0e0f3e9a..92bcee41 100644
--- a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -35,7 +35,7 @@
       <i
         :class="[
           'font-semibold text-color-forest ti',
-          collapsed ? 'ti-chevron-compact-down' : 'ti-chevron-compact-up'
+          collapsed ? 'ti-chevron-down' : 'ti-chevron-up'
         ]"
       ></i>
     </template>
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
new file mode 100644
index 00000000..8711863a
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -0,0 +1,68 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <aside>
+    <PSidebar
+      v-model:visible="model"
+      :modal="true"
+      position="right"
+      class="w-11 lg:w-4"
+    >
+      <template #container="{ closeCallback }">
+        <div class="flex flex-column h-full">
+          <!-- Header -->
+          <div
+            class="flex align-items-center justify-content-between px-4 py-0"
+          >
+            <h4 class="flex-grow-1"><slot name="title"></slot></h4>
+            <div class="flex-shrink-0">
+              <slot name="headerButtons"></slot>
+              <PButton
+                type="button"
+                @click="closeCallback"
+                severity="secondary"
+                icon="ti ti-x"
+                text
+                rounded
+                class="p-1 text-2xl"
+              ></PButton>
+            </div>
+          </div>
+
+          <!-- content -->
+          <div class="overflow-y-auto px-4 py-2">
+            <slot></slot>
+          </div>
+
+          <!-- foooter -->
+          <div class="mt-auto w-full p-4">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </template>
+    </PSidebar>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+const emitModelValue = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    return emitModelValue('update:modelValue')
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 10657315..3c5fa0a2 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -7,6 +7,7 @@ export * from './base'
 export { default as AppSection } from './AppSection.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
+export { default as AppsidebarRight } from './AppSidebarRight.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
diff --git a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
index d1e79d3a..5965acdc 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppBreadcrumbs.vue
@@ -57,5 +57,4 @@ const items: MenuItem[] = route.matched
   }))
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>
diff --git a/web-app/packages/lib/src/modules/layout/store.ts b/web-app/packages/lib/src/modules/layout/store.ts
index 1b58f51e..ba9d3b25 100644
--- a/web-app/packages/lib/src/modules/layout/store.ts
+++ b/web-app/packages/lib/src/modules/layout/store.ts
@@ -5,7 +5,7 @@
 import { defineStore } from 'pinia'
 
 export interface LayoutState {
-  sidebarBreakpoint: number
+  overlayBreakpoint: number
   drawer: boolean
   /** If sidebar is in overlay mode (on mobile is flying over content) */
   isOverlay: boolean
@@ -17,7 +17,7 @@ const CLOSED_ELEMENTS_KEY = 'mm-closed-elements'
 
 export const useLayoutStore = defineStore('layoutModule', {
   state: (): LayoutState => ({
-    sidebarBreakpoint: 992,
+    overlayBreakpoint: 992,
     drawer: false,
     isOverlay: false,
     closedElements: []
@@ -47,9 +47,9 @@ export const useLayoutStore = defineStore('layoutModule', {
       const isSmall =
         window.matchMedia !== undefined
           ? window.matchMedia(
-              `screen and (max-width: ${this.sidebarBreakpoint}px)`
+              `screen and (max-width: ${this.overlayBreakpoint}px)`
             ).matches
-          : width < this.sidebarBreakpoint
+          : width < this.overlayBreakpoint
       this.drawer = !isSmall
       this.isOverlay = isSmall
     },
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
new file mode 100644
index 00000000..3efb8869
--- /dev/null
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -0,0 +1,241 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div>
+    <AppSidebarRight v-model="sidebarVisible">
+      <template #title>{{ fileName }}</template>
+      <template #headerButtons
+        ><PButton
+          type="button"
+          @click="downloadFile"
+          severity="secondary"
+          icon="ti ti-download"
+          text
+          rounded
+          class="p-1 text-2xl"
+          data-cy="file-detail-download-btn"
+        ></PButton
+      ></template>
+
+      <div class="overflow-y-auto">
+        <PInlineMessage v-if="state" :severity="stateSeverity" class="w-full">
+          {{ stateText }}
+        </PInlineMessage>
+
+        <dl class="grid">
+          <div class="col-12">
+            <dt class="text-xs opacity-80 mb-1">Name</dt>
+            <dl>
+              <h3 class="text-2xl mt-0">
+                <FileIcon :file="{ ...file, name: fileName }" />{{ fileName }}
+              </h3>
+            </dl>
+          </div>
+          <div class="col-6">
+            <dt class="text-xs opacity-80 mb-1">Modified</dt>
+            <dl>
+              <span v-tooltip="$filters.datetime(file.mtime)">{{
+                $filters.timediff(file.mtime)
+              }}</span>
+            </dl>
+          </div>
+          <div class="col-6 flex flex-column align-items-end">
+            <dt class="text-xs opacity-80 mb-1">Size</dt>
+            <dl>
+              {{ $filters.filesize(file.size) }}
+              <span v-if="state === 'updated'"
+                >(new:
+                {{ $filters.filesize(upload.files[file.path].size) }})</span
+              >
+            </dl>
+          </div>
+        </dl>
+
+        <!--     render only if file is smaller than 100MB-->
+        <div
+          class="flex flex-column align-items-center w-full py-4"
+          v-if="mimetype && file.size < 104857600"
+        >
+          <output>
+            <PImage
+              :src="downloadLink"
+              v-if="mimetype.match('image')"
+              preview
+            />
+            <v-textarea
+              v-else-if="mimetype.match('text')"
+              :auto-grow="true"
+              :readonly="true"
+              :model-value="content"
+              variant="solo-filled"
+            >
+            </v-textarea>
+          </output>
+        </div>
+      </div>
+
+      <!-- foooter -->
+      <template #footer>
+        <PButton
+          v-if="project && project.permissions.upload && state !== 'removed'"
+          severity="danger"
+          @click="removeSelected"
+          class="flex justify-content-center w-full text-center"
+          data-cy="file-detail-remove-btn"
+        >
+          Delete file
+        </PButton>
+      </template>
+    </AppSidebarRight>
+  </div>
+</template>
+
+<script lang="ts">
+import Path from 'path'
+import { mapActions, mapState } from 'pinia'
+import { defineComponent } from 'vue'
+
+import FileIcon from './FileIcon.vue'
+
+import AppSidebarRight from '@/common/components/AppSidebarRight.vue'
+import { ProjectApi } from '@/modules/project/projectApi'
+import { useProjectStore } from '@/modules/project/store'
+
+enum State {
+  ADDED = 'added',
+  REMOVED = 'removed',
+  UPDATED = 'updated'
+}
+
+export default defineComponent({
+  name: 'FileDetailSidebar',
+  props: {
+    namespace: String,
+    projectName: String
+  },
+  computed: {
+    ...mapState(useProjectStore, ['project', 'uploads']),
+    upload() {
+      return this.uploads[this.project.path]
+    },
+    file() {
+      return (
+        this.project?.files[this.filePath] || this.upload?.files[this.filePath]
+      )
+    },
+    fileName() {
+      return Path.basename(this.file?.path)
+    },
+    downloadLink() {
+      // added random number to request avoid to browser caching files
+      return ProjectApi.constructDownloadProjectFileUrl(
+        this.namespace,
+        this.projectName,
+        encodeURIComponent(this.file?.path)
+      )
+    },
+    state(): State {
+      const diff = this.upload && this.upload.diff
+      if (diff) {
+        const path = this.file?.path
+        if (diff.added.includes(path)) {
+          return State.ADDED
+        } else if (diff.removed.includes(path)) {
+          return State.REMOVED
+        } else if (diff.updated.includes(path)) {
+          return State.UPDATED
+        }
+      }
+      return null
+    },
+    stateSeverity() {
+      const stateSeverity: Record<State, string> = {
+        added: 'success',
+        removed: 'error',
+        updated: 'info'
+      }
+      return this.state && stateSeverity[this.state]
+    },
+    stateText() {
+      const stateText: Record<State, string> = {
+        added: 'New file',
+        removed: 'Deleted file',
+        updated: 'Modified file'
+      }
+      return this.state && stateText[this.state]
+    },
+    filePath(): string {
+      return this.$route.query.file_path as string
+    },
+    sidebarVisible: {
+      get() {
+        return !!this.filePath
+      },
+      set(visible: boolean) {
+        if (visible) {
+          this.sidebarVisible = visible
+        } else {
+          this.$router.replace({ query: undefined })
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      previewUrl: '',
+      pageCount: 0,
+      currentPage: 0,
+      content: null,
+      mimetype: null as string
+    }
+  },
+  watch: {
+    file: {
+      immediate: true,
+      handler() {
+        if (this.file) {
+          this.txtPreview()
+          return
+        }
+        this.sidebarVisible = false
+      }
+    }
+  },
+  methods: {
+    ...mapActions(useProjectStore, ['deleteFiles']),
+    txtPreview() {
+      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
+        this.mimetype = resp.headers['content-type']
+        if (resp.headers['content-type'].match('text')) {
+          if (resp.data.constructor === Object) {
+            resp.data = JSON.stringify(resp.data)
+          }
+          this.content = resp.data.match(/^.*([^\n]*\n){0,50}/gi)[0]
+          if (!this.content) {
+            this.content = ''
+            return
+          }
+          if (this.content.length > 10000) {
+            this.content = this.content.substring(0, 10000)
+          }
+        } else {
+          this.content = null
+        }
+      })
+    },
+    removeSelected() {
+      this.deleteFiles({ files: [this.file.path] })
+    },
+    downloadFile() {
+      window.location.href = this.downloadLink
+    }
+  },
+  components: { AppSidebarRight, FileIcon }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/components/FileIcon.vue b/web-app/packages/lib/src/modules/project/components/FileIcon.vue
new file mode 100644
index 00000000..79c7a35a
--- /dev/null
+++ b/web-app/packages/lib/src/modules/project/components/FileIcon.vue
@@ -0,0 +1,103 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div class="mr-2 text-lg">
+    <template v-if="icon">
+      <span>
+        <img :src="icon" width="24" height="24" />
+      </span>
+    </template>
+    <template v-else>
+      <i :class="['ti p-1', `ti-${mdi}`]" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import mIconDbSchema from '@/assets/qgis-icons/mIconDbSchema.svg'
+import mIconFolder from '@/assets/qgis-icons/mIconFolder.svg'
+import mIconRaster from '@/assets/qgis-icons/mIconRaster.svg'
+import mIconTableLayer from '@/assets/qgis-icons/mIconTableLayer.svg'
+import mIconZip from '@/assets/qgis-icons/mIconZip.svg'
+import providerQgis from '@/assets/qgis-icons/providerQgis.svg'
+
+const mdiByExtensionDict = {
+  jpg: 'photo',
+  jpeg: 'photo',
+  png: 'photo'
+}
+
+const iconByExtensionDict = {
+  folder: mIconFolder,
+  gpkg: mIconDbSchema,
+  qgs: providerQgis,
+  qgz: providerQgis,
+  rar: mIconZip,
+  sql: mIconDbSchema,
+  tif: mIconRaster,
+  tiff: mIconRaster,
+  xls: mIconTableLayer,
+  xlsx: mIconTableLayer
+}
+
+export default defineComponent({
+  props: {
+    file: Object
+  },
+  computed: {
+    icon: function () {
+      const file = this.file
+      const splittedName = file.name.split('.')
+      let ext = splittedName[splittedName.length - 1].toLowerCase()
+      if (file.type === 'folder') {
+        if (file.name !== '..') {
+          ext = 'folder'
+        } else {
+          return null
+        }
+      }
+      return iconByExtensionDict[ext] ? iconByExtensionDict[ext] : null
+    },
+    mdi: function () {
+      const file = this.file
+      let mdi
+      if (file.type === 'folder') {
+        if (file.name !== '..') {
+          mdi = 'folder'
+        }
+      } else {
+        const splittedName = file.name.split('.')
+        const ext = splittedName[splittedName.length - 1].toLowerCase()
+        mdi = mdiByExtensionDict[ext] ? mdiByExtensionDict[ext] : 'file'
+      }
+      return mdi
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+div {
+  display: inline-block;
+}
+
+span {
+  position: relative;
+  display: inline-block;
+  margin-right: 5px;
+  height: 18px;
+  width: 23px;
+}
+
+img {
+  height: 100%;
+  position: absolute;
+  top: 3px;
+  left: 2px;
+}
+</style>
diff --git a/web-app/packages/lib/src/modules/project/components/FileMenu.vue b/web-app/packages/lib/src/modules/project/components/FileMenu.vue
deleted file mode 100644
index bdc05c34..00000000
--- a/web-app/packages/lib/src/modules/project/components/FileMenu.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <!--      TODO: VUE 3 - replace offset-y boolean with offset number|string-->
-  <v-menu
-    v-model="showMenu"
-    :position-x="x"
-    :position-y="y"
-    position="absolute"
-    offset
-    :min-width="150"
-  >
-    <v-list>
-      <v-list-item @click="deleteFile">
-        <v-list-item-title>Delete</v-list-item-title>
-      </v-list-item>
-    </v-list>
-  </v-menu>
-</template>
-
-
-<script lang="ts">
-import { mapActions } from 'pinia'
-import { defineComponent } from 'vue'
-
-import { useProjectStore } from '@/modules/project/store'
-
-export default defineComponent({
-  data() {
-    return {
-      showMenu: false,
-      x: 0,
-      y: 0,
-      file: null
-    }
-  },
-  methods: {
-    ...mapActions(useProjectStore, ['deleteFiles']),
-    open(evt, file) {
-      this.showMenu = true
-      this.x = evt.clientX
-      this.y = evt.clientY
-      this.file = file
-    },
-    deleteFile() {
-      this.deleteFiles({ files: [this.file.path] })
-    }
-  }
-})
-</script>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
index 5ca58d7f..9920eeb1 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
@@ -11,7 +11,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :paginator="accessRequestsCount > 10"
     :loading="loading"
     :rows="options.itemsPerPage"
-    :rowsPerPageOptions="[10, 25, 50]"
     :totalRecords="accessRequestsCount"
     :data-key="'id'"
     :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 268ddd7b..62ea4244 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -5,74 +5,63 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card>
-    <v-toolbar density="compact" text theme="dark" color="primary">
-      <v-toolbar-title>Data Sync</v-toolbar-title>
-      <v-spacer />
-      <v-btn icon @click="resetUpload">
-        <v-icon>close</v-icon>
-      </v-btn>
-    </v-toolbar>
-
-    <v-card-text v-if="upload.diff && upload.diff.changes">
-      <v-layout class="stats-line">
-        <label>Removed files:</label>
-        <v-spacer />
-        <span class="red--text">{{ upload.diff.removed.length }}</span>
-        <v-icon size="small" color="red">delete</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Added files:</label>
-        <v-spacer />
-        <span class="green--text">{{ upload.diff.added.length }}</span>
-        <v-icon size="small" color="green">add_circle</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Modified files:</label>
-        <v-spacer />
-        <span class="orange--text">{{ upload.diff.updated.length }}</span>
-        <v-icon size="small" color="orange">edit</v-icon>
-      </v-layout>
-      <v-layout class="stats-line">
-        <label>Upload data size:</label>
-        <v-spacer />
-        <span>{{ $filters.filesize(uploadSize) }}</span>
-      </v-layout>
-    </v-card-text>
-    <v-card-text v-else-if="upload.diff">
-      All files are up to date!
-    </v-card-text>
-
-    <v-card-text v-if="remainingAnalyzingFiles">
-      <v-layout row>
-        <v-progress-circular
-          :size="30"
-          :width="3"
-          color="primary"
-          indeterminate
-        />
-        <v-spacer />
-        <span style="padding-right: 30px"
-          >Remaining files: {{ remainingAnalyzingFiles }}</span
+  <PDialog
+    v-model:visible="visible"
+    position="bottomright"
+    class="upload-panel"
+    :pt="{
+      root: {
+        class: 'w-11 lg:w-3 mr-4 mb-4'
+      },
+      header: {
+        class: 'border-none py-2'
+      },
+      closeButton: {
+        class: 'text-color-forest'
+      }
+    }"
+  >
+    <template #header>
+      <p class="font-semibold">
+        Data Sync
+        <span v-if="upload.diff" class="text-color-secondary"
+          >({{ $filters.filesize(uploadSize) }})</span
         >
-      </v-layout>
-    </v-card-text>
-
-    <v-card-actions v-if="upload.diff && upload.diff.changes">
-      <v-spacer />
-      <action-button
-        id="update-files-btn"
-        @click="confirmUpload"
-        :disabled="upload.running || remainingAnalyzingFiles > 0"
+      </p>
+    </template>
+    <div v-if="upload.diff && upload.diff.changes">
+      <div
+        class="flex py-1 align-items-center"
+        v-for="key in ['added', 'updated', 'removed']"
+        :key="key"
       >
-        <template #icon>
-          <cloud-upload-icon />
-        </template>
-        Update
-      </action-button>
-      <v-spacer />
-    </v-card-actions>
-  </v-card>
+        <div
+          :class="[
+            'border-circle p-2 mr-1 upload-panel-diff-circle text-center',
+            `upload-panel-diff-circle--${key}`
+          ]"
+        >
+          <i :class="['ti', `ti-${diffIcon[key]}`]" class="text-xl"></i>
+        </div>
+        <span class="text-sm opacity-80 capitalize">{{ key }}</span>
+        <div
+          class="upload-panel-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center"
+        >
+          {{ upload.diff[key].length }}
+        </div>
+      </div>
+      <div class="py-4 w-full">
+        <PButton
+          id="update-files-btn"
+          @click="confirmUpload"
+          :disabled="upload.running || remainingAnalyzingFiles > 0"
+          class="flex justify-content-center w-full text-center"
+        >
+          Update Changes
+        </PButton>
+      </div>
+    </div>
+  </PDialog>
 </template>
 
 <script lang="ts">
@@ -87,6 +76,8 @@ import { CHUNK_SIZE, isVersionedFile } from '@/common/mergin_utils'
 import { ConfirmDialog, useDialogStore, useNotificationStore } from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
 
+type DiffKeys = 'removed' | 'added' | 'updated'
+
 export default defineComponent({
   data() {
     return {
@@ -96,13 +87,18 @@ export default defineComponent({
   props: {
     namespace: String
   },
-  components: {
-    ActionButton,
-    CloudUploadIcon
-  },
   computed: {
     ...mapState(useProjectStore, ['project', 'uploads']),
+    visible: {
+      get() {
+        return !!this.upload
+      },
+      set(visible) {
+        if (visible) return visible
 
+        this.resetUpload()
+      }
+    },
     upload() {
       return this.uploads[this.project.path]
     },
@@ -118,6 +114,14 @@ export default defineComponent({
     remainingAnalyzingFiles() {
       const list = (this.upload && this.upload.analysingFiles) || []
       return list.length
+    },
+    diffIcon() {
+      const icons: Record<DiffKeys, string> = {
+        removed: 'trash',
+        added: 'plus',
+        updated: 'pencil'
+      }
+      return icons
     }
   },
   methods: {
@@ -233,27 +237,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-card {
-  min-width: 240px;
-}
-
-.stats-line {
-  align-items: center;
-  margin: 0.75em 0;
-
-  label {
-    font-weight: 500;
-    color: #555;
+.upload-panel {
+  &-diff-count {
+    background-color: var(--light-green-color);
   }
-
-  .spacer {
-    height: 1em;
-    border-bottom: 1px dotted #ccc;
-    margin: 0 0.5em;
-  }
-
-  .v-icon {
-    margin: 0 0.25em;
+  &-diff-circle {
+    &--removed {
+      background-color: var(--negative-color);
+    }
+    &--updated {
+      background-color: var(--warning-color);
+    }
+    &--added {
+      background-color: var(--positive-color);
+    }
   }
 }
 </style>
diff --git a/web-app/packages/lib/src/modules/project/components/index.ts b/web-app/packages/lib/src/modules/project/components/index.ts
index 92d854d9..cd2d3a5a 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -7,7 +7,7 @@ export { default as CloneDialog } from './CloneDialog.vue'
 export { default as CloneDialogTemplate } from './CloneDialogTemplate.vue'
 export { default as DropArea } from './DropArea.vue'
 export { default as FileChangesetSummaryTable } from './FileChangesetSummaryTable.vue'
-export { default as FileMenu } from './FileMenu.vue'
+export { default as FileIcon } from './FileIcon.vue'
 export { default as FolderDiff } from './FolderDiff.vue'
 export { default as PermissionInfo } from './PermissionInfo.vue'
 export { default as ProjectAccessRequests } from './ProjectAccessRequests.vue'
@@ -21,3 +21,4 @@ export { default as ProjectsTable } from './ProjectsTable.vue'
 export { default as ProjectsTableDataLoader } from './ProjectsTableDataLoader.vue'
 export { default as UploadPanel } from './UploadPanel.vue'
 export { default as ProjectAccessRequestTableTemplate } from './ProjectAccessRequestTableTemplate.vue'
+export { default as FileDetailSidebar } from './FileDetailSidebar.vue'
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index 4f0f2b72..5e16168b 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -71,51 +71,63 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
     <app-container v-if="dataTableOpen">
       <app-section>
-        <v-data-table
-          class="file-table"
-          :headers="header"
-          :items="items"
-          color="primary"
-          no-data-text="No files found."
-          :items-per-page="itemPerPage"
-          :hide-default-footer="items.length <= itemPerPage"
-          :options="options"
-          v-model="selected"
-          item-key="path"
+        <PDataView
+          :value="items"
+          :data-key="'id'"
+          :paginator="items.length > itemPerPage"
+          :rows="itemPerPage"
+          :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
           data-cy="file-browser-table"
+          :pt="{
+            header: {
+              class: 'px-4 py-2'
+            }
+          }"
         >
-          <template #item.name="{ item }">
-            <router-link :to="item.link">
-              <file-icon :file="item" />
-              <span data-cy="file-browser-item">{{ item.name }}</span>
-            </router-link>
-            <v-spacer />
-            <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
+          <template #header>
+            <div class="grid grid-nogutter">
+              <div v-for="col in columns" class="col-4 text-xs" :key="col.text">
+                {{ col.text }}
+              </div>
+            </div>
           </template>
-          <template #item.mtime="{ value }">
-            <v-tooltip location="bottom">
-              <template v-slot:activator="{ props }">
-                <span v-bind="props">
-                  <template v-if="value">
-                    {{ $filters.timediff(value) }}
-                  </template>
+          <template #list="slotProps">
+            <div
+              v-for="item in slotProps.items"
+              :key="item.id"
+              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm"
+              @click.prevent="rowClick(item.link)"
+            >
+              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+              <div class="flex align-items-center col-4">
+                <p class="font-semibold">
+                  <file-icon :file="item" />{{ item.name }}
+                </p>
+                <div>
+                  <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
+                </div>
+              </div>
+              <div class="flex align-items-center col-4">
+                <span
+                  v-if="item.mtime"
+                  v-tooltip.bottom="{ value: $filters.datetime(item.mtime) }"
+                >
+                  {{ $filters.timediff(item.mtime) }}
                 </span>
-              </template>
-              <span>
-                <template v-if="value">
-                  {{ $filters.datetime(value) }}
-                </template>
-              </span>
-            </v-tooltip>
+              </div>
+              <div class="flex align-items-center col-4">
+                <span v-if="item.size">{{ $filters.filesize(item.size) }}</span>
+              </div>
+            </div>
           </template>
-          <template #item.size="{ value }">
-            <template v-if="value !== undefined">
-              {{ $filters.filesize(value) }}
-            </template>
+          <template #empty>
+            <span>No files found.</span>
           </template>
-        </v-data-table>
+        </PDataView>
       </app-section>
     </app-container>
+    <!-- Sidebars -->
+    <file-detail-sidebar :namespace="namespace" :project-name="projectName" />
   </div>
 </template>
 
@@ -139,6 +151,8 @@ import { dirname } from '@/common/path_utils'
 import { removeAccents } from '@/common/text_utils'
 import { useInstanceStore } from '@/modules/instance/store'
 import DropArea from '@/modules/project/components/DropArea.vue'
+import FileDetailSidebar from '@/modules/project/components/FileDetailSidebar.vue'
+import FileIcon from '@/modules/project/components/FileIcon.vue'
 import FolderDiff from '@/modules/project/components/FolderDiff.vue'
 import { useProjectStore } from '@/modules/project/store'
 
@@ -146,10 +160,12 @@ export default defineComponent({
   name: 'FileBrowserView',
   components: {
     FolderDiff,
+    FileIcon,
     AppSection,
     AppContainer,
     AppPanelToggleable,
-    DropArea
+    DropArea,
+    FileDetailSidebar
   },
   props: {
     namespace: String,
@@ -173,11 +189,7 @@ export default defineComponent({
       searchFilter: '',
       filter: '',
       selected: [],
-      header: [
-        { text: 'Name', value: 'name' },
-        { text: 'Modified', value: 'mtime' },
-        { text: 'Size', value: 'size' }
-      ]
+      columns: [{ text: 'Name' }, { text: 'Modified' }, { text: 'Size' }]
     }
   },
   computed: {
@@ -296,7 +308,7 @@ export default defineComponent({
         items.push({
           name: '..',
           type: 'folder',
-          link: Path.normalize(Path.join(this.$route.path, '@/')),
+          link: Path.normalize(Path.join(this.$route.path, '..')),
           mtime: ''
         })
       }
@@ -403,10 +415,6 @@ export default defineComponent({
       }
       return files.map((f) => ({ ...f, name: f.path.slice(dirPrefix.length) }))
     },
-    openMenu(evt, file) {
-      // TODO: highlight
-      this.$refs.menu.open(evt, file)
-    },
     toggleAll(selected) {
       const fn = selected ? union : difference
       this.selected = fn(
@@ -421,6 +429,9 @@ export default defineComponent({
         this.sortBy = column
         this.options.descending = false
       }
+    },
+    rowClick(path: string) {
+      this.$router.push({ path })
     }
   }
 })
diff --git a/web-app/packages/lib/src/modules/project/views/FileDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileDetailView.vue
deleted file mode 100644
index e30678c5..00000000
--- a/web-app/packages/lib/src/modules/project/views/FileDetailView.vue
+++ /dev/null
@@ -1,235 +0,0 @@
-<!--
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <div>
-    <div v-if="state" v-text="stateText" :class="['status', colors[state]]" />
-    <action-button
-      v-if="project && project.permissions.upload && state !== 'removed'"
-      @click="removeSelected"
-      data-cy="file-detail-remove-btn"
-      style="float: right"
-      colorClass="red"
-    >
-      <template #icon>
-        <trash-icon />
-      </template>
-      Remove file
-    </action-button>
-    <action-button
-      :disabled="state === 'added'"
-      :href="downloadLink"
-      data-cy="file-detail-download-btn"
-      style="float: right"
-    >
-      <template #icon>
-        <download-icon />
-      </template>
-      Download File
-    </action-button>
-
-    <v-list lines="two" subheader>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Name</v-list-item-title>
-          <v-list-item-subtitle>{{ filename }}</v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Size</v-list-item-title>
-          <v-list-item-subtitle>
-            {{ $filters.filesize(file.size) }}
-            <span v-if="state === 'updated'"
-              >(new:
-              {{ $filters.filesize(upload.files[file.path].size) }})</span
-            >
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-      <v-list-item>
-        <div>
-          <v-list-item-title>Last update</v-list-item-title>
-          <v-list-item-subtitle
-            >{{ $filters.datetime(file.mtime) }} ({{
-              $filters.timediff(file.mtime)
-            }})
-          </v-list-item-subtitle>
-        </div>
-      </v-list-item>
-    </v-list>
-
-    <!--     render only if file is smaller than 100MB-->
-    <div class="container" v-if="mimetype && file.size < 104857600">
-      <output>
-        <img :src="downloadLink" v-if="mimetype.match('image')" />
-        <v-textarea
-          v-else-if="mimetype.match('text')"
-          :auto-grow="true"
-          :readonly="true"
-          :model-value="content"
-          variant="solo-filled"
-        >
-        </v-textarea>
-      </output>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Path from 'path'
-import { mapActions, mapState } from 'pinia'
-import { defineComponent } from 'vue'
-// import pdf from 'vue-pdf'
-import { DownloadIcon, TrashIcon } from 'vue-tabler-icons'
-
-import ActionButton from '@/common/components/ActionButton.vue'
-import { ProjectApi } from '@/modules/project/projectApi'
-import { useProjectStore } from '@/modules/project/store'
-
-const Colors = {
-  added: 'green',
-  removed: 'red',
-  updated: 'orange'
-}
-
-export default defineComponent({
-  name: 'FileInfoView',
-  props: {
-    namespace: String,
-    projectName: String,
-    location: {
-      type: String,
-      default: ''
-    }
-  },
-  components: {
-    // pdf,
-    ActionButton,
-    DownloadIcon,
-    TrashIcon
-  },
-  computed: {
-    ...mapState(useProjectStore, ['project', 'uploads']),
-    upload() {
-      return this.uploads[this.project.path]
-    },
-    file() {
-      if (!this.project.files[this.location]) {
-        this.$router.replace({
-          name: 'project',
-          namespace: this.namespace,
-          projectName: this.projectName
-        })
-      }
-      return (
-        this.project.files[this.location] || this.upload.files[this.location]
-      )
-    },
-    filename() {
-      return Path.basename(this.file.path)
-    },
-    downloadLink() {
-      // added random number to request avoid to browser caching files
-      return ProjectApi.constructDownloadProjectFileUrl(
-        this.namespace,
-        this.projectName,
-        encodeURIComponent(this.file.path)
-      )
-    },
-    state() {
-      const diff = this.upload && this.upload.diff
-      if (diff) {
-        const path = this.file.path
-        if (diff.added.includes(path)) {
-          return 'added'
-        } else if (diff.removed.includes(path)) {
-          return 'removed'
-        } else if (diff.updated.includes(path)) {
-          return 'updated'
-        }
-      }
-      return null
-    },
-    stateText() {
-      return (
-        {
-          added: 'New file',
-          removed: 'Deleted file',
-          updated: 'Modified file'
-        }[this.state] || this.state
-      )
-    },
-    colors() {
-      return Colors
-    }
-  },
-  data() {
-    return {
-      previewUrl: '',
-      pageCount: 0,
-      currentPage: 0,
-      content: null,
-      mimetype: null as string
-    }
-  },
-  created() {
-    this.txtPreview()
-  },
-  methods: {
-    ...mapActions(useProjectStore, ['deleteFiles']),
-    txtPreview() {
-      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
-        this.mimetype = resp.headers['content-type']
-        if (resp.headers['content-type'].match('text')) {
-          if (resp.data.constructor === Object) {
-            resp.data = JSON.stringify(resp.data)
-          }
-          this.content = resp.data.match(/^.*([^\n]*\n){0,50}/gi)[0]
-          if (!this.content) {
-            this.content = ''
-            return
-          }
-          if (this.content.length > 10000) {
-            this.content = this.content.substring(0, 10000)
-          }
-        } else {
-          this.content = null
-        }
-      })
-    },
-    removeSelected() {
-      this.deleteFiles({ files: [this.file.path] })
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.status {
-  margin: 0.5em auto;
-  padding: 0 1em;
-  text-align: center;
-  color: #fff;
-  height: 2em;
-  line-height: 2em;
-}
-
-.v-list {
-  :deep(.v-list__tile) {
-    font-size: 14px;
-    color: #444;
-
-    .v-list__tile__title {
-      font-weight: 500;
-    }
-  }
-}
-
-output img {
-  max-width: 100%;
-}
-</style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index bc3f02eb..178a99cb 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -50,7 +50,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <PTabView
         :active-index="activeTabIndex"
         @tab-click="(e) => tabClick(e.index)"
-        lazy
         :pt="{
           root: {
             class: 'relative z-auto'
@@ -71,20 +70,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         }"
       >
         <PTabPanel header="Files" :pt="ptHeaderAction">
-          <router-view v-if="project" class="content-container" />
+          <router-view />
         </PTabPanel>
         <slot name="map.tab" :ptHeaderAction="ptHeaderAction" />
         <PTabPanel
           v-if="tabs.some((item) => item.route === `project-versions`)"
           header="History"
           :pt="ptHeaderAction"
-          ><router-view v-if="project" class="content-container" />
+          ><router-view />
         </PTabPanel>
         <PTabPanel
           v-if="tabs.some((item) => item.route === `project-settings`)"
           header="Settings"
           :pt="ptHeaderAction"
-          ><router-view v-if="project" class="content-container" />
+          ><router-view />
         </PTabPanel>
       </PTabView>
     </template>
@@ -120,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         You already requested access
       </span>
     </app-section>
-    <div slot="right" class="panel">
+    <div slot="right">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
   </div>
@@ -380,8 +379,7 @@ export default defineComponent({
      */
     tabClick(index: number) {
       this.$router.push({
-        name: this.tabs[index].route,
-        params: { namespace: this.namespace, projectName: this.project.name }
+        name: this.tabs[index].route
       })
     }
   }
diff --git a/web-app/packages/lib/src/modules/project/views/index.ts b/web-app/packages/lib/src/modules/project/views/index.ts
index 467ffb5e..456d8243 100644
--- a/web-app/packages/lib/src/modules/project/views/index.ts
+++ b/web-app/packages/lib/src/modules/project/views/index.ts
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 export { default as FileBrowserView } from './FileBrowserView.vue'
-export { default as FileDetailView } from './FileDetailView.vue'
 export { default as FileVersionDetailView } from './FileVersionDetailView.vue'
 export { default as ProjectsListViewTemplate } from './ProjectsListViewTemplate.vue'
 export { default as ProjectSettingsViewTemplate } from './ProjectSettingsViewTemplate.vue'
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index ca29a8da..cd82f626 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -3514,18 +3514,18 @@ vue-meta@^3.0.0-alpha.10:
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-3.0.0-alpha.10.tgz#8aa7dee8ef43edda2633d52d2d4ca0ae03352222"
   integrity sha512-rYeIGkhm1gKBcReEkPHiV6LV2Y6BZTMGTkGw1mQIZTxfFcVJL0srLZsL1zAmLeTGxMrlDYylMQEVSYRkDnwz3A==
 
-vue-router@^3.6.5:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
-  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
-
-vue-router@^4.1.6:
+vue-router@4.2.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
   integrity sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-router@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
+  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
+
 vue-tabler-icons@^1.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/vue-tabler-icons/-/vue-tabler-icons-1.14.0.tgz#df0027906f225c1501c2d1cfa9d844f8d50bc428"

From 2c47b21ce7abd533f4469c835d916a942b9d8bb9 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 15 Dec 2023 15:08:36 +0100
Subject: [PATCH 05/10] Added: - sorting table - AppMenu component with button

---
 .../lib/src/common/components/AppMenu.vue     | 33 +++++++++
 .../lib/src/common/components/index.ts        |  1 +
 .../project/components/FileDetailSidebar.vue  |  2 +-
 .../modules/project/views/FileBrowserView.vue | 74 +++++++++++++++----
 .../views/ProjectsListViewTemplate.vue        | 22 ++----
 5 files changed, 99 insertions(+), 33 deletions(-)
 create mode 100644 web-app/packages/lib/src/common/components/AppMenu.vue

diff --git a/web-app/packages/lib/src/common/components/AppMenu.vue b/web-app/packages/lib/src/common/components/AppMenu.vue
new file mode 100644
index 00000000..b0927468
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppMenu.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <PButton
+      severity="secondary"
+      text
+      :icon="icon"
+      @click="toggleMenu"
+      aria-haspopup="true"
+      aria-controls="app-menu"
+      class="text-2xl"
+    />
+    <PMenu ref="menu" id="app-menu" :model="items" :popup="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
+
+withDefaults(
+  defineProps<{
+    items: MenuItem[]
+    icon: string
+  }>(),
+  { icon: 'ti ti-settings' }
+)
+
+const menu = ref<{ toggle: (event: Event) => void }>()
+
+function toggleMenu(event) {
+  menu.value.toggle(event)
+}
+</script>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 3c5fa0a2..9c838114 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -8,6 +8,7 @@ export { default as AppSection } from './AppSection.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
 export { default as AppsidebarRight } from './AppSidebarRight.vue'
+export { default as AppMenu } from './AppMenu.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index 3efb8869..7fba1539 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           {{ stateText }}
         </PInlineMessage>
 
-        <dl class="grid">
+        <dl class="grid grid-nogutter">
           <div class="col-12">
             <dt class="text-xs opacity-80 mb-1">Name</dt>
             <dl>
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index 5e16168b..8a1f4718 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <!-- Searching -->
     <app-container v-if="searchFilter !== '' || items.length > 0">
       <app-section ground>
-        <div class="flex">
+        <div class="flex align-items-center">
           <span class="p-input-icon-left flex-grow-1">
             <i class="ti ti-search text-xl"></i>
             <PInputText
@@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               :pt="{ root: { class: 'border-round-xl w-full' } }"
             />
           </span>
+          <AppMenu :items="filterMenuItems" />
         </div>
       </app-section>
     </app-container>
@@ -73,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <app-section>
         <PDataView
           :value="items"
-          :data-key="'id'"
+          :data-key="'path'"
           :paginator="items.length > itemPerPage"
           :rows="itemPerPage"
           :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
@@ -95,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <div
               v-for="item in slotProps.items"
               :key="item.id"
-              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm"
+              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm hover:bg-gray-200 cursor-pointer"
               @click.prevent="rowClick(item.link)"
             >
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
@@ -121,7 +122,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </div>
           </template>
           <template #empty>
-            <span>No files found.</span>
+            <div class="w-full text-center p-4">
+              <span>No files found.</span>
+            </div>
           </template>
         </PDataView>
       </app-section>
@@ -139,6 +142,7 @@ import orderBy from 'lodash/orderBy'
 import union from 'lodash/union'
 import Path from 'path'
 import { mapState } from 'pinia'
+import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent } from 'vue'
 
 import {
@@ -146,6 +150,7 @@ import {
   AppContainer,
   AppPanelToggleable
 } from '@/common/components'
+import AppMenu from '@/common/components/AppMenu.vue'
 import { formatDateTime } from '@/common/date_utils'
 import { dirname } from '@/common/path_utils'
 import { removeAccents } from '@/common/text_utils'
@@ -165,7 +170,8 @@ export default defineComponent({
     AppContainer,
     AppPanelToggleable,
     DropArea,
-    FileDetailSidebar
+    FileDetailSidebar,
+    AppMenu
   },
   props: {
     namespace: String,
@@ -182,10 +188,11 @@ export default defineComponent({
   data() {
     return {
       options: {
-        rowsPerPage: -1
+        rowsPerPage: -1,
+        descending: false,
+        sortBy: 'name'
       },
       itemPerPage: 50,
-      sortBy: 'name',
       searchFilter: '',
       filter: '',
       selected: [],
@@ -255,14 +262,14 @@ export default defineComponent({
             removed
               .map((path) => this.project.files[path])
               .map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
         list.push(
           ...orderBy(
             added.map((path) => this.upload.files[path]).map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
@@ -271,7 +278,7 @@ export default defineComponent({
             updated
               .map((path) => this.upload.files[path])
               .map(this.fullPathView),
-            this.sortBy,
+            this.options.sortBy,
             this.options.descending ? 'desc' : 'asc'
           )
         )
@@ -295,11 +302,12 @@ export default defineComponent({
           escapeRegExp(removeAccents(this.searchFilter)),
           'i'
         )
+        // TODO: Replace with DataView sorting instead this order_by with lodash
         return orderBy(
           this.filterByLocation(this.projectFiles).filter(
             (f) => f.path.search(regex) !== -1
           ),
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       }
@@ -315,14 +323,14 @@ export default defineComponent({
       items.push(
         ...orderBy(
           this.folders,
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       )
       items.push(
         ...orderBy(
           this.directoryFiles,
-          this.sortBy,
+          this.options.sortBy,
           this.options.descending ? 'desc' : 'asc'
         )
       )
@@ -347,6 +355,38 @@ export default defineComponent({
         (this.project && !this.project.permissions.upload) ||
         this.filter !== ''
       )
+    },
+    filterMenuItems(): MenuItem[] {
+      return [
+        {
+          label: 'Sort by name A-Z',
+          key: 'name',
+          sortDesc: false
+        },
+        {
+          label: 'Sort by name Z-A',
+          key: 'name',
+          sortDesc: true
+        },
+        {
+          label: 'Sort by last modified',
+          key: 'mtime',
+          sortDesc: true
+        },
+        {
+          label: 'Sort by file size',
+          key: 'size',
+          sortDesc: true
+        }
+      ].map((item) => ({
+        ...item,
+        command: (e: MenuItemCommandEvent) => this.menuItemClick(e),
+        class:
+          this.options.sortBy === item.key &&
+          this.options.descending === item.sortDesc
+            ? 'bg-primary-400'
+            : ''
+      }))
     }
   },
   methods: {
@@ -423,15 +463,19 @@ export default defineComponent({
       )
     },
     changeSort(column) {
-      if (this.sortBy === column) {
+      if (this.options.sortBy === column) {
         this.options.descending = !this.options.descending
       } else {
-        this.sortBy = column
+        this.options.sortBy = column
         this.options.descending = false
       }
     },
     rowClick(path: string) {
       this.$router.push({ path })
+    },
+    menuItemClick(e: MenuItemCommandEvent) {
+      this.options.sortBy = e.item.key
+      this.options.descending = e.item.sortDesc
     }
   }
 })
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index 9c0f9f89..b047a134 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -45,20 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               :pt="{ root: { class: 'border-round-xl w-full' } }"
             />
           </span>
-          <PButton
-            severity="secondary"
-            text
-            icon="ti ti-settings"
-            @click="toggleMenu"
-            aria-haspopup="true"
-            aria-controls="projects-filters-menu"
-          />
-          <PMenu
-            ref="menu"
-            id="projects-filters-menu"
-            :model="filterMenuItems"
-            :popup="true"
-          />
+          <app-menu :items="filterMenuItems" />
         </div>
       </app-section>
       <app-section>
@@ -81,6 +68,7 @@ import { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { defineComponent, ref } from 'vue'
 
 import { AppContainer, AppSection } from '@/common'
+import AppMenu from '@/common/components/AppMenu.vue'
 import { useDialogStore, useProjectStore } from '@/modules'
 import { useLayoutStore } from '@/modules/layout/store'
 import ProjectForm from '@/modules/project/components/ProjectForm.vue'
@@ -88,7 +76,7 @@ import { useUserStore } from '@/modules/user/store'
 
 export default defineComponent({
   name: 'ProjectsListView',
-  components: { AppContainer, AppSection },
+  components: { AppContainer, AppSection, AppMenu },
   props: {
     namespace: String,
     canCreateProject: Boolean
@@ -127,8 +115,8 @@ export default defineComponent({
           sortDesc: true
         },
         {
-          label: 'Sort by file size',
-          keys: 'disk_usage',
+          label: 'Sort by files size',
+          key: 'meta.size',
           sortDesc: true
         }
       ].map((item) => ({

From 5658b6cab4d043a558ac942a6089a25be513c154 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 15 Dec 2023 16:48:48 +0100
Subject: [PATCH 06/10] Added: - alternative views for status codes Project
 view - responsive FileBrowser table

---
 .../components/CloneDialogTemplate.vue        |  52 +++++---
 .../project/components/FileDetailSidebar.vue  |  42 ++++---
 .../components/ProjectShareButtonTemplate.vue |  19 ++-
 .../modules/project/views/FileBrowserView.vue |  21 +++-
 .../project/views/ProjectViewTemplate.vue     | 116 +++++++++---------
 5 files changed, 137 insertions(+), 113 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
index c40351e5..a68b9f96 100644
--- a/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
@@ -5,33 +5,47 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card v-on:keyup.enter="onCloneProject" data-cy="clone-dialog-card">
-    <v-card-title>
-      <span class="text-h5">Clone Project</span>
-    </v-card-title>
-    <v-card-text>
-      <v-text-field
+  <div class="py-4">
+    <span class="flex p-float-label w-full pb-3">
+      <PInputText
         autofocus
-        label="new project"
+        id="name"
         v-model="newProjectName"
+        type="text"
+        aria-describedby="text-error"
         data-cy="clone-dialog-project-name"
+        class="border-round-xl flex-grow-1"
+        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
-      <slot name="dynamic-items"></slot>
-    </v-card-text>
-    <v-card-actions>
-      <v-spacer />
-      <v-btn @click="close" data-cy="clone-dialog-close-btn"> Close </v-btn>
-      <v-btn
+      <label for="name">Project name</label>
+    </span>
+    <!-- Dynamic items to pass other inputs -->
+    <slot name="dynamic-items"></slot>
+
+    <!-- Footer -->
+    <div
+      class="flex flex-column lg:flex-row justify-content-between align-items-center pt-3"
+    >
+      <PButton
+        severity="secondary"
+        outlined
+        @click="close"
+        class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
+        data-cy="clone-dialog-close-btn"
+        >Cancel</PButton
+      >
+
+      <PButton
         id="clone-project-btn"
-        class="primary"
         :disabled="!newProjectName || !currentWorkspace"
         @click="onCloneProject"
-        data-cy="clone-dialog-clone-btn"
+        data-cy="project-form-create-btn"
+        class="flex w-12 lg:w-6 justify-content-center"
       >
-        Clone
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+        Clone project
+      </PButton>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index 7fba1539..162be658 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -56,26 +56,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </dl>
 
         <!--     render only if file is smaller than 100MB-->
-        <div
-          class="flex flex-column align-items-center w-full py-4"
+        <output
           v-if="mimetype && file.size < 104857600"
+          class="flex flex-column align-items-center w-full py-4"
         >
-          <output>
-            <PImage
-              :src="downloadLink"
-              v-if="mimetype.match('image')"
-              preview
-            />
-            <v-textarea
-              v-else-if="mimetype.match('text')"
-              :auto-grow="true"
-              :readonly="true"
-              :model-value="content"
-              variant="solo-filled"
-            >
-            </v-textarea>
-          </output>
-        </div>
+          <PImage
+            :src="downloadLink"
+            v-if="mimetype.match('image')"
+            preview
+            imageClass="w-full"
+          />
+          <div
+            class="file-detail-code border-round-xl p-4 line-height-3 w-full"
+            v-else-if="mimetype.match('text')"
+          >
+            <span class="opacity-80 text-sm">{{ content }}</span>
+          </div>
+        </output>
       </div>
 
       <!-- foooter -->
@@ -238,4 +235,11 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.file-detail {
+  &-code {
+    background-color: var(--light-green-color);
+    word-wrap: break-word;
+  }
+}
+</style>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
index 9c5e7f33..091560b8 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
@@ -5,20 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <action-button :disabled="false" @click="onShareProject" v-if="loggedUser">
-    <template #icon>
-      <plus-icon />
-    </template>
-    Share
-  </action-button>
+  <PButton
+    @click="onShareProject"
+    v-if="loggedUser"
+    icon="ti ti-send"
+    label="Share"
+    class="mr-2"
+  />
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { PlusIcon } from 'vue-tabler-icons'
 
-import ActionButton from '@/common/components/ActionButton.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import ProjectShareDialog from '@/modules/project/components/ProjectShareDialog.vue'
 import { useUserStore } from '@/modules/user/store'
@@ -27,7 +26,6 @@ export default defineComponent({
   props: {
     allowInvite: Boolean
   },
-  components: { ActionButton, PlusIcon },
   computed: {
     ...mapState(useUserStore, ['loggedUser'])
   },
@@ -43,7 +41,8 @@ export default defineComponent({
       }
       const dialog = {
         maxWidth: 600,
-        persistent: true
+        persistent: true,
+        header: 'Share project'
       }
       this.show({
         component: ProjectShareDialog,
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index 8a1f4718..a7660ae6 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -87,9 +87,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         >
           <template #header>
             <div class="grid grid-nogutter">
-              <div v-for="col in columns" class="col-4 text-xs" :key="col.text">
+              <!-- Visible on lg breakpoint > -->
+              <div
+                v-for="col in columns"
+                class="col-4 text-xs hidden lg:flex"
+                :key="col.text"
+              >
                 {{ col.text }}
               </div>
+              <!-- else -->
+              <div class="col-12 flex lg:hidden">Name</div>
             </div>
           </template>
           <template #list="slotProps">
@@ -100,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               @click.prevent="rowClick(item.link)"
             >
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
-              <div class="flex align-items-center col-4">
+              <div class="flex align-items-center col-12 lg:col-4">
                 <p class="font-semibold">
                   <file-icon :file="item" />{{ item.name }}
                 </p>
@@ -108,16 +115,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
                 </div>
               </div>
-              <div class="flex align-items-center col-4">
+              <div class="flex align-items-center col-12 lg:col-4">
                 <span
                   v-if="item.mtime"
                   v-tooltip.bottom="{ value: $filters.datetime(item.mtime) }"
+                  class="text-sm opacity-80"
                 >
                   {{ $filters.timediff(item.mtime) }}
                 </span>
               </div>
-              <div class="flex align-items-center col-4">
-                <span v-if="item.size">{{ $filters.filesize(item.size) }}</span>
+              <div class="flex align-items-center col-12 lg:col-4">
+                <span class="text-sm opacity-80" v-if="item.size">{{
+                  $filters.filesize(item.size)
+                }}</span>
               </div>
             </div>
           </template>
@@ -192,6 +202,7 @@ export default defineComponent({
         descending: false,
         sortBy: 'name'
       },
+      // Setup this to lower number in case of testing
       itemPerPage: 50,
       searchFilter: '',
       filter: '',
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index 178a99cb..0585743d 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <div>
     <template v-if="project">
-      <app-container class="flex justify-content-end xl:pb-1 -mb-6">
+      <app-container class="flex justify-content-end xl:pb-1 lg:-mb-6">
         <!-- Z indexes based on minus margin, its not possible to add additional buttons to tab view -->
         <div class="relative z-1">
           <!-- Toolbar -->
@@ -15,35 +15,34 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <slot name="shareButton">
             <project-share-button />
           </slot>
-          <action-button
+          <PButton
+            severity="secondary"
+            outlined
             @click="downloadArchive({ url: downloadUrl })"
             data-cy="project-download-btn"
-          >
-            <template #icon>
-              <download-icon />
-            </template>
-            Download
-          </action-button>
-          <action-button
+            icon="ti ti-download"
+            class="mr-2"
+            label="Download"
+          />
+          <PButton
+            severity="secondary"
+            outlined
             @click="cloneDialog"
             v-if="canCloneProject"
             data-cy="project-clone-btn"
-          >
-            <template #icon>
-              <copy-icon />
-            </template>
-            Clone
-          </action-button>
-          <action-button
+            icon="ti ti-copy"
+            label="Clone"
+            class="mr-2"
+          />
+          <PButton
+            severity="secondary"
+            outlined
             @click="unsubscribeDialog"
             data-cy="project-leave-btn"
+            icon="ti ti-logout"
+            label="Leave project"
             v-if="canLeaveProject"
-          >
-            <template #icon>
-              <square-minus-icon />
-            </template>
-            Leave project
-          </action-button>
+          />
         </div>
       </app-container>
 
@@ -87,38 +86,41 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </PTabPanel>
       </PTabView>
     </template>
-    <app-section v-else-if="fetchProjectsResponseStatus === 403">
-      <v-layout
-        class="public-private-zone"
-        style="padding-top: 25px; padding-left: 25px"
-      >
-        <v-btn id="request-access-btn" @click="createAccessRequest"
-          >Request access
-        </v-btn>
-        <span class="private-public-text">
-          <b>This is a private project</b><br />
-          You don't have permissions to access this project.
-        </span>
-      </v-layout>
-    </app-section>
-    <app-section v-else-if="fetchProjectsResponseStatus === 404">
-      <span
-        class="private-public-text"
-        style="padding-top: 25px; padding-left: 25px"
-      >
-        <b>Project not found</b><br />
-        Please check if address is written correctly
-      </span>
-    </app-section>
-    <app-section v-else-if="fetchProjectsResponseStatus === 409">
-      <span
-        class="private-public-text"
-        style="padding-top: 25px; padding-left: 25px"
-      >
-        <b>You don't have permission to access this project</b><br />
-        You already requested access
-      </span>
-    </app-section>
+    <app-container v-else-if="fetchProjectsResponseStatus">
+      <app-section v-if="fetchProjectsResponseStatus === 403">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">This is a private project</p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            You don't have permissions to access this project.
+          </p>
+          <PButton id="request-access-btn" @click="createAccessRequest"
+            >Request access</PButton
+          >
+        </div>
+      </app-section>
+      <app-section v-else-if="fetchProjectsResponseStatus === 404">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">Project not found</p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            Please check if address is written correctly
+          </p>
+        </div>
+      </app-section>
+      <app-section v-else-if="fetchProjectsResponseStatus === 409">
+        <div class="flex flex-column align-items-center p-4 text-center">
+          <img src="@/assets/map-circle.svg" alt="No project" />
+          <p class="font-semibold">
+            You don't have permission to access this project
+          </p>
+          <p class="text-sm opacity-80 mt-2 mb-4">
+            You already requested access
+          </p>
+        </div>
+      </app-section>
+    </app-container>
+
     <div slot="right">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
@@ -129,10 +131,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { TabPanelPassThroughOptions } from 'primevue/tabpanel'
 import { defineComponent, PropType } from 'vue'
-import { CopyIcon, DownloadIcon, SquareMinusIcon } from 'vue-tabler-icons'
 
 import { AppContainer, AppSection } from '@/common'
-import ActionButton from '@/common/components/ActionButton.vue'
 import { waitCursor } from '@/common/html_utils'
 import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
@@ -152,12 +152,8 @@ interface TabItem {
 export default defineComponent({
   name: 'ProjectViewTemplate',
   components: {
-    ActionButton,
     ProjectShareButton,
     UploadPanel,
-    CopyIcon,
-    DownloadIcon,
-    SquareMinusIcon,
     AppContainer,
     AppSection
   },

From a1db16d45948db028e9d474c41f8afa2589053db Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 15 Dec 2023 17:08:13 +0100
Subject: [PATCH 07/10] Added licensing

---
 web-app/packages/lib/src/common/components/AppMenu.vue      | 6 ++++++
 .../lib/src/common/components/AppPanelToggleable.vue        | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/web-app/packages/lib/src/common/components/AppMenu.vue b/web-app/packages/lib/src/common/components/AppMenu.vue
index b0927468..96901eba 100644
--- a/web-app/packages/lib/src/common/components/AppMenu.vue
+++ b/web-app/packages/lib/src/common/components/AppMenu.vue
@@ -1,3 +1,9 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
 <template>
   <div>
     <PButton
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
index 92bcee41..0a77edee 100644
--- a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -1,3 +1,9 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
 <template>
   <PPanel
     toggleable

From a0081be704f2522693d35de6bd996b5aa0bcd1eb Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 15 Dec 2023 17:20:12 +0100
Subject: [PATCH 08/10] Eslitn fixes

---
 .../dashboard/components/DashboardFullStorageWarningRow.vue     | 2 +-
 .../lib/src/modules/dashboard/views/DashboardViewTemplate.vue   | 1 -
 .../lib/src/modules/project/components/AccountAutocomplete.vue  | 2 +-
 .../src/modules/project/components/ProjectsTableDataLoader.vue  | 2 +-
 .../packages/lib/src/modules/project/components/UploadPanel.vue | 2 --
 .../src/modules/project/views/ProjectSettingsViewTemplate.vue   | 1 -
 6 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
index 70c88f54..ba12a426 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
@@ -24,7 +24,7 @@ export default defineComponent({
           100
       )
     }
-  },
+  }
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
index 2d918bc9..9a7a683e 100644
--- a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
@@ -13,7 +13,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-import { AppContainer } from '@/common/components'
 import { DashboardFooter } from '@/modules/dashboard'
 </script>
 
diff --git a/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue b/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
index 8df05921..330a3409 100644
--- a/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccountAutocomplete.vue
@@ -94,11 +94,11 @@ import { defineComponent } from 'vue'
 import { SendIcon, UserIcon } from 'vue-tabler-icons'
 
 import { isValidEmail } from '@/common/text_utils'
+import { useUserStore } from '@/main'
 import { useProjectStore } from '@/modules/project/store'
 import UserSearchChip from '@/modules/user/components/UserSearchChip.vue'
 import { EMPTY_INVITE_ITEM } from '@/modules/user/constants'
 import { UserSearchParams } from '@/modules/user/types'
-import { useUserStore } from '@/main'
 
 export default defineComponent({
   name: 'AccountAutocomplete',
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
index 4dde8bec..5381a7a4 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
@@ -157,7 +157,7 @@ export default defineComponent({
           dialog,
           listeners: {
             error: (err, data) => this.$emit('new-project-error', err, data)
-          },
+          }
         }
       })
     }
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 62ea4244..84de2e70 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -69,9 +69,7 @@ import axios from 'axios'
 import pick from 'lodash/pick'
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { CloudUploadIcon } from 'vue-tabler-icons'
 
-import ActionButton from '@/common/components/ActionButton.vue'
 import { CHUNK_SIZE, isVersionedFile } from '@/common/mergin_utils'
 import { ConfirmDialog, useDialogStore, useNotificationStore } from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 0dc8f133..5c473119 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -200,7 +200,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 .settings {
   display: flex;
   flex-direction: column;

From ba6bb14d520cacd7c78d3887686d430f4ed08e2a Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Sat, 16 Dec 2023 23:33:57 +0100
Subject: [PATCH 09/10] Added: - versions table (TODO: versions detail)

---
 web-app/packages/app/src/router.ts            |   4 +-
 web-app/packages/lib/components.d.ts          |   2 -
 .../modules/project/views/FileBrowserView.vue |  17 +-
 .../project/views/FileVersionDetailView.vue   |   2 +-
 .../views/ProjectVersionsViewTemplate.vue     | 430 ++++++++++--------
 5 files changed, 247 insertions(+), 208 deletions(-)

diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index 2dd8f2c8..0adb4523 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -183,13 +183,13 @@ export const createRouter = (pinia: Pinia) => {
             props: true
           },
           {
-            path: 'history/:version_id?',
+            path: 'history/:version_id',
             name: 'project-versions-detail',
             component: VersionDetailView,
             props: true
           },
           {
-            path: 'history/:version_id?/:path?',
+            path: 'history/:version_id/:path',
             name: 'file-version-detail',
             component: FileVersionDetailView,
             props: true,
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 605e4b89..277dad86 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -52,14 +52,12 @@ declare module 'vue' {
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VPagination: typeof import('vuetify/components')['VPagination']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']
     VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
     VTooltip: typeof import('vuetify/components')['VTooltip']
   }
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index a7660ae6..9afae92d 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 {{ col.text }}
               </div>
               <!-- else -->
-              <div class="col-12 flex lg:hidden">Name</div>
+              <div class="col-12 flex lg:hidden">Files</div>
             </div>
           </template>
           <template #list="slotProps">
@@ -111,21 +111,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 <p class="font-semibold">
                   <file-icon :file="item" />{{ item.name }}
                 </p>
-                <div>
-                  <folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
-                </div>
               </div>
               <div class="flex align-items-center col-12 lg:col-4">
                 <span
                   v-if="item.mtime"
                   v-tooltip.bottom="{ value: $filters.datetime(item.mtime) }"
-                  class="text-sm opacity-80"
+                  class="opacity-80"
                 >
                   {{ $filters.timediff(item.mtime) }}
                 </span>
               </div>
               <div class="flex align-items-center col-12 lg:col-4">
-                <span class="text-sm opacity-80" v-if="item.size">{{
+                <span class="opacity-80" v-if="item.size">{{
                   $filters.filesize(item.size)
                 }}</span>
               </div>
@@ -168,13 +165,11 @@ import { useInstanceStore } from '@/modules/instance/store'
 import DropArea from '@/modules/project/components/DropArea.vue'
 import FileDetailSidebar from '@/modules/project/components/FileDetailSidebar.vue'
 import FileIcon from '@/modules/project/components/FileIcon.vue'
-import FolderDiff from '@/modules/project/components/FolderDiff.vue'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
   name: 'FileBrowserView',
   components: {
-    FolderDiff,
     FileIcon,
     AppSection,
     AppContainer,
@@ -492,4 +487,8 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.p-dataview-content div {
+  word-break: break-word;
+}
+</style>
diff --git a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
index 2a43c9af..d374e8fb 100644
--- a/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileVersionDetailView.vue
@@ -132,7 +132,7 @@ export default defineComponent({
                         typeof row.old === 'undefined' ? 'N/A' : row.old
                     } else {
                       data.values[columnIdentifier] =
-                        (typeof row.old === 'undefined' ? 'N/A' : row.old) +
+                        (typeof row.old === 'undefinedchangesets/' ? 'N/A' : row.old) +
                         ' ' +
                         String.fromCharCode(parseInt('2794', 16)) +
                         ' ' +
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index 6c2c8341..0ca84721 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -5,172 +5,204 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div>
-    <v-layout align-center shrink>
-      <v-spacer />
-    </v-layout>
-    <div class="text-center">
-      <v-pagination
-        v-if="showPagination && options && versionsCount > options.itemsPerPage"
-        v-model="options.page"
-        :length="Math.ceil(versionsCount / options.itemsPerPage)"
-        :total-visible="2"
-        circle
-        color="primary"
-        @update:model-value="fetchPage"
-      ></v-pagination>
-    </div>
-    <v-data-table
-      :headers="headers"
-      :items="items"
-      item-key="name"
-      :options="options"
-      :server-items-length="versionsCount"
-      v-on:update:options="paginating"
-      :hide-default-footer="true"
-      :loading="versionsLoading"
-      no-data-text="No project history"
-      color="primary"
-      data-cy="project-verision-table"
-    >
-      <!-- headers -->
-      <template v-slot:header.changes.added="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Added</span>
-        </v-tooltip>
-      </template>
-      <template v-slot:header.changes.removed="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Deleted</span>
-        </v-tooltip>
-      </template>
-      <template v-slot:header.changes.updated="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Modified</span>
-        </v-tooltip>
-      </template>
-      <!-- data -->
-      <template v-slot:item.created="{ item }">
-        <span>
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props" :style="[rowStyle[item]]">{{
-                $filters.timediff(item.created)
-              }}</span>
-            </template>
-            <span>{{ $filters.datetime(item.created) }}</span>
-          </v-tooltip>
-        </span>
-      </template>
-      <template v-slot:item.author="{ item }"
-        ><span :style="[rowStyle(item)]">{{ item.author }}</span></template
+  <app-container>
+    <app-section>
+      <PDataView
+        :value="items"
+        :data-key="'name'"
+        :paginator="
+          showPagination && options && versionsCount > options.itemsPerPage
+        "
+        :rows="options.itemsPerPage"
+        :totalRecords="versionsCount"
+        :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+        data-cy="project-verision-table"
+        lazy
+        @page="onPage"
+        :pt="{
+          header: {
+            // small header
+            class: 'px-3 py-2'
+          }
+        }"
       >
-      <template v-slot:item.name="{ item }">
-        <span data-cy="project-versions-version">
-          <router-link
+        <template #header>
+          <div class="w-11 grid grid-nogutter">
+            <!-- Visible on lg breakpoint > -->
+            <div
+              v-for="col in columns.filter((item) => !item.fixed)"
+              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 1}`]"
+              :key="col.text"
+            >
+              {{ col.text }}
+            </div>
+            <!-- else -->
+            <div class="col-12 flex lg:hidden">Versions</div>
+          </div>
+        </template>
+
+        <!-- table rows -->
+        <template #list="slotProps">
+          <div
+            v-for="item in slotProps.items"
+            :key="item.id"
+            class="flex align-items-center hover:bg-gray-200 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
             :style="[rowStyle(item)]"
-            :to="
-              item.disabled
-                ? ''
-                : {
-                    name: 'project-versions-detail',
-                    params: { version_id: item.name }
-                  }
-            "
           >
-            {{ item.name }}
-          </router-link>
-        </span>
-      </template>
-      <template v-slot:item.changes.added="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="green--text">{{
-            item.changes.added.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.changes.removed="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="red--text">{{
-            item.changes.removed.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.changes.updated="{ item }">
-        <span>
-          <span :style="[rowStyle(item)]" class="orange--text">{{
-            item.changes.updated.length
-          }}</span>
-        </span>
-      </template>
-      <template v-slot:item.project_size="{ item }">
-        <span :style="[rowStyle(item)]">
-          {{ $filters.filesize(item.project_size) }}
-        </span>
-      </template>
-      <template v-slot:item.archived="{ item }">
-        <v-tooltip location="top">
-          <template v-slot:activator="{ props }">
-            <v-btn
-              icon
-              v-bind="props"
-              :disabled="item.disabled"
-              :style="[rowStyle(item)]"
-              data-cy="project-versions-download-btn"
-              @click="
-                downloadArchive({
-                  url:
-                    '/v1/project/download/' +
-                    namespace +
-                    '/' +
-                    projectName +
-                    '?version=' +
-                    item.name +
-                    '&format=zip'
-                })
-              "
+            <div
+              class="flex-grow-1 grid grid-nogutter w-11"
+              @click.prevent="!item.disabled && rowClick(item.name)"
             >
-              <v-icon>archive</v-icon>
-            </v-btn>
-          </template>
-          <span>Download Project Version {{ item.name }} (ZIP)</span>
-        </v-tooltip>
-      </template>
-    </v-data-table>
-    <div class="text-center">
-      <v-pagination
-        v-if="showPagination && options && versionsCount > options.itemsPerPage"
-        v-model="options.page"
-        :length="Math.ceil(versionsCount / options.itemsPerPage)"
-        :total-visible="7"
-        circle
-        color="primary"
-        @update:model-value="fetchPage"
-      ></v-pagination>
-    </div>
-    <slot name="table-footer"></slot>
-  </div>
+              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+              <template
+                v-for="col in columns.filter((item) => !item.fixed)"
+                :key="col.value"
+              >
+                <div
+                  v-if="col.value === 'name'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">
+                    {{ item.name }}
+                  </span>
+                </div>
+                <div
+                  v-else-if="col.value === 'created'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span
+                    v-tooltip.bottom="{
+                      value: $filters.datetime(item.created)
+                    }"
+                    :class="col.textClass"
+                  >
+                    {{ $filters.timediff(item.created) }}
+                  </span>
+                </div>
+                <div
+                  v-else-if="col.value === 'changes.added'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">{{
+                    item.changes.added.length
+                  }}</span>
+                </div>
+                <div
+                  v-else-if="col.value === 'changes.updated'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">
+                    {{ item.changes.updated.length }}
+                  </span>
+                </div>
+                <div
+                  v-else-if="col.value === 'changes.removed'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">
+                    {{ item.changes.removed.length }}
+                  </span>
+                </div>
+                <div
+                  v-else-if="col.value === 'project_size'"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">{{
+                    $filters.filesize(item.project_size)
+                  }}</span>
+                </div>
+                <div
+                  v-else
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 1}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">{{ item[col.value] }}</span>
+                </div>
+              </template>
+            </div>
+            <!-- actions -->
+            <div class="flex w-1 flex-shrink-0 justify-content-end">
+              <PButton
+                icon="ti ti-download"
+                severity="secondary"
+                text
+                :disabled="item.disabled"
+                :style="[rowStyle(item)]"
+                data-cy="project-versions-download-btn"
+                @click="
+                  downloadArchive({
+                    url:
+                      '/v1/project/download/' +
+                      namespace +
+                      '/' +
+                      projectName +
+                      '?version=' +
+                      item.name +
+                      '&format=zip'
+                  })
+                "
+              />
+            </div>
+          </div>
+        </template>
+        <template #empty>
+          <div class="w-full text-center p-4">
+            <span>No versions found.</span>
+          </div>
+        </template>
+      </PDataView>
+      <slot name="table-footer"></slot>
+    </app-section>
+  </app-container>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent, PropType } from 'vue'
 
+import { AppSection, AppContainer } from '@/common/components'
 import {
   FetchProjectVersionsParams,
   ProjectVersion,
@@ -178,8 +210,20 @@ import {
 } from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
 
+interface ColumnItem {
+  text: string
+  value: string
+  cols?: number
+  fixed?: boolean
+  textClass?: string
+}
+
 export default defineComponent({
   name: 'ProjectVersionsViewTemplate',
+  components: {
+    AppSection,
+    AppContainer
+  },
   props: {
     projectName: String,
     namespace: String,
@@ -196,34 +240,35 @@ export default defineComponent({
   },
   data() {
     return {
-      headers: [
-        { text: 'Version', value: 'name' },
-        { text: 'Created', value: 'created' },
-        { text: 'Author', value: 'author', sortable: false },
+      columns: [
         {
-          text: 'Added',
-          value: 'changes.added',
-          icon: 'add_circle',
-          color: 'green',
-          sortable: false
+          text: 'Version',
+          value: 'name',
+          textClass: 'font-semibold white-space-normal'
         },
+        { text: 'Created', value: 'created', cols: 2 },
+        { text: 'Author', value: 'author', cols: 2 },
         {
-          text: 'Removed',
-          value: 'changes.removed',
-          icon: 'delete',
-          color: 'red',
-          sortable: false
+          text: 'Files added',
+          value: 'changes.added',
+          cols: 2
         },
         {
-          text: 'Modified',
+          text: 'Files edited',
           value: 'changes.updated',
-          icon: 'edit',
-          color: 'orange',
-          sortable: false
+          cols: 2
+        },
+        {
+          text: 'Files removed',
+          value: 'changes.removed',
+          cols: 2
         },
-        { text: 'Size', value: 'project_size', sortable: false },
-        { text: '', value: 'archived', sortable: false }
-      ],
+        { text: 'Size', value: 'project_size' },
+        { text: '', value: 'archived', fixed: true }
+      ].map((item) => ({
+        ...item,
+        textClass: item.textClass === undefined ? 'opacity-80' : item.textClass
+      })) as ColumnItem[],
       options: {
         sortDesc: [true],
         itemsPerPage: this.defaultItemsPerPage ?? 50,
@@ -249,19 +294,11 @@ export default defineComponent({
       }))
     }
   },
-  watch: {
-    $route: 'fetchVersions'
+  created() {
+    this.fetchVersions()
   },
   methods: {
     ...mapActions(useProjectStore, ['fetchProjectVersions', 'downloadArchive']),
-    paginating(options) {
-      this.options = options
-      this.fetchVersions()
-    },
-    fetchPage(number) {
-      this.options.page = number
-      this.fetchVersions()
-    },
     rowStyle(item: ProjectVersionsItem) {
       return item.disabled && { opacity: 0.5, cursor: 'not-allowed' }
     },
@@ -276,18 +313,23 @@ export default defineComponent({
         namespace: this.namespace,
         projectName: this.projectName
       })
+    },
+    onPage(e: DataViewPageEvent) {
+      this.options.page = e.page + 1
+      this.options.itemsPerPage = e.rows
+      this.fetchVersions()
+    },
+    rowClick(name: string) {
+      this.$router.push({
+        path: `history/${name}`
+      })
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.v-card.table {
-  min-height: unset;
-  overflow: unset;
-}
-
-.changes {
-  flex: 0.3 1 auto;
+.p-dataview-content div {
+  word-break: break-word;
 }
 </style>

From f590f54a7a8f4b44995d9fc2156b0dc24cfad01e Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 18 Dec 2023 16:48:13 +0100
Subject: [PATCH 10/10] Added: - primary button wth border 2px - Upload panel
 on top for mobiles - sidebar margin padding

---
 web-app/packages/app/src/App.vue                     |  4 ++--
 .../themes/mm-theme-light/variables/_button.scss     |  2 +-
 .../packages/lib/src/common/components/AppMenu.vue   |  2 +-
 .../lib/src/common/components/AppSidebarRight.vue    |  2 +-
 web-app/packages/lib/src/modules/index.ts            |  2 +-
 web-app/packages/lib/src/modules/layout/store.ts     |  6 +++---
 .../modules/project/components/FileDetailSidebar.vue |  2 +-
 .../src/modules/project/components/UploadPanel.vue   | 12 +++++++++---
 8 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index 9ece0f1e..7db90208 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         'col-12',
         'min-h-full',
         'overflow-auto',
-        drawer && !isOverlay && 'xl:col-offset-2 xl:col-10'
+        drawer && !isUnderOverlayBreakpoint && 'xl:col-offset-2 xl:col-10'
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
@@ -94,7 +94,7 @@ export default defineComponent({
     ...mapState(useInstanceStore, ['pingData']),
     ...mapState(useAppStore, ['serverError']),
     ...mapState(useUserStore, ['loggedUser']),
-    ...mapState(useLayoutStore, ['drawer', 'isOverlay']),
+    ...mapState(useLayoutStore, ['drawer', 'isUnderOverlayBreakpoint']),
 
     error() {
       return this.serverError
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
index 827de497..5e652f39 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss
@@ -20,7 +20,7 @@ $buttonTextColor: $primaryDarkColor;
 
 /// Border of a button
 /// @group button
-$buttonBorder: 1px solid $primaryColor;
+$buttonBorder: 2px solid $primaryColor;
 
 /// Background of a button in hover state
 /// @group button
diff --git a/web-app/packages/lib/src/common/components/AppMenu.vue b/web-app/packages/lib/src/common/components/AppMenu.vue
index 96901eba..e2126875 100644
--- a/web-app/packages/lib/src/common/components/AppMenu.vue
+++ b/web-app/packages/lib/src/common/components/AppMenu.vue
@@ -28,7 +28,7 @@ withDefaults(
     items: MenuItem[]
     icon: string
   }>(),
-  { icon: 'ti ti-settings' }
+  { icon: 'ti ti-sort-descending' }
 )
 
 const menu = ref<{ toggle: (event: Event) => void }>()
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
index 8711863a..4436ee22 100644
--- a/web-app/packages/lib/src/common/components/AppSidebarRight.vue
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
 
           <!-- content -->
-          <div class="overflow-y-auto px-4 py-2">
+          <div class="overflow-y-auto p-4 pt-6">
             <slot></slot>
           </div>
 
diff --git a/web-app/packages/lib/src/modules/index.ts b/web-app/packages/lib/src/modules/index.ts
index 67c0624e..d375466e 100644
--- a/web-app/packages/lib/src/modules/index.ts
+++ b/web-app/packages/lib/src/modules/index.ts
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
+export * from './layout'
 export * from './app'
 export * from './form'
 export * from './project'
@@ -9,6 +10,5 @@ export * from './user'
 export * from './notification'
 export * from './dialog'
 export * from './dashboard'
-export * from './layout'
 export * from './instance'
 export * from './types'
diff --git a/web-app/packages/lib/src/modules/layout/store.ts b/web-app/packages/lib/src/modules/layout/store.ts
index ba9d3b25..07938e45 100644
--- a/web-app/packages/lib/src/modules/layout/store.ts
+++ b/web-app/packages/lib/src/modules/layout/store.ts
@@ -8,7 +8,7 @@ export interface LayoutState {
   overlayBreakpoint: number
   drawer: boolean
   /** If sidebar is in overlay mode (on mobile is flying over content) */
-  isOverlay: boolean
+  isUnderOverlayBreakpoint: boolean
   /** Parsed closed elements from local storage and pushed back to local storage */
   closedElements: string[]
 }
@@ -19,7 +19,7 @@ export const useLayoutStore = defineStore('layoutModule', {
   state: (): LayoutState => ({
     overlayBreakpoint: 992,
     drawer: false,
-    isOverlay: false,
+    isUnderOverlayBreakpoint: false,
     closedElements: []
   }),
   getters: {
@@ -51,7 +51,7 @@ export const useLayoutStore = defineStore('layoutModule', {
             ).matches
           : width < this.overlayBreakpoint
       this.drawer = !isSmall
-      this.isOverlay = isSmall
+      this.isUnderOverlayBreakpoint = isSmall
     },
     setDrawer(payload) {
       this.drawer = payload.drawer
diff --git a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
index 162be658..65e3214d 100644
--- a/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
+++ b/web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
         <dl class="grid grid-nogutter">
           <div class="col-12">
-            <dt class="text-xs opacity-80 mb-1">Name</dt>
+            <dt class="text-xs opacity-80 mb-1">File</dt>
             <dl>
               <h3 class="text-2xl mt-0">
                 <FileIcon :file="{ ...file, name: fileName }" />{{ fileName }}
diff --git a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
index 84de2e70..8af58b2a 100644
--- a/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
+++ b/web-app/packages/lib/src/modules/project/components/UploadPanel.vue
@@ -7,11 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <PDialog
     v-model:visible="visible"
-    position="bottomright"
+    :position="isUnderOverlayBreakpoint ? 'topleft' : 'bottomright'"
     class="upload-panel"
     :pt="{
       root: {
-        class: 'w-11 lg:w-3 mr-4 mb-4'
+        class: 'w-8 lg:w-3 mr-4 mb-4'
       },
       header: {
         class: 'border-none py-2'
@@ -71,7 +71,12 @@ import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
 import { CHUNK_SIZE, isVersionedFile } from '@/common/mergin_utils'
-import { ConfirmDialog, useDialogStore, useNotificationStore } from '@/modules'
+import {
+  ConfirmDialog,
+  useDialogStore,
+  useLayoutStore,
+  useNotificationStore
+} from '@/modules'
 import { useProjectStore } from '@/modules/project/store'
 
 type DiffKeys = 'removed' | 'added' | 'updated'
@@ -87,6 +92,7 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useProjectStore, ['project', 'uploads']),
+    ...mapState(useLayoutStore, ['isUnderOverlayBreakpoint']),
     visible: {
       get() {
         return !!this.upload