Merge pull request #25 from dergigi/trying-to-fix-annoying-bugs

Mobile UX improvements and bug fixes

api/article-og.ts

@@ -147,7 +147,7 @@ function generateHtml(naddr: string, meta: ArticleMetadata | null): string {
   const baseUrl = 'https://read.withboris.com'
   const articleUrl = `${baseUrl}/a/${naddr}`
   
-  const title = meta?.title || 'Boris – Nostr Bookmarks'
+  const title = meta?.title || 'Boris – Read, Highlight, Explore'
   const description = meta?.summary || 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.'
   const image = meta?.image?.startsWith('http') ? meta.image : `${baseUrl}${meta?.image || '/boris-social-1200.png'}`
   const author = meta?.author || 'Boris'

index.html

@@ -9,14 +9,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#0f172a" />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <title>Boris - Nostr Bookmarks</title>
+    <title>Boris - Read, Highlight, Explore</title>
     <meta name="description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <link rel="canonical" href="https://read.withboris.com/" />
     
     <!-- Open Graph / Social Media -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://read.withboris.com/" />
-    <meta property="og:title" content="Boris - Nostr Bookmarks" />
+    <meta property="og:title" content="Boris - Read, Highlight, Explore" />
     <meta property="og:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta property="og:image" content="https://read.withboris.com/boris-social-1200.png" />
     <meta property="og:site_name" content="Boris" />
@@ -24,7 +24,7 @@
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:url" content="https://read.withboris.com/" />
-    <meta name="twitter:title" content="Boris - Nostr Bookmarks" />
+    <meta name="twitter:title" content="Boris - Read, Highlight, Explore" />
     <meta name="twitter:description" content="Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights." />
     <meta name="twitter:image" content="https://read.withboris.com/boris-social-1200.png" />
     

public/manifest.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "Boris - Nostr Bookmarks",
+  "name": "Boris - Read, Highlight, Explore",
   "short_name": "Boris",
   "description": "Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.",
   "start_url": "/",

src/components/HighlightButton.tsx

@@ -45,7 +45,7 @@ export const HighlightButton = React.forwardRef<HighlightButtonRef, HighlightBut
         className="highlight-fab"
         style={{
           position: 'fixed',
-          bottom: '32px',
+          bottom: '80px',
           right: '32px',
           zIndex: 1000,
           width: '56px',

src/components/SidebarHeader.tsx

@@ -55,6 +55,10 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
 
   const handleMenuItemClick = (action: () => void) => {
     setShowProfileMenu(false)
+    // Close mobile sidebar when navigating on mobile
+    if (isMobile) {
+      onToggleCollapse()
+    }
     action()
   }
 
@@ -127,23 +131,38 @@ const SidebarHeader: React.FC<SidebarHeaderProps> = ({ onToggleCollapse, onLogou
         <div className="sidebar-header-right">
           <IconButton
             icon={faHome}
-            onClick={() => navigate('/')}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/')
+            }}
             title="Home"
             ariaLabel="Home"
             variant="ghost"
           />
           <IconButton
-            icon={faGear}
-            onClick={onOpenSettings}
-            title="Settings"
-            ariaLabel="Settings"
+            icon={faPersonHiking}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              navigate('/explore')
+            }}
+            title="Explore"
+            ariaLabel="Explore"
             variant="ghost"
           />
           <IconButton
-            icon={faPersonHiking}
-            onClick={() => navigate('/explore')}
-            title="Explore"
-            ariaLabel="Explore"
+            icon={faGear}
+            onClick={() => {
+              if (isMobile) {
+                onToggleCollapse()
+              }
+              onOpenSettings()
+            }}
+            title="Settings"
+            ariaLabel="Settings"
             variant="ghost"
           />
           {!isMobile && (

src/services/readingPositionService.ts

@@ -19,7 +19,6 @@ export interface ReadingProgressContent {
   progress: number // 0-1 scroll progress
   ts?: number // Unix timestamp (optional, for display)
   loc?: number // Optional: pixel position
-  ver?: string // Schema version
 }
 
 // Helper to extract and parse reading progress from event (kind 39802)
@@ -117,8 +116,7 @@ export async function saveReadingPosition(
   const progressContent: ReadingProgressContent = {
     progress: position.position,
     ts: position.timestamp,
-    loc: position.scrollTop,
-    ver: '1'
+    loc: position.scrollTop
   }
   
   const tags = generateProgressTags(articleIdentifier)

src/services/readingProgressController.ts

@@ -13,7 +13,7 @@ type ProgressMapCallback = (progressMap: Map<string, number>) => void
 type LoadingCallback = (loading: boolean) => void
 
 const LAST_SYNCED_KEY = 'reading_progress_last_synced'
-const PROGRESS_CACHE_KEY = 'reading_progress_cache_v1'
+const PROGRESS_CACHE_KEY = 'reading_progress_cache'
 
 /**
  * Shared reading progress controller

src/styles/components/me.css

@@ -75,6 +75,18 @@
 .me-highlights-list { padding-left: 0; padding-right: 0; }
 .explore-header .author-card { max-width: 600px; margin: 0 auto; width: 100%; }
 
+/* Hide tab labels on mobile to save space */
+@media (max-width: 768px) {
+  .me-tab .tab-label {
+    display: none;
+  }
+  
+  .me-tab {
+    padding: 0.75rem;
+    gap: 0;
+  }
+}
+
 /* Bookmarks list */
 .bookmarks-list {
   display: flex;

vite.config.ts

@@ -104,7 +104,7 @@ export default defineConfig({
       filename: 'sw.ts',
       injectRegister: null,
       manifest: {
-        name: 'Boris - Nostr Bookmarks',
+        name: 'Boris - Read, Highlight, Explore',
         short_name: 'Boris',
         description: 'Your reading list for the Nostr world. A minimal nostr client for bookmark management with highlights.',
         start_url: '/',