Feat/connections (#7)

* remove party invite from auth page

* remove party invite from app

* home page fixes

* basic search page setup

* basic qr code page

* connection details

* qr timer

* add connection commands and events

* change connection page

* pending and invite lists

* connection and invite aggregates and protocols

* update proto and fix aggregate logic

* bump deps and more qr stuff

* finish qr flow and some bulk invite stuff

* remove attribute verification for now

* completely remove buggy code

* add page layout and party banner

* improvements

* update protos

* fix search page

* handle connection events

* add capture area for qr code scan

* small fixes

* connection fixes

* update viz for main site

Author: MarcusVirg

README.md

@@ -18,6 +18,7 @@ This repo is a monorepo with NPM workspace support. Here is an outline of its st
   - `utils`: This is a library containing common utility functions for web apps and sites.
 
 - `sites/*`: This workspace contains all marketing and analytic sites.
+  - `landing`: This is the landing page for Resplice.com.
   - `stats`: This is the public analytics site for Resplice.
 
 ### Setting Up A Development Environment
@@ -28,7 +29,9 @@ This repo is a monorepo with NPM workspace support. Here is an outline of its st
 
 3. Build libraries: `npm run packages:build`
 
-4. Spin up the Vite dev server: `npm run dev:resplice`
+4. Spin up the Vite dev server for auth: `npm run reauth:dev`
+
+5. And for the actual application: `npm run resplice:dev`
 
 ## Build & Run
 

apps/overseer/package.json

@@ -17,15 +17,15 @@
 		"@resplice/utils": "*"
 	},
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^2.0.4",
+		"@sveltejs/vite-plugin-svelte": "^2.4.6",
 		"@tsconfig/svelte": "^5.0.2",
 		"autoprefixer": "^10.4.16",
 		"eslint-config-custom": "*",
 		"postcss": "^8.4.31",
-		"svelte": "^4.2.1",
+		"svelte": "^4.2.3",
 		"svelte-check": "^3.5.2",
 		"tailwindcss": "^3.3.3",
-		"tslib": "^2.5.3",
-		"vite": "^4.4.11"
+		"tslib": "^2.6.2",
+		"vite": "^4.5.0"
 	}
 }

apps/reauth/README.md

@@ -1,5 +1,3 @@
 # Reauth
 
 Resplice Auth App
-
--- trigger workflow

apps/reauth/package.json

@@ -33,11 +33,11 @@
 		"autoprefixer": "^10.4.16",
 		"eslint-config-custom": "*",
 		"postcss": "^8.4.31",
-		"svelte": "^4.2.1",
+		"svelte": "^4.2.3",
 		"svelte-check": "^3.5.2",
 		"svelte-preprocess": "^5.0.4",
 		"tailwindcss": "^3.3.3",
-		"tslib": "^2.5.3",
-		"vite": "^4.4.11"
+		"tslib": "^2.6.2",
+		"vite": "^4.5.0"
 	}
 }

apps/reauth/src/lib/i18n/locales/en.json

@@ -3,7 +3,7 @@
 		"continue": "Continue"
 	},
 	"login": "Login",
-	"welcome": "Welcome to the world's most up-to-date address book.",
+	"welcome": "Welcome to the world's sharing platform!",
 	"enterPhone": "Enter Phone",
 	"rememberMe": "Remember Me",
 	"verify": "Verify",

apps/reauth/src/routes/+page.svelte

@@ -1,71 +1,41 @@
 <script lang="ts">
-	import { browser } from '$app/environment'
 	import { onMount } from 'svelte'
+	import { t } from '$lib/i18n'
+	import { browser } from '$app/environment'
 	import { goto } from '$app/navigation'
 	import store, { AuthStatus, INITIAL_STORE } from '$lib/store'
-	import { AttributeItem, PartyBannerIcon } from '@resplice/components'
+	import { RespliceWideIcon } from '@resplice/components'
 	import LoginForm from './LoginForm.svelte'
-	import { AttributeType, type Attribute } from '@resplice/utils'
 
 	onMount(() => store.set(INITIAL_STORE))
 
