diff --git a/src/components/AuthorCard.tsx b/src/components/AuthorCard.tsx
new file mode 100644
index 00000000..a706b851
--- /dev/null
+++ b/src/components/AuthorCard.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+
+interface AuthorCardProps {
+ authorPubkey: string
+}
+
+const AuthorCard: React.FC = ({ authorPubkey }) => {
+ const profile = useEventModel(Models.ProfileModel, [authorPubkey])
+
+ const getAuthorName = () => {
+ if (profile?.name) return profile.name
+ if (profile?.display_name) return profile.display_name
+ return `${authorPubkey.slice(0, 8)}...${authorPubkey.slice(-8)}`
+ }
+
+ const authorImage = profile?.picture || profile?.image
+ const authorBio = profile?.about
+
+ return (
+ = ({
)}
+
+ {/* Author info card for nostr-native articles */}
+ {isNostrArticle && currentArticle && (
+
+
+ )
+}
+
+export default AuthorCard
+
diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx
index 39375c67..4ce70871 100644
--- a/src/components/ContentPanel.tsx
+++ b/src/components/ContentPanel.tsx
@@ -16,6 +16,7 @@ import { useHighlightedContent } from '../hooks/useHighlightedContent'
import { useHighlightInteractions } from '../hooks/useHighlightInteractions'
import { UserSettings } from '../services/settingsService'
import { createEventReaction, createWebsiteReaction } from '../services/reactionService'
+import AuthorCard from './AuthorCard'
interface ContentPanelProps {
loading: boolean
@@ -222,6 +223,13 @@ const ContentPanel: React.FC
+ {authorImage ? (
+ 
+ ) : (
+
+
+
+ {getAuthorName()}
+ {authorBio && (
+ {authorBio}
+ )} +
+
+ )}
) : (
diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index b6f0f1b4..9328498f 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -105,7 +105,7 @@ const Me: React.FC = ({ relayPool }) => {
{highlights.map((highlight) => (
= ({ settings, onSave, onClose, relayPoo
)
diff --git a/src/components/Settings/PWASettings.tsx b/src/components/Settings/PWASettings.tsx
new file mode 100644
index 00000000..20baeb5b
--- /dev/null
+++ b/src/components/Settings/PWASettings.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { faDownload, faCheckCircle, faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { usePWAInstall } from '../../hooks/usePWAInstall'
+
+const PWASettings: React.FC = () => {
+ const { isInstallable, isInstalled, installApp } = usePWAInstall()
+
+ const handleInstall = async () => {
+ const success = await installApp()
+ if (success) {
+ console.log('App installed successfully')
+ }
+ }
+
+ if (isInstalled) {
+ return (
+
+
+ )
+ }
+
+ if (!isInstallable) {
+ return null
+ }
+
+ return (
+ Progressive Web App
+
+
+
+
+ + You can launch Boris from your home screen or app drawer. +
+
+
+ )
+}
+
+export default PWASettings
+
diff --git a/src/hooks/useOnlineStatus.ts b/src/hooks/useOnlineStatus.ts
new file mode 100644
index 00000000..3466502f
--- /dev/null
+++ b/src/hooks/useOnlineStatus.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+export function useOnlineStatus() {
+ const [isOnline, setIsOnline] = useState(navigator.onLine)
+
+ useEffect(() => {
+ const handleOnline = () => {
+ console.log('🌐 Back online')
+ setIsOnline(true)
+ }
+
+ const handleOffline = () => {
+ console.log('📴 Gone offline')
+ setIsOnline(false)
+ }
+
+ window.addEventListener('online', handleOnline)
+ window.addEventListener('offline', handleOffline)
+
+ return () => {
+ window.removeEventListener('online', handleOnline)
+ window.removeEventListener('offline', handleOffline)
+ }
+ }, [])
+
+ return isOnline
+}
+
diff --git a/src/hooks/usePWAInstall.ts b/src/hooks/usePWAInstall.ts
new file mode 100644
index 00000000..ee101fb5
--- /dev/null
+++ b/src/hooks/usePWAInstall.ts
@@ -0,0 +1,74 @@
+import { useState, useEffect } from 'react'
+
+interface BeforeInstallPromptEvent extends Event {
+ prompt: () => PromiseProgressive Web App
+
+
+
+
+ + Install Boris on your device for a native app experience with offline support. +
+ +