Прогресс по "оживлению" вёрстки

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
 }

server.ts

@@ -25,7 +25,8 @@ const devServer = (req: express.Request, res: express.Response) => {
   let name = req.url;
   if (name == "" || name == "/") name = "index.html";
   if (name.endsWith(".ts") || name.endsWith(".tsx")) {
-    res.status(500);
+    res.status(400);
+    res.send();
     return;
   }
   const method = req.method;

src/App.tsx

@@ -1,113 +1,15 @@
-const app = (
-  <>
-    <header>
-      <nav class="navbar" style="position: fixed; border:#000000">
-        <div class="leftElements">
-          <div class="list">
-            <i class="bi bi-list" style="cursor:pointer"></i>
-          </div>
+import { ButtonComponent } from '/components/button.js';
+import { RenderJSX } from './jsx_core/renderer.js';
+import { MainApp } from './screens/MainApp.js';
 
-          <div
-            class="logo"
-            style="user-select: none; display: flex; align-items: center;"
-          >
-            <img
-              draggable="false"
-              src="/static/logo.svg"
-              alt="Logo"
-              style="margin-bottom: 8px;"
-            />
-            <div
-              draggable="false"
-              class="name"
-              style="font-size: 24px; font-weight: bold"
-            >
-              Pumpkin
-            </div>
-          </div>
-        </div>
+const app = MainApp()
 
-        <div class="currentMode">
-          <div class="mode">
-            <i class="bi bi-kanban"></i>
-          </div>
-          <div style="padding-left: 5px;flex-grow:1">Канбан</div>
-          <div>
-            <i class="bi bi-chevron-down"></i>
-          </div>
-        </div>
+const appRoot_raw = document.getElementById('app_root');
+let appRoot: Element;
+if (appRoot_raw === null) {
+  throw new Error('App root not found');
+} else {
+  appRoot = appRoot_raw;
+}
 
-        <div class="borderNameWithGear">
-          <div class="borderName" style="font-size: 18px ;font-weight: 600">
-            Моя доска
-          </div>
-          <div class="gear" style="cursor:pointer">
-            <i
-              class="bi-gear "
-              style="margin-right: auto; margin-left: auto;height: 16px; margin-bottom: 7px;"
-            ></i>
-          </div>
-        </div>
-        <div class="search">
-          <input
-            class="searchInput"
-            type="text"
-            placeholder="Поиск"
-            style="padding-left: 36px"
-          />
-          <i class="bi-search" style="position: absolute;"></i>
-          <div class="bell" style="cursor:pointer; position: relative;">
-            <i
-              class="bi-bell"
-              style="margin-right: auto; margin-left: auto;height: 16px; margin-bottom: 7px;"
-            ></i>
-          </div>
-        </div>
-        <div class="profilePicture" style="height: 40; width: 40;">
-          <img
-            draggable="false"
-            src="/static/avatar.svg"
-            alt="ProfilePicture"
-          />
-        </div>
-      </nav>
-    </header>
-
-    <main>
-      <img
-        src="/static/backgroundPicture.png"
-        class="backgroundPicture"
-        style="width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1;"
-        alt=""
-      />
-
-      <div class="board" style="display: flex; flex-direction: column;">
-        <div
-          class="board__card_1"
-          style="display: flex; flex-direction: column; height: 427px; width: 272px; background-color:#F1F2F4; border-radius:12px; margin-top: 74px; margin-left: 14px;"
-        >
-          <div
-            class="board__card__title"
-            style="display: flex; align-items: center; position: relative;"
-          >
-            <div
-              class="board__card__title__text"
-              style="font-size: 14px; font-weight: 500; padding-left: 10px; padding-top: 6px;"
-            >
-              Апокалипсис
-            </div>
-            <div
-              class="dots"
-              style="cursor:pointer; position: absolute; right:10px; top: 6px; box-shadow: 0px 0px 10px 7px rgba(34, 60, 80, 0.05); "
-            >
-              <i
-                class="bi-three-dots"
-                style="margin-right: auto; margin-left: auto; height: 16px; margin-bottom: 7px;"
-              ></i>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </>
-);
+RenderJSX(appRoot, app);

src/chunks/navbar.tsx

@@ -0,0 +1,67 @@
+import { ButtonComponent } from '/components/button.js';
+
+export const NavBar = () => {
+  return (
+    <nav class="navbar" style="position: fixed; border:#000000">
+      <div class="leftElements">
+        <div class="list">
+          <i class="bi bi-list" style="cursor:pointer"></i>
+        </div>
+
+        <div
+          class="logo"
+          style="user-select: none; display: flex; align-items: center;"
+        >
+          <img
+            draggable="false"
+            src="/static/logo.svg"
+            alt="Logo"
+            style="margin-bottom: 8px;"
+          />
+          <div
+            draggable="false"
+            class="name"
+            style="font-size: 24px; font-weight: bold"
+          >
+            Pumpkin
+          </div>
+        </div>
+      </div>
+
+      <div class="currentMode">
+        <div class="mode">
+          <i class="bi bi-kanban"></i>
+        </div>
+        <div style="padding-left: 5px;flex-grow:1">Канбан</div>
+        <div>
+          <i class="bi bi-chevron-down"></i>
+        </div>
+      </div>
+
+      <div class="borderNameWithGear">
+        <div class="borderName" style="font-size: 18px ;font-weight: 600">
+          Моя доска
+        </div>
+        <div class="gear" style="cursor:pointer">
+          <i
+            class="bi-gear "
+            style="margin-right: auto; margin-left: auto;height: 16px; margin-bottom: 7px;"
+          ></i>
+        </div>
+      </div>
+      <div class="search">
+        <input
+          class="searchInput"
+          type="text"
+          placeholder="Поиск"
+          style="padding-left: 36px"
+        />
+        <i class="bi-search" style="position: absolute;"></i>
+        {ButtonComponent({ icon: 'bi-bell' })}
+      </div>
+      <div class="profilePicture" style="height: 40px; width: 40px;">
+        <img draggable="false" src="/static/avatar.svg" alt="ProfilePicture" />
+      </div>
+    </nav>
+  );
+};

src/components/button.tsx

@@ -0,0 +1,17 @@
+interface ButtonProps {
+  text?: string;
+  icon?: string;
+  callback?: Function;
+}
+
+export const ButtonComponent = (props?: ButtonProps) => {
+  const btnProps = props ?? {};
+  return (
+    <div class="button" style="cursor:pointer; position: relative;">
+      <i
+        class={[btnProps.icon]}
+        style="margin-right: auto; margin-left: auto;height: 16px; margin-bottom: 7px;"
+      ></i>
+    </div>
+  );
+};

src/index.css

@@ -3,7 +3,7 @@
   padding: 0;
   box-sizing: border-box;
   font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 14;
+  font-size: 14px;
 }
 
 .navbar {
@@ -121,7 +121,7 @@
   justify-content: center;
 }
 
-.bell {
+.button {
   background-color: #f5f6fa;
   border: 1px solid #f5f6fa;
   border-radius: 3px;