-	const dateTime: Attribute = {
-		id: 1,
-		type: AttributeType.DATE_TIME,
-		name: 'Open House (6 hrs)',
-		value: {
-			year: 2023,
-			month: 11,
-			day: 16,
-			hour: 16,
-			minute: 0,
-			timezone: 'America/Chicago'
-		},
-		sortOrder: 0
-	}
-	const location: Attribute = {
-		id: 2,
-		type: AttributeType.ADDRESS,
-		name: 'Location',
-		value: {
-			streetAddress1: 'Somewhere fun! (RSVP for details)',
-			streetAddress2: '',
-			locality: 'Oakdale',
-			region: 'MN',
-			postalCode: '',
-			country: ''
-		},
-		sortOrder: 0
-	}
-	const link: Attribute = {
-		id: 3,
-		type: AttributeType.LINK,
-		name: 'Learn more about the party',
-		value: {
-			url: 'https://faq.resplice.com'
-		},
-		sortOrder: 0
-	}
-
 	$: {
 		if (browser && $store.status === AuthStatus.PENDING_VERIFY_PHONE) goto('/verify')
 	}
+
+	const day = new Date().getDate() === 15 ? 'tomorrow' : 'today'
+	const showPartyText = [15, 16].includes(new Date().getDate())
 </script>
 
-<main class="w-full min-h-full max-w-lg m-auto overlow-auto bg-white">
-	<header class="w-full p-2 bg-[#5E6FC5] rounded-b-3xl">
-		<PartyBannerIcon width="100%" />
-	</header>
+<main class="w-full min-h-full max-w-lg m-auto flex flex-col overlow-auto bg-white">
+	<div class="flex-none">
+		<header class="w-full p-4 bg-[#5E6FC5] rounded-b-3xl">
+			<RespliceWideIcon width="100%" />
+		</header>
+
+		<p class="text-lg mt-4 px-8 py-4">
+			{$t('auth.welcome')}
+		</p>
 
