chore: bump version to 0.6.16

fix: remove unused handleCancelDelete function
Removed handleCancelDelete as it's no longer needed after switching from ConfirmDialog modal to inline confirmation
2026-02-18 05:25:04 +01:00 · 2025-10-15 18:30:36 +02:00 · 2025-10-15 18:30:15 +02:00 · 2025-10-15 18:21:44 +02:00 · 2025-10-15 18:15:55 +02:00 · 2025-10-15 17:59:29 +02:00
6 changed files with 157 additions and 95 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+## [0.6.15] - 2025-10-15
+
+### Added
+
+- Paragraph alignment setting with left-aligned and justified text options
+  - Icon buttons in Reading & Display settings for switching alignment
+  - CSS variable system for applying alignment to reader content
+  - Real-time preview of alignment changes in settings
+  - Headings remain left-aligned for optimal readability
+
+### Changed
+
+- Default paragraph alignment changed to justified for improved reading experience
+  - Applies to paragraphs, list items, divs, and blockquotes
+  - Settings stored and synced via Nostr (NIP-78)
+
 ## [0.6.14] - 2025-10-15

 ### Added
@@ -1466,7 +1482,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optimize relay usage following applesauce-relay best practices
 - Use applesauce-react event models for better profile handling

-[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.14...HEAD
+[Unreleased]: https://github.com/dergigi/boris/compare/v0.6.15...HEAD
+[0.6.15]: https://github.com/dergigi/boris/compare/v0.6.14...v0.6.15
 [0.6.14]: https://github.com/dergigi/boris/compare/v0.6.13...v0.6.14
 [0.6.13]: https://github.com/dergigi/boris/compare/v0.6.12...v0.6.13
 [0.6.12]: https://github.com/dergigi/boris/compare/v0.6.11...v0.6.12
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boris",
-  "version": "0.6.15",
+  "version": "0.6.16",
  "description": "A minimal nostr client for bookmark management",
  "homepage": "https://read.withboris.com/",
  "type": "module",
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -13,7 +13,6 @@ import { areAllRelaysLocal } from '../utils/helpers'
 import { nip19 } from 'nostr-tools'
 import { formatDateCompact } from '../utils/bookmarkUtils'
 import { createDeletionRequest } from '../services/deletionService'
-import ConfirmDialog from './ConfirmDialog'
 import { getNostrUrl } from '../config/nostrGateways'
 import CompactButton from './CompactButton'
 import { HighlightCitation } from './HighlightCitation'
@@ -257,21 +256,22 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }, [isSelected])
  
-  // Close menu when clicking outside
+  // Close menu and reset delete confirm when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setShowMenu(false)
+        setShowDeleteConfirm(false)
      }
    }
    
-    if (showMenu) {
+    if (showMenu || showDeleteConfirm) {
      document.addEventListener('mousedown', handleClickOutside)
      return () => {
        document.removeEventListener('mousedown', handleClickOutside)
      }
    }
-  }, [showMenu])
+  }, [showMenu, showDeleteConfirm])
  
  const handleItemClick = () => {
    if (onHighlightClick) {
@@ -434,12 +434,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    }
  }
  
-  const handleCancelDelete = () => {
-    setShowDeleteConfirm(false)
-  }
-  
  const handleMenuToggle = (e: React.MouseEvent) => {
    e.stopPropagation()
+    // Reset delete confirm state when opening/closing menu
+    if (!showMenu) {
+      setShowDeleteConfirm(false)
+    }
    setShowMenu(!showMenu)
  }
  
@@ -461,6 +461,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
    setShowDeleteConfirm(true)
  }
  
+  const handleConfirmDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    handleConfirmDelete()
+  }
+  
  return (
    <>
    <div 
@@ -533,6 +538,33 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
          </div>
          
          <div className="highlight-menu-wrapper" ref={menuRef}>
+            {showDeleteConfirm && canDelete && (
+              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginRight: '0.5rem' }}>
+                <span style={{ fontSize: '0.875rem', color: 'rgb(220 38 38)', fontWeight: 500 }}>Confirm?</span>
+                <button
+                  onClick={handleConfirmDeleteClick}
+                  disabled={isDeleting}
+                  title="Confirm deletion"
+                  style={{ 
+                    color: 'rgb(220 38 38)',
+                    background: 'rgba(220, 38, 38, 0.1)',
+                    border: '1px solid rgb(220 38 38)',
+                    borderRadius: '4px',
+                    padding: '0.375rem',
+                    cursor: isDeleting ? 'not-allowed' : 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minWidth: '33px',
+                    minHeight: '33px',
+                    transition: 'all 0.2s'
+                  }}
+                >
+                  <FontAwesomeIcon icon={isDeleting ? faSpinner : faTrash} spin={isDeleting} />
+                </button>
+              </div>
+            )}
+            
            <CompactButton
              icon={faEllipsisH}
              onClick={handleMenuToggle}
@@ -571,17 +603,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
        </div>
      </div>
    </div>
