Share page design

10 files changed, 257 insertions, 27 deletions

diff --git a/assets/src/components/Header.svelte b/assets/src/components/Header.svelte
new file mode 100644
index 0000000..c956ca9
--- /dev/null
+++ b/assets/src/components/Header.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import RookIcon from "./icons/RookIcon.svelte";
+
+    export let color: "white" | "black";
+</script>
+
+<header>
+    <RookIcon color={color === "black" ? "white" : "black"} />
+</header>
+
+<style>
+    header {
+        padding: 5rem;
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+    }
+</style>
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index d951288..b172f8c 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -1,20 +1,52 @@
 <script lang="ts">
     import data from "../stores/data";
-    import DataPicker from "./share/DataPicker.svelte";
-    import IncomingRequests from "./share/Requests.svelte";
+    import Header from "./Header.svelte";
+    import Info from "./share/Info.svelte";
+    import Requests from "./share/Requests.svelte";
 </script>
 
+<Header color="black" />
+
 <main>
-    <h1>Sharing</h1>
-    {#if !$data.locked}
-        <DataPicker />
-    {:else}
-        <IncomingRequests />
-    {/if}
+    <Info />
+    <div class="request-list">
+        {#if $data.locked}
+            <h1>Requests</h1>
+            <Requests />
+        {/if}
+    </div>
 </main>
 
+<svelte:head>
+    <style>
+        html,
+        body {
+            background-color: black;
+        }
+    </style>
+</svelte:head>
+
 <style>
+    main {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+        width: 66%;
+        margin: auto;
+        flex-wrap: wrap;
+    }
+
     h1 {
-        font-size: 4em;
+        font-size: 35px;
+        color: white;
+        font-weight: 400;
+    }
+
+    .request-list {
+        width: 315px;
+        height: 100%;
+        padding-top: 225px;
+        box-sizing: border-box;
     }
 </style>
diff --git a/assets/src/components/icons/CheckIcon.svelte b/assets/src/components/icons/CheckIcon.svelte
new file mode 100644
index 0000000..d395619
--- /dev/null
+++ b/assets/src/components/icons/CheckIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"
+        fill={color}
+    />
+</svg>
\ No newline at end of file
diff --git a/assets/src/components/icons/CloseIcon.svelte b/assets/src/components/icons/CloseIcon.svelte
new file mode 100644
index 0000000..a6e6569
--- /dev/null
+++ b/assets/src/components/icons/CloseIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/icons/RookIcon.svelte b/assets/src/components/icons/RookIcon.svelte
new file mode 100644
index 0000000..61f65d3
--- /dev/null
+++ b/assets/src/components/icons/RookIcon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    width="23"
+    height="36"
+    viewBox="0 0 23 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        d="M11.0843 36C4.96577 36 0 33.5171 0 30.4578V26.1645C0.48032 33.4949 21.7031 33.4876 22.176 26.1645V30.4578C22.176 33.5171 17.2102 36 11.0843 36Z"
+        fill={color}
+    />
+    <path
+        d="M11.0843 1.18048C9.59163 1.18048 8.20978 1.40217 7.05701 1.79381L5.74168 0.803613C8.73444 -0.267871 13.4416 -0.267871 16.427 0.803613L15.1042 1.79381C13.9588 1.40956 12.577 1.18048 11.0843 1.18048Z"
+        fill={color}
+    />
+    <path
+        d="M11.0843 29.778C6.0742 29.7928 0.997586 27.5242 2.8228 24.428C3.1775 23.7703 4.77364 20.4746 4.97316 13.6171C3.45091 12.8929 2.44594 11.8953 2.25381 10.7869C2.25381 10.7869 1.46313 4.99348 1.46313 4.80874C1.46313 3.81854 2.06168 2.90224 3.08144 2.13373L5.05444 2.7914C3.43614 3.96633 3.43614 5.64376 5.05444 6.8187L3.08144 7.47637L3.29573 9.27203C3.98296 9.7819 4.86232 10.2253 5.88207 10.5652L5.73428 8.80649L7.04962 7.81629C9.30343 8.62175 12.843 8.62175 15.0968 7.81629L16.4122 8.80649L16.2644 10.5652C17.2841 10.2253 18.1635 9.7819 18.8507 9.27203L19.065 7.47637L17.092 6.8187C18.7103 5.64376 18.7103 3.96633 17.092 2.7914L19.065 2.13373C20.0922 2.89485 20.6833 3.81854 20.6833 4.80874C20.6833 5.00087 19.8926 10.7869 19.8926 10.7869C19.7005 11.8953 18.6955 12.8929 17.1733 13.6171C17.3728 20.4746 18.969 23.7703 19.3237 24.428C21.171 27.5242 16.1018 29.8002 11.0843 29.778Z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte
new file mode 100644
index 0000000..2d648ce
--- /dev/null
+++ b/assets/src/components/share/Info.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import {
+        ConnectionState,
+        getOwnToken,
+        getStateStore,
+    } from "../../network/channel/connection";
+    import data from "../../stores/data";
+    import Selector from "./Selector.svelte";
+
+    let connection = getStateStore();
+</script>
+
+<div class="info">
+    {#if !$data.locked}
+        <h1>What do you want to share?</h1>
+        <Selector />
+    {:else}
+        <h1>
+            You are <br />
+            sharing <b>a text.</b>
+        </h1>
+        {#if $connection === ConnectionState.CONNECTED}
+            <p>
+                Your share is available under: <br />
+                rook.rnrd.eu/<span>{getOwnToken()}</span>
+            </p>
+            <!-- TODO: Display actual data. -->
+            <div class="data">••••••••••••••••••••••••••••••</div>
+        {:else}
+            <p>Connecting to signaling server...</p>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    h1 {
+        font-size: 35px;
+        color: white;
+        font-weight: 400;
+    }
+
+    p {
+        color: #626262;
+        font-size: 16px;
+        margin-bottom: 30px;
+    }
+
+    span {
+        color: white;
+    }
+
+    .info {
+        width: 315px;
+    }
+
+    .data {
+        font-size: 14px;
+        width: 100%;
+        background-color: white;
+        color: black;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+</style>
diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte
index 17e8443..e34f633 100644
--- a/assets/src/components/share/Request.svelte
+++ b/assets/src/components/share/Request.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { offer } from "../../network/transfer/share";
+    import CheckIcon from "../icons/CheckIcon.svelte";
+    import CloseIcon from "../icons/CloseIcon.svelte";
 
     export let token: string;
 
@@ -10,22 +12,63 @@
     function decline() {}
 </script>
 
-<div class="container">
-    <span>{token}</span>
+<!-- TODO: Replace placeholder values and show IP instead of token. -->
+<ul class="request">
     <div class="buttons">
-        <button on:click={accept}>Accept</button>
-        <button on:click={decline}>X</button>
+        <div class="round-button" on:click={accept}>
+            <CheckIcon color="white" />
+        </div>
+        <div class="plain-button" on:click={decline}>
+            <CloseIcon color="black" />
+        </div>
     </div>
-</div>
+    <li>Requested at 14:38</li>
+    <li class="ip">{token}</li>
+    <li>Trusowo, Russia</li>
+    <li>Firefox 89</li>
+</ul>
 
 <style>
-    .container {
+    .request {
+        background-color: white;
+        color: #626262;
+        padding: 17px 20px;
+        font-size: 12px;
+        line-height: 1.5rem;
+        position: relative;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+
+    .ip {
+        line-height: 1.75rem;
+        font-size: 16px;
+        color: black;
+    }
+
+    .buttons {
+        position: absolute;
+        right: 20px;
         display: flex;
         justify-content: space-between;
+        width: 50px;
         align-items: center;
     }
 
-    .buttons {
+    .round-button {
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+        background-color: black;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .plain-button {
         display: flex;
+        align-items: center;
     }
 </style>
diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte
index 98596c6..f9ef237 100644
--- a/assets/src/components/share/Requests.svelte
+++ b/assets/src/components/share/Requests.svelte
@@ -1,4 +1,9 @@
 <script lang="ts">
+    import requests from "../../stores/requests";
+    import Request from "./Request.svelte";
+</script>
+
+<!-- <script lang="ts">
     import { getOwnToken, start } from "../../network/channel/connection";
     import { startShare } from "../../network/channel/share";
 
@@ -13,9 +18,9 @@
 {#await startPromise}
     <h3>Fetching token...</h3>
 {:then}
-    <h3>Your token is <b>{getOwnToken()}</b>.</h3>
+    <h3>Your token is <b>{getOwnToken()}</b>.</h3> -->
 
-    {#each $requests as request}
-        <Request token={request} />
-    {/each}
-{/await}
+{#each $requests as request}
+    <Request token={request} />
+{/each}
+<!-- {/await} -->
diff --git a/assets/src/components/share/DataPicker.svelte b/assets/src/components/share/Selector.svelte
index 6e8dbd4..e4c7c07 100644
--- a/assets/src/components/share/DataPicker.svelte
+++ b/assets/src/components/share/Selector.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+    import { start } from "../../network/channel/connection";
+    import { startShare } from "../../network/channel/share";
+
     import data from "../../stores/data";
 
     let value = "";
 
     const submit = () => {
         data.set(value);
+        start().then(startShare);
     };
 
     // TODO: Accept data other than text.
diff --git a/assets/src/network/channel/connection.ts b/assets/src/network/channel/connection.ts
index c7e9012..59e07e8 100644
--- a/assets/src/network/channel/connection.ts
+++ b/assets/src/network/channel/connection.ts
@@ -1,4 +1,5 @@
 import { Channel, Push, Socket } from "phoenix";
+import { get, Readable, writable, Writable } from "svelte/store";
 import {
     Handler,
     Handlers,
@@ -20,7 +21,7 @@ export type Connection = {
     socket: Socket;
     channel: Channel | null;
     token: string | null;
-    state: ConnectionState;
+    state: Writable<ConnectionState>;
     handlers: Handlers;
 };
 
@@ -28,7 +29,7 @@ const connection: Connection = {
     socket: new Socket("/socket", {}),
     channel: null,
     token: null,
-    state: ConnectionState.CONNECTING_SOCKET,
+    state: writable(ConnectionState.CONNECTING_SOCKET),
     handlers: {},
 };
 
@@ -42,7 +43,7 @@ export async function start() {
 }
 
 export function send(event: string, data: any): Push {
-    if (connection.state !== ConnectionState.CONNECTED) {
+    if (getState() !== ConnectionState.CONNECTED) {
         throw new Error("There is no connection yet.");
     }
 
@@ -71,14 +72,21 @@ export function on<Message extends AnyMessage>(
 }
 
 export function getOwnToken(): string {
-    if (connection.state <= ConnectionState.FETCHING_TOKEN) {
+    if (getState() <= ConnectionState.FETCHING_TOKEN) {
         throw new Error("There is no token yet.");
     }
 
     return connection.token;
 }
 
+export function getState(): ConnectionState {
+    return get(connection.state);
+}
+
 export function updateState(state: ConnectionState) {
-    // TODO: Notify state listeners
-    connection.state = state;
+    connection.state.set(state);
+}
+
+export function getStateStore(): Readable<ConnectionState> {
+    return connection.state;
 }