kutesir/Kisani
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Kisani UI overhaul — brand identity, gallery, visual polish

Browse Source 
- Rename app to Kisani (CFBundleDisplayName, xcodeproj → Kisani.xcodeproj)
- BackupView: kisani. wordmark + SwiftUI-drawn server logo mark (no asset,
  adaptive ink/bg), 206pt progress ring with active-state glow, 4-page
  swipeable ring (progress/pending/failed/uploaded), 4-metric stats strip,
  friendly NAS card (Home Server label), hamburger → AppMenuView sheet
- GalleryView: new NAS + local photo grid with source picker chip, 3-col
  lazy grid, ThumbnailCache, sync-status dots (green = backed up)
- MainTabView: Browse tab → Gallery tab; tab bar uses ultraThinMaterial
  blur background (systemGray3 icons, 9.5pt labels)
- All app icon sizes regenerated from 1024pt source via sips
- LANMonitor: nasReachable Bool?, checkNASReachability(host:port:) TCP ping
- project.yml: photo library usage description updated to Kisani branding

Co-Authored-By: Kutesir <kutesir@provoc.ug>
Co-Authored-By: Sentry <sentry@provoc.ug>
This commit is contained in:
Robin Kutesa
2026-05-17 11:17:13 +03:00
parent 6cad8d9d6c
commit 59bdad803f
32 changed files with 983 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
Features/Browse/BrowseView.swift
View File

