Feature/event notifications (#399)

* additional server events * sort 'recent recipes' by updated * remove duplicate code * fixes #396 * set color * consolidate tag/category pages * set colors * list unorganized recipes * cleanup old code * remove flash message, switch to global snackbar * cancel to close * cleanup * notifications first pass * test notification * complete notification feature * use background tasks * add url param * update documentation Co-authored-by: hay-kot <hay-kot@pm.me>
2025-08-02 20:15:24 +02:00 · 2021-05-08 18:29:31 -08:00 · 2021-05-08 18:29:31 -08:00 · 14b6ab7ec7
commit 14b6ab7ec7
parent 8923c1ecf8
49 changed files with 875 additions and 355 deletions
--- a/docs/docs/assets/img/MealieDiagram.png
+++ b/docs/docs/assets/img/MealieDiagram.png
--- a/docs/docs/assets/img/add-notification.webp
+++ b/docs/docs/assets/img/add-notification.webp
--- a/docs/docs/assets/img/add-user.png
+++ b/docs/docs/assets/img/add-user.png
--- a/docs/docs/assets/img/add-user.webp
+++ b/docs/docs/assets/img/add-user.webp
--- a/docs/docs/assets/img/admin-backup.png
+++ b/docs/docs/assets/img/admin-backup.png
--- a/docs/docs/assets/img/admin-backup.webp
+++ b/docs/docs/assets/img/admin-backup.webp
--- a/docs/docs/assets/img/admin-theme.png
+++ b/docs/docs/assets/img/admin-theme.png
--- a/docs/docs/assets/img/app_diagram.drawio.svg
+++ b/docs/docs/assets/img/app_diagram.drawio.svg
@ -1,233 +0,0 @@
-<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="672px" height="802px" viewBox="-0.5 -0.5 672 802" content="&lt;mxfile host=&quot;23d2e92c-1798-4628-b714-afc635cb8bb4&quot; modified=&quot;2021-02-25T18:35:08.654Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.54.0-insider Chrome/87.0.4280.141 Electron/11.3.0 Safari/537.36&quot; etag=&quot;VkjSc3HAwyf7iAB2Toef&quot; version=&quot;14.2.4&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;3j9sfWdaUOHFNAte1u_k&quot; name=&quot;Page-1&quot;&gt;7VvbcuM2Ev0aVW0e7KJ4keRH3zK7VU6tKzOpPKYgEiKxJgkuCVlyvj7duJAgCVnyhJqZeMYPtgg0cenuc7rRkGfBbbH/UJMq+4UnNJ/5XrKfBXcz35/74RL+YMuLbvGuQtWS1izRbV3DR/YnNYK6dcsS2vQEBee5YFW/MeZlSWPRayN1zXd9sQ3P+7NWJKWjho8xycetv7NEZKp1FXld+78pSzMz89zTPWsSP6U135Z6vpkf/Cx/VHdBzFhavslIwndWU3A/C25rzoX6VOxvaY7KNWpT7/18oLddd01LccoLoX7jmeRbapYsFyZejDJwP5UWo7Wge5cJyNqIe+M1zNudgctQXlBRv4DIvm904yzBSj3vOs2HRiaztH6l24g2dtqO3G0YPug9u/cfeMf3X3FWClrfP8N+cKr5LLhp7ebBQ0KajCb6IRNFboREzZ/oLc95DS0lL2HAm5ysaf7IGyYYL6E5pjg4dKBuGbjgw0BgzYXghSVwnbMUOwSvoJXop3YcWFqFKy/2KaLzsmhiQi9hC9uSXm4bWv+hDBrcbFiem9WBo95Hq8CPoH1swNZNhvYfG9Wy2tJhtMUURls6jLbIBWp/3rPd4v9bRNLNhpfiopE0cw0C81W17zrhU4p/fwPdQOcH1E5jBoS14JhKwjRWg1dS/Qqs3OPYYM1MCpa/2JO10sBUFH9LEOU5gAgNDiNs4BcaCmVERkQn2jQ8ZkSAsyEhplRktL6Ez79pafAcXqasTGW/PdeOSRVm5FkOFMe0aYwQjMLq4fAFJXmVk1IutEyG3UiBDU79KWMoIn/F2xp9BveLg+JeSvmwoURs5Rbk5tSq4O0FKdARy3VTWeoFnVedygdoBP8TJ8DM9m3d1FQkRtUEd1H39AlBdHfhI3R3GRP0I7TjVDsAD7RxcPlNLqGesSShALUbye8t4A8y4xhABynQIMUCTxCeifJC/9uj/PH2nYw/9yfYv+9ij/NQPpBqsrxae94ZeJ9vRc5KmMpkQN4pwYBvNixWYaC5JEnBSgZLJgKX+5Z44B9wjq8TDxZniQfXqJ4TA8EvwJZMMqt+STN2s61khBjQuZOGidzUVoWUhAgMDP+i+zjfJorRK2DgHa+T5ick3kcgJl4XZk5lRybHFaR5wmFz9qTWpAfQq8AwVdOGCtE128MrCUxldX/V8jkua00aqkQKluKcUkgt+LaNFgUpiY5E4NJSF2pCGTWubdeToYOUUgUNt/UCqxQ1i1XIqWnMKjoKigWpn2S/5mcdgiHbSZjiKNhLF5Fws99V5PEniTyTUG8YfP3Q4/dDjx86Yo93rtPGCaetb/u0MUHUkWxzLNgcc+rgaLBZnCvYXJ3t8NG8QkuvxJ5rSbFlmht6Q5zUVCfqkvokuUrOtWOQPDGQhsWo3Zo955jTm2iE7DnrzgZVzcFimvfV6C3Va1GbnynOynclcv39uNui75ILm7v1UaPP7IbJXbz93fD4AZff9137i5wgouM0ZiggfgG+SGgdHNCOZYW1UsrDum1oi2n/VbRjzKXqhfPo79LImyJF4FCxi2RWU2j4PBntXZu9eb/SnCDlNxmrPpN3Psl8yhBIbQ3Y4hgYAGhNtcgKQcIIhIRCMRMFVCBB/AeB32S8Fl2OqilADTDTdYOOQtTwg0qKLjn0XsEyxoWsY+BMN2jehG7INpcM1GbcVolkrVNmXWRpx+3U2Q4wLOrIzeCspF2s2Xg7YAaCaaZldALN26y1340AkMn3LqOaLDuKp3vIn5uBku09QL7d30G3cRkKLt8xW76O7FV0FNnuJDiYANvmEsHC9q/aVYYcumMFeC7qMs5YnjyQF8i/oK8R4Bjm6QaAw/4E+JPOQKQW+lIl8HoSH/FNrchOrXNNIPqd+co867V0Vje3IT6+T5FvHo3WvbbpgTTiaOY6ShodHjSBqeeLPosvVmNbz100PsmBJxon/BcdRUmmzgHFs0jnfxEyOoSxOWrowsp8lOya85xiLteTMTjpSQxcyWg7pxvxdgg/yLfuwoGbLA4eE6Qf6EOacjVBhPUM9jMecpKNI89tZAPgE206RfIThSOTqluAH+CdHLxhH7uR77Czq6g4DXbHWe7FTBfbXoOjvl2zsC1vlMbYNtmMLaojQU/23YE5fDOYXUaeBMzjuwCs5D7mDgr9Aei/D+jI/6rReOVEtAXYD13x8R3hbfnNBM+FP7KAW+U/wDZB9PSPh0/fVeqeBGyLca3/oj1sn5D52t8/0JItNUd37w2jiwO3NIcx6rTcJBgd157QRJf6YkaVM7Aygeq0Ssyz7qszHl//D68HpqsljCAzNEsBhyCcxllU6BcQbAv700CtLfoZqEUOUnUZLJzAYMsTbtX6GjhSiB0qyGmkKQgq7CcD5h6/pzQHPU3h5K5bnIHOaJJSEwYamhawq/uu6YaWyTV+1RS9MicNVkEPatFEFVelevSVkUGPHXfUGnFhb1W5pdPIoVPTpqq4z/3hXYrWMzzibaVl0au+ReeDERq+rWOqX+qsNRpnPhho6Q1sDmE+pWI0EBiEvFhi8jK1OXm9ZprOidSAnUu1Gj0NmSdclHyTyPS9foUUPPKLQXN5wiX5xNB8TxCcr8KB6Vafh8Fw8CW9aBirJsJgW1EbLPjQukbyofdZ+5gM5K67un8CyEN/GH/DLwfyE753/wPkh+OW3w9c0dVnBtpoAI6zBVr/1Ug7XpfnXtdkoB0X/uQhp7thPnDMMVd1+ojTjLz23Z5xBtn60vGl7fMdccaVO3nWvDRVgsMG6+q536HJhug+o83gsfu3NYXI7p8Dg/u/AA==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
-    <defs/>
-    <g>
-        <rect x="0" y="138" width="70" height="60" fill="none" stroke="none" pointer-events="all"/>
-        <path d="M 0 190.12 C 0.33 185.06 0.82 180.02 1.48 175 C 1.8 173.47 2.19 171.97 2.66 170.5 C 3.13 168.98 4 167.67 5.14 166.72 C 6.56 165.61 8.15 164.81 9.83 164.35 C 10.51 164.04 11.26 164.04 11.94 164.35 C 16.84 169.6 24.48 169.6 29.38 164.35 C 29.98 164.08 30.64 164.08 31.24 164.35 C 33.19 165.09 35.06 166.07 36.82 167.27 C 34.65 167.54 32.55 168.25 30.62 169.39 C 27.64 171.19 25.41 174.27 24.43 177.95 L 22.92 190.14 Z M 20.17 161.73 C 17.61 161.8 15.14 160.56 13.36 158.3 C 11.58 156.05 10.65 152.98 10.79 149.85 C 10.72 146.76 11.68 143.77 13.45 141.58 C 15.23 139.39 17.66 138.19 20.17 138.26 C 22.78 138 25.35 139.12 27.25 141.33 C 29.14 143.54 30.18 146.64 30.09 149.85 C 30.25 153.1 29.25 156.28 27.34 158.56 C 25.44 160.84 22.83 162 20.17 161.73 Z M 25.84 198 C 26.15 193.52 26.59 189.05 27.17 184.6 C 27.42 182.59 27.8 180.6 28.32 178.66 C 28.64 176.59 29.65 174.75 31.15 173.52 C 32.85 172.3 34.66 171.28 36.55 170.5 C 37.4 170.21 38.32 170.4 39.03 171 C 40.08 172.2 41.31 173.19 42.66 173.92 C 46.02 175.58 49.83 175.58 53.19 173.92 C 54.53 173.16 55.78 172.22 56.9 171.1 C 57.79 170.31 59.01 170.19 60 170.8 C 61.6 171.42 63.13 172.3 64.51 173.42 C 65.8 174.41 66.77 175.86 67.26 177.55 C 68.13 180.7 68.72 183.94 69.03 187.22 C 69.43 190.81 69.76 194.4 70 198 Z M 48.5 167.98 C 42.29 168.13 37.15 161.83 36.99 153.87 C 37.03 150.02 38.26 146.34 40.42 143.65 C 42.58 140.97 45.49 139.5 48.5 139.57 C 54.38 140.09 58.97 146.32 59.02 153.87 C 58.89 161.35 54.33 167.47 48.5 167.98 Z" fill="#e58325" stroke="none" pointer-events="all"/>
-        <rect x="70" y="138" width="340" height="90" fill="none" stroke="none" pointer-events="all"/>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 128px; margin-left: 75px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 100px; overflow: hidden; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
-                                <h1 style="font-size: 18px">
-                                    User Groups
-                                </h1>
-                                <p>
-                                    User groups, or "family" groups are a collection of users that are associated together. Users belonging to groups will have access to their associated mealplans and associated pages. This is currently the only feature of groups.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="75" y="140" fill="#000000" font-family="Helvetica" font-size="12px">
-                    User Groups...
-                </text>
-            </switch>
-        </g>
-        <rect x="0" y="10" width="70" height="60" fill="none" stroke="none" pointer-events="all"/>
-        <path d="M 63.22 68.4 C 63.82 68.4 64.58 67.93 64.58 67.14 C 64.58 66.64 64.03 65.99 63.22 65.99 C 62.34 65.99 61.86 66.7 61.86 67.14 C 61.86 67.83 62.49 68.4 63.22 68.4 Z M 66.39 67.22 C 66.39 68.69 64.91 70 63.27 70 C 61.44 70 60.07 68.65 60.07 67.25 L 60.07 50.06 C 58.43 49.33 56.45 47.65 56.45 44.65 C 56.55 42.25 58.13 40.43 60.07 39.51 L 60.07 44.39 L 63.22 45.99 L 66.39 44.39 L 66.39 39.5 C 68.29 40.34 70 42.32 70 44.78 C 69.95 47.1 68.53 49.03 66.39 50.06 Z M 49.19 69.99 C 48.73 69.99 48.32 69.65 48.32 69.19 L 48.32 57.17 C 48.32 56.81 48.7 56.39 49.17 56.39 L 50.12 56.39 L 50.13 45.21 L 49.77 42.55 L 49.77 38.79 L 52.29 38.79 L 52.3 42.55 L 51.94 45.21 L 51.94 56.39 L 52.85 56.39 C 53.37 56.39 53.74 56.68 53.74 57.21 L 53.74 69.22 C 53.74 69.68 53.33 69.99 52.88 69.99 Z M 27.78 36.63 C 20.5 36.63 14 31.25 14 22.98 C 14 16.57 19.5 10 27.52 10 C 35.36 10 41.1 16.36 41.1 23.29 C 41.1 31.31 34.33 36.63 27.78 36.63 Z M 0 63.51 C 0.63 57.61 1.47 49.54 3.07 45.46 C 3.81 43.61 4.88 42.28 6.61 41.17 C 7.73 40.43 11.72 38.48 12.45 38.16 C 13.73 37.57 15.05 37.26 16.18 38.16 C 22.94 43.46 32.3 43.3 39.15 38.18 C 39.94 37.46 41.21 37.65 42.04 37.94 C 42.97 38.26 45.37 39.46 46.96 40.29 L 46.96 42.69 L 47.32 45.36 L 47.32 54.39 C 46.31 54.92 45.52 55.93 45.52 57.17 L 45.51 63.51 Z" fill="#e58325" stroke="#d79b00" stroke-miterlimit="10" pointer-events="all"/>
-        <rect x="70" y="10" width="340" height="120" fill="none" stroke="none" pointer-events="all"/>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 0px; margin-left: 75px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 130px; overflow: hidden; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
-                                <h1 style="font-size: 18px">
-                                    Admins
-                                </h1>
-                                <p>
-                                    Mealie admins are super users that have access to all user data (excluding passwords). Perform administrative tasks like adding users, resetting user passwords, backing up the database, migrating data, and managing site settings. Administrators can also access restricted recipes that are marked hidden or uneditable by the user.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="75" y="12" fill="#000000" font-family="Helvetica" font-size="12px">
-                    Admins...
-                </text>
-            </switch>
-        </g>
-        <rect x="10" y="240" width="60" height="60" fill="none" stroke="none" pointer-events="all"/>
-        <path d="M 40.01 269.86 C 32.14 269.86 25.13 263.82 25.13 254.55 C 25.13 247.37 31.06 240 39.72 240 C 48.19 240 54.39 247.13 54.39 254.9 C 54.39 263.89 47.08 269.86 40.01 269.86 Z M 10 300 C 10.68 293.37 11.59 284.33 13.32 279.75 C 14.11 277.68 15.27 276.19 17.14 274.95 C 18.35 274.12 22.66 271.93 23.45 271.57 C 24.83 270.91 26.26 270.57 27.48 271.57 C 34.78 277.52 44.88 277.34 52.28 271.6 C 53.14 270.78 54.51 271 55.41 271.32 C 56.82 271.82 61.36 274.29 62.22 274.79 C 64.73 276.3 66.08 278.32 67.09 282.11 C 68.37 287.23 69.13 293.75 70 300 Z" fill="#e58325" stroke="none" pointer-events="all"/>
-        <rect x="70" y="240" width="340" height="90" fill="none" stroke="none" pointer-events="all"/>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 230px; margin-left: 75px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 100px; overflow: hidden; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
-                                <h1 style="font-size: 18px">
-                                    Users
-                                </h1>
-                                <p>
-                                    A single user created by an Admin that has basic privlages to edit their profile, create and edit recipes they own. Edit recipes that are not hidden and are marked editable.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="75" y="242" fill="#000000" font-family="Helvetica" font-size="12px">
-                    Users...
-                </text>
-            </switch>
-        </g>
-        <path d="M 10 375 C 10 366.72 23.43 360 40 360 C 47.96 360 55.59 361.58 61.21 364.39 C 66.84 367.21 70 371.02 70 375 L 70 425 C 70 433.28 56.57 440 40 440 C 23.43 440 10 433.28 10 425 Z" fill="#e58325" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
-        <path d="M 70 375 C 70 383.28 56.57 390 40 390 C 23.43 390 10 383.28 10 375" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
-        <rect x="75" y="360" width="340" height="130" fill="none" stroke="none" pointer-events="all"/>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 332px; height: 1px; padding-top: 350px; margin-left: 80px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 140px; overflow: hidden; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
-                                <h1 style="font-size: 18px">
-                                    Database Relationships
-                                </h1>
-                                <p>
-                                    The basic relationship and ownership is diagramed below. In short users are owners of recipes and groups are the owners of meal-plans. By default all users will be added to the "default" group. If a recipe is added through a migration or through a backup where no user exists ownership will be set to the default Admin.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="80" y="362" fill="#000000" font-family="Helvetica" font-size="12px">
-                    Database Relationships...
-                </text>
-            </switch>
-        </g>
-        <path d="M 310 710 L 310 693.5 Q 310 680 296.5 680 L 163.5 680 Q 150 680 150 693.5 L 150 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
-        <path d="M 150 710 L 150 786.5 Q 150 800 163.5 800 L 296.5 800 Q 310 800 310 786.5 L 310 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 150 710 L 310 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
-            <text x="229.5" y="702.5">
-                Recipe
-            </text>
-        </g>
-        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
-            <text x="155.5" y="731.5">
-                - owners: list[Users]
-            </text>
-            <text x="155.5" y="750.5">
-                - editable: boolean
-            </text>
-            <text x="155.5" y="769.5">
-                - hidden: boolean
-            </text>
-        </g>
-        <path d="M 200 550 L 200 533.5 Q 200 520 186.5 520 L 43.5 520 Q 30 520 30 533.5 L 30 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 30 550 L 30 626.5 Q 30 640 43.5 640 L 186.5 640 Q 200 640 200 626.5 L 200 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 30 550 L 200 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
-            <text x="114.5" y="542.5">
-                User
-            </text>
-        </g>
-        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
-            <text x="35.5" y="571.5">
-                - admin: boolean
-            </text>
-            <text x="35.5" y="590.5">
-                - group: list[Group]
-            </text>
-            <text x="35.5" y="609.5">
-                - recipes: list[Recipe]
-            </text>
-        </g>
-        <path d="M 670 710 L 670 693.5 Q 670 680 656.5 680 L 523.5 680 Q 510 680 510 693.5 L 510 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 510 710 L 510 786.5 Q 510 800 523.5 800 L 656.5 800 Q 670 800 670 786.5 L 670 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 510 710 L 670 710" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
-            <text x="589.5" y="702.5">
-                MealPlan
-            </text>
-        </g>
-        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
-            <text x="515.5" y="731.5">
-                - group: Group
-            </text>
-        </g>
-        <path d="M 610 550 L 610 533.5 Q 610 520 596.5 520 L 423.5 520 Q 410 520 410 533.5 L 410 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 410 550 L 410 626.5 Q 410 640 423.5 640 L 596.5 640 Q 610 640 610 626.5 L 610 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 410 550 L 610 550" fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <g fill="#000000" font-family="Helvetica" font-weight="bold" pointer-events="none" text-anchor="middle" font-size="18px">
-            <text x="509.5" y="542.5">
-                Group
-            </text>
-        </g>
-        <g fill="#000000" font-family="Helvetica" pointer-events="none" font-size="16px">
-            <text x="415.5" y="571.5">
-                - users: list[Users]
-            </text>
-            <text x="415.5" y="590.5">
-                - mealplans list[MealPlan]
-            </text>
-        </g>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 570px; margin-left: 271px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
-                                User.group is backfilled by a Groups object
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="320" y="574" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
-                    User.group is bac...
-                </text>
-            </switch>
-        </g>
-        <rect x="34" y="636" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
-        <path d="M 39 611 L 39 690 Q 39 700 49 700 L 130.76 700" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 136.76 700 L 128.76 704 L 130.76 700 L 128.76 696 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <rect x="195" y="583" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
-        <path d="M 174 588 L 234 588 Q 244 588 244 578 L 244 550 Q 244 540 254 540 L 391.76 540" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 397.76 540 L 389.76 544 L 391.76 540 L 389.76 536 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <rect x="414" y="634" width="10" height="10" fill="#ffffff" stroke="none" pointer-events="none"/>
-        <path d="M 419 591 L 419 690 Q 419 700 429 700 L 480 700 Q 490 700 490.88 700 L 491.76 700" fill="none" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <path d="M 497.76 700 L 489.76 704 L 491.76 700 L 489.76 696 Z" fill="#e58325" stroke="#e58325" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 730px; margin-left: 35px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
-                                User.recipes is backfilled by Recipe objects
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="84" y="734" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
-                    User.recipes is b...
-                </text>
-            </switch>
-        </g>
-        <g transform="translate(-0.5 -0.5)">
-            <switch>
-                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
-                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 730px; margin-left: 401px;">
-                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
-                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">
-                                Group.mealplan is backfilled by MealPlan objects
-                            </div>
-                        </div>
-                    </div>
-                </foreignObject>
-                <text x="450" y="734" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
-                    Group.mealplan is...
-                </text>
-            </switch>
-        </g>
-    </g>
-    <switch>
-        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
-        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
-            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
-                Viewer does not support full SVG 1.1
-            </text>
-        </a>
-    </switch>
-</svg>
--- a/docs/docs/assets/img/app_diagram.png
+++ b/docs/docs/assets/img/app_diagram.png
--- a/docs/docs/assets/img/mealie-diagram.webp
+++ b/docs/docs/assets/img/mealie-diagram.webp
--- a/docs/docs/assets/img/sign-up-links.png
+++ b/docs/docs/assets/img/sign-up-links.png
--- a/docs/docs/assets/img/sign-up-links.webp
+++ b/docs/docs/assets/img/sign-up-links.webp
--- a/docs/docs/assets/img/site-settings.png
+++ b/docs/docs/assets/img/site-settings.png
--- a/docs/docs/assets/img/site-settings.webp
+++ b/docs/docs/assets/img/site-settings.webp
--- a/docs/docs/getting-started/notifications.md
+++ b/docs/docs/getting-started/notifications.md
@ -0,0 +1,59 @@
+# Getting External Notifications
+
+## Apprise
+
+Using the [Apprise](https://github.com/caronc/apprise/) library Mealie is able to provided notification services for nearly every popular service. Some of our favorites are...
+
+- [Gotify](https://github.com/caronc/apprise/wiki/Notify_gotify)
+- [Discord](https://github.com/caronc/apprise/wiki/Notify_discord)
+- [Home Assistant](https://github.com/caronc/apprise/wiki/Notify_homeassistant)
+- [Matrix](https://github.com/caronc/apprise/wiki/Notify_matrix)
+- [Pushover](https://github.com/caronc/apprise/wiki/Notify_pushover)
+
+But there are some many to choose from! Take a look at their wiki for information on how to create their URL formats and that you can use to create a notification integration in Mealie. 
+
+
+## Subscribe Events
+There are several categories of events that mealie logs that can be broadcast with the notifications feature. You can also see a feed of your events in the Admin Dashboard
+
+- General Events
+    - Application Startup
+- Recipe Events
+    - Create Recipe
+    - Delete Recipe
+- Database Events
+    - Export/Import
+    - Database Initialization
+- Scheduled Events
+    - MealPlan Webhooks Sent
+- Group Events
+    - Create/Delete Groups
+- User Events
+    - User Creation
+    - User Sign-up
+    - Sign-up Token Creation
+    - Invalid login attempts
+
+In most cases the events will also provide details on which user performed the action. Now you'll know when your grandma deletes your favorite recipe!
+
+!!! info
+    This is a new feature and we are still working through all the possibilities of events. if you have an idea for an event let us know! 
+
+
+## Creating a New Notification
+
+New events can be created and viewed in admin Toolbox `/admin/toolbox?tab=event-notifications`. Select the "+ Notification" button and you'll be provided with a dialog. Complete the form using the URL for the service you'd like to connect to. Before saving be sure to use the test feature.
+
+!!! tip
+    The feedback provided from the test feature is only an indicated of if the URL you provided is valid, not if the message was successfully sent. Be sure to check the notification feed for the test message.
+
+![Add Notification Image](../../assets/img/add-notification.webp)
+
+
+## Examples
+
+### Discord
+![Discord]()
+
+### Gotify
+![Gotify]()
--- a/docs/docs/getting-started/organizing-recipes.md
+++ b/docs/docs/getting-started/organizing-recipes.md
@ -19,4 +19,4 @@ Below are some general guidelines that were considered when creating the organiz

 In the diagram below you will see what we came up with using the new custom pages feature. The large circles indicate pages, and the rectangles indicate categories. We've grouped several 'like' categories with each other as a way to quickly find similar items. 

-![Mealie Diagram](../../assets/img/MealieDiagram.png)
+![Mealie Diagram](../../assets/img/mealie-diagram.webp)
--- a/docs/docs/overrides/api.html
+++ b/docs/docs/overrides/api.html
--- a/docs/docs/site-administration/site-settings.md
+++ b/docs/docs/site-administration/site-settings.md
@ -10,7 +10,7 @@ Your sites settings panel can only be accessed by administrators. This where you
 | Card Per Section   | The amount of cards displayed in each section on the home page |
 | Home Page Sections | Category sections to include on the home page                  |

-![Site Settings Image](../assets/img/site-settings.png)
+![Site Settings Image](../assets/img/site-settings.webp)



--- a/docs/docs/site-administration/user-management.md
+++ b/docs/docs/site-administration/user-management.md
@ -56,7 +56,7 @@ There are two ways to create users in Mealie.
 ### Manually Creating a User
 In the Manage Users section you are able to create a user by providing the necessary information in the pop-up dialog. 

-![Create User Image](../assets/img/add-user.png){: align=right style="height:50%;width:50%"}
+![Create User Image](../assets/img/add-user.webp){: align=right style="height:50%;width:50%"}

 - User Name
 - Email
@ -69,7 +69,7 @@ When creating users manually, their password will be set from the default assign
 ### Sign Up Links
 You can generate sign-up links in the Manage Users section. Select the "create link" button and provide the name of the link and if the user will be an administrator. Once a link is created it will populate in the table where you'll be able to see all active links, delete a link, and copy the link as needed. 

-![Sign Up Links Image](../assets/img/sign-up-links.png)
+![Sign Up Links Image](../assets/img/sign-up-links.webp)

 !!! tip 
    When a link is used it is automatically removed from the database.
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@ -55,6 +55,7 @@ nav:
      - Working With Recipes: "getting-started/recipes.md"
      - Organizing Recipes: "getting-started/organizing-recipes.md"
      - Planning Meals: "getting-started/meal-planner.md"
+      - External Notifications: "getting-started/notifications.md"
      - iOS Shortcuts: "getting-started/ios.md"
      - Site Administration:
          - User Settings: "site-administration/user-settings.md"