Add collaborators names (#1223)

* add random usernames

* add username state

* add username input

* ability to set names

* fix tests

* set username oon mobile

* remove auto generated names

* remove commented code

* always string

* updaate snapshots

* maintain username when clearing canvas

* Update src/renderer/renderScene.ts

Co-Authored-By: Lipis <lipiridis@gmail.com>

* add border

* fix styles

Co-authored-by: Pete Hunt <petehunt@users.noreply.github.com>
Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>

src/actions/actionCanvas.tsx

@@ -10,6 +10,7 @@ import { getShortcutKey } from "../utils";
 import useIsMobile from "../is-mobile";
 import { register } from "./register";
 import { newElementWith } from "../element/mutateElement";
+import { AppState } from "../types";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -35,12 +36,15 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
-  perform: (elements) => {
+  perform: (elements, appState: AppState) => {
     return {
       elements: elements.map((element) =>
         newElementWith(element, { isDeleted: true }),
       ),
-      appState: getDefaultAppState(),
+      appState: {
+        ...getDefaultAppState(),
+        username: appState.username,
+      },
       commitToHistory: true,
     };
   },