Update main app (#2058)

* Fix

* Remove

* Remove swiper

* Update to svelte 4

* Update to 2

* Update to latest

* Remove swiper

* Add alias

* Update

* Update stuck list

* Update log

* Update sentry

* Add fly deployment

* Add canister_ids json

* Add vite config

* Use node adapter

* Remove splash group

* Add build command

* Updaye lockfile

* Update sentry

* Log

* Update path

* Clean

* Optimize

* Use server load

* Remove

* Fix index

* Save snapshot

* Move hls script to server hook

* Cleanup fonts

* Create declaration package

* Add ignore

* Add update script

* fix

* Update backend to latest

* Update to latest

* Update declaration path

* Add popup

* simplify

* Update layout

* Create components

* Update deps

* Move vote

* Update ref

* Fix

* Update report usage

* Use components for all apps

* Move to lib

* Update tailwind

* Update tailwind

* Remove build defualt

* Update

* Move to root fly deploy

* Update ingore

* Update build process

* Update config

* remove

* Update config

* Add slide

* Enable filtering

* Do not filter closed bet

* Add imgLoaded logic

* Update image url

* Load profile posts from server

* Add store

* Add nsfw filter

* Add nsfw toggle

package.json

@@ -4,28 +4,31 @@
   "type": "module",
   "private": true,
   "workspaces": [
-    "./packages/web-client",
+    "./packages/components",
+    "./packages/declarations",
     "./packages/experiments",
+    "./packages/web-client",
     "./packages/workers"
   ],
   "scripts": {
     "generate": "cd ./packages/hot-or-not-backend-canister && dfx generate && cp -r ./export/declarations ../web-client && rm -R ./export/declarations",
     "backend": "cd ./packages/hot-or-not-backend-canister && dfx start",
     "backend:clean": "cd ./packages/hot-or-not-backend-canister && dfx start --clean",
     "backend:install": "cd ./packages/hot-or-not-backend-canister && ./scripts/canisters/local_deploy/install_all_canisters.sh -s",
-    "build": "npm run wc:build",
     "ex:check": "npm run check --w @hnn/experiments",
     "ex:build": "npm run build --w @hnn/experiments",
     "ex:preview": "npm run preview --w @hnn/experiments",
     "ex:dev": "npm run dev --w @hnn/experiments",
+    "serve:lhci": "npm run wc:preview",
     "wc:check": "npm run check --w @hnn/web-client",
     "wc:tsc": "npm run tsc --w @hnn/web-client",
     "wc:build": "npm run build --w @hnn/web-client",
+    "wc:start": "npm run start --w @hnn/web-client",
     "wc:build:prod": "PRODUCTION=true npm run build --w @hnn/web-client",
     "wc:build:static": "npm run build:static --w @hnn/web-client",
     "wc:build:static:prod": "PRODUCTION=true npm run build:static --w @hnn/web-client",
+    "wc:deploy": "fly deploy --config ./wc.fly.toml --dockerfile ./wc.Dockerfile --debug",
     "wc:preview": "npm run preview --w @hnn/web-client",
-    "serve:lhci": "npm run wc:preview",
     "wc:preview:static": "npm run preview:static --w @hnn/web-client",
     "wc:dev": "npm run dev --w @hnn/web-client",
     "wc:cypress": "npm run cypress --w @hnn/web-client",
@@ -38,13 +41,13 @@
   },
   "devDependencies": {
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
-    "@types/node": "^18.18.13",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
-    "eslint": "^8.54.0",
+    "@types/node": "^18.19.4",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^3.1.0",
+    "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
-    "prettier-plugin-tailwindcss": "^0.5.7"
+    "prettier-plugin-tailwindcss": "^0.5.10"
   }
 }

packages/experiments/src/components/analytics/GA.svelte → packages/components/analytics/GA.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-import { page } from '$app/stores'
-import { splashScreenPopup } from '$stores/popups'
 import { registerPageView, updateConfig } from './GA.utils'
 
+export let tagId: string
+export let pageUrl: string | undefined = undefined
+
 let configured = false
-$: href = $page?.url?.href
-$: shown = !$splashScreenPopup?.show
 
