feat: Image uploading and gallery feature

instrumentation-client.ts

@@ -1,9 +1,9 @@
-import posthog from "posthog-js"
+import posthog from "posthog-js";
 
-posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-  api_host: "/ingest",
-  ui_host: "https://us.posthog.com",
-  defaults: '2025-05-24',
-  capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
-  debug: process.env.NODE_ENV === "development",
-});
+// posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+//   api_host: "/ingest",
+//   ui_host: "https://us.posthog.com",
+//   defaults: "2025-05-24",
+//   capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
+//   debug: process.env.NODE_ENV === "development",
+// });

next.config.ts

@@ -5,6 +5,15 @@ const nextConfig: NextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
+  images: {
+    remotePatterns: [
+      {
+        hostname: "api.post0.live",
+        protocol: "https",
+        pathname: "/**",
+      },
+    ],
+  },
   async rewrites() {
     return [
       {

package.json

@@ -57,6 +57,7 @@
     "posthog-node": "^5.8.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "sass": "^1.93.0",

src/app/inbox/page.tsx → src/app/alerts/page.tsx

@@ -4,21 +4,27 @@ import LoaderSection from "@/components/shared/loader-section";
 import NotificationList from "@/components/shared/notification-list";
 import { useInbox } from "@/hooks/data/use-inbox";
 
-export default function InboxPage() {
+export default function AlertsPage() {
   const { data, isPending, error } = useInbox();
-  console.log(data);
-
-  console.log("error", error);
 
   return (
     <div>
       <div className="container max-w-4xl px-4 py-8 mx-auto">
         <div className="mb-8">
-          <h1 className="mb-2 text-3xl font-bold text-foreground">Notifications</h1>
-          <p className="text-default-600">Stay updated with your scheduled posts and activities</p>
+          <h1 className="mb-2 text-3xl font-bold text-foreground">
+            Notifications
+          </h1>
+          <p className="text-default-600">
+            Stay updated with your scheduled posts and activities
+          </p>
         </div>
         {isPending && <LoaderSection />}
-        {data && <NotificationList notifications={data?.notifications} showDividers={false} />}
+        {data && (
+          <NotificationList
+            notifications={data?.notifications}
+            showDividers={false}
+          />
+        )}
       </div>
     </div>
   );

src/app/gallery/page.tsx

@@ -1,22 +1,198 @@
 "use client";
 
+import React, { useState, useEffect } from "react";
+import { Pagination } from "@heroui/pagination";
+import { Chip } from "@heroui/chip";
+import { Select, SelectItem } from "@heroui/select";
+import { Input } from "@heroui/input";
+
+import { Card, CardBody } from "@heroui/card";
+import { Search, Filter } from "lucide-react";
+import { AssetType } from "@/types/asset";
+import FileUploadZone from "@/components/gallery/FileUploadZone";
+import AssetGrid from "@/components/gallery/AssetGrid";
+import GallerySkeleton from "@/components/gallery/GallerySkeleton";
+import AssetEditModal from "@/components/gallery/AssetEditModal";
+import { Asset, useGalleryAssets } from "@/hooks/data/use-assets";
+
 export default function GalleryPage() {
+  const [page, setPage] = useState<number>(1);
+  const pageSize = 10;
+  const { data: paginationData, isLoading: galleryLoading } = useGalleryAssets(
+    "default",
+    {
+      page,
+      pageSize,
+    }
+  );
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedType, setSelectedType] = useState<string>("all");
+  const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+
+  const handleAssetEdit = (asset: Asset) => {
+    setEditingAsset(asset);
+    setIsEditModalOpen(true);
+  };
+
+  const handleEditModalClose = (open: boolean) => {
+    setIsEditModalOpen(open);
+    if (!open) {
+      setEditingAsset(null);
+    }
+  };
+
+  const assets = paginationData?.assets || [];
+
+  const filteredAssets = assets?.filter((asset) => {
+    const matchesSearch =
+      searchQuery === "" ||
+      asset.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      asset.description?.toLowerCase().includes(searchQuery.toLowerCase());
+
+    const matchesType = selectedType === "all" || asset.type === selectedType;
+
+    return matchesSearch && matchesType;
+  });
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  useEffect(() => {
+    setPage(1);
+  }, [searchQuery, selectedType]);
+
   return (
     <div>
-      <div className="container max-w-4xl px-4 py-8 mx-auto">
-        <div className="mb-8">
-          <h1 className="mb-2 text-3xl font-bold text-foreground">Gallery</h1>
-          <p className="text-default-600">
-            Manage and view your media assets in one place
+      <div className="container max-w-7xl px-4 py-6 mx-auto">
+        <div className="mb-6">
+          <h1 className="mb-1 text-2xl font-bold text-foreground">Gallery</h1>
+          <p className="text-sm text-default-600">
+            Manage and view your media assets
           </p>
         </div>
 
-        <div className="p-4 flex items-center justify-center">
-          <p className="text-default-800 break-words">
-            Gallery functionality is coming soon! In the meantime, you can use
-            unsplash.
-          </p>
+        <Card shadow="none" className="mb-6">
+          <CardBody className="p-0">
+            <FileUploadZone
+              maxFileSize={50} // 50MB
+              disabled={false}
+              variant="compact"
+            />
+          </CardBody>
+        </Card>
+
+        {galleryLoading && <GallerySkeleton />}
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row gap-3 mb-3">
+            <Input
+              placeholder="Search assets..."
+              startContent={<Search className="w-4 h-4 text-default-400" />}
+              value={searchQuery}
+              onValueChange={setSearchQuery}
+              className="flex-1"
+              size="sm"
+            />
+
+            <Select
+              placeholder="Filter by type"
+              selectedKeys={[selectedType]}
+              onSelectionChange={(keys) =>
+                setSelectedType(Array.from(keys)[0] as string)
+              }
+              className="w-full sm:w-40"
+              size="sm"
+              startContent={<Filter className="w-4 h-4" />}
+            >
+              <SelectItem key="all">All Types</SelectItem>
+              <SelectItem key={AssetType.IMAGE}>Images</SelectItem>
+              <SelectItem key={AssetType.VIDEO}>Videos</SelectItem>
+            </Select>
+          </div>
+
+          {(searchQuery || selectedType !== "all") && (
+            <div className="flex items-center space-x-2">
+              {searchQuery && (
+                <Chip
+                  color="primary"
+                  variant="flat"
+                  onClose={() => setSearchQuery("")}
+                  size="sm"
+                >
+                  Search: {searchQuery}
+                </Chip>
+              )}
+              {selectedType !== "all" && (
+                <Chip
+                  color="secondary"
+                  variant="flat"
+                  onClose={() => setSelectedType("all")}
+                  size="sm"
+                >
+                  Type: {selectedType}
+                </Chip>
+              )}
+            </div>
+          )}
         </div>
+
+        <AssetGrid
+          assets={filteredAssets || []}
+          onAssetEdit={handleAssetEdit}
+          loading={galleryLoading}
+          emptyMessage={
+            searchQuery || selectedType !== "all"
+              ? "No assets match your current filters. Try adjusting your search criteria."
+              : "No assets found. Upload some files to get started!"
+          }
+          columns={{
+            sm: 1,
+            md: 2,
+            lg: 3,
+            xl: 4,
+          }}
+        />
+
+        {/* Pagination Controls */}
+        {paginationData &&
+          paginationData.totalPages > 1 &&
+          !searchQuery &&
+          selectedType === "all" && (
+            <div className="flex justify-center mt-8">
+              <Pagination
+                total={paginationData.totalPages}
+                page={page}
+                onChange={handlePageChange}
+                showControls
+                showShadow
+                color="primary"
+              />
+            </div>
+          )}
+
+        {/* Results Info */}
+        {paginationData && (
+          <div className="mt-4 text-center text-sm text-default-600">
+            {searchQuery || selectedType !== "all" ? (
+              <p>Showing {filteredAssets.length} filtered results</p>
+            ) : (
+              <p>
+                Showing {(page - 1) * pageSize + 1}-
+                {Math.min(page * pageSize, paginationData.totalCount)} of{" "}
+                {paginationData.totalCount} assets
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Asset Edit Modal */}
+        <AssetEditModal
+          isOpen={isEditModalOpen}
+          onOpenChange={handleEditModalClose}
+          asset={editingAsset}
+        />
       </div>
     </div>
   );