-    
-    <ConfirmDialog
-      isOpen={showDeleteConfirm}
-      title="Delete Highlight?"
-      message="This will request deletion of your highlight. It may still be visible on some relays that don't honor deletion requests."
-      confirmText="Delete"
-      cancelText="Cancel"
-      variant="danger"
-      onConfirm={handleConfirmDelete}
-      onCancel={handleCancelDelete}
-    />
    </>
  )
 }
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -19,55 +19,6 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
    <div className="settings-section">
      <h3 className="section-title">Reading & Display</h3>
      
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
-          <label htmlFor="readingFont">Reading Font</label>
-          <div className="setting-control">
-            <FontSelector
-              value={settings.readingFont || 'source-serif-4'}
-              onChange={(font) => onUpdate({ readingFont: font })}
-            />
-          </div>
-        </div>
-
-        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
-          <label>Font Size</label>
-          <div className="setting-buttons">
-            {[16, 18, 21, 24, 28, 32].map(size => (
-              <button
-                key={size}
-                onClick={() => onUpdate({ fontSize: size })}
-                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
-                title={`${size}px`}
-                style={{ fontSize: `${size - 2}px` }}
-              >
-                A
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label>Paragraph Alignment</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faAlignLeft} 
-            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
-            title="Left aligned" 
-            ariaLabel="Left aligned" 
-            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faAlignJustify} 
-            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
-            title="Justified" 
-            ariaLabel="Justified" 
-            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
-          />
-        </div>
-      </div>
-
      <div className="setting-group setting-inline">
        <label>Highlight Style</label>
        <div className="setting-buttons">
@@ -89,31 +40,21 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
      </div>

      <div className="setting-group setting-inline">
-        <label className="setting-label">My Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorMine || '#fde047'}
-            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+        <label>Paragraph Alignment</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faAlignLeft} 
+            onClick={() => onUpdate({ paragraphAlignment: 'left' })} 
+            title="Left aligned" 
+            ariaLabel="Left aligned" 
+            variant={settings.paragraphAlignment === 'left' ? 'primary' : 'ghost'} 
          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Friends Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorFriends || '#f97316'}
-            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
-          />
-        </div>
-      </div>
-
-      <div className="setting-group setting-inline">
-        <label className="setting-label">Nostrverse Highlights</label>
-        <div className="setting-control">
-          <ColorPicker
-            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
-            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          <IconButton 
+            icon={faAlignJustify} 
+            onClick={() => onUpdate({ paragraphAlignment: 'justify' })} 
+            title="Justified" 
+            ariaLabel="Justified" 
+            variant={(settings.paragraphAlignment || 'justify') === 'justify' ? 'primary' : 'ghost'} 
          />
        </div>
      </div>
@@ -157,6 +98,65 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
        </div>
      </div>

