⭐️ Implement personal drive (#61)

* Implement personal drive

* Fix tests

* Add my-drive tests

* Fixing tests

* Fixing tests

* Fix tests

tdrive/frontend/src/app/views/client/body/drive/header-path.tsx

@@ -1,8 +1,11 @@
 import { Button } from '@atoms/button/button';
 import { Title } from '@atoms/text';
 import { DriveItem } from '@features/drive/types';
+import { ChevronDownIcon } from '@heroicons/react/solid';
 import { useEffect, useState } from 'react';
 import { PublicIcon } from './components/public-icon';
+import MenusManager from '@components/menus/menus-manager.jsx';
+import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
 
 export default ({
   path: livePath,
@@ -56,6 +59,7 @@ const PathItem = ({
   first?: boolean;
   onClick: (id: string) => void;
 }) => {
+  const { user } = useCurrentUser();
   return (
     <Button
       theme={last ? 'primary' : 'default'}
@@ -65,8 +69,19 @@ const PathItem = ({
         (!last ? 'rounded-r-none ' : '') +
         (!first && !last ? 'max-w-[15ch] ' : '')
       }
-      onClick={() => {
-        onClick(item?.id || '');
+      onClick={evt => {
+        if (first) {
+          MenusManager.openMenu(
+            [
+              { type: 'menu', text: 'Home', onClick: () => onClick('root') },
+              { type: 'menu', text: 'My Drive', onClick: () => onClick('user_' + user?.id) },
+            ],
+            { x: evt.clientX, y: evt.clientY },
+            'center',
+          );
+        } else {
+          onClick(item?.id || '');
+        }
       }}
     >
       <span className="text-ellipsis overflow-hidden whitespace-nowrap" style={{ maxWidth: 120 }}>
@@ -75,6 +90,11 @@ const PathItem = ({
       {item?.access_info?.public?.level && item?.access_info?.public?.level !== 'none' && (
         <PublicIcon className="h-5 w-5 ml-2" />
       )}
+      {first && (
+        <span className="ml-2 -mr-1">
+          <ChevronDownIcon className="w-4 h-4" />
+        </span>
+      )}
     </Button>
   );
 };

tdrive/frontend/src/app/views/client/side-bar/index.tsx

@@ -6,7 +6,9 @@ import {
   HeartIcon,
   ShareIcon,
   TrashIcon,
+  UserIcon,
 } from '@heroicons/react/outline';
+import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
 import { useRecoilState } from 'recoil';
 import { Title } from '../../../atoms/text';
 import { useDriveItem } from '../../../features/drive/hooks/use-drive-item';
@@ -18,10 +20,14 @@ import Actions from './actions';
 
 export default () => {
   const [parentId, setParentId] = useRecoilState(DriveCurrentFolderAtom('root'));
+  const { user } = useCurrentUser();
   const active = false;
   const { access: rootAccess } = useDriveItem('root');
-  const { inTrash } = useDriveItem(parentId);
+  const { inTrash, path } = useDriveItem(parentId);
   const activeClass = 'bg-zinc-50 dark:bg-zinc-800 !text-blue-500';
+  let folderType = 'home';
+  if ((path || [])[0]?.id === 'user_' + user?.id) folderType = 'personal';
+  if (inTrash) folderType = 'trash';
   return (
     <div className="grow flex flex-col overflow-auto -m-4 p-4 relative">
       <div className="grow">
@@ -45,10 +51,18 @@ export default () => {
           onClick={() => setParentId('root')}
           size="lg"
           theme="white"
-          className={'w-full mt-2 mb-1 ' + (!inTrash ? activeClass : '')}
+          className={'w-full mt-2 mb-1 ' + (folderType === 'home' ? activeClass : '')}
         >
           <CloudIcon className="w-5 h-5 mr-4" /> Home
         </Button>
+        <Button
+          onClick={() => setParentId('user_' + user?.id)}
+          size="lg"
+          theme="white"
+          className={'w-full mb-1 ' + (folderType === 'personal' ? activeClass : '')}
+        >
+          <UserIcon className="w-5 h-5 mr-4" /> My Drive
+        </Button>
         {false && (
           <>
             <Button
@@ -72,7 +86,7 @@ export default () => {
             onClick={() => setParentId('trash')}
             size="lg"
             theme="white"
-            className={'w-full mb-1 ' + (inTrash ? activeClass : '')}
+            className={'w-full mb-1 ' + (folderType === 'trash' ? activeClass : '')}
           >
             <TrashIcon className="w-5 h-5 mr-4 text-rose-500" /> Trash
           </Button>