mirror of
https://github.com/logos-messaging/OpChan.git
synced 2026-01-03 05:13:09 +00:00
chore: persist profile state on edit
This commit is contained in:
Danish Arora
parent
4892614df8
commit
a746af365a
@ -29,7 +29,9 @@ import { Cell } from '@/types/forum';
|
||||
import { usePending } from '@/hooks/usePending';
|
||||
|
||||
// Empty State Component
|
||||
const EmptyState: React.FC<{ canCreateCell: boolean }> = ({ canCreateCell }) => {
|
||||
const EmptyState: React.FC<{ canCreateCell: boolean }> = ({
|
||||
canCreateCell,
|
||||
}) => {
|
||||
return (
|
||||
<div className="col-span-2 flex flex-col items-center justify-center py-16 px-4">
|
||||
{/* Visual Element */}
|
||||
@ -76,10 +78,7 @@ const CellItem: React.FC<{ cell: Cell }> = ({ cell }) => {
|
||||
const pending = usePending(cell.id);
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/cell/${cell.id}`}
|
||||
className="group block board-card"
|
||||
>
|
||||
<Link to={`/cell/${cell.id}`} className="group block board-card">
|
||||
<div className="flex items-start gap-4">
|
||||
<CypherImage
|
||||
src={cell.icon}
|
||||
@ -162,64 +161,72 @@ const CellList = () => {
|
||||
<div className="page-header">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="page-title">
|
||||
Decentralized Cells
|
||||
</h1>
|
||||
<h1 className="page-title">Decentralized Cells</h1>
|
||||
<p className="page-subtitle">
|
||||
Discover communities built on Bitcoin Ordinals
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Only show controls when cells exist */}
|
||||
{hasCells && (
|
||||
<div className="flex items-center gap-4">
|
||||
<ModerationToggle />
|
||||
{/* Only show controls when cells exist */}
|
||||
{hasCells && (
|
||||
<div className="flex items-center gap-4">
|
||||
<ModerationToggle />
|
||||
|
||||
<Select
|
||||
value={sortOption}
|
||||
onValueChange={(value: SortOption) => setSortOption(value)}
|
||||
>
|
||||
<SelectTrigger className="w-40 bg-cyber-muted/50 border-cyber-muted text-cyber-light">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-cyber-dark border-cyber-muted/30">
|
||||
<SelectItem value="relevance" className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<TrendingUp className="w-4 h-4 mr-2 inline" />
|
||||
Relevance
|
||||
</SelectItem>
|
||||
<SelectItem value="activity" className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<MessageSquare className="w-4 h-4 mr-2 inline" />
|
||||
Activity
|
||||
</SelectItem>
|
||||
<SelectItem value="newest" className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<Clock className="w-4 h-4 mr-2 inline" />
|
||||
Newest
|
||||
</SelectItem>
|
||||
<SelectItem value="alphabetical" className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<Layout className="w-4 h-4 mr-2 inline" />
|
||||
A-Z
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={sortOption}
|
||||
onValueChange={(value: SortOption) => setSortOption(value)}
|
||||
>
|
||||
<SelectTrigger className="w-40 bg-cyber-muted/50 border-cyber-muted text-cyber-light">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-cyber-dark border-cyber-muted/30">
|
||||
<SelectItem
|
||||
value="relevance"
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 mr-2 inline" />
|
||||
Relevance
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="activity"
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 mr-2 inline" />
|
||||
Activity
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="newest"
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
<Clock className="w-4 h-4 mr-2 inline" />
|
||||
Newest
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="alphabetical"
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
<Layout className="w-4 h-4 mr-2 inline" />
|
||||
A-Z
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={refreshData}
|
||||
disabled={isInitialLoading}
|
||||
title="Refresh data"
|
||||
className="px-3 border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${isInitialLoading ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{canCreateCell && (
|
||||
<CreateCellDialog />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={refreshData}
|
||||
disabled={isInitialLoading}
|
||||
title="Refresh data"
|
||||
className="px-3 border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${isInitialLoading ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
|
||||
{canCreateCell && <CreateCellDialog />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -122,7 +122,6 @@ const Header = () => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (!isConnected) return <CircleSlash className="w-4 h-4" />;
|
||||
|
||||
@ -191,24 +190,29 @@ const Header = () => {
|
||||
{isConnected ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Status Badge */}
|
||||
<Badge
|
||||
variant="outline"
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`font-mono text-xs border-0 ${
|
||||
verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED && delegationInfo?.isValid
|
||||
verificationStatus ===
|
||||
EVerificationStatus.ENS_ORDINAL_VERIFIED &&
|
||||
delegationInfo?.isValid
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
|
||||
? 'bg-orange-500/20 text-orange-400 border-orange-500/30'
|
||||
: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
|
||||
: verificationStatus ===
|
||||
EVerificationStatus.ENS_ORDINAL_VERIFIED
|
||||
? 'bg-orange-500/20 text-orange-400 border-orange-500/30'
|
||||
: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
|
||||
}`}
|
||||
>
|
||||
{getStatusIcon()}
|
||||
<span className="ml-1">
|
||||
{verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED && delegationInfo?.isValid
|
||||
{verificationStatus ===
|
||||
EVerificationStatus.ENS_ORDINAL_VERIFIED &&
|
||||
delegationInfo?.isValid
|
||||
? 'READY'
|
||||
: verificationStatus === EVerificationStatus.ENS_ORDINAL_VERIFIED
|
||||
? 'EXPIRED'
|
||||
: 'VERIFY'
|
||||
}
|
||||
: verificationStatus ===
|
||||
EVerificationStatus.ENS_ORDINAL_VERIFIED
|
||||
? 'EXPIRED'
|
||||
: 'VERIFY'}
|
||||
</span>
|
||||
</Badge>
|
||||
|
||||
@ -224,37 +228,53 @@ const Header = () => {
|
||||
<Settings className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 bg-black/95 border-cyber-muted/30">
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-56 bg-black/95 border-cyber-muted/30"
|
||||
>
|
||||
<div className="px-3 py-2 border-b border-cyber-muted/30">
|
||||
<div className="text-sm font-medium text-white">{displayName}</div>
|
||||
<div className="text-xs text-cyber-neutral">{address?.slice(0, 8)}...{address?.slice(-4)}</div>
|
||||
<div className="text-sm font-medium text-white">
|
||||
{displayName}
|
||||
</div>
|
||||
<div className="text-xs text-cyber-neutral">
|
||||
{address?.slice(0, 8)}...{address?.slice(-4)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/profile" className="flex items-center space-x-2">
|
||||
<Link
|
||||
to="/profile"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<User className="w-4 h-4" />
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
|
||||
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/bookmarks" className="flex items-center space-x-2">
|
||||
<Link
|
||||
to="/bookmarks"
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Bookmark className="w-4 h-4" />
|
||||
<span>Bookmarks</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
|
||||
|
||||
<DropdownMenuSeparator className="bg-cyber-muted/30" />
|
||||
|
||||
<DropdownMenuItem onClick={handleOpenWizard} className="flex items-center space-x-2">
|
||||
|
||||
<DropdownMenuItem
|
||||
onClick={handleOpenWizard}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Settings className="w-4 h-4" />
|
||||
<span>Setup Wizard</span>
|
||||
</DropdownMenuItem>
|
||||
|
||||
|
||||
<DropdownMenuSeparator className="bg-cyber-muted/30" />
|
||||
|
||||
<DropdownMenuItem
|
||||
onClick={handleDisconnect}
|
||||
|
||||
<DropdownMenuItem
|
||||
onClick={handleDisconnect}
|
||||
className="flex items-center space-x-2 text-red-400 focus:text-red-400"
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
@ -279,7 +299,11 @@ const Header = () => {
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="md:hidden text-white hover:bg-cyber-muted/30"
|
||||
>
|
||||
{mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
{mobileMenuOpen ? (
|
||||
<X className="w-5 h-5" />
|
||||
) : (
|
||||
<Menu className="w-5 h-5" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -395,7 +419,7 @@ const Header = () => {
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
|
||||
{/* Mobile Network Status */}
|
||||
<div className="px-4 py-3 border-t border-cyber-muted/20">
|
||||
<div className="flex items-center space-x-2 text-xs text-cyber-neutral">
|
||||
|
||||
@ -267,10 +267,7 @@ const PostList = () => {
|
||||
</div>
|
||||
) : (
|
||||
visiblePosts.map(post => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="thread-card"
|
||||
>
|
||||
<div key={post.id} className="thread-card">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
|
||||
@ -66,10 +66,9 @@ export function WalletWizard({
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const renderStepIcon = (step: WizardStep) => {
|
||||
const status = getStepStatus(step);
|
||||
|
||||
|
||||
// Check if step is actually completed based on auth state
|
||||
const isActuallyComplete = (step: WizardStep): boolean => {
|
||||
switch (step) {
|
||||
@ -126,10 +125,12 @@ export function WalletWizard({
|
||||
className={`text-sm ${
|
||||
getStepStatus(step as WizardStep) === 'current'
|
||||
? 'text-blue-500 font-medium'
|
||||
: (getStepStatus(step as WizardStep) === 'complete' ||
|
||||
(step === 1 && isAuthenticated) ||
|
||||
(step === 2 && verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED) ||
|
||||
(step === 3 && delegationStatus.isValid))
|
||||
: getStepStatus(step as WizardStep) === 'complete' ||
|
||||
(step === 1 && isAuthenticated) ||
|
||||
(step === 2 &&
|
||||
verificationStatus !==
|
||||
EVerificationStatus.WALLET_UNCONNECTED) ||
|
||||
(step === 3 && delegationStatus.isValid)
|
||||
? 'text-green-500'
|
||||
: 'text-gray-400'
|
||||
}`}
|
||||
@ -142,7 +143,9 @@ export function WalletWizard({
|
||||
className={`w-8 h-px mx-2 ${
|
||||
getStepStatus(step as WizardStep) === 'complete' ||
|
||||
(step === 1 && isAuthenticated) ||
|
||||
(step === 2 && verificationStatus !== EVerificationStatus.WALLET_UNCONNECTED)
|
||||
(step === 2 &&
|
||||
verificationStatus !==
|
||||
EVerificationStatus.WALLET_UNCONNECTED)
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-600'
|
||||
}`}
|
||||
|
||||
@ -14,4 +14,4 @@ export const BOOTSTRAP_NODES = {
|
||||
'/dns4/node-01.do-ams3.waku.sandbox.status.im/tcp/30303/p2p/16Uiu2HAmNaeL4p3WEYzC9mgXBmBWSgWjPHRvatZTXnp8Jgv3iKsb',
|
||||
'/dns4/vps-aaa00d52.vps.ovh.ca/tcp/8000/wss/p2p/16Uiu2HAm9PftGgHZwWE3wzdMde4m3kT2eYJFXLZfGoSED3gysofk',
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
@ -129,44 +129,42 @@ const BookmarksPage = () => {
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<BookmarkIcon className="text-cyber-accent" size={32} />
|
||||
<h1 className="page-title">
|
||||
My Bookmarks
|
||||
</h1>
|
||||
<h1 className="page-title">My Bookmarks</h1>
|
||||
</div>
|
||||
|
||||
{bookmarks.length > 0 && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-red-400 border-red-400/30 hover:bg-red-400/10"
|
||||
>
|
||||
<Trash2 size={16} className="mr-2" />
|
||||
Clear All
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Clear All Bookmarks</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to remove all your bookmarks? This
|
||||
action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleClearAll}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
{bookmarks.length > 0 && (
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-red-400 border-red-400/30 hover:bg-red-400/10"
|
||||
>
|
||||
<Trash2 size={16} className="mr-2" />
|
||||
Clear All
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Clear All Bookmarks</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to remove all your bookmarks? This
|
||||
action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleClearAll}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
>
|
||||
Clear All
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="page-subtitle">
|
||||
Your saved posts and comments. Bookmarks are stored locally and
|
||||
@ -174,83 +172,83 @@ const BookmarksPage = () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{bookmarks.length > 0 && (
|
||||
<div className="flex gap-4 mb-6">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<FileText size={14} className="mr-1" />
|
||||
{postBookmarks.length} Posts
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<MessageSquare size={14} className="mr-1" />
|
||||
{commentBookmarks.length} Comments
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<BookmarkIcon size={14} className="mr-1" />
|
||||
{bookmarks.length} Total
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
{/* Stats */}
|
||||
{bookmarks.length > 0 && (
|
||||
<div className="flex gap-4 mb-6">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<FileText size={14} className="mr-1" />
|
||||
{postBookmarks.length} Posts
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<MessageSquare size={14} className="mr-1" />
|
||||
{commentBookmarks.length} Comments
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-cyber-accent/30 text-cyber-accent"
|
||||
>
|
||||
<BookmarkIcon size={14} className="mr-1" />
|
||||
{bookmarks.length} Total
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs */}
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={value =>
|
||||
setActiveTab(value as 'all' | 'posts' | 'comments')
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-3 mb-6">
|
||||
<TabsTrigger value="all" className="flex items-center gap-2">
|
||||
<BookmarkIcon size={16} />
|
||||
All ({bookmarks.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="posts" className="flex items-center gap-2">
|
||||
<FileText size={16} />
|
||||
Posts ({postBookmarks.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="comments" className="flex items-center gap-2">
|
||||
<MessageSquare size={16} />
|
||||
Comments ({commentBookmarks.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{/* Tabs */}
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={value =>
|
||||
setActiveTab(value as 'all' | 'posts' | 'comments')
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
<TabsList className="grid w-full grid-cols-3 mb-6">
|
||||
<TabsTrigger value="all" className="flex items-center gap-2">
|
||||
<BookmarkIcon size={16} />
|
||||
All ({bookmarks.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="posts" className="flex items-center gap-2">
|
||||
<FileText size={16} />
|
||||
Posts ({postBookmarks.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="comments" className="flex items-center gap-2">
|
||||
<MessageSquare size={16} />
|
||||
Comments ({commentBookmarks.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="all">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarks yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="all">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarks yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="posts">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarked posts yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="posts">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarked posts yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="comments">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarked comments yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<TabsContent value="comments">
|
||||
<BookmarkList
|
||||
bookmarks={getFilteredBookmarks()}
|
||||
onRemove={removeBookmark}
|
||||
onNavigate={handleNavigate}
|
||||
emptyMessage="No bookmarked comments yet"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@ -105,49 +105,47 @@ const FeedPage: React.FC = () => {
|
||||
<h1 className="page-title text-glow text-cyber-accent">
|
||||
Popular Posts
|
||||
</h1>
|
||||
<p className="page-subtitle">
|
||||
Latest posts from all cells
|
||||
</p>
|
||||
<p className="page-subtitle">Latest posts from all cells</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<ModerationToggle />
|
||||
<div className="flex items-center space-x-2">
|
||||
<ModerationToggle />
|
||||
|
||||
<Select
|
||||
value={sortOption}
|
||||
onValueChange={(value: SortOption) => setSortOption(value)}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="relevance">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>Relevance</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="time">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Newest</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select
|
||||
value={sortOption}
|
||||
onValueChange={(value: SortOption) => setSortOption(value)}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="relevance">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>Relevance</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="time">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Newest</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refreshData}
|
||||
disabled={isRefreshing}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
<span>Refresh</span>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refreshData}
|
||||
disabled={isRefreshing}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
<span>Refresh</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -58,21 +58,21 @@ export default function ProfilePage() {
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [callSign, setCallSign] = useState(currentUser?.callSign || '');
|
||||
const [displayPreference, setDisplayPreference] = useState(
|
||||
currentUser?.displayPreference || EDisplayPreference.WALLET_ADDRESS
|
||||
);
|
||||
const [callSign, setCallSign] = useState('');
|
||||
const [displayPreference, setDisplayPreference] = useState(EDisplayPreference.WALLET_ADDRESS);
|
||||
const [walletWizardOpen, setWalletWizardOpen] = useState(false);
|
||||
|
||||
// Update local state when user data changes
|
||||
// Initialize and update local state when user data changes
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
setCallSign(currentUser.callSign || '');
|
||||
setDisplayPreference(
|
||||
currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS
|
||||
);
|
||||
// Use the same data source as the display (userInfo) for consistency
|
||||
const currentCallSign = userInfo.callSign || currentUser.callSign || '';
|
||||
const currentDisplayPreference = userInfo.displayPreference || currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS;
|
||||
|
||||
setCallSign(currentCallSign);
|
||||
setDisplayPreference(currentDisplayPreference);
|
||||
}
|
||||
}, [currentUser]);
|
||||
}, [currentUser, userInfo.callSign, userInfo.displayPreference]);
|
||||
|
||||
// Copy to clipboard function
|
||||
const copyToClipboard = async (text: string, label: string) => {
|
||||
@ -100,8 +100,12 @@ export default function ProfilePage() {
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center text-cyber-neutral">
|
||||
<User className="w-12 h-12 mx-auto mb-4 text-cyber-accent" />
|
||||
<h2 className="text-xl font-mono font-bold mb-2">Connect Required</h2>
|
||||
<p className="text-sm">Please connect your wallet to view your profile.</p>
|
||||
<h2 className="text-xl font-mono font-bold mb-2">
|
||||
Connect Required
|
||||
</h2>
|
||||
<p className="text-sm">
|
||||
Please connect your wallet to view your profile.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -168,8 +172,12 @@ export default function ProfilePage() {
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setCallSign(currentUser.callSign || '');
|
||||
setDisplayPreference(currentUser.displayPreference);
|
||||
// Reset to the same data source as display for consistency
|
||||
const currentCallSign = userInfo.callSign || currentUser.callSign || '';
|
||||
const currentDisplayPreference = userInfo.displayPreference || currentUser.displayPreference || EDisplayPreference.WALLET_ADDRESS;
|
||||
|
||||
setCallSign(currentCallSign);
|
||||
setDisplayPreference(currentDisplayPreference);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
@ -220,7 +228,9 @@ export default function ProfilePage() {
|
||||
{/* Page Header */}
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Profile</h1>
|
||||
<p className="page-subtitle">Manage your account settings and preferences</p>
|
||||
<p className="page-subtitle">
|
||||
Manage your account settings and preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Two-Card Layout: User Profile + Security Status */}
|
||||
@ -283,12 +293,15 @@ export default function ProfilePage() {
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 font-mono text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
|
||||
{currentUser.address.slice(0, 8)}...{currentUser.address.slice(-6)}
|
||||
{currentUser.address.slice(0, 8)}...
|
||||
{currentUser.address.slice(-6)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => copyToClipboard(currentUser.address, 'Address')}
|
||||
onClick={() =>
|
||||
copyToClipboard(currentUser.address, 'Address')
|
||||
}
|
||||
className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
@ -301,7 +314,10 @@ export default function ProfilePage() {
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-cyber-neutral" />
|
||||
<Badge variant="outline" className="capitalize bg-cyber-accent/20 text-cyber-accent border-cyber-accent/30">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="capitalize bg-cyber-accent/20 text-cyber-accent border-cyber-accent/30"
|
||||
>
|
||||
{currentUser.walletType}
|
||||
</Badge>
|
||||
</div>
|
||||
@ -316,7 +332,10 @@ export default function ProfilePage() {
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="callSign" className="text-sm font-medium text-cyber-neutral">
|
||||
<Label
|
||||
htmlFor="callSign"
|
||||
className="text-sm font-medium text-cyber-neutral"
|
||||
>
|
||||
Call Sign
|
||||
</Label>
|
||||
{isEditing ? (
|
||||
@ -330,16 +349,22 @@ export default function ProfilePage() {
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
|
||||
{userInfo.callSign || currentUser.callSign || 'Not set'}
|
||||
{userInfo.callSign ||
|
||||
currentUser.callSign ||
|
||||
'Not set'}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-cyber-neutral">
|
||||
3-20 characters, letters, numbers, underscores, and hyphens only
|
||||
3-20 characters, letters, numbers, underscores, and
|
||||
hyphens only
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="displayPreference" className="text-sm font-medium text-cyber-neutral">
|
||||
<Label
|
||||
htmlFor="displayPreference"
|
||||
className="text-sm font-medium text-cyber-neutral"
|
||||
>
|
||||
Display Preference
|
||||
</Label>
|
||||
{isEditing ? (
|
||||
@ -354,17 +379,24 @@ export default function ProfilePage() {
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-cyber-dark border-cyber-muted/30">
|
||||
<SelectItem value={EDisplayPreference.CALL_SIGN} className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<SelectItem
|
||||
value={EDisplayPreference.CALL_SIGN}
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
Call Sign (when available)
|
||||
</SelectItem>
|
||||
<SelectItem value={EDisplayPreference.WALLET_ADDRESS} className="text-cyber-light hover:bg-cyber-muted/30">
|
||||
<SelectItem
|
||||
value={EDisplayPreference.WALLET_ADDRESS}
|
||||
className="text-cyber-light hover:bg-cyber-muted/30"
|
||||
>
|
||||
Wallet Address
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<div className="text-sm bg-cyber-dark/50 border border-cyber-muted/30 px-3 py-2 rounded-md text-cyber-light">
|
||||
{(userInfo.displayPreference || displayPreference) ===
|
||||
{(userInfo.displayPreference ||
|
||||
displayPreference) ===
|
||||
EDisplayPreference.CALL_SIGN
|
||||
? 'Call Sign (when available)'
|
||||
: 'Wallet Address'}
|
||||
@ -386,8 +418,8 @@ export default function ProfilePage() {
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={isSubmitting}
|
||||
className="bg-cyber-accent hover:bg-cyber-accent/80 text-black font-mono"
|
||||
>
|
||||
@ -413,7 +445,8 @@ export default function ProfilePage() {
|
||||
<Shield className="h-5 w-5 text-cyber-accent" />
|
||||
Security
|
||||
</div>
|
||||
{(delegationStatus.hasDelegation || delegationInfo?.hasDelegation) && (
|
||||
{(delegationStatus.hasDelegation ||
|
||||
delegationInfo?.hasDelegation) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@ -421,7 +454,9 @@ export default function ProfilePage() {
|
||||
className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
{(delegationStatus.isValid || delegationInfo?.isValid) ? 'Renew' : 'Setup'}
|
||||
{delegationStatus.isValid || delegationInfo?.isValid
|
||||
? 'Renew'
|
||||
: 'Setup'}
|
||||
</Button>
|
||||
)}
|
||||
</CardTitle>
|
||||
@ -430,41 +465,61 @@ export default function ProfilePage() {
|
||||
{/* Delegation Status */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-cyber-neutral">Delegation</span>
|
||||
<span className="text-sm font-medium text-cyber-neutral">
|
||||
Delegation
|
||||
</span>
|
||||
<Badge
|
||||
variant={(delegationStatus.isValid || delegationInfo?.isValid) ? 'default' : 'secondary'}
|
||||
variant={
|
||||
delegationStatus.isValid || delegationInfo?.isValid
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
}
|
||||
className={
|
||||
(delegationStatus.isValid || delegationInfo?.isValid)
|
||||
delegationStatus.isValid || delegationInfo?.isValid
|
||||
? 'bg-green-500/20 text-green-400 border-green-500/30'
|
||||
: 'bg-red-500/20 text-red-400 border-red-500/30'
|
||||
}
|
||||
>
|
||||
{(delegationStatus.isValid || delegationInfo?.isValid) ? 'Active' : 'Inactive'}
|
||||
{delegationStatus.isValid || delegationInfo?.isValid
|
||||
? 'Active'
|
||||
: 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Expiry Date */}
|
||||
{(delegationStatus.expiresAt || currentUser.delegationExpiry) && (
|
||||
{(delegationStatus.expiresAt ||
|
||||
currentUser.delegationExpiry) && (
|
||||
<div className="space-y-1">
|
||||
<span className="text-xs text-cyber-neutral">Valid until</span>
|
||||
<span className="text-xs text-cyber-neutral">
|
||||
Valid until
|
||||
</span>
|
||||
<div className="text-sm font-mono text-cyber-light">
|
||||
{(delegationStatus.expiresAt || new Date(currentUser.delegationExpiry!)).toLocaleDateString()}
|
||||
{(
|
||||
delegationStatus.expiresAt ||
|
||||
new Date(currentUser.delegationExpiry!)
|
||||
).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Signature Status */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-cyber-neutral">Signature</span>
|
||||
<span className="text-sm font-medium text-cyber-neutral">
|
||||
Signature
|
||||
</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
(delegationStatus.isValid || currentUser.delegationSignature === 'valid')
|
||||
delegationStatus.isValid ||
|
||||
currentUser.delegationSignature === 'valid'
|
||||
? 'text-green-400 border-green-500/30 bg-green-500/10'
|
||||
: 'text-red-400 border-red-500/30 bg-red-500/10'
|
||||
}
|
||||
>
|
||||
{(delegationStatus.isValid || currentUser.delegationSignature === 'valid') ? 'Valid' : 'Not signed'}
|
||||
{delegationStatus.isValid ||
|
||||
currentUser.delegationSignature === 'valid'
|
||||
? 'Valid'
|
||||
: 'Not signed'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
@ -476,15 +531,22 @@ export default function ProfilePage() {
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 font-mono text-xs bg-cyber-dark/50 border border-cyber-muted/30 px-2 py-1 rounded text-cyber-light">
|
||||
{(delegationStatus.publicKey || currentUser.browserPubKey)
|
||||
{delegationStatus.publicKey || currentUser.browserPubKey
|
||||
? `${(delegationStatus.publicKey || currentUser.browserPubKey!).slice(0, 12)}...${(delegationStatus.publicKey || currentUser.browserPubKey!).slice(-8)}`
|
||||
: 'Not delegated'}
|
||||
</div>
|
||||
{(delegationStatus.publicKey || currentUser.browserPubKey) && (
|
||||
{(delegationStatus.publicKey ||
|
||||
currentUser.browserPubKey) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => copyToClipboard(delegationStatus.publicKey || currentUser.browserPubKey!, 'Public Key')}
|
||||
onClick={() =>
|
||||
copyToClipboard(
|
||||
delegationStatus.publicKey ||
|
||||
currentUser.browserPubKey!,
|
||||
'Public Key'
|
||||
)
|
||||
}
|
||||
className="border-cyber-muted/30 text-cyber-neutral hover:bg-cyber-muted/30"
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
@ -494,21 +556,24 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
|
||||
{/* Warning for expired delegation */}
|
||||
{(!delegationStatus.isValid && delegationStatus.hasDelegation) || (!delegationInfo?.isValid && delegationInfo?.hasDelegation) && (
|
||||
<div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-xs font-medium">
|
||||
Delegation expired. Renew to continue using your browser key.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(!delegationStatus.isValid &&
|
||||
delegationStatus.hasDelegation) ||
|
||||
(!delegationInfo?.isValid &&
|
||||
delegationInfo?.hasDelegation && (
|
||||
<div className="p-3 bg-orange-500/10 border border-orange-500/30 rounded-md">
|
||||
<div className="flex items-center gap-2 text-orange-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<span className="text-xs font-medium">
|
||||
Delegation expired. Renew to continue using your
|
||||
browser key.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user