+
+ Bibliotheca
+
+
+ powered by Alexandria
+
+
+
+ );
+}
+
+export default Logo;
diff --git a/src/alex_frontend/bibliotheca/src/components/Tabs.tsx b/src/alex_frontend/bibliotheca/src/components/Tabs.tsx
new file mode 100644
index 000000000..9bc2b8a71
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/components/Tabs.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Link } from "@tanstack/react-router";
+
+export default function Tabs() {
+ return (
+
+
+ Browse
+
+
+
+ Upload
+
+
+
+ Library
+
+
+ Shop
+
+
+ );
+}
diff --git a/src/alex_frontend/bibliotheca/src/layout/BaseLayout.tsx b/src/alex_frontend/bibliotheca/src/layout/BaseLayout.tsx
new file mode 100644
index 000000000..d1c212a00
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/layout/BaseLayout.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Outlet } from "@tanstack/react-router";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+
+import { Toaster } from "@/lib/components/sonner";
+import { useRiskWarning } from "@/hooks/useRiskWarning";
+import RiskWarningModal from "@/components/RiskWarningModal";
+
+import Header from "./Header";
+
+const BaseLayout = () => {
+ const { showRiskWarning, handleCloseRiskWarning } = useRiskWarning();
+
+ return (
+
+ {showRiskWarning && (
+
+
+
+
+ );
+};
+
+export default BaseLayout;
diff --git a/src/alex_frontend/bibliotheca/src/layout/Header.tsx b/src/alex_frontend/bibliotheca/src/layout/Header.tsx
new file mode 100644
index 000000000..2bc3536ce
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/layout/Header.tsx
@@ -0,0 +1,85 @@
+import React, { Suspense } from "react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import Logo from "./../components/Logo";
+import Tabs from "./../components/Tabs";
+import { useIdentity } from "@/lib/ic-use-identity";
+import Login from "@/features/login";
+import Processing from "@/components/Processing";
+import { useUser } from "@/hooks/actors";
+
+import { lazy } from "react";
+import { ModeToggle } from "@/lib/components/mode-toggle";
+
+const InlineSignup = lazy(() =>
+ import("@/features/signup").then((module) => ({
+ default: module.InlineSignup,
+ }))
+);
+
+const Auth = lazy(() => import("@/features/auth"));
+
+const AccountButton = lazy(() =>
+ import("@/features/account").then((module) => ({
+ default: module.AccountButton,
+ }))
+);
+
+export const Entry = () => {
+ const { actor } = useUser();
+ const { identity } = useIdentity();
+ const { user } = useAppSelector((state) => state.auth);
+ const { loading } = useAppSelector((state) => state.login);
+
+ // Then check if we have an identity
+ if (!identity) return
+
+ }
+ >
+
+
+ );
+}
+
+export default Header;
diff --git a/src/alex_frontend/bibliotheca/src/pages/BrowsePage.tsx b/src/alex_frontend/bibliotheca/src/pages/BrowsePage.tsx
new file mode 100644
index 000000000..0dde79a93
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/BrowsePage.tsx
@@ -0,0 +1,244 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/lib/components/button";
+import {
+ Database,
+ Globe,
+ ArrowDown,
+ BookOpen,
+ Coins,
+ AlertCircle,
+ Loader2,
+} from "lucide-react";
+import { BookCard } from "@/features/bibliotheca/components/BookCard";
+import { BookModal } from "@/features/bibliotheca/components/BookModal";
+import { MintButton } from "@/features/bibliotheca/components/MintButton";
+import { useArweaveBooks } from "@/features/bibliotheca/hooks/useArweaveBooks";
+import { fetchBooks } from "@/features/bibliotheca/browse/thunks/fetchBooks";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { ArweaveBook, Book } from "@/features/bibliotheca/types";
+import { AudioBook } from "@/features/bibliotheca/components/AudioBook";
+
+const BrowsePage: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const { books, loading, error, hasNext, loadMore, isEmpty } =
+ useArweaveBooks();
+ const [modalBookUrl, setModalBookUrl] = useState
+
+
+
+
+
+
+
+
+ {/* Left Sidebar */}
+
+ );
+};
+
+export default BrowsePage;
diff --git a/src/alex_frontend/bibliotheca/src/pages/HomePage.tsx b/src/alex_frontend/bibliotheca/src/pages/HomePage.tsx
new file mode 100644
index 000000000..ee35443a9
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/HomePage.tsx
@@ -0,0 +1,452 @@
+import React from "react";
+import { Link } from "@tanstack/react-router";
+import { Button } from "@/lib/components/button";
+import {
+ BookOpen,
+ Library,
+ Coins,
+ Store,
+ Upload,
+ Download,
+ Archive,
+ TrendingUp,
+ Shield,
+ Globe,
+ ArrowRight,
+ Sparkles,
+ Users,
+ Zap,
+ Heart,
+ Star,
+ FileText,
+ BookMarked,
+ Bookmark,
+} from "lucide-react";
+
+const HomePage: React.FC = () => {
+ return (
+
+
+
+ {/* Book Grid */}
+
+
+
+
+
+
+
+ From Arweave
++ Book files from the permanent web, ready to discover + and mint. +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Load More */}
+ {hasNext && (
+
+ )}
+
+
+
+
+ Create NFTs
++ Transform any audio into a tradeable NFT on + Alexandria. +
+
+
+
+
+ + Quick steps: +
+-
+
- • Click mint icon on any book +
- • Confirm the transaction +
- • Own the NFT permanently +
+
+ + {loading && books.length === 0 ? ( + "Loading files..." + ) : ( + <> + + {books.length} + {" "} + files available + + )} +
+
+ {error && (
+
+
+ {/* Book Modal */}
+
+
+ )}
+
+ {loading && books.length === 0 && (
+
+
+ )}
+
+ {isEmpty && !loading && (
+
+
+ )}
+
+ {books.length > 0 && (
+ + No book files found +
++ Try refreshing the page +
+
+ {books.map((arweaveBook) => {
+ const bookItem = convertToBook(arweaveBook);
+ // Format size better
+ bookItem.size = formatFileSize(bookItem.size);
+
+ return (
+ handleBookClick(bookItem)}
+ actions={
+ <>
+
+ )}
+
+ {/* Hero Section */}
+
+
+
+ {/* How It Works */}
+
+
+
+ {/* Features & Benefits */}
+
+
+
+ {/* Quick Access */}
+
+
+
+ {/* Final CTA */}
+
+
+
+ );
+};
+
+export default HomePage;
diff --git a/src/alex_frontend/bibliotheca/src/pages/LibraryPage.tsx b/src/alex_frontend/bibliotheca/src/pages/LibraryPage.tsx
new file mode 100644
index 000000000..0e6188471
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/LibraryPage.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/lib/components/button";
+import { Link } from "@tanstack/react-router";
+import {
+ Archive,
+ User,
+ FileAudio,
+ Download,
+ ArrowDown,
+ LoaderPinwheel,
+} from "lucide-react";
+import { BookCard } from "@/features/bibliotheca/components/BookCard";
+import { BookModal } from "@/features/bibliotheca/components/BookModal";
+import { SellButton } from "@/features/bibliotheca/components/SellButton";
+import { useUserBookNFTs } from "@/features/bibliotheca/hooks/useUserBookNFTs";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { Book } from "@/features/bibliotheca/types";
+
+const BibliothecaLibraryPage: React.FC = () => {
+ const { user } = useAppSelector((state) => state.auth);
+ const { books, loading, loadingMore, error, pagination, refreshBookNFTs } =
+ useUserBookNFTs();
+ const [modalBookUrl, setModalBookUrl] = useState
+
+
+
+
+ {/* CTA Buttons */}
+
+
+ + Bibliotheca +
++ Part of the Alexandria ecosystem - discover books + and ePub content from Arweave, create your own + digital library, and mint them as NFTs on LBRY. +
++ Transform literary content from the permanent web + into tradeable digital assets. +
+
+
+
+
+
+
+
+
+
+ {/* What You Can Do */}
+
+
+
+
+
+
+
+ + Discover from Arweave +
++ Browse books and ePub content stored + permanently on the Arweave network and mint + them as NFTs +
+
+
+
+
+ + Upload & Create +
++ Upload your ePub files, PDFs, or create new + literary content to mint as book NFTs +
+
+
+
+ + Trade on LBRY +
++ Buy and sell book NFTs in the Alexandria + marketplace using LBRY tokens +
+
+
+
+
+
+ + How Bibliotheca Works +
++ Powered by Alexandria's infrastructure - connecting + Arweave's permanent storage with LBRY's marketplace + for digital literature. +
+
+ {/* Discover */}
+
+
+ {/* Process Flow */}
+
+
+
+ {/* Create or Mint */}
+
+
+ + 1. Discover +
++ Browse literary content from Arweave's permanent + web. Find books, ePubs, and documents that have + been stored forever on the decentralized + network. +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Trade on Alexandria */}
+
+
+ + 2. Upload or Mint +
++ Upload your own ePub files, PDFs, or documents + to create original book NFTs. You can also mint + discovered Arweave books as NFTs for your + collection. +
+
+
+
+
+
+
+
+
+
+
+
+
+ + 3. Trade on Alexandria +
++ List your book NFTs on the Alexandria + marketplace and trade with LBRY tokens. Connect + with readers and collectors in the ecosystem. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Why Choose Bibliotheca +
++ Built on Alexandria's proven infrastructure, + connecting the permanent web with decentralized + literary commerce. +
+
+
+
+
+
+ + Arweave Integration +
++ Access literary content stored permanently on + Arweave. Discover and mint book transactions + that will never disappear from the web. +
+
+
+
+ + Book Publishing +
++ Upload ePub files, PDFs, and documents. Create + your digital library and turn literary works + into valuable NFTs. +
+
+
+
+ + LBRY Marketplace +
++ Trade book NFTs using LBRY tokens in the + Alexandria ecosystem. Connect with a community + of readers and authors. +
+
+
+ + Permanent Ownership +
++ True ownership through blockchain technology. + Your literary NFTs are yours forever, stored on + immutable networks. +
+
+
+
+
+
+ + Ready to Get Started? +
++ Choose your path and start your digital library + journey today +
+
+
+
+
+
+
+
+
+ + Browse +
++ Discover books and literature from Arweave + network +
+
+ Explore Now →
+
+
+
+
+
+
+ + Upload +
++ Upload ePub files and documents to mint as + NFTs +
+
+ Upload Files →
+
+
+
+
+
+
+ + Library +
++ Manage your personal book NFT collection +
+
+ View Library →
+
+
+
+
+
+
+ + Shelf +
++ Manage your listings and trading activity +
+
+ Open Shelf →
+
+
+
+
+
+
+ + Marketplace +
++ Buy and sell book NFTs with LBRY tokens +
+
+ Visit Market →
+
+
+
+
+ + Reader +
++ Read your books with our integrated ePub + reader +
+
+ Start Reading →
+
+
+
+ + Join the Alexandria Ecosystem +
++ Be part of Alexandria's vision for decentralized + literature. Discover books from the permanent web, + create your digital library, and trade in a truly + decentralized marketplace. +
+
+
+
+
+
+
+
+
+
+ {/* Left Sidebar */}
+
+ );
+};
+
+export default BibliothecaLibraryPage;
diff --git a/src/alex_frontend/bibliotheca/src/pages/MarketPage.tsx b/src/alex_frontend/bibliotheca/src/pages/MarketPage.tsx
new file mode 100644
index 000000000..37782ae8c
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/MarketPage.tsx
@@ -0,0 +1,229 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/lib/components/button";
+import { Link } from "@tanstack/react-router";
+import {
+ Store,
+ TrendingUp,
+ Search,
+ Filter,
+ ArrowDown,
+ FileAudio,
+ LoaderPinwheel,
+} from "lucide-react";
+import { BookCard } from "@/features/bibliotheca/components/BookCard";
+import { BookModal } from "@/features/bibliotheca/components/BookModal";
+import { BuyButton } from "@/features/bibliotheca/components/BuyButton";
+import { useMarketBookNFTs } from "@/features/bibliotheca/hooks/useMarketBookNFTs";
+import { MarketBook } from "@/features/bibliotheca/types";
+
+const BibliothecaMarketPage: React.FC = () => {
+ const {
+ books,
+ loading,
+ loadingMore,
+ error,
+ pagination,
+ refreshMarketBookNFTs,
+ } = useMarketBookNFTs();
+ const [modalBookUrl, setModalBookUrl] = useState
+
+
+ {/* Book Grid */}
+
+
+
+
+
+
+
+
+
+
+ + Your Collection +
++ Your personal book NFT collection and uploaded + content. +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Load More */}
+ {pagination.hasMore && (
+
+ )}
+
+
+
+
+ Manage Content
++ Download, share, or list your book NFTs for sale. +
+
+
+
+
+ + Available actions: +
+-
+
- • Download original files +
- • Share with others +
- • List on marketplace +
+
+ + + {books.length} + {" "} + of{" "} + + {pagination.totalCount} + {" "} + items +
+ + → View your listed books + +
+ {loading ? (
+
+
+ {/* Book Modal */}
+
+
+ ) : error ? (
+
+
+ + Loading your book NFTs... +
++ This may take a few moments +
+
+
+ ) : books.length === 0 ? (
+
+
+ + Error loading NFTs +
++ {error} +
+ +
+
+ ) : (
+
+
+ + No Book NFTs Found +
++ You haven't minted any book NFTs yet. +
+
+ {books.map((item) => (
+ handleBookClick(item)}
+ actions={
+
+ )}
+
+ {/* Left Sidebar */}
+
+ );
+};
+
+export default BibliothecaMarketPage;
diff --git a/src/alex_frontend/bibliotheca/src/pages/ShelfPage.tsx b/src/alex_frontend/bibliotheca/src/pages/ShelfPage.tsx
new file mode 100644
index 000000000..5887059d2
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/ShelfPage.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from "react";
+import { Button } from "@/lib/components/button";
+import {
+ Palette,
+ Settings,
+ TrendingUp,
+ BarChart3,
+ ArrowDown,
+ FileAudio,
+ LoaderPinwheel,
+} from "lucide-react";
+import { BookCard } from "@/features/bibliotheca/components/BookCard";
+import { BookModal } from "@/features/bibliotheca/components/BookModal";
+import { EditButton } from "@/features/bibliotheca/components/EditButton";
+import { UnlistButton } from "@/features/bibliotheca/components/UnlistButton";
+import { useShelfBookNFTs } from "@/features/bibliotheca/hooks/useShelfBookNFTs";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { ShelfBook } from "@/features/bibliotheca/types";
+
+const BibliothecaShelfPage: React.FC = () => {
+ const { user } = useAppSelector((state) => state.auth);
+ const {
+ books,
+ loading,
+ loadingMore,
+ error,
+ pagination,
+ refreshShelfBookNFTs,
+ } = useShelfBookNFTs();
+ const [modalBookUrl, setModalBookUrl] = useState
+
+
+ {/* Book Grid */}
+
+
+
+
+
+
+
+ Marketplace
++ Discover and purchase book NFTs from creators + worldwide. +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Load More */}
+ {pagination.page < pagination.totalPages && (
+
+ )}
+
+
+
+
+ Buy & Own
++ Purchase book NFTs with ALEX or LBRY tokens and own + them forever. +
+
+
+
+
+ + How it works: +
+-
+
- • Preview before buying +
- • Secure blockchain purchase +
- • Instant ownership transfer +
+
+ + + {books.length} + {" "} + of{" "} + + {pagination.totalCount} + {" "} + items shown +
+ + → Manage your listings + +
+ {loading ? (
+
+
+ {/* Book Modal */}
+
+
+ ) : error ? (
+
+
+ + Loading marketplace book NFTs... +
+
+
+ ) : books.length === 0 ? (
+
+
+ + Error loading marketplace +
++ {error} +
+ +
+
+ ) : (
+
+
+ + No Items for Sale +
++ There are currently no book NFTs listed in the + marketplace. +
+
+ {books.map((book) => (
+ handleBookClick(book)}
+ actions={
+
+ )}
+
+ {/* Left Sidebar */}
+
+ );
+};
+
+export default BibliothecaShelfPage;
diff --git a/src/alex_frontend/bibliotheca/src/pages/UploadPage.tsx b/src/alex_frontend/bibliotheca/src/pages/UploadPage.tsx
new file mode 100644
index 000000000..2d590ac92
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/pages/UploadPage.tsx
@@ -0,0 +1,266 @@
+import React, { useState, useRef } from "react";
+import { Button } from "@/lib/components/button";
+import { Upload, Mic, X, LoaderPinwheel } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { useAppDispatch } from "@/store/hooks/useAppDispatch";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import {
+ setUploadPreview,
+ clearUploadPreview,
+} from "@/features/bibliotheca/bibliothecaSlice";
+import { Book } from "@/features/bibliotheca/types";
+import { BookCard } from "@/features/bibliotheca/components/BookCard";
+import { BookModal } from "@/features/bibliotheca/components/BookModal";
+import { useUploadAndMint } from "@/features/pinax/hooks/useUploadAndMint";
+import { AudioBook } from "@/features/bibliotheca/components/AudioBook";
+
+const BibliothecaUploadPage: React.FC = () => {
+ const [selectedFile, setSelectedFile] = useState
+
+
+ {/* Book Grid */}
+
+
+
+
+
+
+
+ Creator Studio
++ Manage your listed book NFTs and marketplace + presence. +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Load More */}
+ {pagination.page < pagination.totalPages && (
+
+ )}
+
+
+
+
+ Manage Listings
++ Edit metadata, pricing, and availability of your + book NFTs. +
+
+
+
+
+ + Available actions: +
+-
+
- • Edit titles and descriptions +
- • Update pricing +
- • Remove from marketplace +
+
+ + + {books.length} + {" "} + of{" "} + + {pagination.totalCount} + {" "} + listings shown +
+
+ {loading ? (
+
+
+ {/* Book Modal */}
+
+
+ ) : error ? (
+
+
+ + Loading your listed book NFTs... +
+
+
+ ) : books.length === 0 ? (
+
+
+ + Error loading listed book NFTs +
++ {error} +
+ +
+
+ ) : (
+
+
+ + No Active Listings +
++ You don't have any book NFTs listed for sale + yet. +
+
+ {books.map((item) => (
+ handleBookClick(item)}
+ actions={
+ <>
+
+ )}
+
+
+ );
+};
+
+export default BibliothecaUploadPage;
diff --git a/src/alex_frontend/bibliotheca/src/routes/__root.tsx b/src/alex_frontend/bibliotheca/src/routes/__root.tsx
new file mode 100644
index 000000000..e72ead57e
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/__root.tsx
@@ -0,0 +1,10 @@
+import { createRootRoute } from "@tanstack/react-router";
+import BaseLayout from "./../layout/BaseLayout";
+import RouteFallback from "@/components/fallbacks/RouteFallback";
+import NotFoundPage from "@/pages/NotFoundPage";
+
+export const Route = createRootRoute({
+ component: BaseLayout,
+ errorComponent: RouteFallback,
+ notFoundComponent: NotFoundPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.lazy.tsx
new file mode 100644
index 000000000..60f0bc179
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaLibraryPage from "./../../pages/LibraryPage";
+
+export const Route = createLazyFileRoute("/_auth/archive/$principal")({
+ component: BibliothecaLibraryPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.tsx
new file mode 100644
index 000000000..38b10bf04
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/archive.$principal.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/archive/$principal")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/browse.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/browse.lazy.tsx
new file mode 100644
index 000000000..8089b7611
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/browse.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BrowsePage from "./../../pages/BrowsePage";
+
+export const Route = createLazyFileRoute("/_auth/browse")({
+ component: BrowsePage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/browse.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/browse.tsx
new file mode 100644
index 000000000..d171bb90f
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/browse.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/browse")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/library.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/library.lazy.tsx
new file mode 100644
index 000000000..145554efe
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/library.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaLibraryPage from "./../../pages/LibraryPage";
+
+export const Route = createLazyFileRoute("/_auth/library")({
+ component: BibliothecaLibraryPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/library.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/library.tsx
new file mode 100644
index 000000000..e2e5b346e
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/library.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/library")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/market.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/market.lazy.tsx
new file mode 100644
index 000000000..c8840f4bd
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/market.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaMarketPage from "./../../pages/MarketPage";
+
+export const Route = createLazyFileRoute("/_auth/market")({
+ component: BibliothecaMarketPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/market.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/market.tsx
new file mode 100644
index 000000000..19cbe869a
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/market.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/market")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/route.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/route.lazy.tsx
new file mode 100644
index 000000000..0468f104c
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/route.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import AuthGuard from "@/guards/AuthGuard";
+
+export const Route = createLazyFileRoute("/_auth")({
+ component: AuthGuard,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.lazy.tsx
new file mode 100644
index 000000000..fa237d38f
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaShelfPage from "./../../pages/ShelfPage";
+
+export const Route = createLazyFileRoute("/_auth/shelf")({
+ component: BibliothecaShelfPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.tsx
new file mode 100644
index 000000000..251067eb8
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/shelf.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/shelf")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.lazy.tsx
new file mode 100644
index 000000000..acf587dd0
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaShelfPage from "./../../pages/ShelfPage";
+
+export const Route = createLazyFileRoute("/_auth/studio/$principal")({
+ component: BibliothecaShelfPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.tsx
new file mode 100644
index 000000000..7076a60c0
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/studio.$principal.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/studio/$principal")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/upload.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/upload.lazy.tsx
new file mode 100644
index 000000000..6a21b1812
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/upload.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import BibliothecaUploadPage from "./../../pages/UploadPage";
+
+export const Route = createLazyFileRoute("/_auth/upload")({
+ component: BibliothecaUploadPage,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/_auth/upload.tsx b/src/alex_frontend/bibliotheca/src/routes/_auth/upload.tsx
new file mode 100644
index 000000000..f80bdaa14
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/_auth/upload.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/_auth/upload")({
+ loader: () => void 0,
+});
diff --git a/src/alex_frontend/bibliotheca/src/routes/index.lazy.tsx b/src/alex_frontend/bibliotheca/src/routes/index.lazy.tsx
new file mode 100644
index 000000000..395a90564
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/src/routes/index.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from "@tanstack/react-router";
+import HomePage from "./../pages/HomePage";
+
+export const Route = createLazyFileRoute("/")({
+ component: HomePage,
+});
diff --git a/src/alex_frontend/src/routes/index.tsx b/src/alex_frontend/bibliotheca/src/routes/index.tsx
similarity index 100%
rename from src/alex_frontend/src/routes/index.tsx
rename to src/alex_frontend/bibliotheca/src/routes/index.tsx
diff --git a/src/alex_frontend/bibliotheca/tailwind.config.js b/src/alex_frontend/bibliotheca/tailwind.config.js
new file mode 100644
index 000000000..687050d6a
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/tailwind.config.js
@@ -0,0 +1,194 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./index.tsx",
+ "./public/**/*.html",
+ "./src/**/*.{ts,tsx,js,jsx,html}",
+ "../core/**/*.{ts,tsx,js,jsx}"
+ ],
+ darkMode: ["class"],
+ theme: {
+ container: {
+ center: true,
+ padding: '2rem',
+ screens: {
+ '2xl': '1400px'
+ }
+ },
+ extend: {
+ fontFamily: {
+ syne: [
+ 'Syne',
+ 'sans-serif'
+ ],
+ 'roboto-condensed': [
+ 'Roboto Condensed',
+ 'sans-serif'
+ ]
+ },
+ container: {
+ center: true,
+ padding: {
+ default: '1rem',
+ xs: '2rem',
+ sm: '2rem',
+ lg: '1rem'
+ },
+ screens: {
+ xs: '100%',
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ xxl: '1585px'
+ }
+ },
+ fontSize: {
+ tabsheading: '20px',
+ xxltabsheading: '32px',
+ xltabsheading: '30px',
+ lgtabsheading: '28px',
+ mdtabsheading: '25px',
+ smtabsheading: '22px',
+ swapheading: '22px',
+ xxlswapheading: '40px',
+ xlswapheading: '35px',
+ lgswapheading: '30px',
+ mdswapheading: '26px',
+ smswapheading: '24px'
+ },
+ colors: {
+ gray: {
+ 20: 'rgb(242, 242, 241)',
+ 30: 'rgb(254, 253, 251)',
+ 50: 'rgb(253, 252, 249)',
+ 100: 'rgb(249, 247, 242)',
+ 200: 'rgb(240, 237, 229)',
+ 300: 'rgb(224, 220, 208)',
+ 400: 'rgb(194, 189, 173)',
+ 500: 'rgb(161, 155, 136)',
+ 600: 'rgb(127, 121, 104)',
+ 700: 'rgb(96, 92, 79)',
+ 800: 'rgb(66, 64, 58)',
+ 850: 'rgb(60, 58, 53)',
+ 900: 'rgb(53, 52, 48)',
+ },
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))'
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))'
+ },
+ info: {
+ DEFAULT: 'hsl(var(--info))',
+ foreground: 'hsl(var(--info-foreground))'
+ },
+ warning: {
+ DEFAULT: 'hsl(var(--warning))',
+ foreground: 'hsl(var(--warning-foreground))'
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))'
+ },
+ constructive: {
+ DEFAULT: 'hsl(var(--constructive))',
+ foreground: 'hsl(var(--constructive-foreground))'
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))'
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))'
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))'
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))'
+ },
+ multycolor: '#FF9900',
+ brightyellow: '#F6F930',
+ multygray: '#808080',
+ lightgray: '#CCCCCC',
+ radiocolor: '#353535',
+ swapinput: '#32524D',
+ swaptext: '#5C5C5C',
+ swapvalue: '#31524E',
+ darkgray: '#525252',
+ white: '#FFFFFF',
+ black: '#000000',
+ transparent: 'transparent',
+ current: 'currentColor',
+ },
+ backgroundColor: {
+ balancebox: '#3A3630',
+ sendbtnbg: '#FF3737',
+ mintbtnbg: '#92FF71',
+ receive: '#92FF71'
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ borderbox: '44px',
+ bordertb: '20px'
+ },
+ height: {
+ circleheight: '32px',
+ inputbox: '66px'
+ },
+ width: {
+ circlewidth: '32px'
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: {
+ height: '0'
+ },
+ to: {
+ height: 'var(--radix-accordion-content-height)'
+ }
+ },
+ 'accordion-up': {
+ from: {
+ height: 'var(--radix-accordion-content-height)'
+ },
+ to: {
+ height: '0'
+ }
+ }
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out'
+ },
+ backgroundImage: {},
+ screens: {
+ xs: '280px'
+ }
+ }
+ },
+ variants: {
+ extend: {
+ opacity: ["disabled"],
+ cursor: ["disabled"],
+ pointerEvents: ["disabled"],
+ },
+ },
+ plugins: [
+ require("tailwindcss-animate"),
+ require('tailwind-scrollbar'),
+ ],
+};
\ No newline at end of file
diff --git a/src/alex_frontend/src/styles/tailwind.css b/src/alex_frontend/bibliotheca/tailwind.css
similarity index 100%
rename from src/alex_frontend/src/styles/tailwind.css
rename to src/alex_frontend/bibliotheca/tailwind.css
diff --git a/src/alex_frontend/bibliotheca/tsconfig.json b/src/alex_frontend/bibliotheca/tsconfig.json
new file mode 100644
index 000000000..9d02d56f8
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "extends": "../../../tsconfig.json",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["../core/*"]
+ }
+ },
+ "include": ["src/**/*", "routeTree.gen.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/src/alex_frontend/src/vite-env.d.ts b/src/alex_frontend/bibliotheca/vite-env.d.ts
similarity index 100%
rename from src/alex_frontend/src/vite-env.d.ts
rename to src/alex_frontend/bibliotheca/vite-env.d.ts
diff --git a/src/alex_frontend/bibliotheca/webpack.config.js b/src/alex_frontend/bibliotheca/webpack.config.js
new file mode 100644
index 000000000..0f163d480
--- /dev/null
+++ b/src/alex_frontend/bibliotheca/webpack.config.js
@@ -0,0 +1,342 @@
+const path = require("path");
+require("dotenv").config({ path: path.resolve(__dirname, '../../../.env') });
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { TanStackRouterWebpack } = require('@tanstack/router-plugin/webpack')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
+
+const isDevelopment = process.env.NODE_ENV !== "production";
+// Load the appropriate .env file based on NODE_ENV
+if (process.env.NODE_ENV === 'production') {
+ require("dotenv").config({ path: path.resolve(__dirname, '../../../.env.production') });
+}
+const publicUrl = process.env.PUBLIC_URL || '';
+
+const frontend_entry = path.join("public", "index.html");
+
+module.exports = {
+ target: "web",
+ mode: isDevelopment ? "development" : "production",
+ entry: {
+ index: path.join(__dirname, "index.tsx"),
+ },
+ devtool: isDevelopment ? "source-map" : false,
+ optimization: {
+ minimize: !isDevelopment,
+ minimizer: [new TerserPlugin({
+ terserOptions: {
+ compress: {
+ drop_console: false, // Keep console logs for debugging
+ },
+ },
+ })],
+ splitChunks: {
+ chunks: 'all',
+ maxInitialRequests: 6, // Allow more initial requests for better parallelization
+ maxAsyncRequests: 30, // Allow more async requests
+ minSize: 20000, // Slightly larger minimum size to prevent tiny chunks
+ maxSize: 244000, // Maximum size to prevent huge chunks
+ cacheGroups: {
+ // Critical path modules needed for initial render
+ critical: {
+ test: /[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|redux|react-redux|@reduxjs\/toolkit)[\\/]/,
+ name: 'critical',
+ chunks: 'initial', // Only include in initial chunks
+ priority: 60,
+ enforce: true,
+ },
+ // TensorFlow and related packages
+ tensorflow: {
+ test: /[\\/]node_modules[\\/](@tensorflow|tfjs-core|tfjs-backend-.*|tfjs-converter)[\\/]/,
+ name: 'tensorflow',
+ chunks: 'async', // Only load asynchronously
+ priority: 50,
+ enforce: true
+ },
+ // NSFWJS package
+ nsfwjs: {
+ test: /[\\/]node_modules[\\/]nsfwjs[\\/]/,
+ name: 'nsfwjs',
+ chunks: 'async', // Only load asynchronously
+ priority: 40,
+ enforce: true
+ },
+ // Common vendor modules
+ vendors: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all',
+ priority: 20,
+ reuseExistingChunk: true,
+ },
+ // Common application code
+ commons: {
+ name: 'commons',
+ minChunks: 2, // Used in at least 2 chunks
+ chunks: 'initial',
+ priority: 10,
+ reuseExistingChunk: true,
+ },
+ },
+ },
+ runtimeChunk: 'single',
+ },
+ resolve: {
+ extensions: [".js", ".ts", ".jsx", ".tsx"],
+ fallback: {
+ assert: require.resolve("assert/"),
+ buffer: require.resolve("buffer/"),
+ crypto: require.resolve("crypto-browserify"),
+ events: require.resolve("events/"),
+ fs: false,
+ http: require.resolve("stream-http"),
+ https: require.resolve("https-browserify"),
+ os: require.resolve("os-browserify"),
+ path: require.resolve("path-browserify"),
+ stream: require.resolve("stream-browserify"),
+ url: require.resolve("url"),
+ util: require.resolve("util/"),
+ vm: require.resolve("vm-browserify"),
+ zlib: require.resolve("browserify-zlib"),
+ },
+ alias: {
+ stream: "stream-browserify",
+ "@": path.resolve(__dirname, "../core"),
+ 'nsfwjs': path.resolve(__dirname, '../../../node_modules/nsfwjs'),
+ './model_imports/inception_v3': 'null-loader',
+ './model_imports/mobilenet_v2': 'null-loader',
+ './model_imports/mobilenet_v2_mid': 'null-loader'
+ },
+ },
+ output: {
+ // filename: "index.js",
+ // path: path.join(__dirname, "dist"),
+ filename: '[name].[contenthash].js',
+ chunkFilename: '[name].[contenthash].js',
+ path: path.join(__dirname, "dist"),
+ publicPath: publicUrl + '/',
+ },
+
+ module: {
+ rules: [
+ {
+ test: /\.(png|jpe?g|gif|svg)$/i,
+ type: 'asset/resource',
+ },
+ {
+ test: /\.(ts|tsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript'
+ ],
+ plugins: [
+ isDevelopment && require.resolve('react-refresh/babel')
+ ].filter(Boolean),
+ },
+ },
+ },
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: [
+ isDevelopment && require.resolve('react-refresh/babel')
+ ].filter(Boolean),
+ },
+ },
+ },
+ {
+ test: /\.css$/i,
+ use: ['style-loader', 'css-loader', 'postcss-loader'],
+ },
+ {
+ test: /\.svg$/,
+ use: ['@svgr/webpack'],
+ },
+ {
+ test: /\.wasm$/,
+ type: "webassembly/async",
+ },
+ {
+ test: /nsfwjs[\\/]dist[\\/]esm[\\/]models[\\/].*\.(js|json)$/,
+ use: 'null-loader',
+ },
+ {
+ test: /[\\/]node_modules[\\/](@tensorflow|tfjs-core|tfjs-backend-.*|tfjs-converter)[\\/]/,
+ sideEffects: true,
+ use: [
+ {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env'],
+ plugins: [
+ '@babel/plugin-transform-runtime',
+ '@babel/plugin-proposal-class-properties'
+ ]
+ }
+ }
+ ]
+ }
+ ],
+ },
+
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.join(__dirname, frontend_entry),
+ cache: false,
+ }),
+ new webpack.EnvironmentPlugin({
+ ...Object.keys(process.env).filter((key) => {
+ if (key.includes("CANISTER")) return true;
+ if (key.includes("DFX")) return true;
+ if (key.startsWith("ETH_")) return true;
+ if (key.startsWith("REACT_")) return true;
+ if (key === "PUBLIC_URL") return true;
+ return false;
+ }).reduce((env, key) => {
+ env[key] = process.env[key];
+ return env;
+ }, {}),
+ PUBLIC_URL: '' // Default value if not set
+ }),
+ new webpack.ProvidePlugin({
+ process: "process/browser.js",
+ Buffer: ["buffer", "Buffer"],
+ }),
+ new CopyPlugin({
+ patterns: [
+ // Explicitly copy files from the 'introduction' directory
+ {
+ from: path.resolve(__dirname, "public", "introduction", "index.html"),
+ to: path.resolve(__dirname, "dist", "introduction", "index.html"),
+ noErrorOnMissing: true,
+ transform(content, absoluteFrom) {
+ console.log(`[CopyPlugin Info] Processing for introduction: ${absoluteFrom}`);
+ return content;
+ },
+ },
+ {
+ from: path.resolve(__dirname, "public", "introduction", "styles.css"),
+ to: path.resolve(__dirname, "dist", "introduction", "styles.css"),
+ noErrorOnMissing: true,
+ },
+ {
+ from: path.resolve(__dirname, "public", "introduction", "particles.css"), // Assuming this is the correct name
+ to: path.resolve(__dirname, "dist", "introduction", "particles.css"),
+ noErrorOnMissing: true,
+ },
+ // Add any other specific files from 'introduction' directory here if needed
+
+ // Copy other assets from the main public directory
+ {
+ from: path.resolve(__dirname, "public"),
+ to: path.resolve(__dirname, "dist"),
+ globOptions: {
+ dot: true, // copy dotfiles like .well-known
+ ignore: [
+ // Ignore the root public/index.html (handled by HtmlWebpackPlugin)
+ path.resolve(__dirname, "public", "index.html"),
+ // Ignore the entire introduction directory (handled by specific copies above)
+ path.resolve(__dirname, "public", "introduction") + '/**',
+ ],
+ },
+ noErrorOnMissing: true,
+ },
+ ],
+ }),
+ new webpack.IgnorePlugin({
+ resourceRegExp: /^\.\/.*$/,
+ contextRegExp: /nsfwjs[\\/]dist[\\/]esm[\\/]models[\\/]models[\\/]model_imports[\\/]inception_v3$/,
+ }),
+ new webpack.IgnorePlugin({
+ resourceRegExp: /^\.\/locale$/,
+ contextRegExp: /moment$/,
+ }),
+ new webpack.DefinePlugin({
+ 'require("./model_imports/inception_v3")': '{}',
+ 'require("./model_imports/mobilenet_v2")': '{}',
+ 'require("./model_imports/mobilenet_v2_mid")': '{}'
+ }),
+ ...(isDevelopment ? [new ReactRefreshWebpackPlugin({ overlay: false })] : []),
+ TanStackRouterWebpack({
+ target: 'react',
+ autoCodeSplitting: true,
+ routesDirectory: path.join(__dirname, "src", "routes"),
+ generatedRouteTree: path.join(__dirname, "routeTree.gen.ts"),
+ }),
+ // new BundleAnalyzerPlugin({
+ // analyzerMode: 'server',
+ // analyzerHost: 'localhost',
+ // analyzerPort: 8888,
+ // openAnalyzer: true,
+ // generateStatsFile: true,
+ // statsFilename: path.join(__dirname, 'bundle-stats-minimal.json'),
+ // statsOptions: {
+ // all: false,
+ // assets: true,
+ // assetsSort: 'size',
+ // chunks: true,
+ // chunkModules: false,
+ // entrypoints: true,
+ // hash: true,
+ // modules: false,
+ // timings: true,
+ // errors: true,
+ // warnings: true,
+ // },
+ // }),
+ ],
+ devServer: {
+ historyApiFallback: true,
+ proxy: [
+ {
+ context: ["/api"],
+ target: "http://127.0.0.1:4943",
+ changeOrigin: true,
+ pathRewrite: { "^/api": "/api" },
+ },
+ ],
+ static: [
+ {
+ directory: path.resolve(__dirname, "public"),
+ publicPath: '/',
+ watch: true,
+ },
+ {
+ directory: path.resolve(__dirname, "dist"),
+ publicPath: '/',
+ watch: true,
+ }
+ ],
+ hot: true,
+ client: {
+ overlay: false,
+ },
+ watchFiles: [path.resolve(__dirname, "src")],
+ liveReload: false,
+ headers: {
+ "Access-Control-Allow-Origin": "*",
+ "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+ "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+ },
+ devMiddleware: {
+ publicPath: '/',
+ },
+ },
+ experiments: {
+ asyncWebAssembly: true,
+ },
+};
+
diff --git a/src/alex_frontend/src/apps/Modules/AppModules/blinks/SingleTokenView.tsx b/src/alex_frontend/core/apps/Modules/AppModules/blinks/SingleTokenView.tsx
similarity index 97%
rename from src/alex_frontend/src/apps/Modules/AppModules/blinks/SingleTokenView.tsx
rename to src/alex_frontend/core/apps/Modules/AppModules/blinks/SingleTokenView.tsx
index b5099e12b..5b6a24f5e 100644
--- a/src/alex_frontend/src/apps/Modules/AppModules/blinks/SingleTokenView.tsx
+++ b/src/alex_frontend/core/apps/Modules/AppModules/blinks/SingleTokenView.tsx
@@ -1,10 +1,10 @@
import React, { useState, useEffect } from 'react';
import { useParams } from '@tanstack/react-router';
import ContentRenderer from '../safeRender/ContentRenderer';
-import { ContentCard } from '@/apps/Modules/AppModules/contentGrid/Card';
-import { Dialog, DialogContent, DialogTitle } from '@/lib/components/dialog';
+import { ContentCard } from './../contentGrid/Card';
+import { Dialog, DialogContent, DialogTitle } from './../../../../lib/components/dialog';
import { useSelector, useDispatch } from 'react-redux';
-import { RootState, AppDispatch } from '@/store';
+import { RootState, AppDispatch } from './../../../../store';
import { toast } from "sonner";
// import { withdraw_nft } from "@/features/nft/withdraw"; // Keep commented if not used
import { Principal } from '@dfinity/principal';
@@ -16,9 +16,9 @@ import { fetchTransactionById } from '../../LibModules/arweaveSearch/api/directA
import { ContentService } from '../../LibModules/contentDisplay/services/contentService';
import { setContentData } from '../../shared/state/transactions/transactionSlice';
import { Transaction } from '../../shared/types/queries';
-import { Badge } from "@/lib/components/badge";
-import { Copy, Check, Link, X, Calendar, Info } from "lucide-react";
-import { copyToClipboard } from '@/apps/Modules/AppModules/contentGrid/utils/clipboard';
+import { Badge } from "./../../../../lib/components/badge";
+import { Copy, Check, Link, Calendar, Info } from "lucide-react";
+import { copyToClipboard } from './../contentGrid/utils/clipboard';
import { getNftOwnerInfo, UserInfo } from '../../shared/utils/nftOwner';
import { convertE8sToToken, formatPrincipal, formatBalance } from '../../shared/utils/tokenUtils';
import { createTokenAdapter, determineTokenType, TokenType } from '../../shared/adapters/TokenAdapter';
diff --git a/src/alex_frontend/core/apps/Modules/AppModules/contentGrid/Card.tsx b/src/alex_frontend/core/apps/Modules/AppModules/contentGrid/Card.tsx
new file mode 100644
index 000000000..101afa259
--- /dev/null
+++ b/src/alex_frontend/core/apps/Modules/AppModules/contentGrid/Card.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { Card, CardContent } from "../../../../lib/components/card";
+import { AspectRatio } from "../../../../lib/components/aspect-ratio";
+import { UnifiedCardActions } from "./../../shared/components/UnifiedCardActions/UnifiedCardActions";
+import { useContentCardState } from "./hooks/useContentCardState";
+
+interface ContentCardProps {
+ children: React.ReactNode;
+ onClick?: () => void;
+ id?: string; // Arweave ID or NFT Nat ID string
+ owner?: string; // Arweave owner string (kept for potential future use, but not displayed here)
+ predictions?: any;
+ footer?: React.ReactNode;
+ component?: string;
+ isFromAssetCanister?: boolean;
+ parentShelfId?: string;
+ itemId?: number;
+ currentShelfId?: string;
+ initialContentType?: 'Arweave' | 'Nft'; // Specifies the *context* this card is rendered in
+}
+
+export function ContentCard({
+ children,
+ onClick,
+ id, // Arweave ID or NFT Nat ID string
+ owner, // Keep owner prop, but don't use it directly here
+ predictions,
+ footer, // Keep footer prop
+ component,
+ isFromAssetCanister,
+ parentShelfId,
+ itemId,
+ currentShelfId,
+ initialContentType = 'Arweave' // Default to Arweave context
+}: ContentCardProps) {
+
+ // --- Use the Custom Hook ---
+ const {
+ finalContentId,
+ finalContentType,
+ isOwnedByUser,
+ ownerPrincipal,
+ isSafeForMinting
+ } = useContentCardState({ id, initialContentType, predictions });
+
+ // --- Rendering ---
+ return (
+ <>
+
+
+
+ {/* Book Modal */}
+
+
+
+ {/* File Upload Area */}
+ + Share your book content with the world +
+
+
+
+ {/* Book Preview */}
+ {selectedFile && uploadPreview && (
+
+
+
+
+
+
+
+
+ + {selectedFile + ? selectedFile.name + : "Drop your book file here"} +
++ or click to browse • EPUB files only +
+
+
+ )}
+
+ {/* Error and Success Messages */}
+ {error && (
+
+
+ + {bookUrl.startsWith("blob:") + ? "Preview" + : "Uploaded to Arweave"} +
+ +
+
+ )}
+
+ {success && (
+ {error}
+
+
+ )}
+
+ {/* Upload Button */}
+ {selectedFile && bookUrl.startsWith("blob:") && (
+ {success}
+
+
+
+ )}
+
+ {/* Children now include the hover overlay (TransactionDetails) internally */}
+ {children}
+
+ {/* UnifiedCardActions moved outside */}
+
+ {footer}
+
+ )}
+
+ {userAssetCanister === null ? (
+
+ );
+};
+
+export default AssetManager;
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/AttachedDetailsPanel/AttachedDetailsPanel.tsx b/src/alex_frontend/core/apps/Modules/shared/components/AttachedDetailsPanel/AttachedDetailsPanel.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/AttachedDetailsPanel/AttachedDetailsPanel.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/AttachedDetailsPanel/AttachedDetailsPanel.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/AttachedDetailsPanel/NftAppearsInList.tsx b/src/alex_frontend/core/apps/Modules/shared/components/AttachedDetailsPanel/NftAppearsInList.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/AttachedDetailsPanel/NftAppearsInList.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/AttachedDetailsPanel/NftAppearsInList.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/ContentTypeToggleGroup.tsx b/src/alex_frontend/core/apps/Modules/shared/components/ContentTypeToggleGroup.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/ContentTypeToggleGroup.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/ContentTypeToggleGroup.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/MainContentDisplayModal/MainContentDisplayModal.tsx b/src/alex_frontend/core/apps/Modules/shared/components/MainContentDisplayModal/MainContentDisplayModal.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/MainContentDisplayModal/MainContentDisplayModal.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/MainContentDisplayModal/MainContentDisplayModal.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/NftDisplay/NftDisplay.tsx b/src/alex_frontend/core/apps/Modules/shared/components/NftDisplay/NftDisplay.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/NftDisplay/NftDisplay.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/NftDisplay/NftDisplay.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/NftDisplay/types.ts b/src/alex_frontend/core/apps/Modules/shared/components/NftDisplay/types.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/NftDisplay/types.ts
rename to src/alex_frontend/core/apps/Modules/shared/components/NftDisplay/types.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/PrincipalDisplay.tsx b/src/alex_frontend/core/apps/Modules/shared/components/PrincipalDisplay.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/PrincipalDisplay.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/PrincipalDisplay.tsx
diff --git a/src/alex_frontend/core/apps/Modules/shared/components/SearchContainer.tsx b/src/alex_frontend/core/apps/Modules/shared/components/SearchContainer.tsx
new file mode 100644
index 000000000..3ea919704
--- /dev/null
+++ b/src/alex_frontend/core/apps/Modules/shared/components/SearchContainer.tsx
@@ -0,0 +1,186 @@
+import React, {
+ useState,
+ useEffect,
+ ReactNode,
+ useCallback,
+ useRef,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "@/store";
+import { wipe } from "@/apps/Modules/shared/state/wiper";
+import Grid, {
+ GridDataSource,
+} from "@/apps/Modules/AppModules/contentGrid/Grid";
+import {
+ PageContainer,
+ ControlsContainer,
+ FiltersButton,
+ SearchButton,
+ FiltersIcon,
+ SearchFormContainer,
+ Title,
+ Description,
+ Hint,
+} from "../../../Modules/shared/styles";
+import { ArrowUp, LoaderPinwheel, RotateCcw, RotateCw } from "lucide-react";
+import { Button } from "@/lib/components/button";
+
+interface SearchContainerProps {
+ title: string;
+ description?: string;
+ hint?: string;
+ onSearch: (continueFromTimestamp?: number) => Promise
+ Asset Canister
+
+
+ ) : (
+
+ Asset Canister
+
+ )}
+
+ {syncProgress?.currentItem !== "" && (
+ + + {assetManager.userAssetCanister} + +
+ +Cycles ≈ {assetManager.cycles}
+
+
+ )}
+ + Synced :{syncProgress.totalSynced} +
+ + {/* Current Item Being Processed */} +
+ {syncProgress.currentProgress === 100
+ ? "Upload Complete"
+ : `Uploading: ${syncProgress.currentItem}`}
+
+
+ {/* Current NFT Upload Progress Bar */}
+
+
+
+
+ {/* Total Synced Progress Bar */}
+
+ Total Synced: {syncProgress.totalSynced ?? 0}
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/TensorFlowPreloader.tsx b/src/alex_frontend/core/apps/Modules/shared/components/TensorFlowPreloader.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/TensorFlowPreloader.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/TensorFlowPreloader.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/components/UnifiedCardActions/UnifiedCardActions.tsx b/src/alex_frontend/core/apps/Modules/shared/components/UnifiedCardActions/UnifiedCardActions.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/components/UnifiedCardActions/UnifiedCardActions.tsx
rename to src/alex_frontend/core/apps/Modules/shared/components/UnifiedCardActions/UnifiedCardActions.tsx
diff --git a/src/alex_frontend/src/apps/Modules/shared/hooks/getNftData.ts b/src/alex_frontend/core/apps/Modules/shared/hooks/getNftData.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/hooks/getNftData.ts
rename to src/alex_frontend/core/apps/Modules/shared/hooks/getNftData.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/hooks/index.ts b/src/alex_frontend/core/apps/Modules/shared/hooks/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/hooks/index.ts
rename to src/alex_frontend/core/apps/Modules/shared/hooks/index.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/hooks/useNftAppearsIn.ts b/src/alex_frontend/core/apps/Modules/shared/hooks/useNftAppearsIn.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/hooks/useNftAppearsIn.ts
rename to src/alex_frontend/core/apps/Modules/shared/hooks/useNftAppearsIn.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/services/contentValidation.ts b/src/alex_frontend/core/apps/Modules/shared/services/contentValidation.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/services/contentValidation.ts
rename to src/alex_frontend/core/apps/Modules/shared/services/contentValidation.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/services/nsfwService.ts b/src/alex_frontend/core/apps/Modules/shared/services/nsfwService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/services/nsfwService.ts
rename to src/alex_frontend/core/apps/Modules/shared/services/nsfwService.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/services/nullTensorflow.ts b/src/alex_frontend/core/apps/Modules/shared/services/nullTensorflow.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/services/nullTensorflow.ts
rename to src/alex_frontend/core/apps/Modules/shared/services/nullTensorflow.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/services/tensorflowLoader.ts b/src/alex_frontend/core/apps/Modules/shared/services/tensorflowLoader.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/services/tensorflowLoader.ts
rename to src/alex_frontend/core/apps/Modules/shared/services/tensorflowLoader.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/services/transactionService.ts b/src/alex_frontend/core/apps/Modules/shared/services/transactionService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/services/transactionService.ts
rename to src/alex_frontend/core/apps/Modules/shared/services/transactionService.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/state/arweave/arweaveSlice.ts b/src/alex_frontend/core/apps/Modules/shared/state/arweave/arweaveSlice.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/state/arweave/arweaveSlice.ts
rename to src/alex_frontend/core/apps/Modules/shared/state/arweave/arweaveSlice.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/state/arweave/arweaveThunks.ts b/src/alex_frontend/core/apps/Modules/shared/state/arweave/arweaveThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/state/arweave/arweaveThunks.ts
rename to src/alex_frontend/core/apps/Modules/shared/state/arweave/arweaveThunks.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/state/assetManager/assetManagerSlice.ts b/src/alex_frontend/core/apps/Modules/shared/state/assetManager/assetManagerSlice.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/state/assetManager/assetManagerSlice.ts
rename to src/alex_frontend/core/apps/Modules/shared/state/assetManager/assetManagerSlice.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/state/assetManager/assetManagerThunks.ts b/src/alex_frontend/core/apps/Modules/shared/state/assetManager/assetManagerThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/Modules/shared/state/assetManager/assetManagerThunks.ts
rename to src/alex_frontend/core/apps/Modules/shared/state/assetManager/assetManagerThunks.ts
diff --git a/src/alex_frontend/src/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx b/src/alex_frontend/core/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx
similarity index 98%
rename from src/alex_frontend/src/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx
rename to src/alex_frontend/core/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx
index 99c5e8f6c..7566238c3 100644
--- a/src/alex_frontend/src/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx
+++ b/src/alex_frontend/core/apps/Modules/shared/state/assetManager/uploadToAssetCanister.tsx
@@ -95,7 +95,7 @@ async function retryOperation
+
+);
+
+// Display component for shelf content
+export const ShelfContentDisplay = ({
+ shelfId,
+ owner,
+ onClick,
+ parentShelfId,
+ itemId,
+ currentShelfId,
+}: ContentDisplayProps & { shelfId: string }) => (
+
+
+
+
+
+
+
+
+
+
+ Shelf
+
+
+ {shelfId}
+
+
+
+
+
+
+
+
+ {(["Markdown", "Nft", "Shelf"] as ContentType[]).map(
+ (contentType) => (
+
+ )
+ )}
+
+ ),
+ [type, handleTypeChange]
+ );
+
+ // Lazily render only the active form to prevent wasted renders
+ const renderActiveForm = () => {
+ switch (type) {
+ case "Markdown":
+ return (
+
+
+ );
+
+ case "Nft":
+ return (
+
+
+
+
+
+ {content.length} / {MAX_MARKDOWN_LENGTH}
+
+ + For larger content, consider uploading your + markdown as an NFT. +
+
+
+
+
+
+
+ );
+
+ case "Shelf":
+ return (
+
+
+
+
+ Find Existing NFTs
+
+ {alexandrianApp && (
+
+
+
+
+ )}
+
+
+ Find New Ones on Arweave
+
+ {permasearchApp && (
+
+
+
+
+ )}
+
+
+ Bring Your Own
+
+ {pinaxApp && (
+
+
+
+ )}
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+
+
+ {availableShelves.length === 0 && (
+
+
+
+ + Add an existing shelf as an item in your + current shelf +
++ You don't have any other shelves that can be + added. Create a new shelf instead. +
+ )} +
+
+
+
+
+
+ );
+};
+
+export default InlineItemCreator;
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/NewShelf.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/NewShelf.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/NewShelf.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/NewShelf.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/RemoveItemButton.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/RemoveItemButton.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/RemoveItemButton.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/RemoveItemButton.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfContent.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfContent.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfContent.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfContent.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfOption.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfOption.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfOption.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfOption.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfSelectionDialog.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfSelectionDialog.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/components/ShelfSelectionDialog.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/components/ShelfSelectionDialog.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/containers/ShelfDetailContainer.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/containers/ShelfDetailContainer.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/containers/ShelfDetailContainer.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/containers/ShelfDetailContainer.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/containers/ShelfLists.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/containers/ShelfLists.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/containers/ShelfLists.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/containers/ShelfLists.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/index.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/useAddToShelf.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/useAddToShelf.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/useAddToShelf.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/useAddToShelf.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/usePublicShelfOperations.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/usePublicShelfOperations.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/usePublicShelfOperations.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/usePublicShelfOperations.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/useShelfOperations.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/useShelfOperations.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-management/hooks/useShelfOperations.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-management/hooks/useShelfOperations.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/GeneralSettingsTab.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/GeneralSettingsTab.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/GeneralSettingsTab.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/GeneralSettingsTab.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/PublicAccessSection.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/PublicAccessSection.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/PublicAccessSection.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/PublicAccessSection.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfInformationSection.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfInformationSection.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfInformationSection.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfInformationSection.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfLinkItem.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfLinkItem.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfLinkItem.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfLinkItem.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfSettingsDialog.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfSettingsDialog.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/ShelfSettingsDialog.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/ShelfSettingsDialog.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/TagsSection.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/TagsSection.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/TagsSection.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/TagsSection.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/index.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/components/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/components/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/hooks/index.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/hooks/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/hooks/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/hooks/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/hooks/useShelfMetrics.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/hooks/useShelfMetrics.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/hooks/useShelfMetrics.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/hooks/useShelfMetrics.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/index.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/types.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/types.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/types.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/types.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/utils/tagValidation.ts b/src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/utils/tagValidation.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/shelf-settings/utils/tagValidation.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/shelf-settings/utils/tagValidation.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/components/PopularTagsList.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/tags/components/PopularTagsList.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/components/PopularTagsList.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/components/PopularTagsList.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/components/TagFilterDisplay.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/tags/components/TagFilterDisplay.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/components/TagFilterDisplay.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/components/TagFilterDisplay.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/components/TagSearchBar.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/tags/components/TagSearchBar.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/components/TagSearchBar.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/components/TagSearchBar.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/containers/FilteredShelfListContainer.tsx b/src/alex_frontend/core/apps/app/Perpetua/features/tags/containers/FilteredShelfListContainer.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/containers/FilteredShelfListContainer.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/containers/FilteredShelfListContainer.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/hooks/useTagActions.ts b/src/alex_frontend/core/apps/app/Perpetua/features/tags/hooks/useTagActions.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/hooks/useTagActions.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/hooks/useTagActions.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/hooks/useTagData.ts b/src/alex_frontend/core/apps/app/Perpetua/features/tags/hooks/useTagData.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/hooks/useTagData.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/hooks/useTagData.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/features/tags/index.ts b/src/alex_frontend/core/apps/app/Perpetua/features/tags/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/features/tags/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/features/tags/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/hooks/useContentPermissions.ts b/src/alex_frontend/core/apps/app/Perpetua/hooks/useContentPermissions.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/hooks/useContentPermissions.ts
rename to src/alex_frontend/core/apps/app/Perpetua/hooks/useContentPermissions.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/index.tsx b/src/alex_frontend/core/apps/app/Perpetua/index.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/index.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/index.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/layouts/PerpetuaLayout.tsx b/src/alex_frontend/core/apps/app/Perpetua/layouts/PerpetuaLayout.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/layouts/PerpetuaLayout.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/layouts/PerpetuaLayout.tsx
diff --git a/src/alex_frontend/src/apps/app/Perpetua/routes.ts b/src/alex_frontend/core/apps/app/Perpetua/routes.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/routes.ts
rename to src/alex_frontend/core/apps/app/Perpetua/routes.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/README.md b/src/alex_frontend/core/apps/app/Perpetua/state/README.md
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/README.md
rename to src/alex_frontend/core/apps/app/Perpetua/state/README.md
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/cache/ShelvesCache.ts b/src/alex_frontend/core/apps/app/Perpetua/state/cache/ShelvesCache.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/cache/ShelvesCache.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/cache/ShelvesCache.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/hooks/index.ts b/src/alex_frontend/core/apps/app/Perpetua/state/hooks/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/hooks/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/hooks/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/hooks/usePerpetuaActions.ts b/src/alex_frontend/core/apps/app/Perpetua/state/hooks/usePerpetuaActions.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/hooks/usePerpetuaActions.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/hooks/usePerpetuaActions.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/hooks/usePerpetuaSelectors.ts b/src/alex_frontend/core/apps/app/Perpetua/state/hooks/usePerpetuaSelectors.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/hooks/usePerpetuaSelectors.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/hooks/usePerpetuaSelectors.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/index.ts b/src/alex_frontend/core/apps/app/Perpetua/state/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/perpetuaSlice.ts b/src/alex_frontend/core/apps/app/Perpetua/state/perpetuaSlice.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/perpetuaSlice.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/perpetuaSlice.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/followService.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/followService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/followService.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/followService.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/index.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/itemService.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/itemService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/itemService.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/itemService.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/serviceTypes.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/serviceTypes.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/serviceTypes.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/serviceTypes.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/shelfService.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/shelfService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/shelfService.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/shelfService.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/services/tagService.ts b/src/alex_frontend/core/apps/app/Perpetua/state/services/tagService.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/services/tagService.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/services/tagService.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/followThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/followThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/followThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/followThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/index.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/index.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/index.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/index.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/itemThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/itemThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/itemThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/itemThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/nftThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/nftThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/nftThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/nftThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/publicAccessThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/publicAccessThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/publicAccessThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/publicAccessThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/queryThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/queryThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/queryThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/queryThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/reorderThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/reorderThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/reorderThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/reorderThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/state/thunks/shelfThunks.ts b/src/alex_frontend/core/apps/app/Perpetua/state/thunks/shelfThunks.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/state/thunks/shelfThunks.ts
rename to src/alex_frontend/core/apps/app/Perpetua/state/thunks/shelfThunks.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/types/reordering.types.ts b/src/alex_frontend/core/apps/app/Perpetua/types/reordering.types.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/types/reordering.types.ts
rename to src/alex_frontend/core/apps/app/Perpetua/types/reordering.types.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/types/shelf.types.ts b/src/alex_frontend/core/apps/app/Perpetua/types/shelf.types.ts
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/types/shelf.types.ts
rename to src/alex_frontend/core/apps/app/Perpetua/types/shelf.types.ts
diff --git a/src/alex_frontend/src/apps/app/Perpetua/utils.tsx b/src/alex_frontend/core/apps/app/Perpetua/utils.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Perpetua/utils.tsx
rename to src/alex_frontend/core/apps/app/Perpetua/utils.tsx
diff --git a/src/alex_frontend/src/apps/app/Dialectica/components/EmporiumSearch.tsx b/src/alex_frontend/core/apps/app/legacy_Dialectica/components/EmporiumSearch.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Dialectica/components/EmporiumSearch.tsx
rename to src/alex_frontend/core/apps/app/legacy_Dialectica/components/EmporiumSearch.tsx
diff --git a/src/alex_frontend/src/apps/app/Dialectica/index.tsx b/src/alex_frontend/core/apps/app/legacy_Dialectica/index.tsx
similarity index 100%
rename from src/alex_frontend/src/apps/app/Dialectica/index.tsx
rename to src/alex_frontend/core/apps/app/legacy_Dialectica/index.tsx
diff --git a/src/alex_frontend/core/apps/app/legacy_Syllogos/index.tsx b/src/alex_frontend/core/apps/app/legacy_Syllogos/index.tsx
new file mode 100644
index 000000000..e7b031aaa
--- /dev/null
+++ b/src/alex_frontend/core/apps/app/legacy_Syllogos/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import Types from "@/features/home-types";
+import Filter from "@/features/filter";
+import SearchResult from "@/features/search/SearchResult";
+import Search from "@/features/search";
+
+function Syllogos() {
+ const { searchText } = useAppSelector((state) => state.search);
+ const { filter } = useAppSelector((state) => state.home);
+
+ return (
+
+ {/* Header with close button */}
+
+
+
+
+ {/* Content type tabs */}
+ {contentTypeTabs}
+
+ {/* Content form based on selected type */}
+ + Add Item to Shelf +
+
+
+ {renderActiveForm()}
+
+ {filter &&
+ );
+}
+
+export default Syllogos;
diff --git a/src/alex_frontend/src/components/AddShelfButton.tsx b/src/alex_frontend/core/components/AddShelfButton.tsx
similarity index 100%
rename from src/alex_frontend/src/components/AddShelfButton.tsx
rename to src/alex_frontend/core/components/AddShelfButton.tsx
diff --git a/src/alex_frontend/src/components/AddToShelfButton.tsx b/src/alex_frontend/core/components/AddToShelfButton.tsx
similarity index 100%
rename from src/alex_frontend/src/components/AddToShelfButton.tsx
rename to src/alex_frontend/core/components/AddToShelfButton.tsx
diff --git a/src/alex_frontend/src/components/Alert.tsx b/src/alex_frontend/core/components/Alert.tsx
similarity index 100%
rename from src/alex_frontend/src/components/Alert.tsx
rename to src/alex_frontend/core/components/Alert.tsx
diff --git a/src/alex_frontend/core/components/AppCard.tsx b/src/alex_frontend/core/components/AppCard.tsx
new file mode 100644
index 000000000..598e2557b
--- /dev/null
+++ b/src/alex_frontend/core/components/AppCard.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Link } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+
+import { App } from "./../config/apps"; // Import from the new location
+
+interface AppCardProps {
+ app: App;
+ size?: "default" | "small";
+ className?: string; // Allow passing additional classes
+}
+
+const AppCard: React.FC
+
+
+
+ );
+
+ if (isThirdParty) {
+ return (
+ ) =>
+ isComingSoon && e.preventDefault()
+ }
+ >
+ {cardContent}
+
+ );
+ }
+
+ return (
+ ) =>
+ isComingSoon && e.preventDefault()
+ }
+ >
+ {cardContent}
+
+ );
+};
+
+export default AppCard;
diff --git a/src/alex_frontend/src/components/AudioPlayer.tsx b/src/alex_frontend/core/components/AudioPlayer.tsx
similarity index 100%
rename from src/alex_frontend/src/components/AudioPlayer.tsx
rename to src/alex_frontend/core/components/AudioPlayer.tsx
diff --git a/src/alex_frontend/src/components/BookModal.tsx b/src/alex_frontend/core/components/BookModal.tsx
similarity index 100%
rename from src/alex_frontend/src/components/BookModal.tsx
rename to src/alex_frontend/core/components/BookModal.tsx
diff --git a/src/alex_frontend/src/components/CanisterCard/CanisterCardSkeleton.tsx b/src/alex_frontend/core/components/CanisterCard/CanisterCardSkeleton.tsx
similarity index 100%
rename from src/alex_frontend/src/components/CanisterCard/CanisterCardSkeleton.tsx
rename to src/alex_frontend/core/components/CanisterCard/CanisterCardSkeleton.tsx
diff --git a/src/alex_frontend/src/components/CanisterCard/CanisterView.tsx b/src/alex_frontend/core/components/CanisterCard/CanisterView.tsx
similarity index 100%
rename from src/alex_frontend/src/components/CanisterCard/CanisterView.tsx
rename to src/alex_frontend/core/components/CanisterCard/CanisterView.tsx
diff --git a/src/alex_frontend/src/components/CanisterCard/NonCanisterView.tsx b/src/alex_frontend/core/components/CanisterCard/NonCanisterView.tsx
similarity index 100%
rename from src/alex_frontend/src/components/CanisterCard/NonCanisterView.tsx
rename to src/alex_frontend/core/components/CanisterCard/NonCanisterView.tsx
diff --git a/src/alex_frontend/src/components/CanisterCard/index.tsx b/src/alex_frontend/core/components/CanisterCard/index.tsx
similarity index 100%
rename from src/alex_frontend/src/components/CanisterCard/index.tsx
rename to src/alex_frontend/core/components/CanisterCard/index.tsx
diff --git a/src/alex_frontend/core/components/Comment/index.ts b/src/alex_frontend/core/components/Comment/index.ts
new file mode 100644
index 000000000..b88ae664e
--- /dev/null
+++ b/src/alex_frontend/core/components/Comment/index.ts
@@ -0,0 +1,2 @@
+export { default as AddComment } from './post';
+export { default as CommentList } from './list';
\ No newline at end of file
diff --git a/src/alex_frontend/core/components/Comment/list.tsx b/src/alex_frontend/core/components/Comment/list.tsx
new file mode 100644
index 000000000..f07576590
--- /dev/null
+++ b/src/alex_frontend/core/components/Comment/list.tsx
@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent } from "@/lib/components/card";
+import { useDialectica } from "@/hooks/actors";
+import { Principal } from "@dfinity/principal";
+import { convertTimestamp } from "@/utils/general";
+import UsernameBadge from "@/components/UsernameBadge";
+
+interface Comment {
+ id: string | bigint;
+ author: string | Principal;
+ content: string;
+ timestamp: string | bigint;
+}
+
+interface CommentListProps {
+ arweaveId: string;
+ refreshTrigger?: number;
+ showUserBadge?: boolean;
+ variant?: 'default' | 'compact';
+ className?: string;
+}
+
+const CommentList: React.FC
+ {isComingSoon ? (
+ 
+ )
+ )}
+
+
+ COMING
+
+ SOON +
+ ) : (
+ app.logo && (
+ + SOON +
+ {app.name}
+
+ {!isSmall && ( // Only show description on default size
+
+ {app.description}
+
+ )}
+
+
+
+ );
+ }
+
+ if (comments.length === 0) {
+ return (
+
+ No comments yet. Be the first to comment!
+
+ );
+ }
+
+ return (
+
+ {comments.map((comment) => (
+
+
+
+
+ ))}
+
+ );
+};
+
+export default CommentList;
\ No newline at end of file
diff --git a/src/alex_frontend/core/components/Comment/post.tsx b/src/alex_frontend/core/components/Comment/post.tsx
new file mode 100644
index 000000000..3fcdd6bef
--- /dev/null
+++ b/src/alex_frontend/core/components/Comment/post.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Button } from "@/lib/components/button";
+import { Textarea } from "@/lib/components/textarea";
+import { Send } from "lucide-react";
+import { useDialectica } from "@/hooks/actors";
+import { useAppSelector } from "@/store/hooks/useAppSelector";
+import { toast } from "sonner";
+
+interface AddCommentProps {
+ arweaveId: string;
+ onCommentAdded?: () => void;
+ maxLength?: number;
+ className?: string;
+}
+
+const AddComment: React.FC
+ {showUserBadge ? (
+
+ + {comment.content} +
+
+
+ );
+ }
+
+ return (
+ Sign in to leave a comment
+
+