add canny.io (#520)

* add canny

* update button

---------

Co-authored-by: Alex Patterson <alex.patterson@fusionauth.io>

Author: codercatdev

apps/codingcatdev/src/lib/components/global/icons/ThemeToggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte/types/runtime/internal/lifecycle';
+	import { onMount } from 'svelte';
 
 	enum themeType {
 		dark = 'dark',

apps/codingcatdev/src/routes/(feedback)/Canny.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { modeCurrent } from '@skeletonlabs/skeleton';
+	import type { Unsubscriber } from 'svelte/store';
+
+	let container: HTMLDivElement;
+	let modeUnsubscribe: Unsubscriber;
+	onMount(async () => {
+		modeUnsubscribe = modeCurrent.subscribe((m) => {
+			container.style.backgroundColor = m ? 'white' : '#121212';
+		});
+
+		// @ts-ignore
+		!(function (w, d, i, s) {
+			function l() {
+				if (!d.getElementById(i)) {
+					var f = d.getElementsByTagName(s)[0],
+						e = d.createElement(s);
+					// @ts-ignore
+					(e.type = 'text/javascript'),
+						// @ts-ignore
+						(e.async = !0),
+						// @ts-ignore
+						(e.src = 'https://canny.io/sdk.js'),
+						// @ts-ignore
+						f.parentNode.insertBefore(e, f);
+				}
+			}
+			// @ts-ignore
+			if ('function' != typeof w.Canny) {
+				var c = function () {
+					// @ts-ignore
+					c.q.push(arguments);
+				};
+				// @ts-ignore
+				(c.q = []),
+					// @ts-ignore
+					(w.Canny = c),
+					'complete' === d.readyState
+						? l()
+						: // @ts-ignore
+						w.attachEvent
+						? // @ts-ignore
+						  w.attachEvent('onload', l)
+						: w.addEventListener('load', l, !1);
+			}
+		})(window, document, 'canny-jssdk', 'script');
+	});
+	afterUpdate(() => {
+		// @ts-ignore
+		if ('function' === typeof window.Canny) {
+			// @ts-ignore
+			Canny('render', {
+				boardToken: '185218a5-57c7-2354-9eba-30105a9da7bd',
+				basePath: '/feedback', // See step 2
+				ssoToken: null, // See step 3,
+				theme: $modeCurrent ? 'light' : 'dark'
+			});
+		}
+	});
+	onDestroy(() => {
+		if (modeUnsubscribe) modeUnsubscribe();
+	});
+</script>
+
+<div class="flex justify-center h-full w-full" bind:this={container}>
+	<div class="w-full h-full max-w-5xl p-8" data-canny></div>
+</div>

apps/codingcatdev/src/routes/(feedback)/CannyButton.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { ChatBubbleLeft } from '@steeze-ui/heroicons';
+</script>
+
+<div class="fixed bottom-8 right-8 z-50">
+	<a href="/feedback" class="btn variant-filled-primary flex flex-col">
+		<span class="hidden md:block">Feedback</span>
+		<div><Icon src={ChatBubbleLeft} theme="solid" class="w-8 md:w-12" /></div></a
+	>
+</div>

apps/codingcatdev/src/routes/(feedback)/feedback/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Canny from '../Canny.svelte';
+</script>
+
+<Canny />

apps/codingcatdev/src/routes/(feedback)/feedback/[...id]/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Canny from '../../Canny.svelte';
+</script>
+
+<Canny />

apps/codingcatdev/src/routes/+layout.svelte

@@ -30,6 +30,7 @@
 	import CcdFooter from './(layout-partials)/CcdFooter.svelte';
 	import type { Author, Content } from '$lib/types';
 	import { analyticsLogPageView } from '$lib/client/firebase';
+	import CannyButton from './(feedback)/CannyButton.svelte';
 
 	// Scroll heading into view
 	function scrollHeadingIntoView(): void {
@@ -165,6 +166,7 @@
 <CcdDrawer />
 <Modal />
 <Toast />
+<CannyButton />
 
 {#if data?.preview}
 	<div