@@ -3,79 +3,102 @@ import SwiftUI
struct BrowseView: View {
let connection: NASConnection
@Binding var selectedPath: String
var isPickerMode: Bool = false
@Environment(\.dismiss) private var dismiss
@State private var currentPath: String = "/"
@State private var currentPath: String
@State private var items: [NASItem] = []
@State private var isLoading = false
@State private var error: String? = nil
@State private var showCreateFolder = false
@State private var newFolderName = ""
init(connection: NASConnection, selectedPath: Binding<String>, isPickerMode: Bool = false, initialPath: String = "/") {
self.connection = connection
self._selectedPath = selectedPath
self.isPickerMode = isPickerMode
self._currentPath = State(initialValue: initialPath)
}
var body: some View {
NavigationStack {
ZStack {
AppTheme.background.ignoresSafeArea()
if isPickerMode {
NavigationStack { coreContent }
} else {
coreContent
}
}
VStack(spacing: 0) {
// Path breadcrumb bar
HStack(spacing: 6) {
Image(systemName: "externaldrive")
.font(.system(size: 11, weight: .medium))
.foregroundStyle(AppTheme.inkTertiary)
Text(currentPath)
.font(.system(size: 12, weight: .regular))
.foregroundStyle(AppTheme.inkSecondary)
.lineLimit(1)
.truncationMode(.middle)
Spacer()
}
.padding(.horizontal, AppTheme.cardPad)
.padding(.vertical, 10)
.background(AppTheme.surfaceSunken)
private var coreContent: some View {
ZStack {
AppTheme.background.ignoresSafeArea()
Rectangle()
.fill(AppTheme.separator)
.frame(height: 0.5)
if isLoading {
loadingState
} else if let err = error {
errorState(err)
} else if items.isEmpty {
emptyState
} else {
folderList
VStack(spacing: 0) {
// Path breadcrumb bar
HStack(spacing: 6) {
Image(systemName: "externaldrive")
.font(.system(size: 11, weight: .medium))
.foregroundStyle(AppTheme.inkTertiary)
Text(currentPath)
.font(.system(size: 12, weight: .regular))
.foregroundStyle(AppTheme.inkSecondary)
.lineLimit(1)
.truncationMode(.middle)
Spacer()
if !isPickerMode && currentPath != "/" {
Button(action: navigateUp) {
Image(systemName: "arrow.up.circle")
.font(.system(size: 18, weight: .regular))
.foregroundStyle(AppTheme.inkSecondary)
}
}
}
.padding(.horizontal, AppTheme.cardPad)
.padding(.vertical, 10)
.background(AppTheme.surfaceSunken)
Rectangle()
.fill(AppTheme.separator)
.frame(height: 0.5)
if isLoading {
loadingState
} else if let err = error {
errorState(err)
} else if items.isEmpty {
emptyState
} else {
folderList
}
}
.navigationTitle("Choose folder")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
}
.navigationTitle(isPickerMode ? "Choose folder" : "")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
if isPickerMode {
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel") { dismiss() }
.font(AppTheme.body())
.foregroundStyle(AppTheme.inkSecondary)
}
ToolbarItem(placement: .navigationBarTrailing) {
Button {
newFolderName = ""
showCreateFolder = true
} label: {
Image(systemName: "folder.badge.plus")
.foregroundStyle(AppTheme.inkSecondary)
}
.disabled(currentPath == "/" && connection.nasProtocol == .smb)
}
ToolbarItem(placement: .navigationBarTrailing) {
Button {
newFolderName = ""
showCreateFolder = true
} label: {
Image(systemName: "folder.badge.plus")
.foregroundStyle(AppTheme.inkSecondary)
}
.disabled(currentPath == "/" && connection.nasProtocol == .smb)
}
.safeAreaInset(edge: .bottom) {
selectButton
}
.alert("New folder", isPresented: $showCreateFolder) {
TextField("Folder name", text: $newFolderName)
Button("Create") { Task { await createFolder() } }
Button("Cancel", role: .cancel) {}
}
}
.safeAreaInset(edge: .bottom) {
if isPickerMode { selectButton }
}
.alert("New folder", isPresented: $showCreateFolder) {
TextField("Folder name", text: $newFolderName)
Button("Create") { Task { await createFolder() } }
Button("Cancel", role: .cancel) {}
}
.task { await loadItems(path: currentPath) }
.refreshable { await loadItems(path: currentPath) }
@@ -183,14 +206,10 @@ struct BrowseView: View {
ForEach(items) { item in
FolderRow(
item: item,
isSelected: selectedPath == item.path
) {
if item.isDirectory {
navigate(to: item.path)
} else {
selectedPath = item.path
}
}
isSelected: selectedPath == item.path,
onTap: { selectedPath = item.path },
onNavigate: item.isDirectory ? { navigate(to: item.path) } : nil
)
.contextMenu {
if item.isDirectory {
Button {
@@ -252,7 +271,7 @@ struct BrowseView: View {
Spacer()
Button(action: {
selectedPath = currentPath
if selectedPath == "/" { selectedPath = currentPath }
dismiss()
}) {
Text("Select")
@@ -300,6 +319,7 @@ struct BrowseView: View {
}
private func navigate(to path: String) {
if isPickerMode { selectedPath = "/" }
currentPath = path
Task { await loadItems(path: path) }
}

429
Features/Browse/GalleryView.swift Normal file
View File

@@ -0,0 +1,429 @@
import SwiftUI
import Photos
import UIKit
private let imageExts: Set<String> = ["jpg","jpeg","png","heic","heif","gif","webp","bmp","tiff","tif"]
private let videoExts: Set<String> = ["mp4","mov","m4v","avi","mkv"]
enum GallerySource { case nas, local }
struct GalleryView: View {
@EnvironmentObject var store: ConnectionStore
@EnvironmentObject var lanMonitor: LANMonitor
@State private var source: GallerySource = .nas
// NAS state
@State private var nasItems: [NASItem] = []
@State private var nasLoading = false
@State private var nasError: String? = nil
// Local state
@State private var localAssets: [PHAsset] = []
@State private var syncedNames: Set<String> = []
@State private var localAuthDenied = false
@State private var appeared = false
private var connection: NASConnection? { store.savedConnection }
private let deviceName = UIDevice.current.name
private let columns = [
GridItem(.flexible(), spacing: 2),
GridItem(.flexible(), spacing: 2),
GridItem(.flexible(), spacing: 2)
]
var body: some View {
ZStack {
AppTheme.background.ignoresSafeArea()
switch source {
case .nas: nasContent
case .local: localContent
}
}
.navigationTitle("")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) { sourceChip }
}
.task {
await loadNAS()
loadLocal()
}
.refreshable {
await loadNAS()
loadLocal()
}
}
// MARK: — Source chip / dropdown
private var sourceChip: some View {
Menu {
Button {
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) { source = .nas }
} label: {
Label(connection?.host ?? "NAS", systemImage: "externaldrive.fill")
}
Button {
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) { source = .local }
} label: {
Label(deviceName, systemImage: "iphone")
}
} label: {
HStack(spacing: 5) {
Circle()
.fill(dotColor)
.frame(width: 6, height: 6)
.animation(.spring(response: 0.3, dampingFraction: 0.8), value: dotColor == AppTheme.positive)
Text(source == .nas ? (connection?.host ?? "NAS") : deviceName)
.font(.system(size: 12, weight: .medium))
.foregroundStyle(AppTheme.inkSecondary)
.lineLimit(1)
Image(systemName: "chevron.down")
.font(.system(size: 9, weight: .semibold))
.foregroundStyle(AppTheme.inkQuaternary)
}
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(AppTheme.surfaceSunken)
.clipShape(Capsule(style: .continuous))
}
}
private var dotColor: Color {
switch source {
case .nas:
switch lanMonitor.nasReachable {
case true: return AppTheme.positive
case false: return AppTheme.destructive
case nil: return AppTheme.inkQuaternary
}
case .local:
return AppTheme.interactive
}
}
// MARK: — NAS content
private var nasContent: some View {
Group {
if connection == nil {
placeholder(icon: "externaldrive.badge.xmark", text: "No NAS connected")
} else if nasLoading && nasItems.isEmpty {
loadingView("Loading gallery…")
} else if let err = nasError {
errorView(err) { Task { await loadNAS() } }
} else if nasItems.isEmpty {
placeholder(icon: "photo.on.rectangle", text: "No photos backed up yet")
} else {
gallery(items: nasItems.map { .nas($0) })
}
}
}
// MARK: — Local content
private var localContent: some View {
Group {
if localAuthDenied {
placeholder(icon: "lock.slash", text: "Photo library access denied")
} else if localAssets.isEmpty {
loadingView("Loading photos…")
} else {
gallery(items: localAssets.map { .local($0) })
}
}
}
// MARK: — Shared grid
private func gallery(items: [GalleryItem]) -> some View {
ScrollView {
LazyVStack(spacing: 0, pinnedViews: [.sectionHeaders]) {
Section {
LazyVGrid(columns: columns, spacing: 2) {
ForEach(Array(items.enumerated()), id: \.offset) { idx, item in
GalleryCell(
item: item,
connection: connection,
isSynced: syncStatus(for: item)
)
.opacity(appeared ? 1 : 0)
.animation(
.spring(response: 0.35, dampingFraction: 0.82)
.delay(Double(min(idx, 18)) * 0.02),
value: appeared
)
}
}
} header: {
gridHeader(count: items.count)
}
}
}
.onAppear { appeared = true }
}
private func gridHeader(count: Int) -> some View {
HStack {
VStack(alignment: .leading, spacing: 2) {
Text("\(count) files")
.font(.system(size: 14, weight: .semibold))
.foregroundStyle(AppTheme.ink)
Group {
switch source {
case .nas:
if let conn = connection {
Text((conn.remotePath as NSString).lastPathComponent)
}
case .local:
Text(deviceName)
}
}
.font(AppTheme.micro())
.foregroundStyle(AppTheme.inkTertiary)
}
Spacer()
if nasLoading {
ProgressView().scaleEffect(0.75).tint(AppTheme.inkTertiary)
}
}
.padding(.horizontal, AppTheme.hPad)
.padding(.vertical, 10)
.background(AppTheme.background)
}
// MARK: — Sync status
private func syncStatus(for item: GalleryItem) -> SyncStatus {
guard source == .local else { return .none }
switch item {
case .local(let asset):
let name = PHAssetResource.assetResources(for: asset)
.first?.originalFilename.lowercased() ?? ""
return syncedNames.contains(name) ? .synced : .pending
case .nas:
return .none
}
}
// MARK: — Data
private func loadNAS() async {
guard let conn = connection else { return }
nasLoading = true
nasError = nil
do {
let s: any NASTransferProtocol = conn.nasProtocol == .smb ? SMBService() : SFTPService()
try await s.connect(to: conn.host, port: conn.port,
username: conn.username, password: conn.password)
nasItems = try await s.listDirectory(at: conn.remotePath)
.filter { !$0.isDirectory }
.sorted { ($0.modifiedDate ?? .distantPast) > ($1.modifiedDate ?? .distantPast) }
s.disconnect()
syncedNames = Set(nasItems.map { $0.name.lowercased() })
} catch let e as BackupError {
nasError = e.errorDescription
} catch {
nasError = error.localizedDescription
}
nasLoading = false
}
private func loadLocal() {
let status = PHPhotoLibrary.authorizationStatus(for: .readWrite)
guard status == .authorized || status == .limited else {
if status == .denied || status == .restricted { localAuthDenied = true }
PHPhotoLibrary.requestAuthorization(for: .readWrite) { granted in
Task { @MainActor in
if granted == .authorized || granted == .limited {
loadLocalAssets()
} else {
localAuthDenied = true
}
}
}
return
}
loadLocalAssets()
}
private func loadLocalAssets() {
let opts = PHFetchOptions()
opts.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]
let result = PHAsset.fetchAssets(with: opts)
var assets: [PHAsset] = []
result.enumerateObjects { asset, _, _ in assets.append(asset) }
localAssets = assets
}
// MARK: — Utility views
private func loadingView(_ text: String) -> some View {
VStack(spacing: 10) {
ProgressView().tint(AppTheme.inkTertiary)
Text(text).font(AppTheme.caption()).foregroundStyle(AppTheme.inkTertiary)
}
}
private func placeholder(icon: String, text: String) -> some View {
VStack(spacing: 12) {
Image(systemName: icon)
.font(.system(size: 32, weight: .ultraLight))
.foregroundStyle(AppTheme.inkQuaternary)
Text(text)
.font(AppTheme.caption())
.foregroundStyle(AppTheme.inkTertiary)
.multilineTextAlignment(.center)
.padding(.horizontal, 40)
}
}
private func errorView(_ message: String, retry: @escaping () -> Void) -> some View {
VStack(spacing: 16) {
placeholder(icon: "wifi.exclamationmark", text: message)
Button(action: retry) {
Text("Retry")
.font(.system(size: 13, weight: .medium))
.foregroundStyle(AppTheme.ink)
.padding(.horizontal, 16).padding(.vertical, 8)
.background(AppTheme.surfaceSunken)
.clipShape(RoundedRectangle(cornerRadius: 8, style: .continuous))
}
.buttonStyle(ScaleButtonStyle())
}
}
}
// MARK: — Gallery item model
enum GalleryItem {
case nas(NASItem)
case local(PHAsset)
}
enum SyncStatus { case none, synced, pending }
// MARK: — Cell
struct GalleryCell: View {
let item: GalleryItem
let connection: NASConnection?
let isSynced: SyncStatus
@State private var image: UIImage? = nil
@State private var loading = false
var body: some View {
ZStack(alignment: .bottomTrailing) {
Group {
if let img = image {
Image(uiImage: img)
.resizable()
.scaledToFill()
.transition(.opacity.animation(.easeIn(duration: 0.18)))
} else {
Rectangle()
.fill(AppTheme.surfaceSunken)
.overlay {
if loading {
ProgressView().scaleEffect(0.55).tint(AppTheme.inkQuaternary)
} else {
Image(systemName: cellIcon)
.font(.system(size: 18, weight: .ultraLight))
.foregroundStyle(AppTheme.inkQuaternary)
}
}
}
}
// Video badge
if isVideo && image != nil {
Image(systemName: "play.fill")
.font(.system(size: 9, weight: .semibold))
.foregroundStyle(.white)
.padding(3)
.background(.black.opacity(0.45))
.clipShape(Circle())
.padding(5)
}
// Sync status badge (local mode only)
if isSynced != .none {
Circle()
.fill(isSynced == .synced ? AppTheme.positive : Color(red: 1.0, green: 0.58, blue: 0.0))
.frame(width: 9, height: 9)
.overlay(Circle().stroke(Color.white, lineWidth: 1.5))
.padding(5)
.animation(.spring(response: 0.25, dampingFraction: 0.8), value: isSynced == .synced)
}
}
.aspectRatio(1, contentMode: .fit)
.clipped()
.task { await load() }
}
private var isVideo: Bool {
switch item {
case .nas(let n): return videoExts.contains((n.name as NSString).pathExtension.lowercased())
case .local(let a): return a.mediaType == .video
}
}
private var cellIcon: String {
switch item {
case .nas(let n):
let ext = (n.name as NSString).pathExtension.lowercased()
return videoExts.contains(ext) ? "play.rectangle" : "photo"
case .local(let a):
return a.mediaType == .video ? "play.rectangle" : "photo"
}
}
private func load() async {
guard image == nil, !loading else { return }
switch item {
case .nas(let nasItem):
guard let conn = connection else { return }
let ext = (nasItem.name as NSString).pathExtension.lowercased()
guard imageExts.contains(ext) || videoExts.contains(ext) else { return }
if let cached = ThumbnailCache.shared.get(for: nasItem.path) { image = cached; return }
loading = true
do {
let s: any NASTransferProtocol = conn.nasProtocol == .smb ? SMBService() : SFTPService()
try await s.connect(to: conn.host, port: conn.port,
username: conn.username, password: conn.password)
let data = try await s.downloadData(at: nasItem.path)
s.disconnect()
if let img = UIImage(data: data)?.thumbnailScaled(to: 300) {
ThumbnailCache.shared.set(img, for: nasItem.path)
image = img
}
} catch {}
loading = false
case .local(let asset):
loading = true
let opts = PHImageRequestOptions()
opts.deliveryMode = .opportunistic
opts.isNetworkAccessAllowed = true
opts.isSynchronous = false
let size = CGSize(width: 300, height: 300)
await withCheckedContinuation { cont in
PHImageManager.default().requestImage(
for: asset, targetSize: size,
contentMode: .aspectFill, options: opts
) { img, info in
if let img { image = img }
let degraded = info?[PHImageResultIsDegradedKey] as? Bool ?? false
if !degraded { cont.resume() }
}
}
loading = false
}
}
}