Fix responsive and minors bugs

package.json

@@ -8,7 +8,7 @@
   "version": "0.0.13",
   "type": "module",
   "scripts": {
-    "dev": "vite --host 0.0.0.0 --port 5173",
+    "dev": "vite --host 127.0.0.1 --port 5173",
     "compile": "tsc --noEmit",
     "build": "tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

src/assets/icons/dots.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#969696"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round">
+  <circle cx="12" cy="12" r="1" />
+  <circle cx="12" cy="5" r="1" />
+  <circle cx="12" cy="19" r="1" />
+</svg>

src/components/AppBar/AppBar.tsx

@@ -74,10 +74,10 @@ export function AppBar({ onIconClick, onExpanded }: Props) {
 
   const title =
     location.pathname.split("/")[2] || location.pathname.split("/")[1];
-  const networkIconColor = online ? "#3EE089" : "var(-codex-color-error)";
+  const networkIconColor = online ? "#3EE089" : "var(--codex-color-error)";
   const nodesIconColor =
     codex.enabled === false
-      ? "var(-codex-color-error)"
+      ? "var(--codex-color-error)"
       : persistence.enabled
         ? "#3EE089"
         : "var(--codex-input-color-warning)";

src/components/Availability/Sunburst.tsx

@@ -44,7 +44,7 @@ export function Sunburst({ availabilities, space }: Props) {
     return () => {
       window.removeEventListener("resize", refresh);
     };
-  }, [chart.current]);
+  }, []);
 
   const data = availabilities.map((a, index) => {
     return {

src/components/ConnectedAccount/WalletCard.tsx

@@ -41,7 +41,7 @@ export function WalletCard({ tab }: Props) {
     return () => {
       window.removeEventListener("resize", refresh);
     };
-  }, [chart.current]);
+  }, []);
 
   const onCurrencyChange = async (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.currentTarget.value;

src/components/Files/FileActions.css

@@ -10,6 +10,37 @@
     padding: 10px;
   }
 
+  ul {
+    transition: bottom 0.35s;
+    position: fixed;
+    bottom: -500px;
+    left: 0;
+    right: 0;
+    background-color: rgba(47, 47, 47, 1);
+    border-top: 1px solid rgba(150, 150, 150, 0.2);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+
+    padding: 16px;
+
+    &[aria-expanded] {
+      bottom: 0;
+      z-index: 11;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    li + li {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid rgba(150, 150, 150, 0.2);
+    }
+  }
+
   @media (max-width: 800px) {
     .folder-button {
       display: none;

src/components/Files/FileActions.tsx

@@ -1,10 +1,19 @@
-import { ButtonIcon, Cell } from "@codex-storage/marketplace-ui-components";
+import {
+  Backdrop,
+  ButtonIcon,
+  Cell,
+} from "@codex-storage/marketplace-ui-components";
 import { FolderButton } from "./FolderButton";
 import { CodexDataContent } from "@codex-storage/sdk-js";
 import { CodexSdk } from "../../sdk/codex";
 import "./FileActions.css";
 import DownloadIcon from "../../assets/icons/download-file.svg?react";
 import InfoFileIcon from "../../assets/icons/info-file.svg?react";
+import DotsIcon from "../../assets/icons/dots.svg?react";
+import { useIsMobile } from "../../hooks/useMobile";
+import { useState } from "react";
+import { attributes } from "../../utils/attributes";
+import CopyIcon from "../../assets/icons/copy.svg?react";
 
 type Props = {
   content: CodexDataContent;
@@ -19,7 +28,53 @@ export function FileActions({
   onFolderToggle,
   onDetails,
 }: Props) {
+  const isMobile = useIsMobile();
   const url = CodexSdk.url() + "/api/codex/v1/data/";
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const onClose = () => setIsExpanded(false);
+
+  const onOpen = () => setIsExpanded(true);
+
+  const onCopy = (cid: string) => {
+    setIsExpanded(false);
+    navigator.clipboard.writeText(cid);
+  };
+
+  if (isMobile) {
+    return (
+      <Cell className="file-actions">
+        <>
+          <ButtonIcon
+            variant="small"
+            onClick={onOpen}
+            Icon={() => (
+              <DotsIcon width={24} height={24}></DotsIcon>
+            )}></ButtonIcon>
+          <ul {...attributes({ "aria-expanded": isExpanded })}>
+            <li
+              onClick={() => {
+                window.open(url + content.cid, "_blank");
+                setIsExpanded(false);
+              }}>
+              <DownloadIcon width={20}></DownloadIcon> Download
+            </li>
+            <li
+              onClick={() => {
+                onDetails(content.cid);
+                setIsExpanded(false);
+              }}>
+              <InfoFileIcon width={20}></InfoFileIcon> Details
+            </li>
+            <li onClick={() => onCopy(content.cid)}>
+              <CopyIcon width={20}></CopyIcon> Copy
+            </li>
+          </ul>
+          <Backdrop open={isExpanded} onClose={onClose}></Backdrop>
+        </>
+      </Cell>
+    );
+  }
 
   return (
     <Cell className="file-actions">

src/components/Files/FileCell.css

@@ -17,6 +17,12 @@
       height: 40px;
       background-color: rgba(20, 20, 20, 0.6);
       border: 1px solid rgba(150, 150, 150, 0.2);
+
+      @media (max-width: 800px) {
+        & {
+          display: none;
+        }
+      }
     }
   }
 }

src/components/Files/FileCell.tsx

@@ -14,11 +14,27 @@ type Props = {
 };
 
 export function FileCell({ content }: Props) {
-  const [toast, setToast] = useState({ time: 0, message: "" });
+  const [toast, setToast] = useState({
+    time: 0,
+    message: "",
+    variant: "success" as "success" | "error",
+  });
 
   const onCopy = (cid: string) => {
-    navigator.clipboard.writeText(cid);
-    setToast({ message: "CID copied to the clipboard.", time: Date.now() });
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(cid);
+      setToast({
+        message: "CID copied to the clipboard.",
+        time: Date.now(),
+        variant: "success" as "success",
+      });
+    } else {
+      setToast({
+        message: "Sorry the CID cannot be copied to the clipboard.",
+        time: Date.now(),
+        variant: "error" as "error",
+      });
+    }
   };
 
   return (
@@ -44,7 +60,11 @@ export function FileCell({ content }: Props) {
             )}></ButtonIcon>
         </div>
 
-        <Toast message={toast.message} time={toast.time} variant={"success"} />
+        <Toast
+          message={toast.message}
+          time={toast.time}
+          variant={toast.variant}
+        />
       </Cell>
     </>
   );

src/components/Files/FileDetails.css

@@ -21,17 +21,6 @@
     span {
       flex-grow: 1;
     }
-
-    .button-icon {
-      background-color: rgb(47, 47, 47);
-      border: 1px solid rgba(150, 150, 150, 0.2);
-
-      svg {
-        position: relative;
-        left: -3px;
-        top: -1px;
-      }
-    }
   }
 
   .preview {