Add simple settings section. Fixes #15

web/index.css

@@ -82,3 +82,11 @@ div.sticker {
     object-fit: contain; }
     div.sticker > img.visible {
       display: initial; }
+
+div.settings-list {
+  display: flex; }
+  div.settings-list button {
+    width: 100%;
+    margin: .5rem;
+    padding: .5rem;
+    border-radius: .25rem; }

web/index.js

@@ -54,8 +54,8 @@ class App extends Component {
 			frequentlyUsed: {
 				...this.state.frequentlyUsed,
 				stickerIDs,
-				stickers
-			}
+				stickers,
+			},
 		})
 		localStorage.mauFrequentlyUsedStickerCache = JSON.stringify(stickers.map(sticker => [sticker.id, sticker]))
 	}
@@ -158,15 +158,28 @@ class App extends Component {
 			<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
 				<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓️" />
 				${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
+				<${NavBarItem} pack=${{ id: "settings", title: "Settings" }} iconOverride="res/settings.svg" altOverride="⚙️️" />
 			</nav>
 			<div class="pack-list ${isMobileSafari ? "ios-safari-hack" : ""}" ref=${elem => this.packListRef = elem}>
 				<${Pack} pack=${this.state.frequentlyUsed} send=${this.sendSticker} />
 				${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack} send=${this.sendSticker} />`)}
+				<${Settings} />
 			</div>
 		</main>`
 	}
 }
 
