fix: optimize offline

package.json

@@ -65,6 +65,7 @@
     "@types/leaflet.markercluster": "^1.5.4",
     "babel-loader": "^9.1.3",
     "glob": "^9.3.4",
+    "stencil-inline-svg": "^1.1.0",
     "typescript": "^5.4.2",
     "vitepress": "^1.0.0-rc.45"
   },

src/components/grw-app/grw-app.tsx

@@ -1,7 +1,9 @@
+import { Capacitor } from '@capacitor/core';
 import { Component, Host, h, Listen, State, Prop, Element, Watch, Event, EventEmitter, Fragment } from '@stencil/core';
 import { translate } from 'i18n/i18n';
 import state, { reset } from 'store/store';
-import { handleTreksFiltersAndSearch } from 'utils/utils';
+import { handleTreksFiltersAndSearch, imagesRegExp, revokeObjectURL } from 'utils/utils';
+import ArrowBackIcon from '../../assets/arrow-back.svg';
 
 @Component({
   tag: 'grw-app',
@@ -279,6 +281,13 @@ export class GrwApp {
 
   handleBackButton() {
     if (window.history.state && window.history.state.isInitialHistoryWithDetails) {
+      if (state.currentTrek.offline && !Capacitor.isNativePlatform()) {
+        revokeObjectURL(state.currentPois, imagesRegExp, ['url']);
+        revokeObjectURL(state.trekTouristicEvents, imagesRegExp, ['url']);
+        revokeObjectURL(state.trekTouristicContents, imagesRegExp, ['url']);
+        revokeObjectURL(state.currentInformationDesks, imagesRegExp);
+        revokeObjectURL(state.currentTrek, imagesRegExp, ['url']);
+      }
       this.onDetailsClose();
       const url = new URL(window.location.toString());
       url.searchParams.delete('trek');
@@ -561,10 +570,7 @@ export class GrwApp {
               ) : (
                 <div class="grw-arrow-back-container">
                   <button onClick={() => this.handleBackButton()} class="grw-arrow-back-icon">
-                    {/* @ts-ignore */}
-                    <span translate={false} part="icon" class="material-symbols material-symbols-outlined icon">
-                      arrow_back
-                    </span>
+                    <span part="icon" class="icon" innerHTML={ArrowBackIcon}></span>
                   </button>
                 </div>
               )}

src/components/grw-common-button/grw-common-button.scss

@@ -1,11 +1,3 @@
-.material-symbols {
-  font-family: 'Material Symbols Outlined';
-}
-
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
-}
-
 .common-button {
   user-select: none;
   cursor: pointer;

src/components/grw-common-button/grw-common-button.tsx

@@ -1,4 +1,6 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import RefreshIcon from '../../assets/refresh.svg';
+import FilterListIcon from '../../assets/filter_list.svg';
 
 @Component({
   tag: 'grw-common-button',
@@ -20,10 +22,7 @@ export class GrwCommonButton {
         }}
       >
         <button part="common-button" class="common-button" onClick={() => this.action()}>
-          {/* @ts-ignore */}
-          <span part="common-button-icon" class="material-symbols material-symbols-outlined icon" translate={false}>
-            {this.icon}
-          </span>
+          <span part="common-button-icon" class="icon" innerHTML={this.icon === 'refresh' ? RefreshIcon : FilterListIcon}></span>
           <span part="common-button-label" class="label">
             {this.name}
           </span>

src/components/grw-extended-fab/grw-extended-fab.scss

@@ -1,11 +1,3 @@
-.material-symbols {
-  font-family: 'Material Symbols Outlined';
-}
-
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
-}
-
 .map-visibility-button {
   cursor: pointer;
   user-select: none;
@@ -28,7 +20,7 @@
     box-shadow: var(--elevation-4);
   }
   .icon {
-    font-size: 24px;
+    display: flex;
     margin-right: 8px;
     color: var(--fab-color);
   }

src/components/grw-extended-fab/grw-extended-fab.tsx

@@ -1,4 +1,7 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import SummarizeIcon from '../../assets/summarize.svg';
+import MapIcon from '../../assets/map.svg';
+import ListIcon from '../../assets/list.svg';
 
 @Component({
   tag: 'grw-extended-fab',
@@ -14,17 +17,15 @@ export class GrwExtendedFab {
   @Prop() fontFamily = 'Roboto';
 
   render() {
+    const icon = this.icon();
     return (
       <Host
         style={{
           '--font-family': this.fontFamily,
         }}
       >
         <button part="map-visibility-button" class="map-visibility-button" onClick={() => this.action()} style={{ display: this.display }}>
-          {/* @ts-ignore */}
-          <span part="map-visibility-button-icon" class="material-symbols material-symbols-outlined icon" translate={false}>
-            {this.icon()}
-          </span>
+          <span part="map-visibility-button-icon" class="icon" innerHTML={icon === 'Summarize' ? SummarizeIcon : icon === 'map' ? MapIcon : ListIcon}></span>
           <span part="map-visibility-button-label" class="label">
             {this.name()}
           </span>

src/components/grw-filter/grw-filter.scss

@@ -1,14 +1,6 @@
 @import '~choices.js/public/assets/styles/base.min.css';
 @import '~choices.js/public/assets/styles/choices.min.css';
 
-.material-symbols {
-  font-family: 'Material Symbols Outlined';
-}
-
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
-}
-
 .filter-name {
   margin-left: 8px;
   color: var(--color-on-surface);
@@ -107,7 +99,7 @@
     color: var(--color-on-secondary-container);
     background-color: var(--color-secondary-container);
     .icon {
-      font-size: 24px;
+      display: flex;
       margin-right: 8px;
       color: var(--color-on-secondary-container);
     }

src/components/grw-filter/grw-filter.tsx

@@ -9,6 +9,7 @@ import {
   handleTouristicEventsFiltersAndSearch,
 } from 'utils/utils';
 import 'choices.js/public/assets/scripts/choices.min.js';
+import CheckIcon from '../../assets/check.svg';
 
 @Component({
   tag: 'grw-filter',
@@ -128,20 +129,22 @@ export class GrwFilter {
           '--font-family': this.fontFamily,
         }}
       >
-        <div part="filter-name" class="filter-name display-large">{this.filterName}</div>
+        <div part="filter-name" class="filter-name display-large">
+          {this.filterName}
+        </div>
         <div part="filter-button-container" class="filter-button-container">
           {state[this.filterType].length > 9 ? (
             <select part="filter-select" multiple ref={el => (this.choicesRef = el)}></select>
           ) : (
             state[this.filterType]
               .filter(currentFilter => !currentFilter.hasOwnProperty('filter') || (currentFilter.hasOwnProperty('filter') && currentFilter.filter))
               .map(currentFilter => (
-                <button part="filter-button" class={currentFilter.selected ? 'filter-button selected-filter-button' : 'filter-button'} onClick={event => this.handleFilter(event, currentFilter)}>
-                  {/* @ts-ignore */}
-                  {currentFilter.selected && (<span  part="selected-filter-icon"  class="material-symbols material-symbols-outlined icon" translate={false}>
-                      check
-                    </span>
-                  )}
+                <button
+                  part="filter-button"
+                  class={currentFilter.selected ? 'filter-button selected-filter-button' : 'filter-button'}
+                  onClick={event => this.handleFilter(event, currentFilter)}
+                >
+                  {currentFilter.selected && <span part="selected-filter-icon" class="icon" innerHTML={CheckIcon}></span>}
                   <span part="filter-label" class="filter-label">
                     {currentFilter[this.filterNameProperty]}
                   </span>

src/components/grw-information-desk/grw-information-desk.scss

@@ -1,11 +1,3 @@
-.material-symbols {
-  font-family: 'Material Symbols Outlined';
-}
-
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
-}
-
 :host {
   display: flex;
   flex-direction: column;
@@ -66,6 +58,7 @@
   display: flex;
   align-items: center;
   .icon {
+    display: flex;
     font-size: 16px;
     margin-right: 8px;
   }
@@ -95,6 +88,6 @@
     box-shadow: var(--elevation-2);
   }
   .icon {
-    font-size: 18px;
+    display: flex;
   }
 }