comfychan/web/views/board.templ

package views

import (
	"fmt"
	"github.com/dominicf2001/comfychan/internal/database"
	"github.com/dominicf2001/comfychan/internal/util"
	"github.com/dominicf2001/comfychan/web/views/shared"
	"strconv"
	"time"
)

templ BoardHeader(board database.Board) {
	<header class="board-header">
		<img src={ fmt.Sprintf("/static/media/banners/%s.png", board.Slug) }/>
		<h1>
			{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
		</h1>
		<p>{ board.Tag }</p>
	</header>
}

templ Board(board database.Board, isAdmin bool) {
	@shared.Layout() {
		@BoardHeader(board)
		<div class="new-post-container">
			<button
				_="on load hide #newPostForm 
				on click hide me then show #newPostForm"
				id="newThreadBtn"
			>[New Thread]</button>
			@shared.NewPostForm(board, fmt.Sprintf("/%s/threads", board.Slug), true)
		</div>
		<hr/>
		<div id="boardActionBar" class="action-bar">
			<div class="action-item">
				<label for="selectResize">Image size:</label>
				<select id="selectResize" onchange="resizeCatalogPreviewImgs()">
					<option value="small" selected>Small</option>
					<option value="large">Large</option>
				</select>
			</div>
			<div class="action-item">
				<label for="selectSortBy">Sort by:</label>
				<select id="selectSortBy" onchange="applyCatalogSort()">
					<option value="bumpedat" selected>Bump order</option>
					<option value="replycount">Reply count</option>
				</select>
			</div>
			<div class="action-item action-search">
				<input
					type="search"
					id="catalogSearch"
					placeholder="Search"
					oninput="applyCatalogSearch()"
				/>
			</div>
			<div class="action-item">
				<a
					class="link-button"
					_="on click trigger refreshPosts on body"
				>[Refresh]</a>
			</div>
		</div>
		<hr/>
		<div
			hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) }
			hx-trigger="load, refreshPosts from:body"
			_="on htmx:afterRequest 
				call resizeCatalogPreviewImgs()
				then call applyCatalogSearch()
				then call applyCatalogSort()"
		></div>
	}
}

type CatalogThreadPreview struct {
	Subject    string
	Body       string
	ThreadId   int
	ThreadURL  string
	ThumbPath  string
	ReplyCount int
	IpCount    int
	Pinned     bool
	Locked     bool
	BumpedAt   time.Time
}

type CatalogContext struct {
	IsAdmin   bool
	BoardSlug string
}

templ ThreadsCatalog(previews []CatalogThreadPreview, catalogContext CatalogContext) {
	<div id="catalog">
		for _, preview := range previews {
			{{ replyCount := strconv.FormatInt(int64(preview.ReplyCount), 10) }}
			{{ ipCount := strconv.FormatInt(int64(preview.IpCount), 10) }}
			{{ elThreadId := fmt.Sprintf("thread-%d", preview.ThreadId) }}
			{{
				pinnedInt := 0
				if preview.Pinned {
					pinnedInt = 1
				}
			}}
			<div data-pinned={ strconv.Itoa(pinnedInt) } data-replycount={ strconv.Itoa(preview.ReplyCount) } data-bumpedat={ strconv.FormatInt(preview.BumpedAt.UnixMilli(), 10) } id={ elThreadId } class="catalog-preview">
				<a href={ templ.URL(preview.ThreadURL) }>
					<img
						loading="lazy"
						class="catalog-preview-img"
						src={ fmt.Sprintf("/media/posts/thumb/%s",
				preview.ThumbPath) }
					/>
				</a>
				<div class="catalog-preview-counts-container">
					<span class="icons-container">
						if preview.Locked {
							<img src="/static/media/icons/lock.svg" alt="Locked" class="icon"/>
						}
						if preview.Pinned {
							<img src="/static/media/icons/pin.svg" alt="Pinned" class="icon"/>
						}
					</span>
					<strong class="catalog-preview-counts">
						R: { replyCount } / I: { ipCount }
						if catalogContext.IsAdmin {
							<span
								id={ fmt.Sprintf("%s-admintoggle", elThreadId) }
								class="link-button"
								style="font-size:10px;margin-left:5px;"
								_={ fmt.Sprintf(`on click call #%s-dialog.showModal()`, elThreadId) }
							>
								M
							</span>
						}
					</strong>
				</div>
				<h1 style="margin-top: 5px;">
					<a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">
						{ preview.Subject }
					</a>
				</h1>
				<p>
					@templ.Raw(util.EnrichPost(preview.Body))
				</p>
				<dialog
					id={ elThreadId + "-dialog" }
					class="admin-dialog"
				>
					<h1>{ elThreadId }</h1>
					<button
						class="link-button"
						hx-delete={ fmt.Sprintf("/admin/threads/%d", preview.ThreadId) }
						hx-swap="none"
						_="on htmx:afterRequest trigger refreshPosts on body"
						hx-confirm="Are you sure you wish to delete this thread?"
					>Delete</button>
					<button
						class="link-button"
						hx-patch={ fmt.Sprintf("/admin/threads/%d/pin?pinned=%t", preview.ThreadId, !preview.Pinned) }
						hx-swap="none"
						_="on htmx:afterRequest trigger refreshPosts on body"
						hx-confirm="Are you sure you wish to toggle pin this thread?"
					>
						if preview.Pinned {
							Unpin 
						} else {
							Pin 
						}
					</button>
					<button
						class="link-button"
						hx-patch={ fmt.Sprintf("/admin/threads/%d/lock?locked=%t", preview.ThreadId, !preview.Locked) }
						hx-swap="none"
						_="on htmx:afterRequest trigger refreshPosts on body"
						hx-confirm="Are you sure you wish to toggle lock this thread?"
					>
						if preview.Locked {
							Unlock
						} else {
							Lock
						}
					</button>
					<button
						class="admin-dialog-close-btn link-button"
						_={ fmt.Sprintf("on click call #%s-dialog.close()", elThreadId) }
					>Close</button>
				</dialog>
			</div>
		}
	</div>
	<hr/>
}