Add pagination to CarPlay Areas and Actions tabs

Sources/Vehicle/Templates/Actions/CarPlayActionsTemplate.swift

@@ -8,6 +8,11 @@
     private var actions: Results<Action>?
     private let viewModel: CarPlayActionsViewModel
 
+    private let paginatedList = CarPlayPaginatedListTemplate(
+        title: L10n.CarPlay.Navigation.Tab.actions,
+        items: [],
+        isInsideTabBar: true
+    )
     var template: CPListTemplate
 
     weak var interfaceController: CPInterfaceController?
@@ -17,7 +22,7 @@
             text: L10n.CarPlay.Action.Intro.Item.title,
             detailText: L10n.CarPlay.Action.Intro.Item.body,
             image: MaterialDesignIcons.homeLightningBoltIcon
-                .carPlayIcon(carUserInterfaceStyle: interfaceController?.carTraitCollection.userInterfaceStyle)
+                .carPlayIcon()
         )
         item.handler = { [weak self] _, completion in
             self?.viewModel.sendIntroNotification()
@@ -29,7 +34,8 @@
 
     init(viewModel: CarPlayActionsViewModel) {
         self.viewModel = viewModel
-        self.template = CPListTemplate(title: L10n.CarPlay.Navigation.Tab.actions, sections: [])
+
+        self.template = paginatedList.template
         template.tabTitle = L10n.CarPlay.Navigation.Tab.actions
         template.tabImage = MaterialDesignIcons.lightningBoltIcon.carPlayIcon()
         template.tabSystemItem = .more
@@ -60,17 +66,17 @@
             presentIntroductionItem()
             return
         }
-        template.updateSections([section(actions: actions)])
+        paginatedList.updateItems(items: listItems(actions: actions))
     }
 
     private func presentIntroductionItem() {
         template.updateSections([.init(items: [introduceActionsListItem])])
     }
 
