Fix error states, fix css fallback when js disabled (SCSS import).

src/lib/components/search/random/index.svelte

@@ -43,7 +43,7 @@
 				if (resultGames?.length <= 0) {
 					toast.send('No results found 😿', {
 						duration: 3000,
-						type: ToastType.INFO,
+						type: ToastType.ERROR,
 						dismissible: true
 					});
 				}

src/lib/components/search/textSearch/index.svelte

@@ -10,7 +10,7 @@
 	export let form: ActionData;
 
 	let submitting = $boredState?.loading;
-	let name = '';
+	let name = form?.name || '';
 </script>
 
 <div class="search">

src/routes/search/+error.svelte

@@ -0,0 +1,12 @@
+<h1>There was an error searching for games! 🤦‍♂️</h1>
+<h2>Please try again later. 🙇🏼</h2>
+
+<style>
+	h1,
+	h2 {
+		margin-top: var(--spacing-64);
+		font-family: var(--font-sans);
+		font-size: var(--font-32);
+		text-align: center;
+	}
+</style>

src/routes/search/+page.server.ts

@@ -1,18 +1,9 @@
 import type { Actions, PageServerLoad, RequestEvent } from '../$types';
 import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
-import { invalid } from '@sveltejs/kit';
+import { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
 import type { GameType, SearchQuery } from '$root/lib/types';
 import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
 
-export const load: PageServerLoad = (v) => {
-	console.log('page server load request', v)
-
-	return {
-    games: [],
-    totalCount: 0
-	};
-};
-
 export const actions: Actions = {
   default: async ({ request, locals }: RequestEvent): Promise<any> => {
     console.log("In search action specific")
@@ -29,6 +20,8 @@ export const actions: Actions = {
       name: ''
     };
 
+    // TODO: Check name length and not search if not advanced search
+
     const random = form.get('random') && form.get('random') === 'on';
 
     if (random) {
@@ -95,9 +88,10 @@ export const actions: Actions = {
         }
       });
       console.log('board game response', response);
-      if (response.status !== 200) {
-        console.log('Status not 200', response.status)
-        invalid(response.status, {});
+
+      if (!response.ok) {
+        console.log('Status not 200', response.status);
+        throw error(response.status);
       }
 
       if (response.status === 200) {

src/routes/search/+page.svelte

@@ -11,8 +11,6 @@
 
 	export let data: PageData;
 	export let form: ActionData;
-	console.log('search page form', form);
-	console.log('search page data stuff', data);
 	let gameToRemove: GameType | SavedGameType;
 
 	$: if (data?.games) {
@@ -41,7 +39,7 @@
 
 <div class="game-search">
 	<form
-		action="?/search"
+		action="/search"
 		method="post"
 		use:enhance={() => {
 			boredState.update((n) => ({ ...n, loading: true }));
@@ -63,7 +61,7 @@
 			};
 		}}
 	>
-		<TextSearch showButton />
+		<TextSearch showButton {form} />
 	</form>
 </div>
 
@@ -76,6 +74,9 @@
 			{/each}
 		</div>
 	</div>
+{:else if form?.status !== 200}
+	<h1>There was an error searching for games!</h1>
+	<h2>Please try again later.</h2>
 {/if}
 
 <style lang="scss">

src/search/actions.ts

@@ -80,7 +80,7 @@ export const Games: Actions = {
       // };
     } catch (e) {
       console.log(`Error searching board games ${e}`);
-      invalid(400, { reason: 'Exception' })
+      return invalid(400, { reason: 'Exception' })
     }
   }
 

src/styles/global.scss

@@ -138,6 +138,70 @@
       --large: 960px;
       --wide: 1200px;
     */
+
+  /* Light Theme Default */
+  /* Global */
+    --clr-primary: hsl(220 100% 50%);
+    --clr-txt: hsl(220 10% 10%);
+    --clr-bg: hsl(0 0% 98%);
+  
+    --bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
+    --bg-opacity: 0.7;
+  
+    /* Menu */
+    --clr-menu-text: hsl(220 10% 10%);
+    --clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+    --clr-menu-arrow-bg: hsl(0 0% 98%);
+    --clr-menu-border: hsl(0 0% 80%);
+  
+    --clr-theme-txt: hsl(0 0% 98%);
+    --clr-theme-active: hsl(220 100% 60%);
+    --clr-switch-on-bg: hsl(220 40% 90%);
+    --clr-switch-off-bg: hsl(220 40% 80%);
+  
+    /* Hero */
+    --clr-hero-txt: hsl(220 10% 40%);
+    --clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
+    --clr-hero-divider-bg: hsl(0 0% 80%);
+    --clr-input-txt: hsl(220 10% 98%);
+    --clr-input-bg: hsl(0 0% 98%);
+    --clr-input-placeholder-txt: hsl(220 10% 60%);
+    --clr-input-border: hsl(0 0% 80%);
+  
+    /* Card */
+    --clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+    --clr-card-txt: hsl(220 10% 40%);
+  
+    /* Link */
+    --clr-link-txt: hsl(220 10% 10%);
+    --clr-link-background: hsl(0 0% 100%);
+  
+    /* Footer */
+    --clr-footer-txt: hsl(220 10% 10%);
+    --clr-footer-bg: hsl(0 0% 98%);
+  
+    /* Post */
+    --post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
+    --post-blockquote-txt: hsl(0 0% 40%);
+    --post-blockquote-bg: hsl(0 0% 98%);
+    --post-blockquote-border: hsl(0 0% 84%);
+  
+    --clr-code-bg: hsl(0 0% 98%);
+    --clr-code-title: hsl(0 0% 40%);
+    --clr-code-border: hsl(0 0% 84%);
+    --clr-code-line-number: hsl(0 0% 60%);
+    --clr-code-line-highlight: hsl(0 0% 94%);
+    --clr-code-inline-txt: hsl(0 0% 98%);
+    --clr-code-inline-bg: hsl(0 0% 20%);
+  
+    --clr-token-1: hsl(220 100% 50%);
+    --clr-token-2: hsl(220 60% 50%);
+    --clr-token-3: hsl(220 100% 50%);
+    --clr-token-4: hsl(0 0% 20%);
+    --clr-token-5: hsl(0 0% 60%);
+  
+    /* Input Fields */
+    --input-bg: #181a1b;
 }
 
 html {

src/styles/theme.scss

@@ -123,4 +123,7 @@ html[data-theme='☀️ Daylight'] {
   --clr-token-3: hsl(220 100% 50%);
   --clr-token-4: hsl(0 0% 20%);
   --clr-token-5: hsl(0 0% 60%);
+
+  /* Input Fields */
+  --input-bg: #181a1b;
 }