+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+        <div className="setting-group setting-inline" style={{ flex: '1 1 auto', minWidth: '200px' }}>
+          <label htmlFor="readingFont">Reading Font</label>
+          <div className="setting-control">
+            <FontSelector
+              value={settings.readingFont || 'source-serif-4'}
+              onChange={(font) => onUpdate({ readingFont: font })}
+            />
+          </div>
+        </div>
+
+        <div className="setting-group setting-inline" style={{ flex: '0 1 auto' }}>
+          <label>Font Size</label>
+          <div className="setting-buttons">
+            {[16, 18, 21, 24, 28, 32].map(size => (
+              <button
+                key={size}
+                onClick={() => onUpdate({ fontSize: size })}
+                className={`font-size-btn ${(settings.fontSize || 21) === size ? 'active' : ''}`}
+                title={`${size}px`}
+                style={{ fontSize: `${size - 2}px` }}
+              >
+                A
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">My Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorMine || '#fde047'}
+            onColorChange={(color) => onUpdate({ highlightColorMine: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Friends Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorFriends || '#f97316'}
+            onColorChange={(color) => onUpdate({ highlightColorFriends: color })}
+          />
+        </div>
+      </div>
+
+      <div className="setting-group setting-inline">
+        <label className="setting-label">Nostrverse Highlights</label>
+        <div className="setting-control">
+          <ColorPicker
+            selectedColor={settings.highlightColorNostrverse || '#9333ea'}
+            onColorChange={(color) => onUpdate({ highlightColorNostrverse: color })}
+          />
+        </div>
+      </div>
+
      <div className="setting-group">
        <label htmlFor="showHighlights" className="checkbox-label">
          <input
--- a/src/styles/components/forms.css
+++ b/src/styles/components/forms.css
@@ -3,7 +3,7 @@
 .setting-group.setting-inline { display: flex; align-items: center; gap: 1rem; }
 .setting-label { text-align: left; flex: 1; }
 .setting-control { display: flex; justify-content: flex-end; align-items: center; }
-.setting-group.setting-inline label { margin-bottom: 0; }
+.setting-group.setting-inline label { margin-bottom: 0; min-width: 220px; }
 .setting-group label { display: block; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 500; text-align: left; }
 .setting-buttons { display: flex; align-items: center; gap: 0.5rem; }
 .color-picker { display: flex; align-items: center; gap: 0.5rem; }
@@ -59,6 +59,10 @@
    gap: 0.75rem;
  }
  
+  .setting-group.setting-inline label {
+    min-width: unset;
+  }
+  
  .setting-inline .setting-select {
    width: 100%;
    min-width: unset;
--- a/src/styles/components/modals.css
+++ b/src/styles/components/modals.css
@@ -25,3 +25,23 @@
 .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

+/* Confirm Dialog */
+.confirm-dialog-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 1rem; }
+.confirm-dialog { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 12px; max-width: 400px; width: 100%; padding: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
+.confirm-dialog-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 1rem; font-size: 1.5rem; }
+.confirm-dialog-icon.danger { background: rgba(220, 38, 38, 0.1); color: rgb(220 38 38); }
+.confirm-dialog-icon.warning { background: rgba(251, 191, 36, 0.1); color: rgb(251 191 36); }
+.confirm-dialog-icon.info { background: rgba(59, 130, 246, 0.1); color: rgb(59 130 246); }
+.confirm-dialog-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--color-text); text-align: center; }
+.confirm-dialog-message { margin: 0 0 1.5rem 0; font-size: 0.9rem; color: var(--color-text-secondary); text-align: center; line-height: 1.5; }
+.confirm-dialog-actions { display: flex; gap: 0.75rem; }
+.confirm-dialog-btn { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
+.confirm-dialog-btn.cancel { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
+.confirm-dialog-btn.cancel:hover { background: var(--color-border); }
+.confirm-dialog-btn.confirm.danger { background: rgb(220 38 38); color: white; }
+.confirm-dialog-btn.confirm.danger:hover { background: rgb(185 28 28); }
+.confirm-dialog-btn.confirm.warning { background: rgb(251 191 36); color: rgb(17 24 39); }
+.confirm-dialog-btn.confirm.warning:hover { background: rgb(245 158 11); }
+.confirm-dialog-btn.confirm.info { background: rgb(59 130 246); color: white; }
+.confirm-dialog-btn.confirm.info:hover { background: rgb(37 99 235); }
+
Author	SHA1	Message	Date
Gigi	76f4588c85	chore: bump version to 0.6.16	2025-10-15 18:30:36 +02:00
Gigi	e163b92a7e	fix: remove unused handleCancelDelete function Removed handleCancelDelete as it's no longer needed after switching from ConfirmDialog modal to inline confirmation	2025-10-15 18:30:15 +02:00
Gigi	11925a42b0	style: make trash icon red in delete confirmation Change from CompactButton to regular button with explicit red color styling so the trash icon inherits the red color (rgb(220 38 38))	2025-10-15 18:21:44 +02:00
Gigi	acf45530ca	refactor: replace delete dialog with inline confirmation Replace popup modal with inline confirmation UI: - When delete is clicked, show red trash icon with 'Confirm?' text - Clicking red trash icon again confirms deletion - Confirmation appears to left of three-dot menu - Click outside or reopen menu cancels confirmation - Remove ConfirmDialog component dependency	2025-10-15 18:15:55 +02:00
Gigi	3792ad6abf	refactor: move Highlight Style, Paragraph Alignment, and Default Highlight Visibility to top Final order: 1. Highlight Style 2. Paragraph Alignment 3. Default Highlight Visibility 4. Reading Font + Font Size 5. My Highlights color 6. Friends Highlights color 7. Nostrverse Highlights color 8. Show highlights checkbox 9. Preview	2025-10-15 17:59:29 +02:00
Gigi	bf98b307e8	style: align setting buttons vertically with fixed label width Add min-width: 220px to inline setting labels to create consistent 'tab stops' so buttons align vertically regardless of label length. Remove constraint on mobile where settings stack vertically.	2025-10-15 17:57:33 +02:00
Gigi	d15392f41e	refactor: reorder settings with Highlight Style and Paragraph Alignment above Default Highlight Visibility Final order: 1. Reading Font + Font Size 2. My Highlights color 3. Friends Highlights color 4. Nostrverse Highlights color 5. Highlight Style 6. Paragraph Alignment 7. Default Highlight Visibility 8. Show highlights checkbox 9. Preview	2025-10-15 17:55:58 +02:00
Gigi	f26a024255	refactor: reorder Reading & Display settings - Highlight Style (first) - Paragraph Alignment (second) - Reading Font + Font Size (third) Better logical grouping with text styling before font selection	2025-10-15 17:54:08 +02:00
Gigi	bf9f894c0d	refactor: improve delete dialog UI and simplify message - Reduce verbose warning text to simple 'This will delete your highlight' - Add proper CSS styling for confirm dialog with backdrop blur - Center-aligned text and circular icon with color-coded background - Modern button styling with proper hover states - Full-width buttons in action row - Theme-aware colors using CSS variables	2025-10-15 17:53:26 +02:00
Gigi	53a7b7d1c5	docs: update CHANGELOG.md for v0.6.15	2025-10-15 17:51:38 +02:00