+13

apps/web/src/components/ContextMenu/ContextMenu.tsx

··· 1 1 + import { EllipsisHorizontal } from "@styled-icons/ionicons-sharp"; 2 2 + 3 3 + function ContextMenu() { 4 4 + return ( 5 5 + <> 6 6 + <div className="text-[var(--color-text)] cursor-pointer"> 7 7 + <EllipsisHorizontal size={24} /> 8 8 + </div> 9 9 + </> 10 10 + ); 11 11 + } 12 12 + 13 13 + export default ContextMenu;

+3

apps/web/src/components/ContextMenu/index.tsx

··· 1 1 + import ContextMenu from "./ContextMenu"; 2 2 + 3 3 + export default ContextMenu;

+1 -1

apps/web/src/components/Table/Table.tsx

··· 37 37 }); 38 38 39 39 return ( 40 40 - <table className="mt-[0px] w-full"> 40 40 + <table className="mt-[0px] w-[770px]"> 41 41 <thead> 42 42 {table.getHeaderGroups().map((headerGroup) => ( 43 43 <tr

+5

apps/web/src/pages/dropbox/Dropbox.tsx

··· 5 5 import { Breadcrumbs } from "baseui/breadcrumbs"; 6 6 import { HeadingMedium } from "baseui/typography"; 7 7 import ContentLoader from "react-content-loader"; 8 8 + import ContextMenu from "../../components/ContextMenu"; 8 9 import Table from "../../components/Table"; 9 10 import { useFilesQuery } from "../../hooks/useDropbox"; 10 11 import Main from "../../layouts/Main"; ··· 66 67 )} 67 68 </> 68 69 ), 70 70 + }), 71 71 + columnHelper.accessor("name", { 72 72 + header: "", 73 73 + cell: () => <ContextMenu />, 69 74 }), 70 75 ]; 71 76

-4

apps/web/src/pages/dropbox/styles.tsx

··· 5 5 color: var(--color-text) !important; 6 6 margin-left: 10px; 7 7 text-decoration: none; 8 8 - width: calc(100vw - 500px); 9 9 - max-width: calc(100vw - 500px); 10 8 text-overflow: ellipsis; 11 9 overflow: hidden; 12 10 white-space: nowrap; ··· 20 18 color: var(--color-text) !important; 21 19 margin-left: 10px; 22 20 text-decoration: none; 23 23 - width: calc(100vw - 500px); 24 24 - max-width: calc(100vw - 500px); 25 21 text-overflow: ellipsis; 26 22 overflow: hidden; 27 23 white-space: nowrap;

+7 -2

apps/web/src/pages/googledrive/GoogleDrive.tsx

··· 5 5 import { Breadcrumbs } from "baseui/breadcrumbs"; 6 6 import { HeadingMedium } from "baseui/typography"; 7 7 import ContentLoader from "react-content-loader"; 8 8 + import ContextMenu from "../../components/ContextMenu"; 8 9 import Table from "../../components/Table"; 9 10 import { useFilesQuery } from "../../hooks/useGoogleDrive"; 10 11 import Main from "../../layouts/Main"; ··· 42 43 columnHelper.accessor("name", { 43 44 header: "", 44 45 cell: (info) => ( 45 45 - <> 46 46 + <div> 46 47 {info.row.original.tag === "folder" && ( 47 48 <Directory to={`/googledrive/${info.row.original.id}`}> 48 49 {info.row.original.name} ··· 51 52 {info.row.original.tag === "file" && ( 52 53 <AudioFile>{info.row.original.name}</AudioFile> 53 54 )} 54 54 - </> 55 55 + </div> 55 56 ), 57 57 + }), 58 58 + columnHelper.accessor("name", { 59 59 + header: "", 60 60 + cell: () => <ContextMenu />, 56 61 }), 57 62 ]; 58 63

-4

apps/web/src/pages/googledrive/styles.tsx

··· 5 5 color: var(--color-text) !important; 6 6 margin-left: 10px; 7 7 text-decoration: none; 8 8 - width: calc(100vw - 500px); 9 9 - max-width: calc(100vw - 500px); 10 8 text-overflow: ellipsis; 11 9 overflow: hidden; 12 10 white-space: nowrap; ··· 20 18 color: var(--color-text) !important; 21 19 margin-left: 10px; 22 20 text-decoration: none; 23 23 - width: calc(100vw - 500px); 24 24 - max-width: calc(100vw - 500px); 25 21 text-overflow: ellipsis; 26 22 overflow: hidden; 27 23 white-space: nowrap;