PowerShellUniversal.Apps.Bookworm

1.0.1

dashboards/Library/pages/homepage.ps1

$homepage = New-UDPage -id 'homepage' -Name 'Home' -Url '/Home' -Content {
    
    # Load the bookworm logo as Base64
    $Module = Get-Module -Name 'PowerShellUniversal.Apps.Bookworm'
    $LogoPath = Join-Path $Module.ModuleBase 'assets' 'bookworm.png'
    $LogoBase64 = if (Test-Path $LogoPath) {
        $bytes = [System.IO.File]::ReadAllBytes($LogoPath)
        $base64 = [System.Convert]::ToBase64String($bytes)
        "data:image/png;base64,$base64"
    } else {
        $null # No logo available
    }
    
    New-UDContainer -Content {
        
        # Hero Section with Logo
        New-UDPaper -Elevation 4 -Content {
            New-UDElement -Tag 'div' -Attributes @{ 
                style = @{ 
                    background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                    padding = '40px 20px'
                    borderRadius = '8px'
                    marginBottom = '24px'
                } 
            } -Content {
                New-UDStack -Direction 'column' -AlignItems 'center' -Spacing 2 -Content {
                    # Bookworm Logo
                    if ($LogoBase64) {
                        New-UDElement -Tag 'div' -Attributes @{ 
                            style = @{ 
                                background = 'white'
                                borderRadius = '50%'
                                padding = '20px'
                                boxShadow = '0 8px 16px rgba(0,0,0,0.2)'
                                marginBottom = '16px'
                            } 
                        } -Content {
                            New-UDImage -Url $LogoBase64 -Height 120 -Width 120 -Attributes @{
                                style = @{
                                    display = 'block'
                                }
                            }
                        }
                    }
                    
                    New-UDTypography -Text '📚 Bookworm: Your personal library catalog' -Variant h3 -Align center -Style @{
                        color = 'white'
                        fontWeight = 'bold'
                        textShadow = '2px 2px 4px rgba(0,0,0,0.3)'
                    }
                    
                    New-UDTypography -Text 'Scan, Organize, and Manage Your Personal Library' -Variant h6 -Align center -Style @{
                        color = 'rgba(255,255,255,0.95)'
                        fontWeight = '300'
                        marginTop = '8px'
                    }
                }
            }
        }
        
        New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '8px' } }
        
        New-UDStack -Direction 'column' -Spacing 3 -Content {
            
            # Scanner Section
            New-UDElement -Tag 'div' -Attributes @{ 
                style = @{ 
                    padding = '24px'
                    background = 'white'
                    borderRadius = '12px'
                    border = '1px solid #e0e0e0'
                } 
            } -Content {
                New-UDStack -Direction 'row' -AlignItems 'center' -Spacing 2 -Content {
                    New-UDElement -Tag 'div' -Attributes @{ 
                        style = @{ 
                            fontSize = '36px'
                            marginRight = '8px'
                        } 
                    } -Content {
                        New-UDHTML -Markup '📷'
                    }
                    New-UDStack -Direction 'column' -Content {
                        New-UDTypography -Text 'Scan Book' -Variant h5 -Style @{ fontWeight = 'bold'; color = '#333' }
                        New-UDTypography -Text 'Point your camera at the ISBN barcode' -Variant body2 -Style @{ color = '#666' }
                    }
                }
                
                New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '16px' } }
                
                New-UDElement -Tag 'div' -Attributes @{ 
                    style = @{ 
                        borderRadius = '8px'
                        overflow = 'hidden'
                        border = '3px solid #667eea'
                        boxShadow = '0 4px 12px rgba(102, 126, 234, 0.2)'
                    } 
                } -Content {
                    New-UDBarcodeScanner -Width '100%' -Height 250 -FacingMode 'environment' -OnScan {
                        $ISBN = $EventData
                        Show-UDToast -Message "🔍 Scanning: $ISBN" -Duration 2000
                        
                        try {
                            $BookMetadata = Get-BookMetadata -ISBN $ISBN
                            $null = $BookMetadata | Add-Book
                            Show-UDToast -Message "✅ Added: $($BookMetadata.Title)" -Duration 3000 -MessageColor success
                            Sync-UDElement -Id 'recentBooks'
                        }
                        catch {
                            Show-UDToast -Message "❌ Error: $_" -Duration 4000 -MessageColor error
                        }
                    }
                }
            }
            
            # Recent Books Section
            New-UDElement -Tag 'div' -Attributes @{ 
                style = @{ 
                    padding = '24px'
                    background = 'white'
                    borderRadius = '12px'
                    border = '1px solid #e0e0e0'
                } 
            } -Content {
                    New-UDStack -Direction 'row' -AlignItems 'center' -Spacing 2 -Content {
                        New-UDElement -Tag 'div' -Attributes @{ 
                            style = @{ 
                                fontSize = '36px'
                                marginRight = '8px'
                            } 
                        } -Content {
                            New-UDHTML -Markup '📚'
                        }
                        New-UDStack -Direction 'column' -Content {
                            New-UDTypography -Text 'Recent Books' -Variant h5 -Style @{ fontWeight = 'bold'; color = '#333' }
                            New-UDTypography -Text 'Your latest additions' -Variant body2 -Style @{ color = '#666' }
                        }
                    }
                    
                    New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '16px' } }
                    
                    New-UDDynamic -Id 'recentBooks' -Content {
                        try {
                            $RecentBooks = Get-Book -Limit 5
                            
                            if ($RecentBooks) {
                                New-UDStack -Direction 'column' -Spacing 2 -Content {
                                    foreach ($book in $RecentBooks) {
                                        New-UDCard -Elevation 2 -Content {
                                            New-UDStack -Direction 'row' -Spacing 2 -Content {
                                                if ($book.CoverUrl) {
                                                    New-UDElement -Tag 'div' -Attributes @{ 
                                                        style = @{ 
                                                            borderRadius = '4px'
                                                            overflow = 'hidden'
                                                            boxShadow = '0 2px 8px rgba(0,0,0,0.15)'
                                                        } 
                                                    } -Content {
                                                        New-UDImage -Url $book.CoverUrl -Height 100 -Width 75
                                                    }
                                                }
                                                
                                                New-UDStack -Direction 'column' -Justify 'center' -Content {
                                                    New-UDTypography -Text $book.Title -Variant body1 -Style @{ 
                                                        fontWeight = 'bold'
                                                        color = '#333'
                                                    }
                                                    New-UDTypography -Text "ISBN: $($book.ISBN)" -Variant caption -Style @{ 
                                                        color = '#666'
                                                        fontFamily = 'monospace'
                                                    }
                                                    
                                                    if ($book.Publishers -and $book.Publishers -ne 'N/A') {
                                                        New-UDStack -Direction 'row' -AlignItems 'center' -Spacing 1 -Content {
                                                            New-UDHTML -Markup '🏢'
                                                            New-UDTypography -Text $book.Publishers -Variant caption -Style @{ color = '#666' }
                                                        }
                                                    }
                                                    
                                                    if ($book.PublishDate -and $book.PublishDate -ne 'N/A') {
                                                        New-UDStack -Direction 'row' -AlignItems 'center' -Spacing 1 -Content {
                                                            New-UDHTML -Markup '📅'
                                                            New-UDTypography -Text $book.PublishDate -Variant caption -Style @{ color = '#666' }
                                                        }
                                                    }
                                                }
                                            }
                                        } -Style @{
                                            cursor = 'pointer'
                                            transition = 'transform 0.2s, box-shadow 0.2s'
                                        } -OnClick {
                                            Show-UDModal -Content {
                                                New-UDStack -Direction 'column' -Spacing 3 -Content {
                                                    # Modal Header with Book Title
                                                    New-UDElement -Tag 'div' -Attributes @{ 
                                                        style = @{ 
                                                            background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                                                            padding = '20px'
                                                            borderRadius = '8px'
                                                            marginBottom = '16px'
                                                        } 
                                                    } -Content {
                                                        New-UDTypography -Text $book.Title -Variant h5 -Style @{
                                                            color = 'white'
                                                            fontWeight = 'bold'
                                                            textAlign = 'center'
                                                        }
                                                    }
                                                    
                                                    if ($book.CoverUrl) {
                                                        New-UDElement -Tag 'div' -Attributes @{ 
                                                            style = @{ 
                                                                textAlign = 'center'
                                                                margin = '16px 0'
                                                            } 
                                                        } -Content {
                                                            New-UDElement -Tag 'div' -Attributes @{ 
                                                                style = @{ 
                                                                    display = 'inline-block'
                                                                    borderRadius = '8px'
                                                                    overflow = 'hidden'
                                                                    boxShadow = '0 8px 24px rgba(0,0,0,0.2)'
                                                                } 
                                                            } -Content {
                                                                New-UDImage -Url $book.CoverUrl -Height 250
                                                            }
                                                        }
                                                    }
                                                    
                                                    # Book Details Grid
                                                    New-UDElement -Tag 'div' -Attributes @{ 
                                                        style = @{ 
                                                            padding = '20px'
                                                            background = 'white'
                                                            borderRadius = '8px'
                                                            border = '1px solid #e0e0e0'
                                                        } 
                                                    } -Content {
                                                            New-UDStack -Direction 'column' -Spacing 2 -Content {
                                                                New-UDElement -Tag 'div' -Attributes @{ 
                                                                    style = @{ 
                                                                        display = 'grid'
                                                                        gridTemplateColumns = 'auto 1fr'
                                                                        gap = '12px'
                                                                        alignItems = 'start'
                                                                    } 
                                                                } -Content {
                                                                    New-UDTypography -Text "📖 ISBN:" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea' }
                                                                    New-UDTypography -Text $book.ISBN -Variant body2 -Style @{ fontFamily = 'monospace' }
                                                                    
                                                                    if ($book.Publishers -and $book.Publishers -ne 'N/A') {
                                                                        New-UDTypography -Text "🏢 Publisher:" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea' }
                                                                        New-UDTypography -Text $book.Publishers -Variant body2
                                                                    }
                                                                    
                                                                    if ($book.PublishDate -and $book.PublishDate -ne 'N/A') {
                                                                        New-UDTypography -Text "📅 Published:" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea' }
                                                                        New-UDTypography -Text $book.PublishDate -Variant body2
                                                                    }
                                                                    
                                                                    if ($book.NumberOfPages) {
                                                                        New-UDTypography -Text "📄 Pages:" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea' }
                                                                        New-UDTypography -Text $book.NumberOfPages -Variant body2
                                                                    }
                                                                    
                                                                    New-UDTypography -Text "🕒 Scanned:" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea' }
                                                                    New-UDTypography -Text $book.ScannedAt -Variant body2
                                                                }
                                                                
                                                                if ($book.FirstSentence -and $book.FirstSentence -ne 'N/A') {
                                                                    New-UDElement -Tag 'div' -Attributes @{ style = @{ height = '8px' } }
                                                                    New-UDElement -Tag 'div' -Attributes @{ 
                                                                        style = @{ 
                                                                            background = '#f8f9fa'
                                                                            padding = '16px'
                                                                            borderRadius = '8px'
                                                                            borderLeft = '4px solid #667eea'
                                                                        } 
                                                                    } -Content {
                                                                        New-UDTypography -Text "� First Sentence" -Variant subtitle2 -Style @{ fontWeight = 'bold'; color = '#667eea'; marginBottom = '8px' }
                                                                        New-UDTypography -Text $book.FirstSentence -Variant body2 -Style @{ fontStyle = 'italic' }
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            } -Header {
                                                New-UDStack -Direction 'row' -AlignItems 'center' -Spacing 1 -Content {
                                                    New-UDHTML -Markup '📚'
                                                    New-UDTypography -Text "Book Details" -Variant h6 -Style @{ fontWeight = 'bold' }
                                                }
                                            } -Footer {
                                                New-UDButton -Text "Close" -OnClick {
                                                    Hide-UDModal
                                                } -Variant contained -Color primary
                                            } -FullWidth -MaxWidth 'sm'
                                        }
                                    }
                                }
                            }
                            else {
                                New-UDElement -Tag 'div' -Attributes @{ 
                                    style = @{ 
                                        textAlign = 'center'
                                        padding = '40px 20px'
                                    } 
                                } -Content {
                                    New-UDElement -Tag 'div' -Attributes @{ 
                                        style = @{ 
                                            fontSize = '64px'
                                            marginBottom = '16px'
                                        } 
                                    } -Content {
                                        New-UDHTML -Markup '📚'
                                    }
                                    New-UDTypography -Text 'No books yet!' -Variant h6 -Style @{ fontWeight = 'bold'; color = '#333' }
                                    New-UDTypography -Text 'Start scanning to build your library' -Variant body2 -Style @{ color = '#666'; marginTop = '8px' }
                                }
                            }
                        }
                        catch {
                            New-UDAlert -Severity warning -Text "Could not load books: $_"
                        }
                    }
                }
            }
        }
    }
}