+13

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

··· 0 0 0 0 0 0 0 0 0 0 0 0 0

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

+3

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

··· 0 0 0

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

+1 -1

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

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

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

+5

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

··· 5 import { Breadcrumbs } from "baseui/breadcrumbs"; 6 import { HeadingMedium } from "baseui/typography"; 7 import ContentLoader from "react-content-loader"; 0 8 import Table from "../../components/Table"; 9 import { useFilesQuery } from "../../hooks/useDropbox"; 10 import Main from "../../layouts/Main"; ··· 66 )} 67 </> 68 ), 0 0 0 0 69 }), 70 ]; 71

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

-4

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

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

··· 5 color: var(--color-text) !important; 6 margin-left: 10px; 7 text-decoration: none; 0 0 8 text-overflow: ellipsis; 9 overflow: hidden; 10 white-space: nowrap; ··· 18 color: var(--color-text) !important; 19 margin-left: 10px; 20 text-decoration: none; 0 0 21 text-overflow: ellipsis; 22 overflow: hidden; 23 white-space: nowrap;

+7 -2

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

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

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

-4

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

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

··· 5 color: var(--color-text) !important; 6 margin-left: 10px; 7 text-decoration: none; 0 0 8 text-overflow: ellipsis; 9 overflow: hidden; 10 white-space: nowrap; ··· 18 color: var(--color-text) !important; 19 margin-left: 10px; 20 text-decoration: none; 0 0 21 text-overflow: ellipsis; 22 overflow: hidden; 23 white-space: nowrap;