Add icon element

client/package.json

@@ -7,7 +7,8 @@
         "build": "tsx scripts/build.ts",
         "serve": "tsx scripts/serve.ts",
         "lint": "eslint ./src/",
-        "lint:fix": "eslint ./src/ --fix"
+        "lint:fix": "eslint ./src/ --fix",
+        "clean": "rm -rf build"
     },
     "author": "Yaacov Zamir<[email protected]>",
     "license": "Apache-2.0",
@@ -25,6 +26,7 @@
         "typescript-eslint": "^8.0.0"
     },
     "dependencies": {
+        "@patternfly/patternfly": "^5.3.1",
         "lit": "^3.1.4"
     }
 }

client/scripts/build.ts

@@ -3,6 +3,26 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';
 
+// Function to copy a directory recursively
+function copyDir(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
 // Function to copy and process index.html
 function copyAndProcessIndexHtml() {
   const srcFile = path.resolve(__dirname, '../src/index.html');
@@ -12,6 +32,14 @@ function copyAndProcessIndexHtml() {
   fs.writeFileSync(destFile, html);
 }
 
+// Call the copyDir function on the assets directory
+function copyAssets() {
+  const srcDir = path.resolve(__dirname, '../src/assets');
+  const destDir = path.resolve(__dirname, '../build/assets');
+
+  copyDir(srcDir, destDir);
+}
+
 // Build configuration for esbuild
 async function build() {
   try {
@@ -32,8 +60,9 @@ async function build() {
       define: { 'process.env.NODE_ENV': '"production"' },
     });
 
-    // Copy index.html
+    // Copy static assets and index.html
     copyAndProcessIndexHtml();
+    copyAssets()
 
     console.log('Build completed successfully');
   } catch (error) {

client/scripts/serve.ts

@@ -3,6 +3,26 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { litCssPlugin } from 'esbuild-plugin-lit-css';
 
+// Function to copy a directory recursively
+function copyDir(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
 // Function to copy and process index.html
 function copyAndProcessIndexHtml() {
   const srcFile = path.resolve(__dirname, '../src/index.html');
@@ -12,6 +32,14 @@ function copyAndProcessIndexHtml() {
   fs.writeFileSync(destFile, html);
 }
 
+// Call the copyDir function on the assets directory
+function copyAssets() {
+  const srcDir = path.resolve(__dirname, '../src/assets');
+  const destDir = path.resolve(__dirname, '../build/assets');
+
+  copyDir(srcDir, destDir);
+}
+
 // Serve configuration for esbuild with watch
 async function serve() {
   const context = await esbuild.context({
@@ -31,15 +59,16 @@ async function serve() {
     },
   );
 
+  // Copy static assets and index.html
+  copyAndProcessIndexHtml();
+  copyAssets()
+
   const server = await context.serve({
     servedir: 'build',
   });
 
   const { host, port } = server;
   console.log(`Server is running at http://${host}:${port}`);
-
-  // Initial copy of index.html
-  copyAndProcessIndexHtml();
 }
 
 serve();

client/src/assets/styles/assets/fontawesome/_animated.scss

@@ -0,0 +1,20 @@
+// Animated icons
+// --------------------------
+
+.#{$fa-css-prefix}-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+.#{$fa-css-prefix}-pulse {
+  animation: fa-spin 1s infinite steps(8);
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

client/src/assets/styles/assets/fontawesome/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// Bordered & pulled
+// -------------------------
+
+.#{$fa-css-prefix}-border {
+  border: solid .08em $fa-border-color;
+  border-radius: .1em;
+  padding: .2em .25em .15em;
+}
+
+.#{$fa-css-prefix}-pull-left { float: left; }
+.#{$fa-css-prefix}-pull-right { float: right; }
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fab {
+  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
+  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+}

client/src/assets/styles/assets/fontawesome/_core.scss

@@ -0,0 +1,20 @@
+// Base class definition
+// -------------------------
+
+.#{$fa-css-prefix},
+.fas,
+.far,
+.fal,
+.fab {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+%fa-icon {
+  @include fa-icon;
+}

client/src/assets/styles/assets/fontawesome/_fixed-width.scss

@@ -0,0 +1,6 @@
+// Fixed width icons
+// -------------------------
+.#{$fa-css-prefix}-fw {
+  text-align: center;
+  width: $fa-fw-width;
+}