added font awesome,

added icons for main menu and report component,
added List of reports into main menu

webapp/package-lock.json

@@ -8,6 +8,10 @@
       "name": "bugreport",
       "version": "0.0.1",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "vuedraggable": "^4.1.0"
@@ -488,6 +492,58 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz",
+      "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",

webapp/package.json

@@ -9,6 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"

webapp/src/App.vue

@@ -9,10 +9,11 @@
 			</router-link>
 		</div>
 		<div class="menu">
-			<router-link to="/add">Pridať bug</router-link>
+			<router-link to="/add"><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať bug</router-link>
-			<router-link to="/archive">Archív</router-link>
+			<router-link to="/"><font-awesome-icon :icon="['fas', 'list-check']" /> Zoznam reportov</router-link>
-			<router-link to="/api">API</router-link>
+			<router-link to="/archive"><font-awesome-icon :icon="['fas', 'box-archive']" /> Archív</router-link>
-			<router-link to="/about">O aplikácii</router-link>
+			<router-link to="/api"><font-awesome-icon :icon="['fas', 'plug']" /> API</router-link>
+			<router-link to="/about"><font-awesome-icon :icon="['fas', 'address-card']" /> O aplikácii</router-link>
 		</div>
 	</div>
 	<router-view></router-view>

webapp/src/components/Report.vue

@@ -9,7 +9,7 @@ defineProps({
 	<div class="report">
 		<div class="report-header">
 			<div class="report-title">
-				<h3>{{ title }}</h3>
+				<h3><font-awesome-icon :icon="['fas', 'bug']" /> {{ title }}</h3>
 			</div>
 		</div>
 		<div class="report-description">
@@ -17,6 +17,6 @@ defineProps({
 				{{ description }}
 			</p>
 		</div>
-		<div class="report-date">{{ date }}</div>
+		<div class="report-date"><font-awesome-icon :icon="['fas', 'calendar-days']" /> {{ date }}</div>
 	</div>
 </template>

webapp/src/main.js

@@ -3,7 +3,15 @@ import './assets/css/style.css'
 import App from './App.vue'
 import { router } from './router'
 
+// Font Awesome
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons' // alebo pridaj konkrétne ikony
+library.add(fas) // alebo napr. library.add(faSearch, faUser)
+
+
 const app = createApp(App)
+app.component('font-awesome-icon', FontAwesomeIcon)
 
 app.use(router)
 app.mount('#app')