[UX] Add offline support filter

public/locales/en/translation.json

@@ -263,6 +263,7 @@
         "show_favourites_only": "Show Favourites only",
         "show_hidden": "Show Hidden",
         "show_installed_only": "Show Installed only",
+        "show_support_offline_only": "Show offline-supported only",
         "uncategorized": "Uncategorized"
     },
     "help": {

src/frontend/components/UI/LibraryFilters/index.tsx

@@ -28,7 +28,9 @@ export default function LibraryFilters() {
     storesFilters,
     setStoresFilters,
     platformsFilters,
-    setPlatformsFilters
+    setPlatformsFilters,
+    showSupportOfflineOnly,
+    setShowSupportOfflineOnly
   } = useContext(LibraryContext)
 
   const toggleShowHidden = () => {
@@ -47,6 +49,10 @@ export default function LibraryFilters() {
     setShowInstalledOnly(!showInstalledOnly)
   }
 
+  const toggleOnlySupportOffline = () => {
+    setShowSupportOfflineOnly(!showSupportOfflineOnly)
+  }
+
   const toggleStoreFilter = (store: Category) => {
     const currentValue = storesFilters[store]
     const newFilters = { ...storesFilters, [store]: !currentValue }
@@ -193,6 +199,16 @@ export default function LibraryFilters() {
           value={showInstalledOnly}
           title={t('header.show_installed_only', 'Show Installed only')}
         />
+        <ToggleSwitch
+          key="only-support-offline"
+          htmlId="only-support-offline"
+          handleChange={() => toggleOnlySupportOffline()}
+          value={showSupportOfflineOnly}
+          title={t(
+            'header.show_support_offline_only',
+            'Show offline-supported only'
+          )}
+        />
         <hr />
         <button
           type="reset"

src/frontend/screens/Library/LibraryContext.tsx

@@ -22,7 +22,9 @@ const initialContext: LibraryContextType = {
   sortDescending: true,
   setSortDescending: () => null,
   sortInstalled: true,
-  setSortInstalled: () => null
+  setSortInstalled: () => null,
+  showSupportOfflineOnly: false,
+  setShowSupportOfflineOnly: () => null
 }
 
 export default React.createContext(initialContext)

src/frontend/screens/Library/index.tsx

@@ -156,6 +156,14 @@ export default React.memo(function Library(): JSX.Element {
     setShowNonAvailable(value)
   }
 
+  const [showSupportOfflineOnly, setSupportOfflineOnly] = useState(
+    JSON.parse(storage.getItem('show_support_offline_only') || 'false')
+  )
+  const handleShowSupportOfflineOnly = (value: boolean) => {
+    storage.setItem('show_support_offline_only', JSON.stringify(value))
+    setSupportOfflineOnly(value)
+  }
+
   const [showModal, setShowModal] = useState<ModalState>({
     game: '',
     show: false,
@@ -399,6 +407,10 @@ export default React.memo(function Library(): JSX.Element {
         )
       }
 
+      if (showSupportOfflineOnly) {
+        library = library.filter((game) => game.canRunOffline)
+      }
+
       if (!showNonAvailable) {
         const nonAvailbleGames = storage.getItem('nonAvailableGames') || '[]'
         const nonAvailbleGamesArray = JSON.parse(nonAvailbleGames)
@@ -486,7 +498,8 @@ export default React.memo(function Library(): JSX.Element {
     hiddenGames,
     showFavouritesLibrary,
     showInstalledOnly,
-    showNonAvailable
+    showNonAvailable,
+    showSupportOfflineOnly
   ])
 
   // we need this to do proper `position: sticky` of the Add Game area
@@ -556,6 +569,8 @@ export default React.memo(function Library(): JSX.Element {
         setShowNonAvailable: handleShowNonAvailable,
         setSortDescending: handleSortDescending,
         setSortInstalled: handleSortInstalled,
+        showSupportOfflineOnly,
+        setShowSupportOfflineOnly: handleShowSupportOfflineOnly,
         sortDescending,
         sortInstalled
       }}

src/frontend/types.ts

@@ -219,7 +219,9 @@ export interface LibraryContextType {
   sortDescending: boolean
   setSortDescending: (value: boolean) => void
   sortInstalled: boolean
-  setSortInstalled: (valur: boolean) => void
+  setSortInstalled: (value: boolean) => void
+  showSupportOfflineOnly: boolean
+  setShowSupportOfflineOnly: (value: boolean) => void
 }
 
 export interface GameContextType {