feat(files): recent sidebar functionality (#2997)

components/views/files/aside/Aside.html

@@ -17,14 +17,10 @@
 
   <div>
     <TypographyText :size="6" :text="$t('pages.files.aside.quick_access')" />
-    <UiSimpleList
-      :menuContent="[{ text: 'Recent', icon: 'clock', active: true }, { text: 'Deleted', icon: 'trash' }, { text: 'Favorited', icon: 'heart' }]"
-    />
+    <FilesAsideList :items="quickAccessOptions" />
   </div>
   <div>
     <TypographyText :size="6" :text="$t('pages.files.aside.shared_items')" />
-    <UiSimpleList
-      :menuContent="[{ text: 'Shared Folders', icon: 'folder' }, { text: 'Links', icon: 'link' }]"
-    />
+    <FilesAsideList :items="sharedItemsOptions" />
   </div>
 </div>

components/views/files/aside/Aside.vue

@@ -1,6 +1,8 @@
 <template src="./Aside.html"></template>
 <script lang="ts">
 import Vue from 'vue'
+import { SimpleItem } from '~/types/ui/sidebar'
+import { FileAsideRouteEnum, FileIconsEnum } from '~/libraries/Enums/enums'
 
 export default Vue.extend({
   data() {
@@ -9,15 +11,59 @@ export default Vue.extend({
     }
   },
   computed: {
+    /**
+     * @description total size of all uploaded files
+     */
     totalSize(): string {
       return this.$filesize(this.$FileSystem.totalSize)
     },
+    /**
+     * @description storage space (free tier is 4GB)
+     */
     sizeLimit(): string {
       return this.$filesize(this.$Config.personalFilesLimit)
     },
     sizeColor(): string {
       return this.progress > 90 ? 'red' : 'green'
     },
+    quickAccessOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.default'),
+          route: FileAsideRouteEnum.DEFAULT,
+          icon: FileIconsEnum.FOLDER,
+        },
+        {
+          text: this.$t('pages.files.aside.recent'),
+          route: FileAsideRouteEnum.RECENT,
+          icon: FileIconsEnum.CLOCK,
+        },
+        {
+          text: this.$t('pages.files.aside.deleted'),
+          route: FileAsideRouteEnum.DELETED,
+          icon: FileIconsEnum.TRASH,
+        },
+        {
+          text: this.$t('pages.files.aside.favorited'),
+          route: FileAsideRouteEnum.FAVORITED,
+          icon: FileIconsEnum.HEART,
+        },
+      ]
+    },
+    sharedItemsOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.shared_folders'),
+          route: FileAsideRouteEnum.SHARED,
+          icon: FileIconsEnum.FOLDER,
+        },
+        {
+          text: this.$t('pages.files.aside.links'),
+          route: FileAsideRouteEnum.LINKS,
+          icon: FileIconsEnum.LINK,
+        },
+      ]
+    },
   },
   watch: {
     totalSize() {

components/views/files/aside/List/List.html

@@ -0,0 +1,10 @@
+<ul class="menu-list">
+  <li
+    v-for="item in items"
+    :class="[{'is-active' : isActiveRoute(item.route)}, {'disabled' : isFilesIndexLoading}]"
+    @click="!isFilesIndexLoading &&  setActive(item.route)"
+  >
+    <component v-if="item.icon" :is="icons[item.icon]" size="1x" />
+    {{item.text}}
+  </li>
+</ul>

components/views/files/aside/List/List.less

@@ -0,0 +1,19 @@
+li {
+  cursor: pointer;
+  padding: @xlight-spacing @light-spacing;
+  margin: 0.2rem -@light-spacing;
+  display: inline-flex;
+  align-items: center;
+  border-radius: @corner-rounding-smaller;
+  &:extend(.full-width);
+  -webkit-user-select: none;
+  user-select: none;
+
+  &:hover {
+    background: @foreground;
+  }
+
+  svg {
+    margin-right: @light-spacing;
+  }
+}

components/views/files/aside/List/List.vue

@@ -0,0 +1,71 @@
+<template src="./List.html"></template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { mapGetters } from 'vuex'
+import {
+  ClockIcon,
+  TrashIcon,
+  HeartIcon,
+  FolderIcon,
+  LinkIcon,
+} from 'satellite-lucide-icons'
+import { FileIconsEnum, FileAsideRouteEnum } from '~/libraries/Enums/enums'
+import { SimpleItem } from '~/types/ui/sidebar'
+
+export default Vue.extend({
+  components: {
+    ClockIcon,
+    TrashIcon,
+    HeartIcon,
+    FolderIcon,
+    LinkIcon,
+  },
+  props: {
+    items: {
+      type: Array as PropType<SimpleItem[]>,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters('ui', ['isFilesIndexLoading']),
+    icons() {
+      return {
+        [FileIconsEnum.CLOCK]: ClockIcon,
+        [FileIconsEnum.TRASH]: TrashIcon,
+        [FileIconsEnum.HEART]: HeartIcon,
+        [FileIconsEnum.FOLDER]: FolderIcon,
+        [FileIconsEnum.LINK]: LinkIcon,
+      }
+    },
+  },
+  methods: {
+    /**
+     * @method setActive
+     * @description set files page route (default, recent, deleted, etc...)
+     * @param {FileAsideRouteEnum} route clicked route string value
+     */
+    setActive(route: FileAsideRouteEnum) {
+      if (!route) {
+        this.$router.push({ query: {} })
+        return
+      }
+      this.$router.push({ query: { route } })
+    },
+    /**
+     * @method isActiveRoute
+     * @description used to set active css class on list
+     * @param {FileAsideRouteEnum} route clicked route string value
+     */
+    isActiveRoute(route: FileAsideRouteEnum) {
+      // if default route
+      if (!this.$route.query.route && !route) {
+        return true
+      }
+      return route === this.$route.query.route
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./List.less"></style>

components/views/files/file/File.vue

@@ -119,7 +119,7 @@ export default Vue.extend({
      * @description Open rename modal
      */
     rename() {
-      this.$store.commit('ui/setRenameItem', this.item.name)
+      this.$store.commit('ui/setRenameItem', this.item)
       this.$store.commit('ui/toggleModal', {
         name: ModalWindows.RENAME_FILE,
         state: !this.ui.modals[ModalWindows.RENAME_FILE],

components/views/files/list/List.html

@@ -39,7 +39,7 @@
     <th />
   </thead>
   <tbody>
-    <FilesRow
+    <FilesListRow
       v-for="item, i in directory"
       :key="i + counter"
       :item="item"

components/views/files/row/Row.vue → components/views/files/list/row/Row.vue

@@ -95,7 +95,7 @@ export default Vue.extend({
      * @description Open rename modal
      */
     rename() {
-      this.$store.commit('ui/setRenameItem', this.item.name)
+      this.$store.commit('ui/setRenameItem', this.item)
       this.$store.commit('ui/toggleModal', {
         name: ModalWindows.RENAME_FILE,
         state: !this.ui.modals[ModalWindows.RENAME_FILE],

components/views/files/rename/Rename.vue

@@ -4,6 +4,8 @@
 import Vue from 'vue'
 import { mapState, mapGetters } from 'vuex'
 import { SaveIcon } from 'satellite-lucide-icons'
+import { RootState } from '~/types/store/store'
+import { Directory } from '~/libraries/Files/Directory'
 
 export default Vue.extend({
   components: {
@@ -18,15 +20,27 @@ export default Vue.extend({
   data() {
     return {
       text: '' as string,
+      currentName: '' as string,
+      parent: null as Directory | null,
       error: '' as string,
     }
   },
   computed: {
-    ...mapState(['ui']),
+    ...mapState({
+      renameItem: (state) => (state as RootState).ui.renameItem,
+    }),
     ...mapGetters('ui', ['isFilesIndexLoading']),
   },
   mounted() {
-    this.text = this.ui.renameCurrentName
+    if (!this.renameItem) {
+      this.error = this.$t('pages.files.errors.lost') as string
+      return
+    }
+    // extract data we need from store and then clear to avoid vuex outside mutation error
+    this.text = this.renameItem.name
+    this.currentName = this.renameItem.name
+    this.parent = this.renameItem.parent
+    this.$store.commit('ui/setRenameItem', undefined)
     this.$nextTick(() => {
       // extension string including .
       const extString = this.text.slice(
@@ -49,7 +63,7 @@ export default Vue.extend({
      */
     async rename() {
       try {
-        this.$FileSystem.renameChild(this.ui.renameCurrentName, this.text)
+        this.$FileSystem.renameChild(this.currentName, this.text, this.parent)
       } catch (e: any) {
         this.error = this.$t(e?.message) as string
         return

components/views/files/view/View.vue

@@ -10,7 +10,6 @@ import {
   XIcon,
   LinkIcon,
 } from 'satellite-lucide-icons'
-import { Fil } from '~/libraries/Files/Fil'
 import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
@@ -22,24 +21,19 @@ export default Vue.extend({
     XIcon,
     LinkIcon,
   },
-  data() {
-    return {
-      file: undefined as Fil | undefined,
-    }
-  },
   computed: {
     ...mapState({
-      ui: (state) => (state as RootState).ui,
+      file: (state) => (state as RootState).ui.filePreview,
+      fileDownloadList: (state) => (state as RootState).ui.fileDownloadList,
       blockNsfw: (state) => (state as RootState).settings.blockNsfw,
     }),
     ...mapGetters('ui', ['isFilesIndexLoading']),
     isDownloading(): boolean {
-      return this.ui.fileDownloadList.includes(this.file?.name)
+      return this.file?.name
+        ? this.fileDownloadList.includes(this.file.name)
+        : false
     },
   },
-  created() {
-    this.file = this.$FileSystem.getChild(this.ui.filePreview) as Fil
-  },
   methods: {
     /**
      * @method download