-    private func section(actions: Results<Action>) -> CPListSection {
+    private func listItems(actions: Results<Action>) -> [CPListItem] {
         let items: [CPListItem] = actions.map { action in
             let materialDesignIcon = MaterialDesignIcons(named: action.IconName)
-                .carPlayIcon(carUserInterfaceStyle: interfaceController?.carTraitCollection.userInterfaceStyle)
+                .carPlayIcon()
             let item = CPListItem(
                 text: action.Name,
                 detailText: action.Text,
@@ -84,7 +90,7 @@
             return item
         }
 
-        return CPListSection(items: items)
+        return items
     }
 
     // Present a checkmark or cross depending on success or failure

Sources/Vehicle/Templates/Areas/CarPlayAreasViewModel.swift

@@ -150,7 +150,7 @@
             return item
         }
 
-        templateProvider?.template.updateSections([.init(items: items)])
+        templateProvider?.paginatedList.updateItems(items: items)
     }
 
     private func listItemHandler(area: HAAreaResponse, entityIdsForAreaId: [String], server: Server) {

Sources/Vehicle/Templates/Areas/CarPlayAreasZonesTemplate.swift

@@ -7,12 +7,18 @@
 final class CarPlayAreasZonesTemplate: CarPlayTemplateProvider {
     private var childTemplateProvider: (any CarPlayTemplateProvider)?
     private let viewModel: CarPlayAreasViewModel
+
+    let paginatedList = CarPlayPaginatedListTemplate(
+        title: L10n.CarPlay.Navigation.Tab.areas,
+        items: [],
+        isInsideTabBar: true
+    )
     var template: CPListTemplate
     weak var interfaceController: CPInterfaceController?
 
     init(viewModel: CarPlayAreasViewModel) {
         self.viewModel = viewModel
-        self.template = CPListTemplate(title: "", sections: [])
+        self.template = paginatedList.template
         template.tabImage = MaterialDesignIcons.sofaIcon.carPlayIcon()
         template.tabTitle = L10n.CarPlay.Navigation.Tab.areas
 

Sources/Vehicle/Templates/CarPlayPaginatedListTemplate.swift

@@ -11,13 +11,14 @@
     private var items: [CPListItem]
     private var currentPage: Int
     private let title: String
+    private let isInsideTabBar: Bool
 
-    private let itemsPerPage: Int = CPListTemplate.maximumItemCount
     private(set) var template: CPListTemplate
 
-    init(title: String, items: [CPListItem]) {
+    init(title: String, items: [CPListItem], isInsideTabBar: Bool = false) {
         self.title = title
         self.items = items
+        self.isInsideTabBar = isInsideTabBar
         self.currentPage = 0
         self.template = CPListTemplate(title: title, sections: [])
     }
@@ -29,17 +30,44 @@
 
     func updateTemplate() {
         let totalItems = items.count
+        var itemsPerPage = CPListTemplate.maximumItemCount
+
+        if isInsideTabBar, items.count > itemsPerPage {
+            itemsPerPage = CPListTemplate.maximumItemCount - 2
+        }
+
         let startIndex = currentPage * itemsPerPage
         let endIndex = min(startIndex + itemsPerPage, totalItems)
-        let pageItems = Array(items[startIndex ..< endIndex])
+        var pageItems = Array(items[startIndex ..< endIndex])
 
+        if isInsideTabBar {
+            if currentPage > 0 {
+                let previousItem = CPListItem(text: nil, detailText: nil)
+                previousItem.setImage(MaterialDesignIcons.arrowLeftIcon.carPlayIcon())
+                previousItem.handler = { [weak self] _, completion in
+                    self?.changePage(to: .previous)
+                    completion()
+                }
+                pageItems.insert(previousItem, at: 0)
+            }
+            if endIndex < totalItems {
+                let nextItem = CPListItem(text: nil, detailText: nil)
+                nextItem.setImage(MaterialDesignIcons.arrowRightIcon.carPlayIcon())
+                nextItem.handler = { [weak self] _, completion in
+                    self?.changePage(to: .next)
+                    completion()
+                }
+                pageItems.insert(nextItem, at: pageItems.endIndex)
+            }
+        } else {
+            template.trailingNavigationBarButtons = getPageButtons(
+                endIndex: endIndex,
+                currentPage: currentPage,
+                totalCount: totalItems
+            )
+        }
         let section = CPListSection(items: pageItems)
         template.updateSections([section])
-        template.trailingNavigationBarButtons = getPageButtons(
-            endIndex: endIndex,
-            currentPage: currentPage,
-            totalCount: totalItems
-        )
     }
 
     private func getPageButtons(endIndex: Int, currentPage: Int, totalCount: Int) -> [CPBarButton] {

Sources/Vehicle/Templates/Domains/CarPlayDomainsListTemplate.swift

@@ -36,8 +36,8 @@
                 text: itemTitle,
                 detailText: nil,
                 image: domain == .cover ? overrideCoverIcon
-                    .carPlayIcon(carUserInterfaceStyle: userInterfaceStyle) : domain.icon
-                    .carPlayIcon(carUserInterfaceStyle: userInterfaceStyle)
+                    .carPlayIcon() : domain.icon
+                    .carPlayIcon()
             )
             listItem.accessoryType = CPListItemAccessoryType.disclosureIndicator
             listItem.handler = { [weak self] _, completion in

Sources/Vehicle/Templates/Entities/CarPlayEntityListItem.swift

@@ -8,10 +8,6 @@
     var template: CPListItem
     weak var interfaceController: CPInterfaceController?
 
-    private var userInterfaceStyle: UIUserInterfaceStyle? {
-        interfaceController?.carTraitCollection.userInterfaceStyle
-    }
-
     init(entity: HAEntity) {
         self.template = CPListItem(text: nil, detailText: nil)
         self.entity = entity
@@ -24,8 +20,8 @@
         template.setDetailText(entity.localizedState)
         template
             .setImage(
-                entity.getIcon(carUserInterfaceStyle: userInterfaceStyle) ?? MaterialDesignIcons.bookmarkIcon
-                    .carPlayIcon(carUserInterfaceStyle: userInterfaceStyle)
+                entity.getIcon() ?? MaterialDesignIcons.bookmarkIcon
+                    .carPlayIcon()
             )
     }
 }

Sources/Vehicle/Templates/HAEntity+CarPlay.swift

@@ -70,7 +70,7 @@
         }
     }
 
-    func getIcon(carUserInterfaceStyle: UIUserInterfaceStyle?) -> UIImage? {
+    func getIcon() -> UIImage? {
         var image = MaterialDesignIcons.bookmarkIcon
         var tint: UIColor?
 
@@ -102,13 +102,15 @@
 
         if let state = Domain.State(rawValue: state) {
             if [.on, .open, .opening, .unlocked, .unlocking].contains(state) {
-                tint = Constants.tintColor
+                tint = Constants.lighterTintColor
             } else if [.unavailable, .unknown].contains(state) {
                 tint = .gray
+            } else {
+                tint = .lightGray
             }
         }
 
-        return image.carPlayIcon(color: tint, carUserInterfaceStyle: carUserInterfaceStyle)
+        return image.carPlayIcon(color: tint)
     }
 
     private func getInputBooleanIcon() -> MaterialDesignIcons {

Sources/Vehicle/Templates/MaterialDesignIcons+CarPlay.swift

@@ -4,14 +4,8 @@
 import UIKit
 
 extension MaterialDesignIcons {
-    func carPlayIcon(color: UIColor? = nil, carUserInterfaceStyle: UIUserInterfaceStyle? = nil) -> UIImage {
-        let color: UIColor = color ?? {
-            if let carUserInterfaceStyle, carUserInterfaceStyle == .light {
-                .black
-            } else {
-                .white
-            }
-        }()
+    func carPlayIcon(color: UIColor? = nil) -> UIImage {
+        let color = color ?? Constants.lighterTintColor
         return image(ofSize: CPListItem.maximumImageSize, color: color)
     }
 }