Show information for non-text files in the status bar (#1713)

* properly name `utilityAreaViewModel` across the project

* add article docs for `CodeEdit/UtilityAreaView`

* update article docs for `CodeEdit/StatusBarView`

* properly name items in `CodeEdit/Features/UtilityArea/Toolbar`

* remove UtilityAreaViewModel properties from status bar implementation

* remove unused properties in `UtilityAreaViewModel`

* delete `CursorLocation` model

* rename `StatusBarCursorLocationLabel` to `StatusBarCursorPositionLabel`

* add `StatusBarViewModel`

* show non-text file info in the status bar

* fix unpredictable image dimensions in status bar

* add UpdateStatusBarInfo view modifier to clean up implementation

* move the `NonTextFileView.onDisappear` modifier to inside the view

* change `StatusBarViewModel.dimensions` from tuple to struct

* refactor `StatusBarFileInfoView`

* fix SwiftLint violation

* minor doc change in `UpdateStatusBarInfo`

* remove unused editor variable in `UpdateStatusBarInfo`

* refactor

- stylistic changes
- docs change
- properly name `UtilityAreaSplitTerminalButton`
- remove unused `isBreakpointEnabled` in `StatusBarBreakpointButton`

* Update CodeEdit/Features/StatusBar/Views/StatusBarItems/StatusBarFileInfoView.swift

* properly resolve merge conflict

I used the GitHub UI, it didn't come out how I expected

---------

Co-authored-by: Austin Condiff <austin.condiff@gmail.com>

Author: plbstl

CodeEdit.xcodeproj/project.pbxproj

@@ -89,6 +89,7 @@ final class CodeEditWindowController: NSWindowController, NSToolbarDelegate, Obs
                 WorkspaceView()
                     .environmentObject(workspace)
                     .environmentObject(workspace.editorManager)
+                    .environmentObject(workspace.statusBarViewModel)
                     .environmentObject(workspace.utilityAreaModel)
             }
         }

CodeEdit/Features/Documents/Controllers/CodeEditWindowController.swift

@@ -30,6 +30,7 @@ final class WorkspaceDocument: NSDocument, ObservableObject, NSToolbarDelegate {
         }
     }
 
+    var statusBarViewModel = StatusBarViewModel()
     var utilityAreaModel = UtilityAreaViewModel()
     var searchState: SearchState?
     var quickOpenViewModel: QuickOpenViewModel?

CodeEdit/Features/Documents/WorkspaceDocument.swift

@@ -13,7 +13,6 @@ import SwiftUI
 struct EditorAreaFileView: View {
 
     @EnvironmentObject private var editorManager: EditorManager
-
     @EnvironmentObject private var editor: Editor
 
     @Environment(\.edgeInsets)

CodeEdit/Features/Editor/Views/EditorAreaFileView.swift

@@ -41,6 +41,7 @@ struct ImageFileView: View {
                             maxWidth: min(pixelWidth, proxy.size.width, nsImage.size.width),
                             maxHeight: min(pixelHeight, proxy.size.height, nsImage.size.height)
                         )
+
                 }
                 .frame(width: proxy.size.width, height: proxy.size.height)
             }

CodeEdit/Features/Editor/Views/ImageFileView.swift

