✨ feature: Add hide button

frontend/index.pug

@@ -22,7 +22,7 @@ head
 	script(defer='' type='module' src='src/icons.ts')
 
 ul.noselect#messages
-.button-wrapper.noselect(style='position: fixed')
+.button-wrapper.noselect()
 	a.logo.noselect(href='/') zer0bin
 	.buttons.noselect
 		button#save-button.btn(aria-label='Save')
@@ -33,6 +33,10 @@ ul.noselect#messages
 			button#github-button.btn(aria-label='GitHub')
 	span.viewcounter.noselect#viewcounter-label Views: 
 	span.viewcounter.noselect#viewcounter-count
+
+.hide-button-wrapper
+	button#hide-button.btn(aria-label='Hide')
+
 .scrollbar-container
 	.wrapper
 		.line-numbers.noselect

frontend/src/icons.ts

@@ -6,6 +6,7 @@ import {
 	ForkOutlined,
 	HeartOutlined,
 	StarOutlined,
+	EyeOutlined
 } from "@ant-design/icons-svg"
 import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers"
 import tippy from "tippy.js"
@@ -15,6 +16,7 @@ import "tippy.js/animations/scale.css"
 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 githubButton = <HTMLButtonElement>document.getElementById("github-button")
 
 const extraSVGAttrs = {
@@ -35,6 +37,9 @@ copyButton.innerHTML += renderIconDefinitionToSVGElement(CopyOutlined, {
 githubButton.innerHTML += renderIconDefinitionToSVGElement(GithubOutlined, {
 	extraSVGAttrs: extraSVGAttrs,
 })
+hideButton.innerHTML += renderIconDefinitionToSVGElement(EyeOutlined, {
+	extraSVGAttrs: extraSVGAttrs,
+})
 
 tippy("#save-button", {
 	content: "Save paste<br><span class='keybind'>Ctrl + S</span>",
@@ -75,6 +80,15 @@ tippy("#github-button", {
 	allowHTML: true,
 })
 
+tippy("#hide-button", {
+	content: "Hide the button pane",
+	placement: "top",
+	animation: "scale",
+	theme: "rosepine",
+	allowHTML: true,
+})
+
+
 const observer = new MutationObserver(callback)
 
 function callback() {

frontend/src/index.ts

@@ -9,11 +9,13 @@ import config from "../config.json"
 const apiUrl = config.api_url
 const confettiChance = parseInt(config.confetti_chance)
 let rawContent = ""
+let buttonPaneHidden = false
 
 const jsConfetti = new JSConfetti()
 
 const lineNumbers = <HTMLElement>document.querySelector(".line-numbers")
 const wrapper = <HTMLPreElement>document.querySelector(".wrapper")
+const buttonWrapper = <HTMLPreElement>document.querySelector(".button-wrapper")
 const editor = <HTMLTextAreaElement>document.getElementById("text-area")
 const codeViewPre = <HTMLPreElement>document.getElementById("code-view-pre")
 const codeView = <HTMLElement>document.getElementById("code-view")
@@ -27,6 +29,7 @@ const viewCounter = <HTMLSpanElement>(
 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")
 
 function hide(element: HTMLElement) {
 	element.style.display = "none"
@@ -261,6 +264,18 @@ newButton.addEventListener("click", function () {
 	window.location.href = "/"
 })
 
+hideButton.addEventListener("click", function () {
+	if (!buttonPaneHidden) {
+		// The button pane is currently visible so we hide it
+		buttonPaneHidden = true
+		hide(buttonWrapper)
+	} else {
+		// The button pane isnt visible so we show it
+		buttonPaneHidden = false
+		show(buttonWrapper)
+	}
+})
+
 async function handlePopstate() {
 	const path = window.location.pathname
 

frontend/style/style.scss

@@ -175,6 +175,13 @@ a {
 	color: $muted;
 	cursor: auto;
 }
+.hide-button-wrapper {
+	position: fixed !important;
+	bottom: 0;
+	right: 0;
+	padding: 1rem 1rem 0.5rem 1rem;
+	z-index: 10;
+}
 .keybind {
 	color: $subtle;
 	font-size: 11px;