make app an PWA

src/App.tsx

@@ -20,7 +20,7 @@ function App() {
         <Modal/>
           <SideBar routes={routes} />
           <Content>
-            <Quests />
+            <Quests /> 
             <Routes>
               <Route path="/" element={<MapContainer />} />
               <Route path="/settings" element={<Settings useAuth={useAuth} />} />

src/pages/MapContainer.tsx

@@ -1,7 +1,6 @@
 import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView } from 'utopia-ui'
-import { tags } from './data'
 import { itemsApi } from '../api/itemsApi'
-import { Place, Event } from '../api/directus';
+import { Place, Event, Tag } from '../api/directus';
 import { useEffect, useState } from 'react';
 
 function MapContainer() {
@@ -9,12 +8,16 @@ function MapContainer() {
 
   const [placesApi, setPlacesApi] = useState<itemsApi<Place>>();
   const [eventsApi, setEventsApi] = useState<itemsApi<Event>>();
+  const [tagsApi, setTagsApi] = useState<itemsApi<Tag>>();
+
 
 
   useEffect(() => {
 
     setPlacesApi(new itemsApi<Place>('places'));
     setEventsApi(new itemsApi<Event>('events'));
+    setTagsApi(new itemsApi<Tag>('tags'));
+
 
 
   }, []);
@@ -58,7 +61,7 @@ function MapContainer() {
         // data={places}
         api={placesApi}
       />
-      <Tags data={tags}></Tags>
+      <Tags api={tagsApi}></Tags>
     </UtopiaMap>
   )
 }

vite.config.ts

@@ -1,7 +1,26 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+// vite.config.js
+import { VitePWA } from 'vite-plugin-pwa'
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({manifest: {
+      "short_name": "Utopia Game",
+      "name": "Utopia Game: A Cooperative Real Life Manifestation Game",
+      "icons": [
+        {
+          "src": "3markers.svg",
+          "sizes": "192x192",
+          "type": "image/svg"
+        }
+      ],
+      "start_url": "/index.html",
+      "display": "fullscreen",
+      "orientation": "portrait"
+    }})
+  ]
 })