-$: if (href || shown) {
+$: if (pageUrl) {
   if (!configured) {
-    configured = updateConfig() || false
+    configured = updateConfig(tagId) || false
   }
   registerPageView()
 }
@@ -19,7 +18,7 @@ $: if (href || shown) {
   <script
     async
     defer
-    src="https://www.googletagmanager.com/gtag/js?id=G-PPE5XD2VKV"></script>
+    src="https://www.googletagmanager.com/gtag/js?id={tagId}"></script>
   <script>
   window.dataLayer = window.dataLayer || []
   function gtag() {

packages/experiments/src/components/analytics/GA.utils.ts → packages/components/analytics/GA.utils.ts

@@ -8,9 +8,9 @@ export const registerPageView = (url: URL = new URL(window.location.href)) => {
   }
 }
 
-export const updateConfig = (params?: Gtag.CustomParams) => {
+export const updateConfig = (tagId: string, params?: Gtag.CustomParams) => {
   if (window.gtag) {
-    window.gtag('config', 'G-PPE5XD2VKV', {
+    window.gtag('config', tagId, {
       ...params,
       ...(debugMode && { debug_mode: true }),
     })

packages/web-client/src/components/button/IconButton.svelte → packages/components/button/IconButton.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-import Icon from '$components/icon/Icon.svelte'
-import type { IconName } from '$components/icon/icon.type'
+import Icon from '../icon/Icon.svelte'
+import type { IconName } from '../icon/icon.type'
 import c from 'clsx'
 
 export let disabled = false
 export let iconName: IconName
 export let iconClass: string
 export let href = ''
+export let title = ''
 export let preload = false
 export let ariaLabel = ''
 export { exportClass as class }
@@ -41,6 +42,7 @@ $: classes = c(
   </a>
 {:else}
   <button
+    {title}
     type="button"
     aria-label={ariaLabel}
     {style}

packages/web-client/src/components/coming-soon/ComingSoon.svelte → packages/components/coming-soon/ComingSoon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Icon from '$components/icon/Icon.svelte'
+import Icon from '../icon/Icon.svelte'
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center space-y-2">

packages/components/experiments/layout/FeedLayout.svelte

@@ -0,0 +1,11 @@
+<feed
+  style="height: 100vh;"
+  class="relative block h-full w-full overflow-hidden text-white">
+  <slot name="content" />
+  <div class="absolute inset-x-0 top-0 z-[5]">
+    <slot name="top" />
+  </div>
+  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-[5] max-h-48">
+    <slot name="bottom-navigation" />
+  </div>
+</feed>

packages/components/experiments/layout/HomeLayout.svelte

@@ -0,0 +1,11 @@
+<home
+  style="height: 100dvh;"
+  class="relative block h-full w-full overflow-hidden text-white">
+  <slot name="content" />
+  <div class="absolute inset-x-0 top-4 z-[11]">
+    <slot name="top" />
+  </div>
+  <div class="absolute inset-x-0 bottom-0 z-[10] max-h-16">
+    <slot name="bottom-navigation" />
+  </div>
+</home>

packages/web-client/src/components/home/Selector.svelte → packages/components/home/Selector.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
-import Icon from '$components/icon/Icon.svelte'
-import { playerState } from '$stores/playerState'
+import Icon from '../icon/Icon.svelte'
 import c from 'clsx'
+
+export let feedUrl = ''
+export let hotOrNotUrl = ''
 export let selected: 'videos' | 'hot-or-not' = 'hot-or-not'
 export let showDot: 'videos' | 'hot-or-not' | null = null
-
-$: feedUrl =
-  $playerState.currentFeedUrl == 'no-videos' ? '' : $playerState.currentFeedUrl
-$: hotOrNotUrl =
-  $playerState.currentHotOrNotUrl == 'no-videos'
-    ? ''
-    : $playerState.currentFeedUrl
 </script>
 
 <home-selector class="flex w-full items-center justify-center pt-4">

packages/experiments/src/components/icon/icon.type.ts → packages/components/icon/icon.type.ts

@@ -78,6 +78,8 @@ export type IconName =
   | 'votes-graphics'
   | 'on-chain-dfinity-graphics'
   | 'stars-graphics'
+  | 'stamp'
   | 'heart-broken'
   | 'heart-broken-fill'
   | 'coin-token'
+  | 'nsfw'

packages/components/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@hnn/components",
+  "version": "1.0.0",
+  "description": "Svelte Components",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "private": true,
+  "scripts": {
+    "check": "svelte-check --tsconfig ./tsconfig.json --ignore .svelte-kit,build,tests --threshold warning --diagnostic-sources \"js,ts,svelte\""
+  },
+  "dependencies": {
+    "@hnn/components": "*",
+    "clsx": "2.1.0",
+    "throttle-debounce": "5.0.0"
+  },
+  "devDependencies": {
+    "@sentry/sveltekit": "7.91.0",
+    "@tailwindcss/forms": "0.5.7",
+    "svelte": "4.2.8",
+    "svelte-check": "3.6.2",
+    "tailwindcss": "3.4.0",
+    "typescript": "5.3.3"
+  }
+}

packages/components/popup/ExperimentsPopup.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import Button from '../button/Button.svelte'
+import IconButton from '../button/IconButton.svelte'
+import { fade } from 'svelte/transition'
+
+export let show = false
+</script>
+
+<div
+  transition:fade
+  class="absolute inset-0 z-[98] flex h-full w-full items-center justify-center bg-black/80">
+  <div class="flex max-w-sm flex-col space-y-14">
+    <IconButton
+      iconName="close"
+      iconClass="h-8 w-8 text-white"
+      on:click={() => (show = false)}
+      class="absolute right-5 top-5 rounded-full bg-black/50 p-2" />
+    <div class="flex flex-col items-center">
+      <div class="pb-2 text-center text-3xl font-bold text-white">
+        Try the Brand New <span class="text-green-500">Up</span>
+        -
+        <span class="text-red-500">Down</span>
+        Game
+      </div>
+      <div class="pb-2 text-center text-lg text-white">
+        Brought to you by Hot or Not
+      </div>
+    </div>
+
+    <Button href="https://hotornot.lol" target="_blank" type="primary">
+      Play Now!
+    </Button>
+  </div>
+</div>

packages/web-client/src/components/popup/Popup.svelte → packages/components/popup/Popup.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import IconButton from '$components/button/IconButton.svelte'
+import IconButton from '../button/IconButton.svelte'
 import { fade } from 'svelte/transition'
 import { createEventDispatcher } from 'svelte'
-import Icon from '$components/icon/Icon.svelte'
 
 export let show = false
 export let showCloseButton = false
@@ -16,15 +15,15 @@ const dispatch = createEventDispatcher<{ close: void }>()
 
 {#if show}
   <div
-    transition:fade|local={{ duration: 100 }}
-    on:keyup
+    transition:fade={{ duration: 100 }}
+    role="presentation"
     on:click={() => {
       show = false
       dispatch('close')
     }}
     class="absolute inset-0 z-[98] flex h-full w-full items-center justify-center bg-black/50">
     <div
-      on:keyup
+      role="presentation"
       on:click={(e) => e.stopImmediatePropagation()}
       style={exportStyle}
       class="relative z-[99] mx-8 w-full max-w-sm rounded-lg bg-white p-10 {exportClass}">

packages/components/popup/ReportPopup.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+import Button from '../button/Button.svelte'
+import Popup from './Popup.svelte'
+import type { PostReportData, ProfileReportData } from './ReportPopup.types'
+import { createEventDispatcher } from 'svelte'
+
+export let show = false
+export let type: 'post' | 'profile'
+export let reportData: PostReportData | ProfileReportData
+
+let loading = false
+let selectedReason = ''
+
+const dispatch = createEventDispatcher<{
+  close: void
+  report: {
+    type: 'post' | 'profile'
+    selectedReason: string
+    data: PostReportData | ProfileReportData
+  }
+}>()
+
+function confirmReport() {
+  if (selectedReason) {
+    dispatch('report', {
+      type,
+      selectedReason: selectedReason,
+      data: reportData,
+    })
+    show = false
+  }
+}
+</script>
+
+<Popup on:close showCloseButton bind:show>
+  <div class="flex flex-col space-y-4">
+    <div class="text-md pb-2 text-center text-black">Report {type}</div>
+    <div class="text-md pb-2 text-center text-black">
+      Please select a reason why you are reporting this {type}
+    </div>
+    <select
+      class="rounded-sm border-0 text-black disabled:text-black/50"
+      bind:value={selectedReason}>
+      <option value="" disabled selected>Click a reason</option>
+      <option value="nudity">Nudity/Porn</option>
+      <option value="violence">Violence/Gore</option>
+      <option value="offensive">Offensive</option>
+      <option value="spam">Spam/Ad</option>
+      <option value="others">Others</option>
+    </select>
+    <Button
+      on:click={confirmReport}
+      disabled={loading || !selectedReason}
+      type="primary">
+      Report
+    </Button>
+  </div>
+</Popup>

packages/components/popup/ReportPopup.types.ts

@@ -0,0 +1,14 @@
+export type ReportType = 'profile' | 'post'
+
+export type PostReportData = {
+  postCanisterId: string
+  postUploadedByUserId: string
+  postId: string
+  reportedByUserId: string
+  videoUid: string
+}
+
+export type ProfileReportData = {
+  userId: string
+  reportedByUserId: string
+}

packages/components/switch/Switch.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+export let checked = false
+export let disabled = false
+</script>
+
+<button
+  {disabled}
+  on:click={() => (checked = !checked)}
+  class="flex h-[1.4rem] w-10 items-center justify-start rounded-full transition-all duration-500
+  {checked ? 'bg-white' : 'bg-transparent ring-1 ring-white'}
+  {disabled ? 'opacity-50' : 'opacity-100'}">
+  <div
+    class="h-4 w-4 rounded-full transition-all duration-500
+    {checked ? 'translate-x-5 bg-primary' : 'translate-x-1 bg-white'} " />
+</button>

packages/web-client/src/components/tabs/ProfileTabs.svelte → packages/components/tabs/ProfileTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Icon from '$components/icon/Icon.svelte'
+import Icon from '../icon/Icon.svelte'
 import c from 'clsx'
 
 export let selectedTab: 'posts' | 'speculations'

packages/web-client/src/components/tags-input/TagsInput.svelte → packages/components/tags-input/TagsInput.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-import IconButton from '$components/button/IconButton.svelte'
-import Icon from '$components/icon/Icon.svelte'
+import IconButton from '../button/IconButton.svelte'
 import { onMount, tick } from 'svelte'
 
 export let value = ''