Merge Staging into Main (#166)

* Bring Staging up to date with Main (#143)

* Merge Staging into Main (#139)

* news carousel adjustments

* adjust explore and tag pages

* work header fixes

* profile header updates

* adjust profile home page

* sizes down work stats on smaller displays

* adjusting works and blogs lists

* Update +layout.svelte

* adding optimizations to section list

* Update +page.svelte

* Update +page.svelte

* Feat/email and recovery (#136)

* feat: password resets and email confirmations

* updating controllers with confirmation guard

* API routes for features now in place

* password resets are in

* email confirmations are now in

* update readme

* Feat/work and comments features (#138)

* Feat/fixing profile forms (#142)

* chore: add beta badge to nav

* chore: fix display of beta badge

* chore: update about panel and version

* adding placeholder for messages panel

* profile forms now work

* fix: redirect approval/rejection notifications to their intended recipient

* adding links form to profile setitngs

* feat: adding links to profile pages

* fix: address issue with layout of admin badge on mobile

* chore: adds unique constraint to the approval queue (#123)

adds a `UNIQUE` constraint to the approval queue table on `work_id`, guaranteeing that works can only ever be submitted to the queue once.

closes #78

* fix: testing new method of obtaining client IP address

* Update Functions.swift

* Update Functions.swift

* fix: addresses issues with pagination on profile pages

* fix: address issue of width on mobile devices for profile pages

* fix: remove more tags button when less than 2 tags

* fix: one last fix for tags display

* fix: make sure transactions are actually being committed

* fix: pagination on works and blogs pages

* Update version.ts

* Update Paginator.svelte

* Update version.ts

* [FIX] Addresses access token expiry issue (#152)

* fix: include parent tags when fetching approval queue

* fix: addresses issue with sessions expiring early

* chore: remove debug lines

* feat: update site version

* feat: adding svelte query

* chore: update swift dependencies

* chore: update client packages

* fix: prevent unauthorized users from creating newsposts

* chore: update readme with latest version of swift

* chore: update version

* chore: update API packages to latest versions

* chore: update sailfish version

* Enhancement/navigation (#157)

* chore: update swift dependencies to 5.8

* chore: updating sveltekit

* chore: update editor to latest version

* chore: updates vapor and related packages to latest

* chore: updating client packages to latest

* feat: adding dropdowns to topnav

* feat: adding basic guide functionality to topbar

* chore: replace user dropdown with separate buttons

* Update NavTopBar.svelte

* feat: login/sign up pages now in working order

* Update NavTopBar.svelte

* feat: add better tab navigation to search

* chore: update packages

* fix: update docs links

* fix: adding back notifications

* feat: show library and feed pages without being logged in

* fix: prevent undefined behavior in queue claims

* chore: update packages

* feat: search functionality in big dropdown now works

* fix: address some issues rendering on mobile

* fix: mobile fixed

* feat: added back buttons to all subpanels

* chore: update sailfish version

* fix: attempts to address compilation issues in docker

* fix: address issue with SSL config

* fix: addresses issue connecting to local database

* chore: remove debug line

* Feat/special events (#163)

* feat: adding models for special events

* adding migrations and middleware

* Create SpecialEventService.swift

* Update SpecialEventService.swift

* migrate to svelte 4

* update packages

* update packages, change migration names

* fix issue preventing works from loading

* Fix/style overhaul (#165)

* move beta logo to bottom of sidenav

* apply light and dark mode to HTML tag

* tie theme to document element class

* address issues with scrolling

* getting the explore nav correctly styled

* adjust explore nav padding and button roundness

* update profile to new layout

* remove old layout code

* remove unnecessary margins

* adjust layout for profile home

* finalize profile layout

* begin work on replacing the guide

* adjust width of account dropdown

* fixed opening/closing of dropdown menu

* account dropdown completed

* Update AccountDropdown.svelte

* added new pages to profile

* add account dropdown to mobile

* remove library page from profiles

* move approval queue to its own page

* navigation animation among other things

* adding theme color for dynamic title accents

* adding animations

* Update +page.svelte

* adding activity dropdown

* reworking entire guide

* moving stuff around

* moving things around

* minor changes to flex boxes

* fix scroll issue

* made changes to explore

* adding profile form

* Update routes.swift

* re-add confirmation boxes

* remove unnecessary package

Client/src/app.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="crimson">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="rgb(205, 86, 84)" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="light">

Client/src/app.scss

@@ -40,11 +40,36 @@
   --header-text: 'Josefin Sans', sans-serif;
   --body-serif-text: 'Josefin Slab', serif;
   --section-text: 'Inter', sans-serif;
+
+
 }
 
 html,
 body {
-  @apply relative lg:w-full lg:h-full lg:overflow-x-hidden lg:overflow-y-hidden;
+  @apply lg:w-full h-full;
+}
+html {
+  /* Light Mode */
+  --background: rgb(251, 251, 251);
+  --nav-background: rgb(236, 236, 236);
+  --dropshadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  --text-color: rgb(0, 0, 0);
+  --borders: rgb(128, 128, 128);
+  --code-background: rgb(211, 211, 211);
+  --placeholder: rgba(127, 127, 127, 0.6);
+  --select-bg: rgba(212, 212, 216, 1);
+  @apply transition-all;
+  &.dark {
+    --background: rgb(39, 39, 39);
+    --nav-background: rgb(47, 46, 46);
+    --dropshadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    --text-color: rgb(245, 245, 245);
+    --borders: rgb(255, 255, 255);
+    --code-background: rgb(58, 58, 58);
+    --placeholder: rgba(127, 127, 127, 0.6);
+    --select-bg: rgba(63, 63, 70, 1);
+    @apply transition-all;
+  }
 }
 body {
   color: var(--text-color);
@@ -53,6 +78,7 @@ body {
   font-size: 14px;
   font-family: var(--body-text);
   background: var(--background);
+  @apply lg:overflow-y-hidden;
 }
 h1,
 h2,
@@ -93,6 +119,155 @@ div.empty {
   }
 }
 
+/* Panels */
+div.panel-container {
+  @apply w-full lg:min-w-[300px] lg:max-w-[300px] lg:h-[calc(100vh-60px)] lg:sticky top-0 lg:overflow-hidden lg:overflow-y-scroll;
+  div.title-block {
+    @apply flex flex-col items-center justify-center;
+    h1 {
+      @apply text-3xl px-4 py-2;
+    }
+  }
+
+  h1.title {
+    @apply text-4xl mt-12 mb-6;
+  }
+
+  div.top-block {
+    @apply px-2.5 py-8 mb-2 flex items-center text-white;
+    background: var(--accent-dark);
+    h1 {
+      @apply text-white text-4xl relative top-1;
+    }
+    div.left-button {
+      @apply mr-4;
+    }
+  }
+
+  div.content-container {
+    @apply px-3 my-4;
+  }
+  div.panel-section {
+    @apply mb-4 last:mb-0 rounded-xl overflow-hidden;
+    h3 {
+      @apply text-xl mb-1 ml-2 all-small-caps font-semibold;
+      color: var(--text-color);
+    }
+
+    div.panel-box {
+      @apply bg-zinc-200 rounded-lg p-4 flex flex-col items-center relative;
+    }
+  }
+  button.panel-button, a.panel-button, div.panel-button {
+    @apply flex items-center block no-underline p-3 text-lg border-b border-zinc-400 w-full last:border-0 bg-zinc-300;
+    color: var(--text-color);
+    font-family: var(--header-text);
+    .caret {
+      @apply text-zinc-400;
+    }
+
+    &:hover {
+      @apply bg-zinc-400;
+      .caret {
+        @apply text-zinc-500;
+      }
+    }
+
+    &.active {
+      @apply text-white;
+      background-color: var(--accent);
+      .caret {
+        @apply text-white;
+      }
+      &:hover {
+        background-color: var(--accent-light);
+      }
+    }
+
+    span {
+      @apply ml-2 flex-1 text-left relative top-[0.1625rem];
+    }
+  }
+}
+
+.dark div.panel-container {
+  button.panel-button, a.panel-button {
+    @apply border-zinc-500 bg-zinc-600;
+    &:hover {
+      @apply bg-zinc-500;
+      .caret {
+        @apply text-zinc-400;
+      }
+    }
+    &.active {
+      @apply text-white;
+      background-color: var(--accent);
+      .caret {
+        @apply text-white;
+      }
+      &:hover {
+        background-color: var(--accent-light);
+      }
+    }
+  }
+
+  div.panel-section {
+    div.panel-box {
+      @apply bg-zinc-600;
+    }
+  }
+}
+
+/* Guide */
+div.guide-dropdown {
+  @apply absolute rounded-2xl z-50 max-h-[calc(100vh-80px)] p-2 pt-0 w-[calc(100vw-50px)] lg:w-[375px] overflow-hidden overflow-y-scroll;
+  display: grid;
+  grid-template: 1fr / 1fr;
+  box-shadow: var(--dropshadow);
+  font-family: var(--header-text);
+  div.guide-nav {
+    @apply sticky top-0 py-2 w-full z-10;
+  }
+  div.guide-section {
+    @apply flex flex-col w-full rounded-xl overflow-hidden my-4 first:mt-2 last:mb-0 shrink-0;
+    color: var(--text-color);
+    &.with-header {
+      margin-top: 0.125rem;
+    }
+  }
+  h5.guide-section-header {
+    @apply ml-2 uppercase;
+  }
+  button.guide-button,
+  a.guide-button {
+    @apply flex items-center w-full px-4 py-3 transition no-underline hover:bg-zinc-400 dark:hover:bg-zinc-500 border-b border-zinc-400 dark:border-zinc-500 last:border-0;
+    color: var(--text-color);
+    span {
+      @apply text-base relative top-0.5 flex-1 text-left;
+    }
+  }
+  button.profile-button {
+    @apply flex flex-col items-center justify-center p-2 rounded-xl transition mx-0.5 first:ml-0 last:mr-0 max-w-[88px] max-h-[117px];
+    span {
+      @apply mt-1 w-full truncate;
+    }
+  }
+  a.stat-box {
+    @apply block cursor-pointer flex flex-col items-center select-none no-underline p-4 w-1/3 transition transform;
+    color: var(--text-color);
+    div.stat {
+      @apply flex items-center;
+    }
+    div.stat-label {
+      @apply text-xs uppercase font-bold tracking-wider;
+    }
+  }
+}
+
+div.guide-dropdown > * {
+  grid-area: 1 / 1 ;
+}
+
 /* Editor */
 
 .dark div.ProseMirror {

Client/src/lib/state/app.state.ts

@@ -7,7 +7,7 @@ interface AppState {
 	isOfAge: boolean;
 	filter: ContentFilter;
 	theme: ThemePref;
-	darkMode: boolean;
+	brightness: string | null;
 	cardSize: CardSize;
 	sectionFont: SectionFont;
 }
@@ -16,55 +16,64 @@ const defaultAppState: AppState = {
 	isOfAge: false,
 	filter: ContentFilter.restricted,
 	theme: ThemePref.Crimson,
-	darkMode: false,
+	brightness: null,
 	cardSize: CardSize.Medium,
-	sectionFont: SectionFont.inter,
+	sectionFont: SectionFont.inter
 };
 
 const initialAppState: AppState = browser
-	? JSON.parse(window.localStorage.getItem('app') ?? 'null') ?? defaultAppState
+	? JSON.parse(window.localStorage.getItem("app") ?? "null") ?? defaultAppState
 	: defaultAppState;
 
 export const app = writable<AppState>(initialAppState);
 
-app.subscribe(value => {
+app.subscribe((value) => {
 	if (browser) {
-		window.localStorage.setItem('app', JSON.stringify(value));
+		window.localStorage.setItem("app", JSON.stringify(value));
 	}
 });
 
 export function setTheme(theme: ThemePref): void {
-	app.update((state) => ({
-		...state,
-		theme,
-	}));
+	app.update((state) => {
+		const oldTheme = state.theme;
+		state.theme = theme;
+		const hasNewTheme = document.documentElement.classList.replace(oldTheme, state.theme);
+		if (hasNewTheme) {
+			const themeColor = document.querySelector("meta[name='theme-color']");
+			const accentColor = getComputedStyle(document.documentElement).getPropertyValue(
+				"--accent"
+			);
+			themeColor?.setAttribute("content", accentColor);
+		}
+		return state;
+	});
 }
 
 export function setCardSize(size: CardSize): void {
 	app.update((state) => ({
 		...state,
-		cardSize: size,
+		cardSize: size
 	}));
 }
 
 export function setDarkMode(isDark: boolean): void {
 	app.update((state) => ({
 		...state,
-		darkMode: isDark,
+		darkMode: isDark
 	}));
 }
 
 export function setOfAge(): void {
 	app.update((state) => ({
 		...state,
-		isOfAge: !state.isOfAge,
+		isOfAge: !state.isOfAge
 	}));
 }
 
 export function setFilter(enableMature: boolean, enableExplicit: boolean): void {
 	app.update((state) => ({
 		...state,
-		filter: determineContentFilter(enableMature, enableExplicit),
+		filter: determineContentFilter(enableMature, enableExplicit)
 	}));
 }
 

Client/src/lib/ui/content/ExploreSummary.svelte

@@ -207,7 +207,7 @@
 </div>-->
 <style lang="scss">
 	div.section {
-		@apply max-w-6xl w-11/12 xl:w-full mx-auto my-6 first:mt-0;
+		@apply max-w-6xl w-11/12 xl:w-full mx-auto my-6 first:mt-0 last:mb-0;
 		div.section-header {
 			@apply flex items-center border-b pb-2 mb-4;
 			font-family: var(--header-text);

Client/src/lib/ui/content/NewsCarousel.svelte

@@ -12,14 +12,11 @@
 		CalendarLine,
 		LineChartLine
 	} from "svelte-remixicon";
-	import { DEFAULT_SLOGANS } from "$lib/util/constants";
 	import { Time } from "$lib/ui/util";
 	import toast from "svelte-french-toast";
 	import { abbreviate, slugify } from "$lib/util/functions";
 
 	let loading = false;
-	let currSlogan = DEFAULT_SLOGANS[Math.floor(Math.random() * DEFAULT_SLOGANS.length)];
-	const today = new Date();
 	let posts: Paginate<Blog> = {
 		items: [],
 		metadata: {
@@ -154,7 +151,7 @@
 
 <style lang="scss">
 	div.carousel-container {
-		@apply xl:rounded-xl overflow-hidden mb-6 xl:mt-6 w-full;
+		@apply overflow-hidden w-full;
 		div.deco-box {
 			@apply h-20 w-20 rounded-full flex items-center justify-center text-white font-semibold all-small-caps;
 			font-family: var(--header-text), sans-serif;

Client/src/lib/ui/content/NotificationCard.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <div
-	class="flex flex-col relative rounded-xl overflow-hidden bg-zinc-200 dark:bg-zinc-700 dark:highlight-shadowed hover:bg-zinc-300 dark:hover:bg-zinc-600 transition"
+	class="flex flex-col relative rounded-xl overflow-hidden bg-zinc-300 dark:bg-zinc-600 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition"
 >
 	{#if notification.from.id !== null}
 		{#if notification.eventType === EventType.follow}

Client/src/lib/ui/dropdown/Dropdown.svelte

@@ -4,6 +4,7 @@
 	import { slide } from "svelte/transition";
 	import { Button } from "$lib/ui/util";
 	import { clickOutside } from "$lib/util/functions";
+	import { throttle } from "$lib/util/functions";
 
 	export let kind: "primary" | "normal" = "normal";
 	export let open = false;
@@ -14,9 +15,10 @@
 	function determineOpenState() {
 		open = !open;
 	}
+	const throttled = throttle(determineOpenState, 150);
 
-	let button: HTMLButtonElement = null;
-	let dropdown: HTMLDivElement = null;
+	let button: HTMLButtonElement;
+	let dropdown: HTMLDivElement;
 
 	$: {
 		if (button) {
@@ -43,7 +45,7 @@
 		isActive={open}
 		{inline}
 		{noAxis}
-		on:click={determineOpenState}
+		on:click={throttled}
 		bind:thisButton={button}
 	>
 		<slot name="button" />
@@ -53,8 +55,9 @@
 			class="dropdown-items"
 			transition:slide|local={{ delay: 0, duration: 150 }}
 			bind:this={dropdown}
+			on:click={throttled}
 			use:clickOutside
-			on:outclick={determineOpenState}
+			on:outclick={throttled}
 		>
 			<slot name="items" />
 		</div>