-	<div class="w-full p-6 space-y-4">
-		<h2 class="text-2xl font-semibold">Launch Party</h2>
-		<AttributeItem attribute={dateTime} itemType="user" disableActions />
-		<AttributeItem attribute={location} itemType="user" />
-		<AttributeItem attribute={link} itemType="user" />
+		{#if showPartyText}
+			<div class="px-8 py-4 text-lg text-center">
+				<p>Resplice launch party {day}</p>
+				<p>4PM-10PM</p>
+			</div>
+		{/if}
 	</div>
 
-	<div class="w-full px-8 py-4 flex flex-col">
-		<p class="font-semibold mb-4">RSVP</p>
+	<div class="w-full flex-1 px-8 py-4 flex">
 		<LoginForm />
 	</div>
 </main>

apps/resplice/README.md

@@ -1,5 +1,3 @@
 # Resplice
 
 Resplice Progressive Web App
-
--- trigger workflow

apps/resplice/package.json

@@ -19,31 +19,34 @@
 		"@resplice/components": "*",
 		"@resplice/proto": "*",
 		"@resplice/utils": "*",
+		"@types/js-search": "^1.4.3",
 		"clsx": "^2.0.0",
 		"croppie": "^2.6.5",
 		"date-fns": "^2.30.0",
 		"date-fns-tz": "^2.0.0",
+		"js-search": "^2.0.1",
 		"jsqr": "^1.4.0",
-		"libphonenumber-js": "^1.10.47",
+		"libphonenumber-js": "^1.10.49",
 		"qrcode": "^1.5.3",
 		"rxjs": "^7.8.1",
-		"svelte-i18n": "^3.7.4",
+		"svelte-i18n": "^4.0.0",
 		"svelte-spa-router": "^3.3.0"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.38.1",
 		"@sveltejs/vite-plugin-svelte": "^2.4.6",
 		"@tsconfig/svelte": "^5.0.2",
 		"@types/croppie": "^2.6.2",
+		"@types/qrcode": "^1.5.2",
 		"@vite-pwa/assets-generator": "^0.0.10",
 		"autoprefixer": "^10.4.16",
 		"eslint-config-custom": "*",
 		"postcss": "^8.4.31",
-		"svelte": "^4.2.1",
+		"svelte": "^4.2.3",
 		"svelte-check": "^3.5.2",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
-		"vite": "^4.4.11",
+		"vite": "^4.5.0",
 		"vite-plugin-pwa": "^0.16.5",
 		"vitest": "^0.34.6",
 		"workbox-precaching": "^7.0.0",

apps/resplice/public/favicon.ico

@@ -3,17 +3,25 @@
 	// Meta Pages
 	import RootPage from '$common/pages/RootPage.svelte'
 	import HomePage from '$common/pages/HomePage.svelte'
+	import SearchPage from '$modules/search/pages/SearchPage.svelte'
 	import AppEventPage from '$modules/_context/pages/AppEventPage.svelte'
 	import NotFoundPage from '$common/pages/NotFoundPage.svelte'
+	import PartyInvitePage from '$common/pages/PartyInvitePage.svelte'
 	// Account Pages
-	// import ProfilePage from '$modules/account/pages/ProfilePage.svelte'
+	import ProfilePage from '$modules/account/pages/ProfilePage.svelte'
 	import SettingsPage from '$modules/account/pages/SettingsPage.svelte'
 	// Attribute Pages
 	import SelectAttributeTypePage from '$modules/attribute/pages/SelectAttributeTypePage.svelte'
 	import AddAttributePage from '$modules/attribute/pages/AddAttributePage.svelte'
 	import ChangeAttributePage from '$modules/attribute/pages/ChangeAttributePage.svelte'
 	// Invite Pages
 	// import BulkInvitePage from '$modules/invite/pages/BulkInvitePage.svelte'
+	import QrInvitePage from '$modules/invite/pages/QrInvitePage.svelte'
+	import ScanQrPage from '$modules/invite/pages/ScanQrPage.svelte'
+	import QrConnectionDetailPage from '$modules/invite/pages/QrConnectionDetailPage.svelte'
+	// Connection Pages
+	import ConnectionDetailPage from '$modules/connection/pages/ConnectionDetailPage.svelte'
+	import ChangeConnectionPage from '$modules/connection/pages/ChangeConnectionPage.svelte'
 
 	export let initialUrl = ''
 
@@ -23,23 +31,24 @@
 		'/attribute/add': SelectAttributeTypePage,
 		'/attribute/add/:type': AddAttributePage,
 		'/attribute/:id/change': ChangeAttributePage,
-		// '/contact/pending/:id': PendingContactDetailPage,
-		// '/contact/:id/attributes': ContactAttributesPage,
-		// '/contact/:id/chat': ContactChatPage,
-		// '/contact/:id/edit': EditContactPage,
-		// '/contact/:id/shares': ContactSharesPage,
+		// '/connection/pending/:id': PendingContactDetailPage,
+		'/connection/:id/details': ConnectionDetailPage,
+		// '/connection/:id/chat': ContactChatPage,
+		'/connection/:id/change': ChangeConnectionPage,
+		// '/connection/:id/shares': ContactSharesPage,
 		'/home/*': HomePage,
 		// '/invite': SelectInviteMethodPage,
 		// '/invite/bulk': BulkInvitePage,
 		// '/invite/create/*': CreateInvitePage,
 		// '/invite/list': InviteListPage,
 		// '/invite/:id': InviteDetailPage,
-		// '/invite/qr': QrInvitePage,
-		// '/invite/qr/scan': ScanQrPage,
-		// '/invite/qr/:id': UnlockQrPage,
-		// '/profile': ProfilePage,
-		// '/search': SearchPage,
+		'/invite/qr-scan': ScanQrPage,
+		'/invite/qr': QrInvitePage,
+		'/invite/qr/:uuid': QrConnectionDetailPage,
+		'/profile': ProfilePage,
+		'/search': SearchPage,
 		'/settings': SettingsPage,
+		'/party': PartyInvitePage,
 		'*': NotFoundPage
 	}