Fixed screen size, added dark mode app menu icons, added haptics, added keyboard dismiss with swipe

adding app icon and splash screen
built ios app working
2026-02-16 06:41:05 -06:00 · 2026-02-15 05:32:58 -06:00 · 2026-02-14 21:43:55 -06:00 · 2026-02-13 20:25:46 -06:00 · 2026-02-09 02:56:00 -06:00 · 2026-02-09 02:02:53 -06:00
41 changed files with 485 additions and 2486 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ node_modules/
 .DS_Store
 .sourcemaps
 dist/
+package-lock.json
--- a/capacitor.config.json
+++ b/capacitor.config.json
@@ -1,10 +1,17 @@
 {
-  "appId": "so.blockcatcher.app",
-  "appName": "Blockcatcher",
+  "appId": "so.forum.app",
+  "appName": "Forum",
  "webDir": "dist",
+  "server": {
+    "url": "http://sam.local:5173",
+    "cleartext": true
+  },
+  "ios": {
+    "allowsBackForwardNavigationGestures": true
+  },
  "plugins": {
    "SplashScreen": {
-      "launchAutoHide": false
+      "launchAutoHide": true
    }
  }
 }
--- a/doc.md
+++ b/doc.md
@@ -0,0 +1,158 @@
+
+Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.
+
+### Getting Started:
+Take index.js and put it in your app. Typically as quill.js. Then import it in the head of the HTML.
+
+### Basic Overview:
+
+Quill uses components called Shadows. Each Shadow is a Custom HTML Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)
+```
+class Home extends Shadow {
+    render() {
+    }
+}
+
+register(Home)
+```
+
+Once created, it can be imported like
+```
+import "Home.js"
+```
+(Not how we are NOT importing the actual class object. If that happens, it will fail.)
+
+Here is an example of Hello World:
+
+```
+class Home extends Shadow {
+    render() {
+        p("Hello World")
+            .x(50, vw)
+            .y(50, vh)
+    }
+}
+
+register(Home)
+```
+
+This will render a paragraph tag in the middle of the screen.
+
+Here's what it will look like in HTML:
+
+```
+<body>
+    <home->
+        <p style="position: absolute; top: 50vh; left: 50vw;">Hello World</p>
+    </home->
+</body>
+```
+
+Note: .x() and .y() are quill-specific functions that were created simply for nice syntax. However, this would also be valid:
+```
+p("Hello World")
+    .top(50, vh)
+    .left(50, vw)
+```
+
+There are quill functions for every HTML style attribute. If they have units, they will follow the pattern directly above, where the first parameter is the amount and the second parameter is the unit.
+
+### Real Basic Example:
+
+First, you need your index.html. Here is one:
+
+```
+<!DOCTYPE html>
+<html lang="en" class="public">
+  <head>
+    <title>Parchment</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="/_/icons/quill.svg">
+    <link rel="stylesheet" href="/_/code/shared.css">
+    <script src="/_/code/quill.js"></script>
+    <script type="module" src="75820185/index.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+When starting, it is typical to make a "Home" shadow and import it in index.js. Here is an example:
+
+index.js:
+```
+import "./Home.js"
+Home()
+```
+
+Home.js:
+```
+import "../components/NavBar.js"
+import "./HomeContent.js"
+import "./Why.js"
+import "./Events.js"
+import "./Join.js"
+import "./SignIn.js"
+import "./Success.js"
+
+class Home extends Shadow {
+    render() {
+
+        ZStack(() => {
+
+            NavBar()
+
+            img("/_/icons/logo.svg", "2.5em")
+                .onClick((done) => {
+                    if(!done) return
+                    window.navigateTo("/")
+                })
+                .position("absolute")
+                .left(50, vw).top(4, em)
+                .center()
+                .transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
+    
+            switch(window.location.pathname) {
+                case "/":
+                    HomeContent()
+                    break;
+                case "/why":
+                    Why()
+                    break;
+                case "/events":
+                    Events()
+                    break;
+                case "/join":
+                    Join()
+                    break;
+                case "/success":
+                    Success()
+                    break;
+            }
+
+        })
+        .onNavigate(() => {
+            this.rerender()
+        })
+            
+    }
+}
+
+register(Home)
+
+```
+
+
+Success.js:
+
+```
+class Success extends Shadow {
+    render() {
+        p("Thanks for your purchase! You will receive a confirmation email shortly. <br><br> <b>Keep that email; it will be checked at the door.</b>")
+            .x(50, vw).y(50, vh)
+            .center()
+    }
+}
+ 
+register(Success)
+```
--- a/ios/App/App/AppDelegate.swift
+++ b/ios/App/App/AppDelegate.swift
@@ -7,9 +7,37 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
+            self.enableInteractiveKeyboard()
+        }
        // Override point for customization after application launch.
        return true
    }
+    
+    func enableInteractiveKeyboard() {
+        guard let window = UIApplication.shared.windows.first,
+              let rootView = window.rootViewController?.view else {
+            return
+        }
+        
+        // Find WKWebView recursively
+        func findWebView(in view: UIView) -> WKWebView? {
+            if let webView = view as? WKWebView {
+                return webView
+            }
+            for subview in view.subviews {
+                if let found = findWebView(in: subview) {
+                    return found
+                }
+            }
+            return nil
+        }
+        
+        if let webView = findWebView(in: rootView) {
+            webView.scrollView.keyboardDismissMode = .interactive
+            print("✅ Interactive keyboard enabled!")
+        }
+    }

    func applicationWillResignActive(_ application: UIApplication) {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
--- a/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
+++ b/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
--- a/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,7 +1,7 @@
 {
  "images" : [
    {
-      "filename" : "AppIcon-512@2x.png",
+      "filename" : "\\.png",
      "idiom" : "universal",
      "platform" : "ios",
      "size" : "1024x1024"
--- a/ios/App/App/Assets.xcassets/AppIcon.appiconset/\.png
+++ b/ios/App/App/Assets.xcassets/AppIcon.appiconset/\.png
--- a/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
@@ -1,23 +1,23 @@
 {
  "images" : [
    {
+      "filename" : "splash.png",
      "idiom" : "universal",
-      "filename" : "splash-2732x2732-2.png",
      "scale" : "1x"
    },
    {
+      "filename" : "splash 1.png",
      "idiom" : "universal",
-      "filename" : "splash-2732x2732-1.png",
      "scale" : "2x"
    },
    {
+      "filename" : "splash 2.png",
      "idiom" : "universal",
-      "filename" : "splash-2732x2732.png",
      "scale" : "3x"
    }
  ],
  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
  }
-}
+}
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
--- a/ios/App/App/Assets.xcassets/Splash.imageset/splash.png
+++ b/ios/App/App/Assets.xcassets/Splash.imageset/splash.png
--- a/ios/App/App/Info.plist
+++ b/ios/App/App/Info.plist
@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>Hyperia</string>
+	<string>Forum</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -22,6 +22,13 @@
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsLocalNetworking</key>
+		<true/>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>
--- a/ios/App/Podfile
+++ b/ios/App/Podfile
@@ -14,6 +14,7 @@ def capacitor_pods
  pod 'CapacitorCamera', :path => '../../node_modules/@capacitor/camera'
  pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
  pod 'CapacitorGoogleMaps', :path => '../../node_modules/@capacitor/google-maps'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
 end

--- a/ios/App/Podfile.lock
+++ b/ios/App/Podfile.lock
@@ -11,6 +11,8 @@ PODS:
    - Capacitor
    - Google-Maps-iOS-Utils (~> 5.0)
    - GoogleMaps (~> 8.4)
+  - CapacitorHaptics (7.0.3):
+    - Capacitor
  - CapacitorSplashScreen (7.0.3):
    - Capacitor
  - Google-Maps-iOS-Utils (5.0.0):
@@ -28,6 +30,7 @@ DEPENDENCIES:
  - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
  - "CapacitorGeolocation (from `../../node_modules/@capacitor/geolocation`)"
  - "CapacitorGoogleMaps (from `../../node_modules/@capacitor/google-maps`)"
+  - "CapacitorHaptics (from `../../node_modules/@capacitor/haptics`)"
  - "CapacitorSplashScreen (from `../../node_modules/@capacitor/splash-screen`)"

 SPEC REPOS:
@@ -47,6 +50,8 @@ EXTERNAL SOURCES:
    :path: "../../node_modules/@capacitor/geolocation"
  CapacitorGoogleMaps:
    :path: "../../node_modules/@capacitor/google-maps"
+  CapacitorHaptics:
+    :path: "../../node_modules/@capacitor/haptics"
  CapacitorSplashScreen:
    :path: "../../node_modules/@capacitor/splash-screen"

@@ -56,11 +61,12 @@ SPEC CHECKSUMS:
  CapacitorCordova: bf648a636f3c153f652d312ae145fb508b6ffced
  CapacitorGeolocation: b96474c3259dd4a294227ea8ec19140b1837cceb
  CapacitorGoogleMaps: 20b5445a532f80dbb120fa99941fd094bcc88af6
+  CapacitorHaptics: d17da7dd984cae34111b3f097ccd3e21f9feec62
  CapacitorSplashScreen: d06ae8804808e9f649a08e7bb7f283c77b688084
  Google-Maps-iOS-Utils: 66d6de12be1ce6d3742a54661e7a79cb317a9321
  GoogleMaps: 8939898920281c649150e0af74aa291c60f2e77d
  IONGeolocationLib: 20f9d0248a0b5264511fb57a37e25dd2badf797a

-PODFILE CHECKSUM: 1f8c41a3cb5e4540693adb6a47064e328eec261d
+PODFILE CHECKSUM: 5fb01647092bb2f97342e333eedc70aeba99b283

 COCOAPODS: 1.15.2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "@capacitor/core": "latest",
    "@capacitor/geolocation": "^7.1.5",
    "@capacitor/google-maps": "^7.2.0",
+    "@capacitor/haptics": "^7.0.3",
    "@capacitor/ios": "^7.4.4",
    "@capacitor/splash-screen": "latest"
  },
--- a/readme.md
+++ b/readme.md
@@ -1,29 +1,26 @@
-## Created with Capacitor Create App
+### Run Web App

-This app was created using [`@capacitor/create-app`](https://github.com/ionic-team/create-capacitor-app),
-and comes with a very minimal shell for building an app.
+```npm run start```

-### Running this example
+### Build and Run iOS App

-To run the provided example, you can use `npm start` command.
-
-```bash
-npm start
-```
-
-### Background Color
-
-In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.
-
-### Running iOS
 https://capacitorjs.com/docs/ios#adding-the-ios-platform

+To Install:
 npm install @capacitor/ios
 npx cap add ios
+
+To Open XCode:
 npx cap open ios

 To Rerun:
 npm run build && npx cap copy ios

-### Note
-You need to be in mobile mode in order for the app to work, in the top right corner of dev tools. 
+### Architecture
+
+In Development, API routes are routed using the vite.config.js.
+
+### Notes
+
+Background Color: 
+In src/manifest.json, "#31d53d" refers to the green color which is visible in the background in the web version. This is not visible in the built version.
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,9 +1,7 @@
 import "./components/Sidebar.js"
 import "./components/AppMenu.js"
-import "./apps/Forum/Forum.js"
-import "./apps/Messages/Messages.js"
-import "./apps/Jobs/Jobs.js"
-import "./apps/People/People.js"
+import "./components/AppWindow.js"
+import util from "./util.js"

 class Home extends Shadow {

@@ -16,7 +14,6 @@ class Home extends Shadow {
                .left(2, em)
                .top(2, em)
                .onTouch(function (start) {
-                    console.log("touch", start)
                    if(start) {
                        this.style.scale = "0.8"
                    } else if(start === false) {
@@ -28,36 +25,18 @@ class Home extends Shadow {
 			Sidebar()

            VStack(() => {
-                switch(global.currentApp) {
-                    case "Dashboard":
-                        Forum()
-                        break;
-    
-                    case "Messages":
-                        Messages()
-                        break;
-
-                    case "People":
-                        People()
-                        break;
-                }
+                AppWindow()

                AppMenu()
            })
            .height(100, pct)
            .minHeight(0)
-            .onNavigate(() => {
-                console.log("navigate")
-                this.rerender()
-            })
-            // .onClick(() => {
-            //     this.rerender()
-            // })
        })
-                .backgroundColor("var(--main)")
-
+        .backgroundColor("var(--main)")
        .overflowX("hidden")
-        .height(100, vh)
+        .height(window.visualViewport.height - 20, px)
+        .position("fixed")
+        .top(20, px)
    }
 }

--- a/src/Home/ConnectionError.js
+++ b/src/Home/ConnectionError.js
@@ -0,0 +1,23 @@
+class ConnectionError extends Shadow {
+
+    render() {
+        VStack(() => {
+            img("/_/icons/column.svg", window.isMobile() ? "5vmax" : "3vmax")
+                .position("absolute")
+                .top(2, em)
+                .left(2, em)
+                .onClick((done) => {
+                    window.navigateTo("/")
+                })
+                
+            p("Error connecting to server. Please try again later!")
+        })
+        .verticalAlign("center")
+        .paddingHorizontal(20, vw)
+        .backgroundColor("var(--main)")
+        .overflowX("hidden")
+        .height(100, vh)
+    }
+}
+
+register(ConnectionError)
--- a/src/Home/Login.js
+++ b/src/Home/Login.js
@@ -2,36 +2,49 @@ class Login extends Shadow {
    inputStyles(el) {
        return el
            .background("var(--main)")
-            .color("var(--accent)")
+            .color("var(--text)")
            .border("1px solid var(--accent)")
+            .fontSize(0.9, rem)
+            .backgroundColor("var(--accentdark)")
+            .borderRadius(12, px)
+            .outline("none")
+            .onTouch((start) => {
+                if(start) {
+                    this.style.backgroundColor = "var(--accent)"
+                } else {
+                    this.style.backgroundColor = "var(--accentdark)"
+                }
+            })
    }

    render() {
        ZStack(() => {
-            img("/_/icons/column.svg", window.isMobile() ? "5vmax" : "3vmax")
+            img(window.matchMedia('(prefers-color-scheme: dark)') ? "/_/icons/logowhite.svg" : "/_/icons/logo.svg", window.isMobile() ? "5vmax" : "3vmax")
                .position("absolute")
-                .top(2, em)
+                .top(5, em)
                .left(2, em)
                .onClick((done) => {
                    window.navigateTo("/")
                })

            form(() => {
-                input("Email", "60vw")
+                input("Email", "70vw")
                    .attr({name: "email", type: "email"})
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
-                input("Password", "60vw")
+                input("Password", "70vw")
                    .attr({name: "password", type: "password"})
                    .margin(1, em)
                    .padding(1, em)
                    .styles(this.inputStyles)
-                button("Submit")
+                button("==>")
                    .margin(1, em)                    
                    .padding(1, em)
-                    .background("var(--main)")
-                    .color("var(--accent)")
+                    .fontSize(0.9, rem)
+                    .borderRadius(12, px)
+                    .background("var(--accent)")
+                    .color("var(--text)")
                    .border("1px solid var(--accent)")
            })
            .attr({action: "/login", method: "POST"})
@@ -40,7 +53,8 @@ class Login extends Shadow {
        })
        .background("var(--main)")
        .width(100, vw)
-        .height(100, vh)
+        .height(100, pct)
+        .margin(0)
    }
 }

--- a/src/_/code/shared.css
+++ b/src/_/code/shared.css
@@ -0,0 +1,63 @@
+:root {
+    --main: #FFE9C8;
+    --accent: #60320c;
+    --text: #340000;
+    --yellow: #f1f3c3;
+    --bone: #fff2e7;
+    --gold: #FEBA7D;
+    --divider: #bb7c36;
+    --green: #0857265c;
+    --red: #ff0000;
+    --quillred: #DE3F3F;
+    --brown: #812A18;
+    --darkbrown: #3f0808;
+    --darkgrey: #5c4646;
+
+    --home-src: /_/icons/home.svg;
+    --home-selected-src: /_/icons/homeselected.svg;
+    --people-src: /_/icons/people.svg;
+    --people-selected-src: /_/icons/peopleselected.svg;
+
+    --column-src: /_/icons/column2.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+
+    --top-inset: env(safe-area-inset-top, 0px);
+    --bottom-inset: env(safe-area-inset-bottom, 0px);
+}
+
+@media (prefers-color-scheme: dark) {
+:root {
+    --main: rgb(69, 20, 13);
+    --accent: rgb(106, 44, 28);
+    --accentdark: rgb(37, 2, 5);
+    --text: rgb(255, 225, 181);
+
+    --home-src: /_/icons/homelight.svg;
+    --home-selected-src: /_/icons/homelightselected.svg;
+    --people-src: /_/icons/peoplelight.svg;
+    --people-selected-src: /_/icons/peoplelightselected.svg;
+
+    --column-src: /_/icons/column2.svg;
+    --nodes-src: /_/icons/nodes.svg;
+    --forum-src: /_/icons/forum.svg;
+}
+}
+
+input::placeholder {
+        font-family: Arial;
+    }
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: var(--main);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
--- a/src/_/code/styles.css
+++ b/src/_/code/styles.css
@@ -1,37 +0,0 @@
-:root {
-    --main: #FFE9C8;
-    --accent: #60320c;
-    --text: #340000;
-    --yellow: #f1f3c3;
-    --bone: #fff2e7;
-    --gold: #FEBA7D;
-    --divider: #bb7c36;
-    --green: #0857265c;
-    --red: #ff0000;
-    --quillred: #DE3F3F;
-    --brown: #812A18;
-    --darkbrown: #3f0808;
-}
-
-@media (prefers-color-scheme: dark) {
-:root {
-
-}
-}
-
-input::placeholder {
-        font-family: Arial;
-    }
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
--- a/src/_/code/ws/Socket.js
+++ b/src/_/code/ws/Socket.js
@@ -11,7 +11,6 @@ export default class Socket {
    }

    async init() {
-        console.log("initting")
        await this.connection.init()
    }

--- a/src/_/icons/columnwhite.svg
+++ b/src/_/icons/columnwhite.svg
@@ -1,7 +1,7 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M101.196 85.9449H82.5784V133.52H101.196V85.9449Z" fill="#FEE8C8"/>
-<path d="M52.5063 85.9449H43.1965V133.52H52.5063V85.9449Z" fill="#FEE8C8"/>
-<path d="M118.711 26.0305L118.732 26H40.6963L40.7104 26.0305C29.7719 26.357 21 35.305 21 46.3245C21 56.9295 29.1225 65.6251 39.4844 66.5563C43.3596 66.5458 52.0622 65.4924 52.4051 56.569C52.6188 50.9959 48.2599 46.2905 42.6879 46.0779L42.9063 40.3545C47.1361 40.5154 51.0476 42.3132 53.9223 45.418C56.7969 48.5216 58.2918 52.56 58.1298 56.7874C57.8068 65.1871 52.0998 70.8343 43.1987 72.0402V80.2168H116.235V72.1436C112.758 71.7373 109.67 70.6558 107.173 68.9272C103.168 66.1618 100.949 61.9801 100.753 56.8332C100.59 52.6058 102.084 48.5686 104.963 45.4661C107.835 42.3602 111.748 40.5623 115.975 40.4026L116.195 46.1273C113.496 46.2283 111 47.3767 109.164 49.3589C107.33 51.3411 106.376 53.9175 106.479 56.616C106.604 59.9345 107.935 62.4909 110.431 64.2183C112.625 65.7343 115.72 66.5528 119.199 66.5951C129.909 66.0232 138.429 57.1808 138.429 46.3245C138.429 35.3039 129.654 26.3535 118.711 26.0305Z" fill="#FEE8C8"/>
-<path d="M116.234 85.9449H106.924V133.52H116.234V85.9449Z" fill="#FEE8C8"/>
-<path d="M76.8515 85.9449H58.2344V133.52H76.8515V85.9449Z" fill="#FEE8C8"/>
+<svg width="514" height="471" viewBox="0 0 514 471" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M351.026 262.387H269.536V470.629H351.026V262.387Z" fill="#FFE1B5"/>
+<path d="M137.907 262.387H97.1572V470.629H137.907V262.387Z" fill="#FFE1B5"/>
+<path d="M427.694 0.13364L427.787 0H86.2132L86.2749 0.13364C38.3958 1.56256 0 40.7294 0 88.9631C0 135.382 35.5534 173.444 80.9087 177.52C97.8707 177.474 135.963 172.863 137.464 133.804C138.4 109.41 119.32 88.8141 94.9307 87.8837L95.8867 62.8314C114.401 63.5355 131.522 71.4049 144.105 84.995C156.688 98.5801 163.231 116.257 162.522 134.761C161.108 171.527 136.128 196.245 97.1666 201.524V237.314H416.854V201.976C401.634 200.198 388.121 195.464 377.189 187.898C359.661 175.793 349.947 157.49 349.088 134.961C348.374 116.457 354.917 98.7857 367.515 85.2058C380.088 71.6105 397.214 63.7411 415.718 63.0421L416.679 88.0996C404.868 88.5416 393.94 93.5685 385.906 102.245C377.877 110.921 373.704 122.198 374.151 134.01C374.701 148.536 380.524 159.726 391.452 167.286C401.054 173.922 414.603 177.505 429.827 177.69C476.709 175.187 514 136.482 514 88.9631C514 40.7242 475.594 1.54714 427.694 0.13364Z" fill="#FFE1B5"/>
+<path d="M416.85 262.387H376.1V470.629H416.85V262.387Z" fill="#FFE1B5"/>
+<path d="M244.469 262.387H162.979V470.629H244.469V262.387Z" fill="#FFE1B5"/>
 </svg>
--- a/src/_/icons/homelight.svg
+++ b/src/_/icons/homelight.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" stroke="#FFE9C8"/>
+<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#FFE9C8"/>
+</svg>
--- a/src/_/icons/homelightselected.svg
+++ b/src/_/icons/homelightselected.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="27" viewBox="0 0 24 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 8.95076V25.6174H23.5V8.95076L12 0.617432L0.5 8.95076Z" fill="#74000A" stroke="#FFE9C8"/>
+<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" fill="#74000A"/>
+<path d="M15.8357 25.6171V15.2004H8.16907V25.6171" stroke="#FFE9C8"/>
+</svg>
--- a/src/_/icons/column.svg
+++ b/src/_/icons/column.svg
--- a/src/_/icons/people.svg
+++ b/src/_/icons/people.svg
@@ -1,24 +1,3 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="100px" height="100px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000000">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier">
-
-<title>ionicons-v5-j</title>
-
-<path d="M402,168c-2.93,40.67-33.1,72-66,72s-63.12-31.32-66-72c-3-42.31,26.37-72,66-72S405,126.46,402,168Z" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
-
-<path d="M336,304c-65.17,0-127.84,32.37-143.54,95.41-2.08,8.34,3.15,16.59,11.72,16.59H467.83c8.57,0,13.77-8.25,11.72-16.59C463.85,335.36,401.18,304,336,304Z" style="fill:none;stroke:#000000;stroke-miterlimit:10;stroke-width:32px"/>
-
-<path d="M200,185.94C197.66,218.42,173.28,244,147,244S96.3,218.43,94,185.94C91.61,152.15,115.34,128,147,128S202.39,152.77,200,185.94Z" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/>
-
-<path d="M206,306c-18.05-8.27-37.93-11.45-59-11.45-52,0-102.1,25.85-114.65,76.2C30.7,377.41,34.88,384,41.72,384H154" style="fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/>
-
-</g>
-
+<svg width="34" height="32" viewBox="0 0 34 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4912 0.5C24.6609 0.500107 26.4463 2.29218 26.4463 4.50195C26.4461 5.9638 25.6634 7.24788 24.502 7.94824L23.6514 8.46094L24.5693 8.83887C26.587 9.66866 28.0146 11.6745 28.0146 14.0195V14.5029L28.4541 14.5566C30.4025 14.7942 31.9307 16.4869 31.9307 18.5342C31.9306 19.9965 31.1509 21.2779 29.9912 21.9766L29.1406 22.4893L30.0596 22.8672C32.0762 23.6969 33.5 25.7015 33.5 28.0469V31.4609C33.4998 31.4881 33.4804 31.4983 33.4697 31.499C33.466 31.4988 33.4624 31.4985 33.459 31.4971C33.4553 31.4955 33.4524 31.4944 33.4512 31.4932L33.4482 31.4902L33.4365 31.458V28.0469C33.4365 24.9911 31.019 22.5352 27.9805 22.5352C24.9421 22.5352 22.5225 24.9924 22.5225 28.0469V31.4629C22.5225 31.4743 22.5176 31.4844 22.5117 31.4902C22.5051 31.4967 22.4976 31.4988 22.4902 31.499C22.485 31.4985 22.4784 31.4966 22.4727 31.4912L22.4609 31.4609V28.0469C22.4609 24.9905 20.0379 22.5352 17 22.5352C13.9614 22.5352 11.544 24.9925 11.5439 28.0469V31.4609C11.5439 31.4744 11.5382 31.4841 11.5312 31.4912C11.5246 31.498 11.5191 31.5 11.5137 31.5C11.5104 31.5 11.508 31.4997 11.5049 31.499C11.4948 31.4967 11.4805 31.4846 11.4805 31.4629V28.0488C11.4805 24.9931 9.0629 22.5373 6.02441 22.5371C2.98626 22.5371 0.563477 24.9939 0.563477 28.0488V31.4609C0.563297 31.4882 0.542917 31.4999 0.530273 31.5C0.524251 31.5 0.518186 31.4977 0.511719 31.4912C0.505432 31.4847 0.501504 31.4756 0.500977 31.4629V28.0488C0.500977 25.7039 1.92786 23.7001 3.94531 22.8701L4.86426 22.4912L4.0127 21.9795C2.85121 21.2805 2.06934 19.997 2.06934 18.5352C2.06949 16.4873 3.60107 14.7963 5.55176 14.5586L5.99121 14.5049V14.0205C5.99124 11.6755 7.41775 9.67071 9.43652 8.84082L10.3555 8.46289L9.50391 7.9502C8.34227 7.24961 7.55957 5.96483 7.55957 4.50293C7.55962 2.29286 9.34267 0.502076 11.5137 0.501953H11.5977C13.73 0.546093 15.4668 2.31921 15.4668 4.50195C15.4666 5.96451 14.6864 7.24824 13.5254 7.94824L12.6758 8.46094L13.5938 8.83887C14.9033 9.37789 15.9663 10.4144 16.5479 11.7168L17.0039 12.7393L17.4609 11.7168C18.0426 10.4142 19.1043 9.3778 20.415 8.83887L21.334 8.46094L20.4834 7.94824C19.322 7.24792 18.5402 5.96407 18.54 4.50195C18.54 2.29132 20.3205 0.5 22.4912 0.5ZM11.5127 8.50879C8.47454 8.50879 6.05176 10.9655 6.05176 14.0205V14.5039L6.49219 14.5566C8.44316 14.7921 9.97363 16.4858 9.97363 18.5342C9.9735 19.9963 9.19367 21.2769 8.03418 21.9756L7.18359 22.4883L8.10156 22.8662C9.41094 23.4051 10.4731 24.4415 11.0547 25.7441L11.1865 26.04H11.8369L11.9688 25.7441C12.552 24.4411 13.6128 23.405 14.9219 22.8662L15.8398 22.4883L14.9893 21.9756C13.8297 21.2769 13.0499 19.9963 13.0498 18.5342C13.0498 16.4857 14.5807 14.793 16.5322 14.5566L16.9717 14.5029V14.0205C16.9717 10.9645 14.5521 8.50879 11.5137 8.50879H11.5127ZM22.4902 8.50781C19.4517 8.50781 17.0344 10.9643 17.0342 14.0186V14.5029L17.4736 14.5566C19.4239 14.7945 20.9541 16.4876 20.9541 18.5342C20.954 19.9961 20.173 21.2768 19.0117 21.9756L18.1602 22.4883L19.0791 22.8662C20.3897 23.4051 21.452 24.4414 22.0352 25.7441L22.168 26.04H22.8174L22.9492 25.7441C23.5309 24.4415 24.5929 23.4051 25.9023 22.8662L26.8213 22.4883L25.9697 21.9756C24.8102 21.2769 24.0304 19.9962 24.0303 18.5342C24.0303 16.4856 25.5595 14.793 27.5107 14.5566L27.9512 14.5029V14.0205C27.9512 11.1335 25.7892 8.78398 22.9893 8.53223V8.50781H22.4902ZM6.02344 14.6074C3.8627 14.6074 2.13208 16.3662 2.13184 18.5332C2.13184 20.7012 3.86338 22.4561 6.02344 22.4561C8.18395 22.4559 9.91211 20.7006 9.91211 18.5332C9.91187 16.3669 8.18463 14.6075 6.02344 14.6074ZM16.999 14.6074C14.8379 14.6076 13.1106 16.3669 13.1104 18.5332C13.1104 20.7005 14.8386 22.4559 16.999 22.4561C19.1591 22.4561 20.8916 20.7012 20.8916 18.5332C20.8914 16.3662 19.1598 14.6074 16.999 14.6074ZM27.9795 14.6074C25.8182 14.6075 24.0911 16.3668 24.0908 18.5332C24.0908 20.7006 25.8189 22.456 27.9795 22.4561C30.1404 22.4561 31.8672 20.7004 31.8672 18.5332C31.8669 16.3671 30.1411 14.6074 27.9795 14.6074ZM11.5137 0.579102C9.35372 0.579223 7.62207 2.33401 7.62207 4.50195C7.62232 6.66883 9.35304 8.42761 11.5137 8.42773C13.675 8.42773 15.4031 6.66835 15.4033 4.50195C15.4033 2.3345 13.6743 0.579102 11.5137 0.579102ZM22.4902 0.579102C20.3293 0.579102 18.6025 2.33478 18.6025 4.50195C18.6028 6.66807 20.3287 8.42773 22.4902 8.42773C24.6506 8.42762 26.3835 6.66912 26.3838 4.50195C26.3838 2.33373 24.6499 0.579213 22.4902 0.579102Z" fill="black" stroke="#000000"/>
 </svg>
--- a/src/_/icons/peoplelight.svg
+++ b/src/_/icons/peoplelight.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14339 0.00116273C7.19618 0.00116273 5.60647 1.57928 5.60647 3.51799C5.60647 4.80237 6.30553 5.93008 7.34256 6.5453C5.59377 7.25256 4.36053 8.95969 4.36053 10.9536V10.9858C2.61174 11.1955 1.24591 12.6837 1.24591 14.4808C1.24591 15.7652 1.94497 16.8918 2.982 17.5058C1.23436 18.213 0.00115341 19.919 0.00115341 21.9129V24.5807H0C0.00115348 24.8134 0.190335 25.0011 0.423355 25C0.65522 24.9988 0.843255 24.8122 0.844407 24.5807V21.9129C0.844407 19.7381 2.59435 17.9977 4.78383 17.9977C6.97331 17.9977 8.71971 19.737 8.71971 21.9129V24.5807C8.71971 24.7777 8.85698 24.947 9.04848 24.9896C9.07962 24.9965 9.11077 25 9.14307 25C9.37493 25 9.56297 24.8122 9.56412 24.5807V21.9117C9.56412 19.7369 11.3106 17.9965 13.5 17.9965C15.6894 17.9965 17.4394 19.7359 17.4394 21.9117V24.5807C17.4406 24.8122 17.6274 24.9988 17.8593 25C17.9712 25 18.0785 24.9562 18.1581 24.8779C18.2377 24.7996 18.2827 24.6924 18.2827 24.5807V21.9117C18.2827 19.7369 20.0303 17.9965 22.2197 17.9965C24.4092 17.9965 26.1556 19.7359 26.1556 21.9117V24.5807C26.1568 24.6924 26.2017 24.7996 26.2813 24.8779C26.3598 24.9562 26.4682 25 26.5801 25C26.8108 24.9988 26.9988 24.8122 27 24.5807V21.9117C27 19.9178 25.7692 18.2106 24.0215 17.5034C25.0574 16.8895 25.7542 15.7641 25.7542 14.4797C25.7542 12.6839 24.3918 11.1943 22.6443 10.9847V10.9524C22.6443 8.95847 21.4099 7.25128 19.6622 6.54414C20.6993 5.92903 21.3983 4.8013 21.3983 3.51683C21.3983 1.57818 19.8064 0 17.8605 0C15.9133 0 14.326 1.57812 14.326 3.51683C14.326 4.80121 15.0239 5.92892 16.0609 6.54414C14.9246 7.00375 14.0064 7.88611 13.5035 8.99424C13.0005 7.88611 12.0811 7.00375 10.946 6.54414C11.9831 5.92903 12.6798 4.8013 12.6798 3.51683C12.6798 1.57818 11.0914 0 9.14527 0L9.14339 0.00116273ZM9.14339 0.843213C10.6361 0.843213 11.8346 2.03544 11.8346 3.51678C11.8346 4.99812 10.6361 6.1938 9.14339 6.1938C7.65069 6.1938 6.44985 4.99812 6.44985 3.51678C6.44985 2.03544 7.65069 0.843213 9.14339 0.843213ZM17.8597 0.843213C19.3524 0.843213 20.5544 2.03544 20.5544 3.51678C20.5544 4.99812 19.3524 6.1938 17.8597 6.1938C16.367 6.1938 15.1696 4.99812 15.1696 3.51678C15.1696 2.03544 16.367 0.843213 17.8597 0.843213ZM9.14339 7.03821C11.3328 7.03821 13.0804 8.77757 13.0804 10.9534V10.9845C11.3305 11.193 9.96582 12.6824 9.96582 14.4795C9.96582 15.7639 10.6626 16.8893 11.6985 17.5033C10.5634 17.9629 9.6463 18.8453 9.14221 19.9534H9.14105C8.63811 18.8453 7.71988 17.9629 6.5848 17.5033C7.62069 16.8894 8.31744 15.7639 8.31744 14.4795C8.31744 12.6825 6.95278 11.1921 5.20281 10.9845V10.9534C5.20281 8.77863 6.95275 7.03821 9.14223 7.03821H9.14339ZM17.8597 7.03821C20.0492 7.03821 21.7991 8.77757 21.7991 10.9534V10.9845C20.0492 11.193 18.6857 12.6824 18.6857 14.4795C18.6857 15.7639 19.3825 16.8893 20.4183 17.5033C19.2832 17.9629 18.365 18.8453 17.8621 19.9534H17.8609C17.3568 18.8453 16.4386 17.9629 15.3024 17.5033C16.3394 16.8894 17.0373 15.7639 17.0373 14.4795C17.0373 12.6837 15.6726 11.1942 13.9238 10.9845V10.9523C13.9238 8.77748 15.6703 7.03705 17.8597 7.03705L17.8597 7.03821ZM4.78315 11.8024C6.27585 11.8024 7.47439 12.9981 7.47439 14.4794C7.47439 15.9608 6.27585 17.153 4.78315 17.153C3.29045 17.153 2.08961 15.9608 2.08961 14.4794C2.08961 12.9981 3.29045 11.8024 4.78315 11.8024ZM13.4995 11.8024C14.9922 11.8024 16.193 12.9981 16.193 14.4794C16.193 15.9608 14.9922 17.153 13.4995 17.153C12.0068 17.153 10.8083 15.9608 10.8083 14.4794C10.8083 12.9981 12.0068 11.8024 13.4995 11.8024ZM22.2191 11.8024C23.7118 11.8024 24.9092 12.9981 24.9092 14.4794C24.9092 15.9608 23.7118 17.153 22.2191 17.153C20.7264 17.153 19.5278 15.9608 19.5278 14.4794C19.5278 12.9981 20.7264 11.8024 22.2191 11.8024Z" fill="#FFE9C8"/>
+</svg>
--- a/src/_/icons/peoplelightselected.svg
+++ b/src/_/icons/peoplelightselected.svg
@@ -0,0 +1,13 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="9" cy="3.5" rx="3" ry="3.5" fill="#74000A"/>
+<ellipse cx="18" cy="3.3" rx="3" ry="3.3" fill="#74000A"/>
+<circle cx="13.5" cy="14.5" r="3.5" fill="#74000A"/>
+<circle cx="5.5" cy="14.5" r="3.5" fill="#74000A"/>
+<circle cx="21.5" cy="14.5" r="3.5" fill="#74000A"/>
+<ellipse cx="9.25" cy="11" rx="4.25" ry="4" fill="#74000A"/>
+<ellipse cx="17.75" cy="11.5" rx="4.75" ry="4.5" fill="#74000A"/>
+<ellipse cx="13.5" cy="19" rx="7" ry="6" fill="#74000A"/>
+<ellipse cx="13.5" cy="20.5" rx="12.5" ry="4.5" fill="#74000A"/>
+<rect x="0.5" y="20" width="26" height="5" fill="#74000A"/>
+<path d="M9.14339 0.00116273C7.19618 0.00116273 5.60647 1.57928 5.60647 3.51799C5.60647 4.80237 6.30553 5.93008 7.34256 6.5453C5.59377 7.25256 4.36053 8.95969 4.36053 10.9536V10.9858C2.61174 11.1955 1.24591 12.6837 1.24591 14.4808C1.24591 15.7652 1.94497 16.8918 2.982 17.5058C1.23436 18.213 0.00115341 19.919 0.00115341 21.9129V24.5807H0C0.00115348 24.8134 0.190335 25.0011 0.423355 25C0.65522 24.9988 0.843255 24.8122 0.844407 24.5807V21.9129C0.844407 19.7381 2.59435 17.9977 4.78383 17.9977C6.97331 17.9977 8.71971 19.737 8.71971 21.9129V24.5807C8.71971 24.7777 8.85698 24.947 9.04848 24.9896C9.07962 24.9965 9.11077 25 9.14307 25C9.37493 25 9.56297 24.8122 9.56412 24.5807V21.9117C9.56412 19.7369 11.3106 17.9965 13.5 17.9965C15.6894 17.9965 17.4394 19.7359 17.4394 21.9117V24.5807C17.4406 24.8122 17.6274 24.9988 17.8593 25C17.9712 25 18.0785 24.9562 18.1581 24.8779C18.2377 24.7996 18.2827 24.6924 18.2827 24.5807V21.9117C18.2827 19.7369 20.0303 17.9965 22.2197 17.9965C24.4092 17.9965 26.1556 19.7359 26.1556 21.9117V24.5807C26.1568 24.6924 26.2017 24.7996 26.2813 24.8779C26.3598 24.9562 26.4682 25 26.5801 25C26.8108 24.9988 26.9988 24.8122 27 24.5807V21.9117C27 19.9178 25.7692 18.2106 24.0215 17.5034C25.0574 16.8895 25.7542 15.7641 25.7542 14.4797C25.7542 12.6839 24.3918 11.1943 22.6443 10.9847V10.9524C22.6443 8.95847 21.4099 7.25128 19.6622 6.54414C20.6993 5.92903 21.3983 4.8013 21.3983 3.51683C21.3983 1.57818 19.8064 0 17.8605 0C15.9133 0 14.326 1.57812 14.326 3.51683C14.326 4.80121 15.0239 5.92892 16.0609 6.54414C14.9246 7.00375 14.0064 7.88611 13.5035 8.99424C13.0005 7.88611 12.0811 7.00375 10.946 6.54414C11.9831 5.92903 12.6798 4.8013 12.6798 3.51683C12.6798 1.57818 11.0914 0 9.14527 0L9.14339 0.00116273ZM9.14339 0.843213C10.6361 0.843213 11.8346 2.03544 11.8346 3.51678C11.8346 4.99812 10.6361 6.1938 9.14339 6.1938C7.65069 6.1938 6.44985 4.99812 6.44985 3.51678C6.44985 2.03544 7.65069 0.843213 9.14339 0.843213ZM17.8597 0.843213C19.3524 0.843213 20.5544 2.03544 20.5544 3.51678C20.5544 4.99812 19.3524 6.1938 17.8597 6.1938C16.367 6.1938 15.1696 4.99812 15.1696 3.51678C15.1696 2.03544 16.367 0.843213 17.8597 0.843213ZM9.14339 7.03821C11.3328 7.03821 13.0804 8.77757 13.0804 10.9534V10.9845C11.3305 11.193 9.96582 12.6824 9.96582 14.4795C9.96582 15.7639 10.6626 16.8893 11.6985 17.5033C10.5634 17.9629 9.6463 18.8453 9.14221 19.9534H9.14105C8.63811 18.8453 7.71988 17.9629 6.5848 17.5033C7.62069 16.8894 8.31744 15.7639 8.31744 14.4795C8.31744 12.6825 6.95278 11.1921 5.20281 10.9845V10.9534C5.20281 8.77863 6.95275 7.03821 9.14223 7.03821H9.14339ZM17.8597 7.03821C20.0492 7.03821 21.7991 8.77757 21.7991 10.9534V10.9845C20.0492 11.193 18.6857 12.6824 18.6857 14.4795C18.6857 15.7639 19.3825 16.8893 20.4183 17.5033C19.2832 17.9629 18.365 18.8453 17.8621 19.9534H17.8609C17.3568 18.8453 16.4386 17.9629 15.3024 17.5033C16.3394 16.8894 17.0373 15.7639 17.0373 14.4795C17.0373 12.6837 15.6726 11.1942 13.9238 10.9845V10.9523C13.9238 8.77748 15.6703 7.03705 17.8597 7.03705L17.8597 7.03821ZM4.78315 11.8024C6.27585 11.8024 7.47439 12.9981 7.47439 14.4794C7.47439 15.9608 6.27585 17.153 4.78315 17.153C3.29045 17.153 2.08961 15.9608 2.08961 14.4794C2.08961 12.9981 3.29045 11.8024 4.78315 11.8024ZM13.4995 11.8024C14.9922 11.8024 16.193 12.9981 16.193 14.4794C16.193 15.9608 14.9922 17.153 13.4995 17.153C12.0068 17.153 10.8083 15.9608 10.8083 14.4794C10.8083 12.9981 12.0068 11.8024 13.4995 11.8024ZM22.2191 11.8024C23.7118 11.8024 24.9092 12.9981 24.9092 14.4794C24.9092 15.9608 23.7118 17.153 22.2191 17.153C20.7264 17.153 19.5278 15.9608 19.5278 14.4794C19.5278 12.9981 20.7264 11.8024 22.2191 11.8024Z" fill="#FFE9C8"/>
+</svg>
--- a/src/apps/People/People.js
+++ b/src/apps/People/People.js
@@ -75,7 +75,6 @@ class People extends Shadow {
        })
        .position("relative")
        .boxSizing("border-box")
-        .background("var(--bone)")
        .paddingVertical(1, em)
        .height(100, pct)
        .width(100, pct)
--- a/src/components/AppMenu.js
+++ b/src/components/AppMenu.js
@@ -1,64 +1,49 @@
+import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import util from "../util.js"
+
 class AppMenu extends Shadow {
    selected = ""

+    images = {
+        "Dashboard": {src: "home-src"},
+        "Messages": {src: "letter-src"},
+        "People": {src: "people-src"}
+    }
+
    onNewSelection() {
        this.$$("img").forEach((image) => {
-            image.style.background = ""
+            image.style.borderBottom = "1px solid transparent"
        })
    }

    render() {
-        console.log("rendering")
        HStack(() => {
-            img("/_/icons/Column.svg", "1.5em", "1.5em")
-                .attr({app: "forum"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .background(global.currentApp === "Dashboard" ? "var(--accent)" : "transparent")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                    }
-                    e.target.style.background = "var(--accent)"
-                    if(finished) {
-                        window.navigateTo("/dashboard")
-                    }
-                })

-            img("/_/icons/letter.svg", "1.5em", "1.5em")
-                .attr({app: "messages"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .background(global.currentApp === "Messages" ? "rgb(112 150 114)" : "transparent")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                    }
-                    if(finished) {
-                        window.navigateTo("/messages")
-                    }
-                })
-            img("/_/icons/people.svg", "1.5em", "1.5em") 
-                .attr({app: "people"})
-                .padding(0.5, em)
-                .borderRadius(10, px)
-                .background(global.currentApp === "People" ? "#9392bb" : "transparent")
-                .onClick((finished, e) => {
-                    if(finished) {
-                        this.onNewSelection()
-                    }
-                    if(finished) {
-                        window.navigateTo(`/people`)
-                    }
-                })
+            let currentNetwork = global.currentNetwork
+            for(let i = 0; i < currentNetwork.apps.length; i++) {
+                let app = currentNetwork.apps[i]
+                console.log(app)
+                img(util.cssVariable(this.images[app].src), "1.3em")
+                    .attr({app: app})
+                    .padding(0.5, em)
+                    .borderBottom(global.currentApp() === app ? "1px solid var(--text)" : "1px solid transparent")
+                    .onTouch(async (done, e) => {
+                        if(done) {
+                            this.onNewSelection()
+                            e.target.style.borderBottom = "1px solid var(--text)"
+                            global.openApp(app)
+                            await Haptics.impact({ style: ImpactStyle.Light });
+                        }
+                    })
+            }
        })
-        .borderTop("1px solid black")
+        .borderTop("1px solid var(--darkgrey)")
        .height("auto")
-        .background("var(--main)")
        .zIndex(1)
        .justifyContent("space-between")
        .paddingHorizontal(4, em)
-        .paddingVertical(1, em)
+        .paddingTop(0.5, em)
+        .paddingBottom(2, em)
        .width(100, vw)
        .boxSizing("border-box")
        .flex("0 0 auto")
--- a/src/components/AppWindow.js
+++ b/src/components/AppWindow.js
@@ -0,0 +1,32 @@
+import "../apps/Forum/Forum.js"
+import "../apps/Messages/Messages.js"
+import "../apps/Jobs/Jobs.js"
+import "../apps/People/People.js"
+
+class AppWindow extends Shadow {
+    render() {
+        ZStack(() => {
+            let app = global.currentApp()
+            switch(app) {
+                case "Dashboard":
+                    Forum()
+                    break;
+    
+                case "Messages":
+                    Messages()
+                    break;
+    
+                case "People":
+                    People()
+                    break;
+            }
+        })
+        .height(100, pct)
+        .display("flex")
+        .onNavigate(() => {
+            this.rerender()
+        })
+    }
+}
+
+register(AppWindow)
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
    <title>Forum</title>
    <meta
      name="viewport"
-      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="viewport-fit=auto, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
@@ -21,8 +21,8 @@

    <link rel="icon" type="image/x-icon" href="./_/icons/columnwhite.svg" />
    <link rel="manifest" href="./manifest.json" />
-    <link rel="stylesheet" href="./_/code/styles.css" />
-    <script src="./_/code/quill.js"></script>
+    <link rel="stylesheet" href="./_/code/shared.css" />
+    <script src="/_/code/quill.js"></script>
    <script type="module" src="./index.js"></script>
    <meta name="theme-color" content="#31d53d" />
  </head>
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,21 @@
 import Socket from "/_/code/ws/Socket.js"
 import "./Home.js"
-import "./Login.js"
+import "./Home/Login.js"
+import "./Home/ConnectionError.js"

 let Global = class {
    Socket = new Socket()
    profile = null
    currentNetwork = ""
-    currentApp = ""
+    lastApp = ""
+
+    currentApp() {
+        const pathname = window.location.pathname;
+        const segments = pathname.split('/').filter(Boolean);
+        const secondSegment = segments[1] || ""
+        const capitalized = secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
+        return capitalized
+    }

    openApp = function(appName) {
        const appUrl = appName.charAt(0).toLowerCase() + appName.slice(1);
@@ -30,17 +39,13 @@ let Global = class {
    onNavigate = async () => {

        let selectedNetwork = this.networkFromPath()
-        let selectedApp = this.appFromPath()

        if(!selectedNetwork) {
            if (!this.currentNetwork || this.currentNetwork === this.profile) {
                let path = `/${this.getDefaultNetworkName()}/${this.getDefaultAppName()}`
                history.replaceState({}, '', path)
-            } else {
-                let path = `/${this.currentNetwork.abbreviation}${window.location.pathname}`
-                history.replaceState({}, '', path)
            }
-        } else if(!selectedApp) {
+        } else if(!this.currentApp()) {
            if(this.currentNetwork === window.profile) {
                history.replaceState({}, '', `${window.location.pathname}/${window.profile.apps[0]}`)
            } else {
@@ -49,14 +54,14 @@ let Global = class {
        }

        selectedNetwork = this.networkFromPath()
-        selectedApp = this.appFromPath()
-
        let networkChanged = this.currentNetwork !== selectedNetwork
-        let appChanged = this.currentApp !== selectedApp
+        let appChanged = this.currentApp() !== this.lastApp
+        if(appChanged) {
+            this.lastApp = this.currentApp()
+        }
+
        if(networkChanged) {
-            console.log("onNavigate: network changed ->", selectedNetwork?.abbreviation)
            this.currentNetwork = selectedNetwork
-            this.currentApp = selectedApp
            const event = new CustomEvent('networkchange', {
                detail: { name: this.currentNetwork }
            });
@@ -68,10 +73,8 @@ let Global = class {
        }

        if(appChanged && !networkChanged) {
-            console.log("onNavigate: app changed ->", selectedApp, "\n")
-            this.currentApp = selectedApp
            const event = new CustomEvent('appchange', {
-                detail: { name: this.currentApp }
+                detail: { name: this.currentApp() }
            });
            window.dispatchEvent(event)
        }
@@ -112,14 +115,6 @@ let Global = class {
        }
    }

-    appFromPath = function() {
-        const pathname = window.location.pathname;
-        const segments = pathname.split('/').filter(Boolean);
-        const secondSegment = segments[1] || ""
-        const capitalized = secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
-        return capitalized
-    }
-
    async getProfile() {
        try {
            const res = await fetch("/profile", {
@@ -139,9 +134,9 @@ let Global = class {
            console.log("getProfile: ", profile);
            this.profile = profile
            return 200;
-        } catch (err) {
+        } catch (err) { // Network error / Error reaching server
            console.error(err);
-            return 401;
+            return 500;
        }
    }

@@ -151,12 +146,15 @@ let Global = class {
        this.getProfile().then(async (status) => {
            if (status === 401) {
                Login()
+            } else if(status === 500) {
+                ConnectionError()
            } else {
+                console.log("else")
                await this.Socket.init()
                await this.onNavigate()
                Home()
            }
-        });
+        })
    }
 }

--- a/src/public/_/code/quill.js
+++ b/src/public/_/code/quill.js
@@ -1,6 +1,7 @@
 /*
    Sam Russell
    Captured Sun
+    2.16.26 - Adding event objects to the onTouch callbacks
    1.16.26 - Moving nav event dispatch out of pushState, adding null feature to attr()
    1.5.26 - Switching verticalAlign and horizontalAlign names, adding borderVertical and Horizontal
    12.26.25 - State for arrays, nested objects. State for stacks (Shadow-only)
@@ -1066,9 +1067,9 @@ HTMLElement.prototype.onSubmit = function(cb) {
 };

 HTMLElement.prototype.onTouch = function(cb) {
-    const onStart = () => cb.call(this, true);
-    const onEnd = () => cb.call(this, false);
-    const onCancel = () => cb.call(this, null);
+    const onStart = (e) => cb.call(this, true, e);
+    const onEnd = (e) => cb.call(this, false, e);
+    const onCancel = (e) => cb.call(this, null, e);
    this._storeListener("touchstart", onStart);
    this._storeListener("touchend", onEnd);
    this._storeListener("touchcancel", onCancel);
--- a/src/util.js
+++ b/src/util.js
@@ -0,0 +1,7 @@
+export default class util {
+    static cssVariable(value) {
+        return getComputedStyle(document.documentElement)
+        .getPropertyValue("--" + value)
+        .trim();
+    }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
    outDir: '../dist',
    minify: false,
    emptyOutDir: true,
+    sourcemap: true
  },
  server: {
    proxy: {
Author	SHA1	Message	Date
metacryst	cc8b5035fe	Fixed screen size, added dark mode app menu icons, added haptics, added keyboard dismiss with swipe	2026-02-16 06:41:05 -06:00
metacryst	83a640433a	adding app icon and splash screen	2026-02-15 05:32:58 -06:00
metacryst	cee8ebecc5	built ios app working	2026-02-14 21:43:55 -06:00
metacryst	f02f181058	Introducing dark mode, deriving apps in bottom bar from db	2026-02-13 20:25:46 -06:00
metacryst	4432acfea5	[BUG] fix double click to open app	2026-02-09 02:56:00 -06:00
metacryst	9d0149de75	Merge branch 'main' of https://git.sun.museum/sam/ForumMobile	2026-02-09 02:02:53 -06:00
metacryst	e548dbb6c9	add people icon	2026-02-09 02:02:19 -06:00