+const reload = () => window.location.reload()
+
+const Settings = () => html`
+	<section class="stickerpack settings" id="pack-settings" data-pack-id="settings">
+		<h1>Settings</h1>
+		<div class="settings-list">
+			<button onClick=${reload}>Reload</button>
+		</div>
+	</section>
+`
+
 // By default we just let the browser handle scrolling to sections, but webviews on Element iOS
 // open the link in the browser instead of just scrolling there, so we need to scroll manually:
 const scrollToSection = (evt, id) => {

web/index.sass

@@ -105,3 +105,12 @@ div.sticker
 
     &.visible
       display: initial
+
+div.settings-list
+  display: flex
+
+  button
+    width: 100%
+    margin: .5rem
+    padding: .5rem
+    border-radius: .25rem

web/res/settings.svg

+<svg height='100px' width='100px'  fill="#000000" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><g i:extraneous="self"><g><path d="M5273.1,2400.1v-2c0-2.8-5-4-9.7-4s-9.7,1.3-9.7,4v2c0,1.8,0.7,3.6,2,4.9l5,4.9c0.3,0.3,0.4,0.6,0.4,1v6.4     c0,0.4,0.2,0.7,0.6,0.8l2.9,0.9c0.5,0.1,1-0.2,1-0.8v-7.2c0-0.4,0.2-0.7,0.4-1l5.1-5C5272.4,2403.7,5273.1,2401.9,5273.1,2400.1z      M5263.4,2400c-4.8,0-7.4-1.3-7.5-1.8v0c0.1-0.5,2.7-1.8,7.5-1.8c4.8,0,7.3,1.3,7.5,1.8C5270.7,2398.7,5268.2,2400,5263.4,2400z"></path><path d="M5268.4,2410.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1c0-0.6-0.4-1-1-1H5268.4z"></path><path d="M5272.7,2413.7h-4.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1C5273.7,2414.1,5273.3,2413.7,5272.7,2413.7z"></path><path d="M5272.7,2417h-4.3c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h4.3c0.6,0,1-0.4,1-1C5273.7,2417.5,5273.3,2417,5272.7,2417z"></path></g><g><path d="M50,30.5c-10.8,0-19.5,8.8-19.5,19.5S39.2,69.5,50,69.5c10.8,0,19.5-8.8,19.5-19.5S60.8,30.5,50,30.5z M50,63.6     c-7.5,0-13.6-6.1-13.6-13.6S42.5,36.4,50,36.4c7.5,0,13.6,6.1,13.6,13.6S57.5,63.6,50,63.6z"></path><path d="M94.8,39.1l-13-1.3c-0.2-0.6-0.5-1.1-0.7-1.7L89.4,26c1-1.2,0.9-2.9-0.2-3.9L78,10.8c-1.1-1.1-2.8-1.2-3.9-0.2l-10.1,8.3     c-0.6-0.3-1.1-0.5-1.7-0.7l-1.3-13c-0.2-1.5-1.4-2.7-2.9-2.7H42.1c-1.5,0-2.8,1.1-2.9,2.7l-1.3,13c-0.6,0.2-1.1,0.5-1.7,0.7     L26,10.6c-1.2-1-2.9-0.9-3.9,0.2L10.8,22c-1.1,1.1-1.2,2.8-0.2,3.9l8.3,10.1c-0.3,0.6-0.5,1.1-0.7,1.7l-13,1.3     c-1.5,0.2-2.7,1.4-2.7,2.9v15.9c0,1.5,1.1,2.8,2.7,2.9l13,1.3c0.2,0.6,0.5,1.1,0.7,1.7L10.6,74c-1,1.2-0.9,2.9,0.2,3.9L22,89.2     c1.1,1.1,2.8,1.2,3.9,0.2l10.1-8.3c0.6,0.3,1.1,0.5,1.7,0.7l1.3,13c0.2,1.5,1.4,2.7,2.9,2.7h15.9c1.5,0,2.8-1.1,2.9-2.7l1.3-13     c0.6-0.2,1.1-0.5,1.7-0.7L74,89.4c1.2,1,2.9,0.9,3.9-0.2L89.2,78c1.1-1.1,1.2-2.8,0.2-3.9l-8.3-10.1c0.3-0.6,0.5-1.1,0.7-1.7     l13-1.3c1.5-0.2,2.6-1.4,2.6-2.9V42.1C97.5,40.6,96.4,39.3,94.8,39.1z M91.6,55.3l-12.2,1.2c-1.2,0.1-2.2,0.9-2.5,2     c-0.5,1.5-1.1,2.9-1.8,4.4c-0.5,1-0.4,2.3,0.3,3.2l7.8,9.5l-7.4,7.4l-9.5-7.8c-0.9-0.7-2.2-0.9-3.2-0.3c-1.5,0.8-2.9,1.4-4.4,1.8     c-1.1,0.4-1.9,1.3-2,2.5l-1.2,12.2H44.7l-1.2-12.2c-0.1-1.2-0.9-2.2-2-2.5c-1.5-0.5-2.9-1.1-4.4-1.8c-1-0.5-2.3-0.4-3.2,0.3     l-9.5,7.8l-7.4-7.4l7.8-9.5c0.7-0.9,0.9-2.2,0.3-3.2c-0.8-1.5-1.4-2.9-1.8-4.4c-0.4-1.1-1.3-1.9-2.5-2L8.4,55.3V44.7l12.2-1.2     c1.2-0.1,2.2-0.9,2.5-2c0.5-1.5,1.1-2.9,1.8-4.4c0.5-1,0.4-2.3-0.3-3.2l-7.8-9.5l7.4-7.4l9.5,7.8c0.9,0.7,2.2,0.9,3.2,0.3     c1.5-0.8,2.9-1.4,4.4-1.8c1.1-0.4,1.9-1.3,2-2.5l1.2-12.2h10.5l1.2,12.2c0.1,1.2,0.9,2.2,2,2.5c1.5,0.5,2.9,1.1,4.4,1.8     c1,0.5,2.3,0.4,3.2-0.3l9.5-7.8l7.4,7.4l-7.8,9.5c-0.7,0.9-0.9,2.2-0.3,3.2c0.8,1.5,1.4,2.9,1.8,4.4c0.4,1.1,1.3,1.9,2.5,2     l12.2,1.2V55.3z"></path></g></g></g></svg>
\ No newline at end of file