Lock and pin icons

web/static/index.css

@@ -201,6 +201,26 @@ body {
     margin: 2rem;
 }
 
+.thread-title {
+    position: relative;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.thread-icons {
+    position: absolute;
+    right: 100%;
+    margin-right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+}
+
+.thread-icons .icon {
+    margin-left: 2px;
+}
+
 .thread-subject {
     font-weight: bold;
     color: var(--link-primary);
@@ -409,6 +429,16 @@ body {
     color: var(--danger);
 }
 
+.icon {
+    width: 12px;
+    height: 12px;
+    vertical-align: middle;
+}
+
+.icon:not(:last-child) {
+    margin-right: 2px;
+}
+
 hr {
     border: none;
     border-top: 1px solid var(--border-light);

web/static/media/icons/lock.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-6 -0.001 99.998 99.998" xmlns="http://www.w3.org/2000/svg"><path fill="#F1C40E" d="M4 39.996h80a4 4 0 0 1 4 4v52a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-52a4 4 0 0 1 4-4z"/><path fill="#FFF55C" d="M4 35.996h80a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4v-5a4 4 0 0 1 4-4z"/><path fill="#364B5E" d="M73 38.996c-4.418 0-8 1.567-8 3.5 0 1.934 3.582 3.5 8 3.5s8-1.567 8-3.5-3.582-3.5-8-3.5zm-58 0c-4.418 0-8 1.567-8 3.5 0 1.934 3.582 3.5 8 3.5s8-1.567 8-3.5-3.582-3.5-8-3.5z"/><path fill="#EBEDEE" d="M44-.001c-19.299 0-35 14.709-35 34.019v7.978c0 .553 2.687 2 6 2s6-1.447 6-2l-.021-.071v-7.907c0-12.701 10.327-22.034 23.021-22.034 12.693 0 23.021 9.333 23.021 22.034v7.907l-.021.071c0 .553 2.688 2 6 2s6-1.447 6-2v-7.978C79 14.708 63.299-.001 44-.001z"/><path fill="#BDC3C7" d="M44 5.998c-15.99 0-29 13.091-29 29.183v8.815c3.313 0 6-1.447 6-2l-.021-.071v-7.907c0-12.701 10.327-22.034 23.021-22.034 12.693 0 23.021 9.333 23.021 22.034v7.907l-.021.071c0 .553 2.688 2 6 2v-8.815C73 19.09 59.99 5.998 44 5.998z"/><path fill="#D8B00C" d="M0 95.997a4 4 0 0 0 4 4h80a4 4 0 0 0 4-4v-3H0v3z"/><path fill="#E5BA0D" d="M4 48.996a3.99 3.99 0 0 1-3.858-3H0v50a4 4 0 0 0 4 4h40v-51H4z"/><path fill="#CDA70C" d="M0 92.997v3a4 4 0 0 0 4 4h40v-7H0z"/></svg>

web/static/media/icons/pin.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" fill="#000000">
+␍<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+␍<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+␍<g id="SVGRepo_iconCarrier"> <g transform="translate(0 -1028.4)"> <g transform="matrix(.70711 .70711 -.70711 .70711 737.68 297.72)"> <path d="m11 1028.4v13h1 6.406c-0.595-1.1-1.416-2.1-2.406-2.8v-8c0.616-0.6 1.131-1.4 1.531-2.2h-5.531-1z" fill="#c0392b"/> <path d="m11 13v2 4 2l1 2v-2-6-2h-1z" transform="translate(0 1028.4)" fill="#bdc3c7"/> <path d="m12 13v2 4 2 2l1-2v-2-4-2h-1z" transform="translate(0 1028.4)" fill="#7f8c8d"/> <path d="m6.4688 1028.4c0.4006 0.8 0.915 1.6 1.5312 2.2v8c-0.9897 0.7-1.8113 1.7-2.4062 2.8h6.4062v-13h-5.5312z" fill="#e74c3c"/> </g> </g> </g>
+␍</svg>

web/views/board.templ

@@ -95,14 +95,18 @@ templ ThreadsCatalog(previews []CatalogThreadPreview, catalogContext CatalogCont
 						</span>
 					}
 				</strong>
-				<h1>
+				<h1 class="thread-title">
-					<a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a>
+					<span class="thread-icons">
-					if preview.Locked {
+						if preview.Locked {
-						<span>Locked</span>
+							<img src="/static/media/icons/lock.svg" alt="Locked" class="icon"/>
-					}
+						}
-					if preview.Pinned {
+						if preview.Pinned {
-						<span>Pinned</span>
+							<img src="/static/media/icons/pin.svg" alt="Pinned" class="icon"/>
-					}
+						}
+					</span>
+					<a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">
+						{ preview.Subject }
+					</a>
 				</h1>
 				<p>
 					@templ.Raw(util.EnrichPost(preview.Body))

web/views/thread.templ

@@ -93,6 +93,14 @@ templ PostOriginal(post database.Post, thread database.Thread) {
 		/>
 		<video controls style="display: none;" class="post-vid"></video>
 		<header style="margin-top: 10px;" class="post-header">
+			<span style="float: left;">
+				if thread.Locked {
+					<img src="/static/media/icons/lock.svg" alt="Locked" class="icon"/>
+				}
+				if thread.Pinned {
+					<img src="/static/media/icons/pin.svg" alt="Pinned" class="icon"/>
+				}
+			</span>
 			<h1 class="thread-subject">{ thread.Subject } -</h1>
 			<span class="post-author">{ post.Author }</span>
 			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>