@@ -17,26 +17,38 @@ struct NonTextFileView: View {
     /// The file document you wish to open.
     let fileDocument: CodeFileDocument
 
+    @EnvironmentObject private var editorManager: EditorManager
+    @EnvironmentObject private var statusBarViewModel: StatusBarViewModel
+
     var body: some View {
 
-        if let fileURL = fileDocument.fileURL {
+        Group {
+            if let fileURL = fileDocument.fileURL {
 
-            switch fileDocument.utType {
-            case .some(.image):
-                ImageFileView(fileURL)
+                switch fileDocument.utType {
+                case .some(.image):
+                    ImageFileView(fileURL)
+                        .modifier(UpdateStatusBarInfo(withURL: fileURL))
 
-            case .some(.pdf):
-                PDFFileView(fileURL)
+                case .some(.pdf):
+                    PDFFileView(fileURL)
+                        .modifier(UpdateStatusBarInfo(withURL: fileURL))
 
-            default:
-                AnyFileView(fileURL)
-            }
+                default:
+                    AnyFileView(fileURL)
+                        .modifier(UpdateStatusBarInfo(withURL: fileURL))
+                }
 
-        } else {
-            ZStack {
-                Text("Cannot retrieve URL to the file you opened.")
+            } else {
+                ZStack {
+                    Text("Cannot retrieve URL to the file you opened.")
+                }
             }
         }
+        .onDisappear {
+            statusBarViewModel.dimensions = nil
+            statusBarViewModel.fileSize = nil
+        }
 
     }
 }

CodeEdit/Features/Editor/Views/NonTextFileView.swift

@@ -0,0 +1,14 @@
+//
+//  ImageDimensions.swift
+//  CodeEdit
+//
+//  Created by Paul Ebose on 2024/5/13.
+//
+
+import Foundation
+
+/// Helper struct used to store the (width x height) of the currently opened image.
+struct ImageDimensions {
+    var width: Int
+    var height: Int
+}

CodeEdit/Features/StatusBar/Models/CursorLocation.swift

@@ -0,0 +1,27 @@
+//
+//  StatusBarViewModel.swift
+//  CodeEdit
+//
+//  Created by Paul Ebose on 2024/5/12.
+//
+
+import SwiftUI
+
+final class StatusBarViewModel: ObservableObject {
+
+    /// The file size of the currently opened file.
+    @Published var fileSize: Int?
+
+    /// The dimensions (width x height) of the currently opened image.
+    @Published var dimensions: ImageDimensions?
+
+    /// Indicates whether the breakpoint is enabled or not.
+    @Published var isBreakpointEnabled = true
+
+    /// The font style of items shown in the status bar.
+    private(set) var statusBarFont = Font.system(size: 11, weight: .medium)
+
+    /// The color of the text shown in the status bar.
+    private(set) var foregroundStyle = Color.secondary
+
+}

CodeEdit/Features/StatusBar/Models/ImageDimensions.swift

@@ -0,0 +1,63 @@
+//
+//  UpdateStatusBarInfo.swift
+//  CodeEdit
+//
+//  Created by Paul Ebose on 2024/5/12.
+//
+
+import SwiftUI
+
+/// Updates ``StatusBarFileInfoView``'s `fileSize` and `dimensions`.
+/// ```swift
+/// FileView
+///   .modifier(UpdateStatusBarInfo(withURL))
+/// ```
+struct UpdateStatusBarInfo: ViewModifier {
+
+    /// The URL of the file to compute information from.
+    let withURL: URL
+
+    @EnvironmentObject private var editorManager: EditorManager
+    @EnvironmentObject private var statusBarViewModel: StatusBarViewModel
+
+    /// This is returned by ``UpdateStatusBarInfo`` `.computeStatusBarInfo`.
+    private struct ComputedStatusBarInfo {
+        let fileSize: Int
+        let dimensions: ImageDimensions?
+    }
+
+    /// Compute information that can be used to update properties in ``StatusBarFileInfoView``.
+    /// - Parameter url: URL of the file to compute information from.
+    /// - Returns: The file size and its image dimensions (if any).
+    private func computeStatusBarInfo(url: URL) -> ComputedStatusBarInfo? {
+        guard let resourceValues = try? url.resourceValues(forKeys: [.contentTypeKey, .fileSizeKey]),
+              let contentType = resourceValues.contentType,
+              let fileSize = resourceValues.fileSize
+        else {
+            return nil
+        }
+
+        if contentType.conforms(to: .image), let imageReps = NSImage(contentsOf: url)?.representations.first {
+            let dimensions = ImageDimensions(width: imageReps.pixelsWide, height: imageReps.pixelsHigh)
+            return ComputedStatusBarInfo(fileSize: fileSize, dimensions: dimensions)
+        } else { // non-image file
+            return ComputedStatusBarInfo(fileSize: fileSize, dimensions: nil)
+        }
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .onAppear {
+                let statusBarInfo = computeStatusBarInfo(url: withURL)
+                statusBarViewModel.fileSize = statusBarInfo?.fileSize
+                statusBarViewModel.dimensions = statusBarInfo?.dimensions
+            }
+            .onChange(of: editorManager.activeEditor.selectedTab) { newTab in
+                guard let newTab else { return }
+                let statusBarInfo = computeStatusBarInfo(url: newTab.file.url)
+                statusBarViewModel.fileSize = statusBarInfo?.fileSize
+                statusBarViewModel.dimensions = statusBarInfo?.dimensions
+            }
+    }
+
+}

CodeEdit/Features/StatusBar/ViewModels/StatusBarViewModel.swift

@@ -1,6 +1,6 @@
 //
 //  StatusBarBreakpointButton.swift
-//  CodeEditModules/StatusBar
+//  CodeEdit
 //
 //  Created by Stef Kors on 14/04/2022.
 //
@@ -9,13 +9,13 @@ import SwiftUI
 import CodeEditSymbols
 
 struct StatusBarBreakpointButton: View {
-    @EnvironmentObject private var model: UtilityAreaViewModel
+    @EnvironmentObject private var statusBarViewModel: StatusBarViewModel
 
     var body: some View {
         Button {
-            model.isBreakpointEnabled.toggle()
+            statusBarViewModel.isBreakpointEnabled.toggle()
         } label: {
-            if model.isBreakpointEnabled {
+            if statusBarViewModel.isBreakpointEnabled {
                 Image.breakpointFill
                     .foregroundColor(.accentColor)
             } else {

CodeEdit/Features/StatusBar/ViewModifiers/UpdateStatusBarInfo.swift

@@ -1,20 +1,21 @@
 //
-//  StatusBarCursorLocationLabel.swift
-//  CodeEditModules/StatusBar
+//  StatusBarCursorPositionLabel.swift
+//  CodeEdit
 //
 //  Created by Lukas Pistrol on 22.03.22.
 //
 
 import SwiftUI
 import CodeEditSourceEditor
 
-struct StatusBarCursorLocationLabel: View {
+struct StatusBarCursorPositionLabel: View {
     @Environment(\.controlActiveState)
     private var controlActive
     @Environment(\.modifierKeys)
     private var modifierKeys
 
-    @EnvironmentObject private var model: UtilityAreaViewModel
+    @EnvironmentObject private var statusBarViewModel: StatusBarViewModel
+    @EnvironmentObject private var utilityAreaViewModel: UtilityAreaViewModel
     @EnvironmentObject private var editorManager: EditorManager
 
     @State private var tab: EditorInstance?
@@ -87,7 +88,7 @@ struct StatusBarCursorLocationLabel: View {
                 EmptyView()
             }
         }
-        .font(model.toolbarFont)
+        .font(statusBarViewModel.statusBarFont)
         .foregroundColor(foregroundColor)
         .fixedSize()
         .lineLimit(1)

CodeEdit/Features/StatusBar/Views/StatusBarItems/StatusBarBreakpointButton.swift

@@ -0,0 +1,39 @@
+//
+//  StatusBarFileInfoView.swift
+//  CodeEdit
+//
+//  Created by Paul Ebose on 2024/5/12.
+//
+
+import SwiftUI
+
+/// Shows media information about the currently opened file.
+///
+/// This currently shows the file size and image dimensions, if available.
+struct StatusBarFileInfoView: View {
+
+    @EnvironmentObject private var statusBarViewModel: StatusBarViewModel
+
+    private let dimensionsNumberStyle = IntegerFormatStyle<Int>(locale: Locale(identifier: "en_US")).grouping(.never)
+
+    var body: some View {
+
+        HStack(spacing: 15) {
+
+            if let dimensions = statusBarViewModel.dimensions {
+                let width = dimensionsNumberStyle.format(dimensions.width)
+                let height = dimensionsNumberStyle.format(dimensions.height)
+
+                Text("\(width) × \(height)")
+            }
+
+            if let fileSize = statusBarViewModel.fileSize {
+                Text(fileSize.formatted(.byteCount(style: .memory)))
+            }
+
+        }
+        .font(statusBarViewModel.statusBarFont)
+        .foregroundStyle(statusBarViewModel.foregroundStyle)
+    }
+
+}

CodeEdit/Features/StatusBar/Views/StatusBarItems/StatusBarCursorLocationLabel.swift renamed to CodeEdit/Features/StatusBar/Views/StatusBarItems/StatusBarCursorPositionLabel.swift

@@ -1,6 +1,6 @@
 //
 //  StatusBarToggleUtilityAreaButton.swift
-//  CodeEditModules/StatusBar
+//  CodeEdit
 //
 //  Created by Lukas Pistrol on 22.03.22.
 //
@@ -11,25 +11,25 @@ internal struct StatusBarToggleUtilityAreaButton: View {
     @Environment(\.controlActiveState)
     var controlActiveState
 
-    @EnvironmentObject private var model: UtilityAreaViewModel
+    @EnvironmentObject private var utilityAreaViewModel: UtilityAreaViewModel
 
     internal var body: some View {
         Button {
-            model.togglePanel()
+            utilityAreaViewModel.togglePanel()
         } label: {
             Image(systemName: "square.bottomthird.inset.filled")
         }
         .buttonStyle(.icon)
         .keyboardShortcut("Y", modifiers: [.command, .shift])
-        .help(model.isCollapsed ? "Show the Utility area" : "Hide the Utility area")
+        .help(utilityAreaViewModel.isCollapsed ? "Show the Utility area" : "Hide the Utility area")
         .onHover { isHovering($0) }
         .onChange(of: controlActiveState) { newValue in
             if newValue == .key {
                 CommandManager.shared.addCommand(
                     name: "Toggle Utility Area",
                     title: "Toggle Utility Area",
                     id: "open.drawer",
-                    command: CommandClosureWrapper.init(closure: model.togglePanel)
+                    command: CommandClosureWrapper.init(closure: utilityAreaViewModel.togglePanel)
                 )
             }
         }
@@ -38,7 +38,7 @@ internal struct StatusBarToggleUtilityAreaButton: View {
                 name: "Toggle Utility Area",
                 title: "Toggle Utility Area",
                 id: "open.drawer",
-                command: CommandClosureWrapper.init(closure: model.togglePanel)
+                command: CommandClosureWrapper.init(closure: utilityAreaViewModel.togglePanel)
             )
         }
     }

CodeEdit/Features/StatusBar/Views/StatusBarItems/StatusBarFileInfoView.swift

@@ -1,6 +1,6 @@
 //
 //  StatusBarView.swift
-//  CodeEditModules/StatusBar
+//  CodeEdit
 //
 //  Created by Lukas Pistrol on 19.03.22.
 //
@@ -11,7 +11,9 @@ import SwiftUI
 ///
 /// A View that lives on the bottom of the window and offers information
 /// about compilation errors/warnings, git,  cursor position in text,
-/// indentation width (in spaces), text encoding and linebreak
+/// indentation width (in spaces), text encoding and linebreak.
+///
+/// Also information about the file size and dimensions, if available.
 ///
 /// Additionally it offers a togglable/resizable drawer which can
 /// host a terminal or additional debug information
@@ -20,8 +22,6 @@ struct StatusBarView: View {
     @Environment(\.controlActiveState)
     private var controlActive
 
-    @EnvironmentObject private var model: UtilityAreaViewModel
-
     static let height = 28.0
 
     @Environment(\.colorScheme)
@@ -37,8 +37,9 @@ struct StatusBarView: View {
 //            StatusBarBreakpointButton()
 //            StatusBarDivider()
             Spacer()
+            StatusBarFileInfoView()
             HStack(alignment: .center, spacing: 10) {
-                StatusBarCursorLocationLabel()
+                StatusBarCursorPositionLabel()
             }
             StatusBarDivider()
             StatusBarToggleUtilityAreaButton()