feat: Add a setting page to manage assets. Fixes #730

3 files changed, 37 insertions, 0 deletions

diff --git a/apps/web/lib/attachments.tsx b/apps/web/lib/attachments.tsx
new file mode 100644
index 00000000..8110d6ce
--- /dev/null
+++ b/apps/web/lib/attachments.tsx
@@ -0,0 +1,14 @@
+import { Archive, Camera, Image, Paperclip, Video } from "lucide-react";
+
+import { ZAssetType } from "@hoarder/shared/types/bookmarks";
+
+export const ASSET_TYPE_TO_ICON: Record<ZAssetType, React.ReactNode> = {
+  screenshot: <Camera className="size-4" />,
+  assetScreenshot: <Camera className="size-4" />,
+  fullPageArchive: <Archive className="size-4" />,
+  precrawledArchive: <Archive className="size-4" />,
+  bannerImage: <Image className="size-4" />,
+  video: <Video className="size-4" />,
+  bookmarkAsset: <Paperclip className="size-4" />,
+  unknown: <Paperclip className="size-4" />,
+};
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 81ef942f..a12b703f 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -9,6 +9,8 @@
     "created_at": "Created At",
     "key": "Key",
     "role": "Role",
+    "type": "Type",
+    "size": "Size",
     "roles": {
       "user": "User",
       "admin": "Admin"
@@ -150,6 +152,15 @@
       "last_crawled_at": "Last Crawled At",
       "crawling_status": "Crawling Status",
       "crawling_failed": "Crawling Failed"
+    },
+    "manage_assets": {
+      "manage_assets": "Manage Assets",
+      "no_assets": "You don't have any assets yet.",
+      "asset_type": "Asset Type",
+      "bookmark_link": "Bookmark Link",
+      "asset_link": "Asset Link",
+      "delete_asset": "Delete Asset",
+      "delete_asset_confirmation": "Are you sure you want to delete this asset?"
     }
   },
   "admin": {
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
index 230c9eef..292a6d62 100644
--- a/apps/web/lib/utils.ts
+++ b/apps/web/lib/utils.ts
@@ -8,6 +8,18 @@ export function cn(...inputs: ClassValue[]) {
 
 export type OS = "macos" | "ios" | "windows" | "android" | "linux" | null;
 
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
 export function getOS() {
   if (typeof window === "undefined") return;
   const userAgent = window.navigator.userAgent.toLowerCase();