Bookhoard/bookhoard
0
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 51 Wiki Activity

feat: add bookshelf dashboard with visual shelf layout

Browse Source 
- Create bookshelf.templ with beautiful visual bookshelf interface
- Implement wooden shelf appearance with CSS gradients
- Add responsive grid layout (2/3/6 columns based on screen size)
- Books display with 3D spine effect and hover animations
- Auto-select first library and load books on page load
- Empty state and loading state handling

Visual Features:
- Wooden shelves with gradient shadows (12px bottom border)
- Books hover with lift (translateY) and rotation effects
- Book covers with aspect ratio 2/3 and inset spine highlight
- Error handling falls back to placeholder-book.svg
- 6 books per shelf for optimal display

JavaScript Features:
- Fetch visible libraries from API
- Populate library selector dropdown
- Load and display media items on shelves
- Handle empty states gracefully
- Book detail placeholder (to be implemented)
This commit is contained in:
john-okeefe committed 2026-01-29 15:51:51 -05:00
1 parent 2a91ff9477
commit a0f0156d31
2 files changed
+480
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/bookshelf_templ.go
+40
View File
@@ -0,0 +1,40 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.977
package templates
//lint:file-ignore SA4006 This context is only used if a nested component is present.
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
func BookShelf(user User) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
if templ_7745c5c3_Var1 == nil {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Library - Bookmann</title><script src=\"/static/htmx.min.js\"></script><script src=\"/static/toast.js\"></script><script src=\"/static/header.js\"></script><link href=\"/static/style.css\" rel=\"stylesheet\"><style>\n :root {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-tokyo-night {\n --bg-primary: #1a1b26;\n --bg-secondary: #16161e;\n --text-primary: #a9b1d6;\n --text-secondary: #565f89;\n --accent: #7aa2f7;\n --border: #414868;\n }\n .theme-dracula {\n --bg-primary: #282a36;\n --bg-secondary: #21222c;\n --text-primary: #f8f8f2;\n --text-secondary: #6272a4;\n --accent: #bd93f9;\n --border: #44475a;\n }\n .theme-nord {\n --bg-primary: #2e3440;\n --bg-secondary: #3b4252;\n --text-primary: #eceff4;\n --text-secondary: #5e81ac;\n --accent: #88c0d0;\n --border: #4c566a;\n }\n .theme-solarized-dark {\n --bg-primary: #002b36;\n --bg-secondary: #073642;\n --text-primary: #93a1a1;\n --text-secondary: #586e75;\n --accent: #2aa198;\n --border: #586e75;\n }\n .theme-monokai {\n --bg-primary: #272822;\n --bg-secondary: #3e3d32;\n --text-primary: #f8f8f2;\n --text-secondary: #75715e;\n --accent: #a6e22e;\n --border: #49483e;\n }\n .theme-one-dark-pro {\n --bg-primary: #282c34;\n --bg-secondary: #21252b;\n --text-primary: #abb2bf;\n --text-secondary: #5c6370;\n --accent: #61dafb;\n --border: #3e4451;\n }\n .theme-material-dark {\n --bg-primary: #263238;\n --bg-secondary: #37474f;\n --text-primary: #eeffff;\n --text-secondary: #546e7a;\n --accent: #80cbc4;\n --border: #455a64;\n }\n .theme-catppuccin-mocha {\n --bg-primary: #1e1e2e;\n --bg-secondary: #181825;\n --text-primary: #cdd6f4;\n --text-secondary: #bac2de;\n --accent: #f38ba8;\n --border: #313244;\n }\n .theme-catppuccin-macchiato {\n --bg-primary: #24273a;\n --bg-secondary: #1e2030;\n --text-primary: #cad3f5;\n --text-secondary: #b8c0e0;\n --accent: #f0c6c6;\n --border: #363a4f;\n }\n .theme-catppuccin-frappe {\n --bg-primary: #303446;\n --bg-secondary: #292c3c;\n --text-primary: #c6d0f5;\n --text-secondary: #b5bfe2;\n --accent: #f2d5cf;\n --border: #414559;\n }\n .theme-catppuccin-latte {\n --bg-primary: #eff1f5;\n --bg-secondary: #e6e9ef;\n --text-primary: #4c4f69;\n --text-secondary: #5c5f77;\n --accent: #d20f39;\n --border: #bcc0cc;\n }\n /* Wood themes */\n .theme-wood-light {\n --bg-primary: rgba(222, 184, 135, 0.9);\n --bg-secondary: rgba(210, 166, 121, 0.95);\n --text-primary: #2c1810;\n --text-secondary: #5a3a2a;\n --accent: #8b5a2b;\n --border: #6b4423;\n }\n .theme-wood-dark {\n --bg-primary: rgba(139, 115, 85, 0.9);\n --bg-secondary: rgba(107, 83, 68, 0.95);\n --text-primary: #f5e6d3;\n --text-secondary: #d4c4b0;\n --accent: #deb887;\n --border: #5a4636;\n }\n .theme-wood-mahogany {\n --bg-primary: rgba(160, 82, 45, 0.9);\n --bg-secondary: rgba(139, 69, 19, 0.95);\n --text-primary: #ffe4c4;\n --text-secondary: #daa520;\n --accent: #f4a460;\n --border: #8b4513;\n }\n body {\n background-color: var(--bg-primary);\n color: Line truncated
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
var _ = templruntime.GeneratedTemplate