From 9c35a2dfa63a870242f34b3e6c7fd7772229c85e Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Wed, 27 Apr 2022 18:18:49 +0900
Subject: [PATCH] feat(files): recent sidebar functionality

---
 components/ui/SimpleList/SimpleList.html | 20 ++++----
 components/ui/SimpleList/SimpleList.less | 42 +++++----------
 components/ui/SimpleList/SimpleList.vue  | 65 +++++++++++++++++-------
 components/views/files/aside/Aside.html  |  8 +--
 components/views/files/aside/Aside.vue   | 48 ++++++++++++++++-
 libraries/Enums/enums.ts                 |  8 ++-
 libraries/Enums/types/fileSort.ts        |  6 ---
 libraries/Enums/types/files.ts           | 23 +++++++++
 libraries/Files/FilSystem.ts             | 58 ++++++++++++---------
 libraries/Files/test/FilSystem.test.ts   |  2 +-
 locales/en-US.js                         |  6 +++
 pages/files/browse/Browse.html           | 12 ++++-
 pages/files/browse/index.vue             | 14 ++++-
 plugins/thirdparty/filesize.ts           |  8 ++-
 types/ui/sidebar.d.ts                    | 13 ++---
 15 files changed, 229 insertions(+), 104 deletions(-)
 delete mode 100644 libraries/Enums/types/fileSort.ts
 create mode 100644 libraries/Enums/types/files.ts

