feat(settings): add settings, split files, fix bugs

Signed-off-by: ph1p <phil@capshake.com>

src/assets/css/ui.css

@@ -19,6 +19,16 @@ body {
   border-bottom: 1px solid #e9e9e9;
 }
 
+.chat .header .onboarding-tip__msg {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.chat .header .onboarding-tip__icon {
+  border-right: 1px solid #e9e9e9;
+}
+
 .messages {
   margin: 0;
   overflow: auto;
@@ -36,12 +46,39 @@ body {
   padding: 12px 15px;
   margin: 0 30% 15px 0;
 }
+
 .messages .message.me {
   color: #000;
   margin: 0 0 15px 30%;
   background-color: #ebebeb;
 }
 
+.messages .message .user {
+  font-size: 9px;
+  margin-bottom: 5px;
+  color: #fff;
+}
+
+.messages .message .selection {
+  margin: 5px 0 0 0;
+  cursor: pointer;
+  width: 100%;
+  background-color: transparent;
+  border-color: #fff;
+  color: #fff;
+}
+
+.messages .message.me .user,
+.messages .message.yellow .user {
+  color: #000;
+}
+
+.messages .message.me .selection,
+.messages .message.yellow .selection {
+  border-color: #000;
+  color: #000;
+}
+
 .messages .message.blue {
   background-color: #18a0fb;
 }
@@ -50,7 +87,7 @@ body {
   background-color: #7b61ff;
 }
 
-.messages .message.hotPink {
+.messages .message.hot-pink {
   background-color: #ff00ff;
 }
 
@@ -64,14 +101,7 @@ body {
 
 .messages .message.yellow {
   background-color: #ffeb00;
-}
-
-.messages .message .selection {
-  font-weight: normal;
-  color: #999;
-  margin: 5px 0 0 0;
-  font-size: 11px;
-  cursor: pointer;
+  color: #000;
 }
 
 .chat .footer {
@@ -121,6 +151,27 @@ body {
   grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
 }
+.settings .colors {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 32px;
+}
+.settings .colors .color {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+}
+.settings .colors .color.active::after {
+  content: '';
+  left: -6px;
+  top: -6px;
+  position: absolute;
+  border-radius: 100%;
+  width: 70px;
+  height: 70px;
+  border: 1px solid #000;
+}
 
 .connection {
   display: grid;

src/code.ts

@@ -43,6 +43,23 @@ main().then(({ roomName, secret }) => {
   });
 
   figma.ui.onmessage = async message => {
+    if (message.action === 'save-settings') {
+      await figma.clientStorage.setAsync('settings', message.options);
+
+      figma.ui.postMessage({
+        type: 'settings',
+        settings: message.options
+      });
+    }
+
+    if (message.action === 'get-settings') {
+      const settings = await figma.clientStorage.getAsync('settings');
+      figma.ui.postMessage({
+        type: 'settings',
+        settings
+      });
+    }
+
     if (message.action === 'message') {
       throw 'Neue Nachricht!';
     }

src/components/message.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { sendMainMessage, colors } from '../helpers';
+
+export default function Message({ data }) {
+  const username = data.user.name || '';
+  const colorClass = colors[data.user.color] || 'blue';
+
+  return (
+    <div className={`message ${data.id === 'me' ? 'me' : colorClass}`}>
+      {username ? <div className="user">{username}</div> : ''}
+      {data.message.selection ? (
+        <span
+          onClick={() =>
+            sendMainMessage('focus-nodes', {
+              ids: data.message.selection
+            })
+          }
+        >
+          {data.message.text}
+          <button className="selection button button--secondary">
+            attached elements
+          </button>
+        </span>
+      ) : (
+        <span>{data.message.text}</span>
+      )}
+    </div>
+  );
+}

src/components/settings.tsx

@@ -1,35 +1,80 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState } from 'react';
 import * as React from 'react';
+import { sendMainMessage, colors } from '../helpers';
 
 export default function Settings(props) {
   const closeSettings = () => props.setSettingsView(false);
 
+  const [settings, setSettings] = useState({
+    ...props.settings,
+    user: {
+      ...props.settings.user
+    }
+  });
+
+  const saveSettings = () => {
+    sendMainMessage('save-settings', settings);
+
+    props.setSettingsView(false);
+  };
+
   return (
     <div className="settings">
       <div className="fields">
         <input
           type="input"
-          value={props.currentUser.name}
+          value={settings.user.name}
+          onChange={e =>
+            setSettings({
+              ...settings,
+              user: {
+                ...settings.user,
+                name: e.target.value
+              }
+            })
+          }
           className="input"
           placeholder="Username ..."
         />
         <br />
 
-        <input
+        <div className="colors">
+          {Object.keys(colors).map(color => (
+            <div
+              key={color}
+              onClick={() =>
+                setSettings({
+                  ...settings,
+                  user: {
+                    ...settings.user,
+                    color
+                  }
+                })
+              }
+              className={`color ${settings.user.color === color && ' active'}`}
+              style={{ backgroundColor: color }}
+            />
+          ))}
+        </div>
+
+        {/* <input
           type="input"
-          value={props.currentUser.color}
+          value={settings.url}
+          onChange={e =>
+            setSettings({
+              ...settings,
+              url: e.target.value
+            })
+          }
           className="input"
-          placeholder="Color ..."
-        />
-        <br />
-
-        <input type="input" className="input" placeholder="Server-URL ..." />
+          placeholder="Server-URL ..."
+        /> */}
       </div>
 
       <div className="footer">
         <button
           type="submit"
-          onClick={closeSettings}
+          onClick={saveSettings}
           className="button button--primary"
         >
           save

src/helpers.ts

@@ -8,3 +8,12 @@ export const sendMainMessage = (action, options = {}) =>
     },
     '*'
   );
+
+export const colors = {
+  '#18A0FB': 'blue',
+  '#7B61FF': 'purple',
+  '#FF00FF': 'hot-pink',
+  '#1BC47D': 'green',
+  '#F24822': 'red',
+  '#FFEB00': 'yellow'
+};