feat(ui): add reciept boilerplate

.vscode/launch.json

@@ -0,0 +1,19 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+*
+* SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+*/
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "https://studious-space-chainsaw-q75x57g4jg5hq4q-5173.app.github.dev",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

ui/src/App.css

@@ -4,8 +4,8 @@
  */
 
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  /* max-width: 1280px; */
+  /* margin: 0 auto; */
+  /* padding: 2rem; */
   text-align: center;
 }

ui/src/App.tsx

@@ -4,12 +4,14 @@
  */
 
 import './App.css'
+import FacePile from './FacePile'
+import Reciept from "./Reciept"
 
 function App() {
   return (
     <>
-      <h1>Go Splitsies!</h1>
-      <p>Coming soon...</p>
+      <FacePile />
+      <Reciept />
     </>
   )
 }

ui/src/FacePile.css

@@ -0,0 +1,28 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+ .header {
+    background: #555;
+    color: #f1f1f1;
+    z-index: 1;
+ }
+
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.profile-list-container {
+    width: 100%;
+    overflow-x: auto;
+    padding: 10px 0;
+}
+
+.profile-list {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}

ui/src/FacePile.tsx

@@ -0,0 +1,52 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+import { useReducer } from "react";
+import "./FacePile.css";
+import UserIcon, { UserIconProps } from "./UserIcon";
+
+type SplitUser  = Omit<UserIconProps, "onRemove">;
+
+function splitUserReducer(state: SplitUser[], action: {type: "add" | "remove", item: SplitUser}) {
+    switch (action.type) {
+        case "add":
+            return [...state, action.item];
+        case "remove":
+            return state.filter(item => item !== action.item)
+        default:
+            return state;
+    }
+}
+
+function useSplitUser() {
+    return useReducer(splitUserReducer, []);
+}
+
+function FacePile() {
+    const [splitUsers, dispatchSplitUser] = useSplitUser();
+
+    function removeSplitUser(user: SplitUser) {
+        dispatchSplitUser({ type: "remove", item: user})
+    }
+
+    return (
+        <div className="header sticky">
+            <div className="profile-list-container">
+                <div className="profile-list">
+                    {splitUsers.map((splitUser, index) => (
+                        <div className="profile-item" key={index}>
+                            <UserIcon {...splitUser} onRemove={removeSplitUser} />
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <button onClick={() => {
+                dispatchSplitUser({ type: "add", item: splitUsers.length % 2 ? { type: "img" } : { type: "default" }})
+            }}>Add</button>
+        </div>
+    )
+}
+
+export default FacePile;

ui/src/Reciept.css

@@ -0,0 +1,30 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+ .reciept {
+    color: black;
+    background-color: white;
+    margin-top: 4em;
+    padding: 3em 0em;
+
+    --mask: conic-gradient(from -47.5deg at bottom,#0000,#000 1deg 94deg,#0000 95deg) 50%/65.48px 100%;
+    -webkit-mask: var(--mask);
+            mask: var(--mask);
+ }
+
+ .reciept-title {
+    border: none;
+    background: white;
+    color: black;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: italic;
+ }
+
+ .title {
+    text-decoration: underline;
+    border-bottom: 1px solid black;
+ }
+

ui/src/Reciept.tsx

@@ -0,0 +1,18 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+import { useState } from "react";
+import "./Reciept.css"
+
+function Reciept() {
+    const [title, updateTitle] = useState("Location");
+    return <div className="reciept">
+        <h1 className="title">
+            GoSplitsies:<input className="reciept-title" value={title} onChange={e => updateTitle(e.target.value)} />
+        </h1>
+    </div>
+}
+
+export default Reciept;

ui/src/UserIcon.css

@@ -0,0 +1,39 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+
+.profile-item {
+  flex: 0 0 auto;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0; /* Light gray background for the default avatar */
+}
+
+.profile-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.default-avatar {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #007bff; /* Blue background for default avatar */
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  border-radius: 50%;
+  text-transform: uppercase;
+}

ui/src/UserIcon.tsx

@@ -0,0 +1,41 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * SPDX-FileCopyrightText: 2024 Joseph Martinsen <joseph@martinsen.com>
+ */
+
+import "./UserIcon.css"
+
+function DefaultIcon() {
+    return (
+        <div className="default-avatar">
+            {/* TODO: {profile.name.charAt(0).toUpperCase()} */}
+            J
+        </div>
+    )
+}
+
+function ImgUserIcon() {
+    return <img className="user-icon-outline" src="https://picsum.photos/50" />
+}
+
+
+export type UserIconProps = {
+    type: "img"
+    img?: string;
+    onRemove: (item: UserIconProps) => void;
+} | { type: "default" | "add"}
+
+function UserIcon(props: UserIconProps) {
+    switch(props.type) {
+        case "default":
+            return <DefaultIcon />;
+        case "img":
+            return <ImgUserIcon />
+        case "add":
+            return <div>
+                <p>ADD</p>
+            </div>
+    }
+}
+
+export default UserIcon;

ui/src/index.css

@@ -29,18 +29,18 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  /* display: flex; */
+  /* place-items: center; */
+  /* min-width: 320px; */
+  /* min-height: 100vh; */
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
 }
 
-button {
+/* button {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -57,7 +57,7 @@ button:hover {
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
-}
+} */
 
 @media (prefers-color-scheme: light) {
   :root {