feat: customizable Apple touch icon (#3606)

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>
Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/helpers.py

@@ -91,6 +91,7 @@ def template_renderer(additional_folders: list | None = None) -> Jinja2Templates
         "LNBITS_NODE_UI": settings.lnbits_node_ui and settings.has_nodemanager,
         "LNBITS_NODE_UI_AVAILABLE": settings.has_nodemanager,
         "LNBITS_QR_LOGO": settings.lnbits_qr_logo,
+        "LNBITS_APPLE_TOUCH_ICON": settings.lnbits_apple_touch_icon,
         "LNBITS_SERVICE_FEE": settings.lnbits_service_fee,
         "LNBITS_SERVICE_FEE_MAX": settings.lnbits_service_fee_max,
         "LNBITS_SERVICE_FEE_WALLET": settings.lnbits_service_fee_wallet,

lnbits/settings.py

@@ -270,6 +270,7 @@ class ThemesSettings(LNbitsSettings):
     lnbits_allowed_currencies: list[str] = Field(default=[])
     lnbits_default_accounting_currency: str | None = Field(default=None)
     lnbits_qr_logo: str = Field(default="/static/images/favicon_qr_logo.png")
+    lnbits_apple_touch_icon: str | None = Field(default=None)
     lnbits_default_reaction: str = Field(default="confettiBothSides")
     lnbits_default_theme: str = Field(default="salvador")
     lnbits_default_border: str = Field(default="hard-border")

lnbits/static/i18n/en.js

@@ -643,6 +643,8 @@ window.localisation.en = {
   denomination_error: 'Denomination must be 3 characters, or `sats`',
   ui_qr_code_logo: 'QR Code/Favicon Logo',
   ui_qr_code_logo_hint: 'QR code and favicon logo url',
+  ui_apple_touch_icon: 'Apple Touch Icon',
+  ui_apple_touch_icon_hint: 'Apple touch icon url',
   ui_custom_image: 'Custom Image',
   ui_custom_image_label: 'URL to custom image',
   ui_custom_image_hint: 'Image showed at homepage/login',

lnbits/templates/base.html

@@ -25,6 +25,10 @@
     />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link
+      rel="apple-touch-icon"
+      href="{{ LNBITS_APPLE_TOUCH_ICON if LNBITS_APPLE_TOUCH_ICON else static_url_for('static', 'images/maskable_icon.png') }}"
+    />
     {% if web_manifest %}
     <link async="async" rel="manifest" href="{{ web_manifest }}" />
     {% endif %} {% block head_scripts %}{% endblock %}

lnbits/templates/components/admin/site_customisation.vue

@@ -75,6 +75,16 @@
             :hint="$t('ui_qr_code_logo_hint')"
           ></q-input>
         </div>
+        <div class="col-12 col-md-4">
+          <p><span v-text="$t('ui_apple_touch_icon')"></span></p>
+          <q-input
+            filled
+            type="text"
+            v-model="formData.lnbits_apple_touch_icon"
+            label="https://example.com/image.png"
+            :hint="$t('ui_apple_touch_icon_hint')"
+          ></q-input>
+        </div>
       </div>
       <div class="row q-col-gutter-md q-mt-md">
         <div class="col-12 col-md-6">