diff --git a/components/ui/SimpleList/SimpleList.html b/components/ui/SimpleList/SimpleList.html
index a458aa8e32..263cabaf90 100644
--- a/components/ui/SimpleList/SimpleList.html
+++ b/components/ui/SimpleList/SimpleList.html
@@ -1,10 +1,10 @@
-<div class="simple-menu">
-  <ul class="menu-list">
-    <li
-      v-for="item in menuContent"
-      :class="`${item.active ? 'is-active' : ''}`"
-    >
-      <UiDynamicIcon size="1x" :icon="item.icon" /> {{item.text}}
-    </li>
-  </ul>
-</div>
+<ul class="menu-list">
+  <li
+    v-for="item in items"
+    :class="[{'is-active' : isActiveRoute(item.route)}, {'no-icon' : !item.icon}]"
+    @click="setActive(item.route)"
+  >
+    <component v-if="item.icon" :is="icons[item.icon]" size="1x" />
+    {{item.text}}
+  </li>
+</ul>
diff --git a/components/ui/SimpleList/SimpleList.less b/components/ui/SimpleList/SimpleList.less
index 7ec8ae2943..6d1788cd25 100644
--- a/components/ui/SimpleList/SimpleList.less
+++ b/components/ui/SimpleList/SimpleList.less
@@ -1,33 +1,19 @@
-.simple-menu {
-  .menu-icon {
-    width: 15px;
-    margin-right: @light-spacing;
-  }
-
-  .active {
-    &:extend(.background-primary);
-    &:extend(.font-secondary);
-    border-radius: @corner-rounding-smaller;
+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 {
-      &:extend(.background-primary);
-    }
+  &:hover {
+    background: @foreground;
   }
 
-  li {
-    cursor: pointer;
-    padding: (@light-spacing / 2) @light-spacing;
-    margin: 0.2rem -@light-spacing;
-    display: inline-flex;
-    align-items: center;
-    border-radius: @corner-rounding-smaller;
-    &:extend(.full-width);
-
-    .dynamic-icon {
-      margin-right: @light-spacing;
-    }
-    &:hover {
-      background: @foreground;
-    }
+  svg {
+    margin-right: @light-spacing;
   }
 }
diff --git a/components/ui/SimpleList/SimpleList.vue b/components/ui/SimpleList/SimpleList.vue
index 1226bbd20f..f743a02357 100644
--- a/components/ui/SimpleList/SimpleList.vue
+++ b/components/ui/SimpleList/SimpleList.vue
@@ -2,31 +2,62 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
-import { MenuIcon } from 'satellite-lucide-icons'
-
-import { SimpleList } from '~/types/ui/sidebar'
+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: {
-    MenuIcon,
+    ClockIcon,
+    TrashIcon,
+    HeartIcon,
+    FolderIcon,
+    LinkIcon,
   },
   props: {
-    /**
-     * Set the active route
-     */
-    active: {
-      type: String,
-      default: '',
-    },
-    /**
-     * List of sidebar content
-     */
-    menuContent: {
-      type: Array as PropType<SimpleList>,
+    items: {
+      type: Array as PropType<SimpleItem[]>,
       required: true,
     },
   },
+  computed: {
+    icons() {
+      return {
+        [FileIconsEnum.CLOCK]: ClockIcon,
+        [FileIconsEnum.TRASH]: TrashIcon,
+        [FileIconsEnum.HEART]: HeartIcon,
+        [FileIconsEnum.FOLDER]: FolderIcon,
+        [FileIconsEnum.LINK]: LinkIcon,
+      }
+    },
+  },
+  methods: {
+    setActive(route: FileAsideRouteEnum) {
+      if (!route) {
+        this.$router.push({ query: {} })
+        return
+      }
+      this.$router.push({ query: { route } })
+    },
+    isActiveRoute(route: FileAsideRouteEnum) {
+      if (!this.$route.query.route && route === FileAsideRouteEnum.DEFAULT) {
+        return true
+      }
+      if (
+        !Object.values(FileAsideRouteEnum).includes(this.$route.query.route) &&
+        route === FileAsideRouteEnum.DEFAULT
+      ) {
+        return true
+      }
+      return route === this.$route.query.route
+    },
+  },
 })
 </script>
 
diff --git a/components/views/files/aside/Aside.html b/components/views/files/aside/Aside.html
index ffc4d2b78b..098a16d0ec 100644
--- a/components/views/files/aside/Aside.html
+++ b/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' }]"
-    />
+    <UiSimpleList :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' }]"
-    />
+    <UiSimpleList :items="sharedItemsOptions" />
   </div>
 </div>
diff --git a/components/views/files/aside/Aside.vue b/components/views/files/aside/Aside.vue
index 61b654b125..18bf79e40c 100644
--- a/components/views/files/aside/Aside.vue
+++ b/components/views/files/aside/Aside.vue
@@ -1,8 +1,16 @@
 <template src="./Aside.html"></template>
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
+import { SimpleItem } from '~/types/ui/sidebar'
+import { FileAsideRouteEnum } from '~/libraries/Enums/enums'
 
 export default Vue.extend({
+  props: {
+    active: {
+      type: String as PropType<FileAsideRouteEnum>,
+      required: true,
+    },
+  },
   data() {
     return {
       progress: this.$FileSystem.percentStorageUsed as number,
@@ -18,6 +26,44 @@ export default Vue.extend({
     sizeColor(): string {
       return this.progress > 90 ? 'red' : 'green'
     },
+    quickAccessOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.default'),
+          route: FileAsideRouteEnum.DEFAULT,
+          icon: 'folder',
+        },
+        {
+          text: this.$t('pages.files.aside.recent'),
+          route: FileAsideRouteEnum.RECENT,
+          icon: 'clock',
+        },
+        {
+          text: this.$t('pages.files.aside.deleted'),
+          route: FileAsideRouteEnum.DELETED,
+          icon: 'trash',
+        },
+        {
+          text: this.$t('pages.files.aside.favorited'),
+          route: FileAsideRouteEnum.FAVORITED,
+          icon: 'heart',
+        },
+      ]
+    },
+    sharedItemsOptions(): SimpleItem[] {
+      return [
+        {
+          text: this.$t('pages.files.aside.shared_folders'),
+          route: FileAsideRouteEnum.SHARED,
+          icon: 'folder',
+        },
+        {
+          text: this.$t('pages.files.aside.links'),
+          route: FileAsideRouteEnum.LINKS,
+          icon: 'link',
+        },
+      ]
+    },
   },
   watch: {
     totalSize() {
diff --git a/libraries/Enums/enums.ts b/libraries/Enums/enums.ts
index c6dff498f3..d0b644f3a3 100644
--- a/libraries/Enums/enums.ts
+++ b/libraries/Enums/enums.ts
@@ -10,7 +10,11 @@ import { WebRTCEnum } from '~/libraries/Enums/types/webrtc'
 import { SocialAccountTypesEnum } from '~/libraries/Enums/types/social'
 import { AddFriendEnum } from '~/libraries/Enums/types/addFriend'
 import { PlatformTypeEnum } from '~/libraries/Enums/types/platformType'
-import { FileSortEnum } from '~/libraries/Enums/types/fileSort'
+import {
+  FileSortEnum,
+  FileIconsEnum,
+  FileAsideRouteEnum,
+} from '~/libraries/Enums/types/files'
 
 export {
   KeybindingEnum,
@@ -26,4 +30,6 @@ export {
   SocialAccountTypesEnum,
   PlatformTypeEnum,
   FileSortEnum,
+  FileIconsEnum,
+  FileAsideRouteEnum,
 }
diff --git a/libraries/Enums/types/fileSort.ts b/libraries/Enums/types/fileSort.ts
deleted file mode 100644
index 3021eab0fc..0000000000
--- a/libraries/Enums/types/fileSort.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum FileSortEnum {
-  NAME = 'name',
-  MODIFIED = 'modified',
-  TYPE = 'type',
-  SIZE = 'size',
-}
diff --git a/libraries/Enums/types/files.ts b/libraries/Enums/types/files.ts
new file mode 100644
index 0000000000..dd6b4a5919
--- /dev/null
+++ b/libraries/Enums/types/files.ts
@@ -0,0 +1,23 @@
+export enum FileSortEnum {
+  NAME = 'name',
+  MODIFIED = 'modified',
+  TYPE = 'type',
+  SIZE = 'size',
+}
+
+export enum FileIconsEnum {
+  CLOCK = 'clock',
+  TRASH = 'trash',
+  HEART = 'heart',
+  FOLDER = 'folder',
+  LINK = 'link',
+}
+
+export enum FileAsideRouteEnum {
+  DEFAULT = '',
+  RECENT = 'recent',
+  DELETED = 'deleted',
+  FAVORITED = 'favorited',
+  SHARED = 'shared',
+  LINKS = 'links',
+}
diff --git a/libraries/Files/FilSystem.ts b/libraries/Files/FilSystem.ts
index 64654b6c91..c54adeb391 100644
--- a/libraries/Files/FilSystem.ts
+++ b/libraries/Files/FilSystem.ts
@@ -98,23 +98,39 @@ export class FilSystem {
   }
 
   /**
-   * @getter flat
-   * @returns {ExportItem[]} flattened list of files in order to check if file exists
-   */
-  get flat(): ExportItem[] {
-    const flatDeepByKey = (
-      data: Array<ExportItem | ExportFile>,
-      key: keyof ExportDirectory | keyof ExportFile,
-    ) => {
-      return data.reduce((prev, el) => {
-        prev.push(el)
-        if (el[key]) {
-          prev.push(...flatDeepByKey(el[key], key))
-        }
-        return prev
-      }, [])
-    }
-    return flatDeepByKey(this.export.content, 'children')
+   * @getter flatFiles
+   * @returns {Fil[]} flattened list of files
+   */
+  get flat(): Fil[] {
+    return this._flatDeepByKey(this._self.content, 'content').filter(
+      (item: Item) => item instanceof Fil,
+    )
+  }
+
+  /**
+   * @getter flatFiles
+   * @returns {Fil[]} flattened list of most recent 15 files
+   */
+  get recentFiles(): Fil[] {
+    return this.flat
+      .sort((a: Fil, b: Fil) => b.modified - a.modified)
+      .slice(0, 14)
+  }
+
+  /**
+   * @method _flatDeepByKey
+   * @description recursively converts item to the proper format for export
+   * @param {}
+   * @returns {Item[]} flattened list of files and directories
+   */
+  private _flatDeepByKey(data: Item[], key: keyof Directory) {
+    return data.reduce((prev, el) => {
+      prev.push(el)
+      if (el[key]) {
+        prev.push(...this._flatDeepByKey(el[key], key))
+      }
+      return prev
+    }, [])
   }
 
   /**
@@ -122,13 +138,7 @@ export class FilSystem {
    * @returns {number} total size of all tracked files
    */
   get totalSize(): number {
-    return this.flat.reduce(
-      (total, curr) =>
-        (Object.values(FILE_TYPE) as string[]).includes(curr.type)
-          ? total + (curr as ExportFile).size
-          : total,
-      0,
-    )
+    return this.flat.reduce((total, curr) => total + curr.size, 0)
   }
 
   /**
diff --git a/libraries/Files/test/FilSystem.test.ts b/libraries/Files/test/FilSystem.test.ts
index 1ac8e89446..aaffbcab91 100644
--- a/libraries/Files/test/FilSystem.test.ts
+++ b/libraries/Files/test/FilSystem.test.ts
@@ -82,7 +82,7 @@ describe('Test FilSystem', () => {
     expect(filesystem.percentStorageUsed).toBe(0.4337487))
   it(`Correctly exports filesystem`, () =>
     expect(filesystem.export).toMatchObject({
-      version: 3,
+      version: 1,
       type: FILESYSTEM_TYPE.DEFAULT,
     }))
   it(`Correctly copies entire filesystem`, () =>
diff --git a/locales/en-US.js b/locales/en-US.js
index 1da1257137..d5622e6e46 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -162,7 +162,13 @@ export default {
         free_tier: 'Free Tier',
         upgrade: 'Upgrade',
         quick_access: 'Quick Access',
+        default: 'Default',
+        recent: 'Recent',
+        deleted: 'Deleted',
+        favorited: 'Favorited',
         shared_items: 'Shared Items',
+        shared_folders: 'Shared Folders',
+        links: 'Links',
         coming_soon: 'Coming soon',
       },
       upload: {
diff --git a/pages/files/browse/Browse.html b/pages/files/browse/Browse.html
index 88bc390da9..1c5a2aaeb4 100644
--- a/pages/files/browse/Browse.html
+++ b/pages/files/browse/Browse.html
@@ -1,5 +1,9 @@
 <div id="files" class="hidden-scroll" v-scroll-lock="true">
-  <FilesAside v-if="$device.isMobile" class="mobile-file-aside" />
+  <FilesAside
+    v-if="$device.isMobile"
+    class="mobile-file-aside"
+    :active="activeRoute"
+  />
   <div class="files-top">
     <FilesFilepath />
   </div>
@@ -36,6 +40,10 @@
         @handle="handle"
       />
     </div>
-    <FilesAside v-if="!$device.isMobile" class="files-right" />
+    <FilesAside
+      v-if="!$device.isMobile"
+      class="files-right"
+      :active="activeRoute"
+    />
   </div>
 </div>
diff --git a/pages/files/browse/index.vue b/pages/files/browse/index.vue
index da82a5aacd..3fb3fed699 100644
--- a/pages/files/browse/index.vue
+++ b/pages/files/browse/index.vue
@@ -6,7 +6,7 @@ import { Item } from '~/libraries/Files/abstracts/Item.abstract'
 import { Directory } from '~/libraries/Files/Directory'
 import { Fil } from '~/libraries/Files/Fil'
 import { FilSystem } from '~/libraries/Files/FilSystem'
-import { FileSortEnum } from '~/libraries/Enums/enums'
+import { FileAsideRouteEnum, FileSortEnum } from '~/libraries/Enums/enums'
 import { FileSort } from '~/store/ui/types'
 
 export default Vue.extend({
@@ -17,6 +17,7 @@ export default Vue.extend({
       view: 'grid',
       counter: 1 as number, // needed to force render on addChild. Vue2 lacks reactivity for Map
       fileSystem: this.$FileSystem as FilSystem,
+      activeRoute: FileAsideRouteEnum.DEFAULT as FileAsideRouteEnum,
     }
   },
   computed: {
@@ -33,12 +34,23 @@ export default Vue.extend({
        */
     },
     directory(): Item[] {
+      if (this.$route.query.route === FileAsideRouteEnum.RECENT) {
+        return this.$data.counter && this.fileSystem.recentFiles
+      }
       return (
         this.$data.counter &&
         this.fileSystem.currentDirectory.sortedContent(this.sort)
       )
     },
   },
+  watch: {
+    '$route.params.route': {
+      handler() {
+        this.fileSystem.goBackToDirectory('root')
+      },
+      deep: true,
+    },
+  },
   methods: {
     /**
      * @method changeView DocsTODO
diff --git a/plugins/thirdparty/filesize.ts b/plugins/thirdparty/filesize.ts
index 331b19518f..e1e1b07e35 100644
--- a/plugins/thirdparty/filesize.ts
+++ b/plugins/thirdparty/filesize.ts
@@ -2,9 +2,15 @@ import Vue from 'vue'
 
 import { filesize } from '~/utilities/Filesize'
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    $filesize: typeof filesize
+  }
+}
+
 declare module '@nuxt/types' {
   interface Context {
-    $filesize: typeof Function
+    $filesize: typeof filesize
   }
 }
 
diff --git a/types/ui/sidebar.d.ts b/types/ui/sidebar.d.ts
index 59d2c7cd25..feaebab84b 100644
--- a/types/ui/sidebar.d.ts
+++ b/types/ui/sidebar.d.ts
@@ -1,3 +1,6 @@
+import { TranslateResult } from 'vue-i18n'
+import { FileAsideRouteEnum } from '~/libraries/Enums/enums'
+
 export type SidebarLink = {
   to: String
   text: String
@@ -8,10 +11,8 @@ export type SidebarGrouping = {
   links: Array<SidebarLink>
 }
 
-export type SimpleItem = {
-  icon: String
-  text: String
-  active: Boolean
+export interface SimpleItem {
+  text: string | TranslateResult
+  route: FileAsideRouteEnum
+  icon: string
 }
-
-export type SimpleList = Array<SimpleItem>