✨ feature: Single view pastes works on the frontend

frontend/index.pug

@@ -25,6 +25,7 @@ ul.noselect#messages
 	a.logo.noselect(href='/') zer0bin
 	.buttons.noselect
 		button#save-button.btn(aria-label='Save')
+		button#single-view-button.btn(aria-label='Single View')
 		a(href='/' aria-label='New paste')
 			button#new-button.btn(aria-label='New paste')
 		button#copy-button.btn(aria-label='Copy')

frontend/src/icons.ts

@@ -7,7 +7,8 @@ import {
 	HeartOutlined,
 	StarOutlined,
 	EyeOutlined,
-	EyeInvisibleOutlined
+	EyeInvisibleOutlined,
+	FireOutlined,
 } from "@ant-design/icons-svg"
 import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
 import tippy from "tippy.js"
@@ -19,6 +20,9 @@ const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
 const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
 const githubButton = <HTMLButtonElement>document.getElementById("github-button")
+const singleViewButton = <HTMLButtonElement>(
+	document.getElementById("single-view-button")
+)
 
 const extraSVGAttrs = {
 	width: "1em",
@@ -41,6 +45,9 @@ githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
 hideButton.innerHTML += renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
 	extraSVGAttrs: extraSVGAttrs,
 })
+singleViewButton.innerHTML += renderIconDefinitionToSVGElement(FireOutlined, {
+	extraSVGAttrs: extraSVGAttrs,
+})
 
 tippy("#save-button", {
 	content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@@ -50,6 +57,14 @@ tippy("#save-button", {
 	allowHTML: true,
 })
 
+tippy("#single-view-button", {
+	content: "Single View",
+	placement: "bottom",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
 tippy("#new-button", {
 	content: "New paste<br><span class='keybind'>Ctrl + N</span>",
 	placement: "bottom",
@@ -89,7 +104,6 @@ tippy("#hide-button", {
 	allowHTML: true,
 })
 
-
 const observer = new MutationObserver(callback)
 
 function callback() {
@@ -113,12 +127,15 @@ observer.observe(document.getElementById("code-view-pre"), {
 
 export function toggleHiddenIcon(hidden: boolean) {
 	if (!hidden) {
-		hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeInvisibleOutlined, {
-			extraSVGAttrs: extraSVGAttrs,
-		})
+		hideButton.innerHTML = renderIconDefinitionToSVGElement(
+			EyeInvisibleOutlined,
+			{
+				extraSVGAttrs: extraSVGAttrs,
+			}
+		)
 	} else {
 		hideButton.innerHTML = renderIconDefinitionToSVGElement(EyeOutlined, {
 			extraSVGAttrs: extraSVGAttrs,
 		})
 	}
-}
+}

frontend/src/index.ts

@@ -13,6 +13,7 @@ const apiUrl = config.api_url
 const confettiChance = parseInt(config.confetti_chance)
 let rawContent = ""
 let buttonPaneHidden = false
+let singleView = false
 
 const jsConfetti = new JSConfetti()
 
@@ -33,6 +34,9 @@ const saveButton = <HTMLButtonElement>document.getElementById("save-button")
 const newButton = <HTMLButtonElement>document.getElementById("new-button")
 const copyButton = <HTMLButtonElement>document.getElementById("copy-button")
 const hideButton = <HTMLButtonElement>document.getElementById("hide-button")
+const singleViewButton = <HTMLButtonElement>(
+	document.getElementById("single-view-button")
+)
 
 function hide(element: HTMLElement) {
 	element.style.display = "none"
@@ -51,8 +55,7 @@ function enable(element: HTMLButtonElement) {
 }
 
 async function postPaste(content: string, callback: Function) {
-	let single_view = true;
-	const payload = { content, single_view }
+	const payload = { content, single_view: singleView }
 	await fetch(`${apiUrl}/p/n`, {
 		method: "POST",
 		headers: {
@@ -107,6 +110,7 @@ function newPaste() {
 	enable(saveButton)
 	disable(newButton)
 	disable(copyButton)
+	enable(singleViewButton)
 
 	editor.value = ""
 	rawContent = ""
@@ -132,7 +136,7 @@ function addMessage(message: string) {
 	}, 3000)
 }
 
-function viewPaste(content: string, views: string) {
+function viewPaste(content: string, views: string, singleView: boolean) {
 	lineNumbers.innerHTML = ""
 	if (
 		content.startsWith("---") ||
@@ -147,9 +151,14 @@ function viewPaste(content: string, views: string) {
 		codeView.innerHTML = hljs.highlightAuto(content).value
 	}
 
+	if (singleView) {
+		singleViewButton.style.color = "#eb6f92"
+	}
+
 	disable(saveButton)
 	enable(newButton)
 	enable(copyButton)
+	disable(singleViewButton)
 	hide(editor)
 
 	show(codeViewPre)
@@ -178,7 +187,7 @@ async function savePaste() {
 			window.history.pushState(null, "", `/${res["data"]["id"]}`)
 
 			rawContent = res["data"]["content"]
-			viewPaste(rawContent, "0")
+			viewPaste(rawContent, "0", res["data"]["single_view"])
 
 			const rand = Math.floor(Math.random() * confettiChance * 6)
 
@@ -278,6 +287,16 @@ hideButton.addEventListener("click", function () {
 	toggleHiddenIcon(buttonPaneHidden)
 })
 
+singleViewButton.addEventListener("click", function () {
+	if (singleView) {
+		singleView = false
+		singleViewButton.style.color = "#9ccfd8"
+	} else {
+		singleView = true
+		singleViewButton.style.color = "#eb6f92"
+	}
+})
+
 async function handlePopstate() {
 	const path = window.location.pathname
 
@@ -293,7 +312,11 @@ async function handlePopstate() {
 				newPaste()
 			} else {
 				rawContent = res["data"]["content"]
-				viewPaste(rawContent, res["data"]["views"].toString())
+				viewPaste(
+					rawContent,
+					res["data"]["views"].toString(),
+					res["data"]["single_view"]
+				)
 			}
 		})
 	}