feat: PWA Additions (#3896)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/nuxt.config.js

@@ -351,13 +351,22 @@ export default {
     },
     manifest: {
       start_url: "/",
+      scope: "/",
       lang: "en",
+      dir: "auto",
       name: "Mealie",
       short_name: "Mealie",
+      id: "mealie",
       description: "Mealie is a recipe management and meal planning app",
       theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
       background_color: "#FFFFFF",
       display: "standalone",
+      display_override: [
+        "standalone",
+        "minimal-ui",
+        "browser",
+        "window-controls-overlay"
+      ],
       share_target: {
         action: "/r/create/url",
         method: "GET",
@@ -395,6 +404,56 @@ export default {
           purpose: "maskable",
         },
       ],
+      screenshots: [
+        {
+          "src": "/screenshots/home-narrow.png",
+          "sizes": "1600x2420",
+          "form_factor": "narrow",
+          "label": "Home Page"
+        },
+        {
+          "src": "/screenshots/recipe-narrow.png",
+          "sizes": "1600x2420",
+          "form_factor": "narrow",
+          "label": "Recipe Page"
+        },
+        {
+          "src": "/screenshots/editor-narrow.png",
+          "sizes": "1600x2420",
+          "form_factor": "narrow",
+          "label": "Editor Page"
+        },
+        {
+          "src": "/screenshots/parser-narrow.png",
+          "sizes": "1600x2420",
+          "form_factor": "narrow",
+          "label": "Parser Page"
+        },
+        {
+          "src": "/screenshots/home-wide.png",
+          "sizes": "2560x1460",
+          "form_factor": "wide",
+          "label": "Home Page"
+        },
+        {
+          "src": "/screenshots/recipe-wide.png",
+          "sizes": "2560x1460",
+          "form_factor": "wide",
+          "label": "Recipe Page"
+        },
+        {
+          "src": "/screenshots/editor-wide.png",
+          "sizes": "2560x1460",
+          "form_factor": "wide",
+          "label": "Editor Page"
+        },
+        {
+          "src": "/screenshots/parser-wide.png",
+          "sizes": "2560x1460",
+          "form_factor": "wide",
+          "label": "Parser Page"
+        }
+      ],
       "shortcuts": [
         {
           "name": "Shopping Lists",
@@ -403,8 +462,12 @@ export default {
           "url": "/shopping-lists",
           "icons": [
             {
-              "src": "/svgs/mdiFormatListChecks.svg",
-              "sizes": "256x256",
+              "src": "/icons/mdiFormatListChecks-192x192.png",
+              "sizes": "192x192",
+            },
+            {
+              "src": "/icons/mdiFormatListChecks-96x96.png",
+              "sizes": "96x96",
             }
           ]
         },
@@ -415,12 +478,28 @@ export default {
           "url": "/group/mealplan/planner/view",
           "icons": [
             {
-              "src": "/svgs/mdiCalendarMultiselect.svg",
-              "sizes": "256x256",
+              "src": "/icons/mdiCalendarMultiselect-192x192.png",
+              "sizes": "192x192",
+            },
+            {
+              "src": "/icons/mdiCalendarMultiselect-96x96.png",
+              "sizes": "96x96",
             }
           ]
         },
       ],
+      prefer_related_applications: false,
+      handle_links: "preferred",
+      orientation: "any",
+      categories: [
+        "food"
+      ],
+      launch_handler: {
+        "client_mode": ["focus-existing", "auto"]
+      },
+      edge_side_panel: {
+        "preferred_width": 400
+      }
     },
     icon: false, // disables the icon module
   },

frontend/static/svgs/mdiCalendarMultiselect.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-calendar-multiselect" viewBox="0 0 24 24"><path d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z" /></svg>

frontend/static/svgs/mdiFormatListChecks.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-format-list-checks" viewBox="0 0 24 24"><path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z" /></svg>