Skip to content

Add SwiftUI home screen with 2-column grid layout for micro utility apps #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Add SwiftUI home screen with 2-column grid layout for micro utility apps #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
430c85e
Initial plan
Copilot Oct 26, 2025
bc15e58
Add home screen with grid layout and utility screens
Copilot Oct 26, 2025
b63a9f6
Add comprehensive documentation for home screen design
Copilot Oct 26, 2025
2d0fdc9
Add architecture documentation and requirements verification
Copilot Oct 26, 2025
625bbdc
Add project summary with complete feature overview
Copilot Oct 26, 2025
c24ae72
Add visual preview documentation showing UI layout
Copilot Oct 26, 2025
074f45d
Add comprehensive project status document
Copilot Oct 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 204 additions & 0 deletions ARCHITECTURE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
# Code Architecture Overview

## Application Flow

```
┌──────────────────────────────────────────────────────────────┐
│ HelloSwiftApp.swift │
│ (@main entry point) │
│ │
│ WindowGroup { │
│ HomeView() ─────────────────────────────────────────┐ │
│ } │ │
└───────────────────────────────────────────────────────────┼──┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ HomeView.swift │
│ (Main Grid Layout Screen) │
│ │
│ NavigationStack { │
│ ScrollView { │
│ LazyVGrid(columns: 2) { │
│ ForEach(items) { item in │
│ NavigationLink { │
│ HomeItemView(item) ◄──┐ │
│ } │ │
│ } │ │
│ } │ │
│ } │ │
│ } │ │
└───────────────────────────────────┼──────────────────────────┘
│
┌───────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ HomeItemView.swift │
│ (Individual Item Component) │
│ │
│ VStack { │
│ Image(systemName: icon) ◄─────┐ │
│ .font(.system(size: 48)) │ │
│ .frame(80x80) │ │
│ .background(blue 10%) │ │
│ .cornerRadius(16) │ │
│ │ │
│ Text(title) │ Data from HomeItem │
│ .font(16pt, medium) │ │
│ .center aligned │ │
│ } │ │
└───────────────────────────────────┼──────────────────────────┘
│
│
┌───────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ HomeItem.swift │
│ (Data Model) │
│ │
│ struct HomeItem: Identifiable { │
│ let id: UUID │
│ let icon: String ← SF Symbol name │
│ let title: String ← Display text │
│ let destination: UtilityDestination │
│ } │
│ │
│ enum UtilityDestination { │
│ case calculator │
│ case notes │
│ case weather │
│ case timer │
│ case settings │
│ case calendar │
│ } │
└──────────────────────────────────────────────────────────────┘
│
│ When tapped
▼
┌──────────────────────────────────────────────────────────────┐
│ NavigationLink triggers │
│ destinationView(for: destination) │
│ │
│ @ViewBuilder │
│ func destinationView(for destination: UtilityDestination) │
│ -> some View { │
│ switch destination { │
│ case .calculator: CalculatorView() ──────────┐ │
│ case .notes: NotesView() ──────────┤ │
│ case .weather: WeatherView() ──────────┤ │
│ case .timer: TimerView() ──────────┤ │
│ case .settings: SettingsView() ──────────┤ │
│ case .calendar: CalendarView() ──────────┤ │
│ } │ │
│ } │ │
└──────────────────────────────────────────────────────┼───────┘
│
┌──────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ Utility View Screens │
│ │
│ ┌────────────────┐ ┌────────────────┐ ┌──────────────┐ │
│ │ CalculatorView │ │ NotesView │ │ WeatherView │ │
│ └────────────────┘ └────────────────┘ └──────────────┘ │
│ │
│ ┌────────────────┐ ┌────────────────┐ ┌──────────────┐ │
│ │ TimerView │ │ SettingsView │ │ CalendarView │ │
│ └────────────────┘ └────────────────┘ └──────────────┘ │
│ │
│ Each view shows: │
│ • Large icon (64pt) │
│ • Title │
│ • Placeholder text │
│ • Navigation bar with back button │
└──────────────────────────────────────────────────────────────┘
```

## Key Design Decisions

### 1. **Grid Layout**
- Uses `LazyVGrid` for efficient rendering
- 2 flexible columns for optimal mobile viewing
- 20pt spacing between items
- Scrollable to accommodate any number of utilities

### 2. **Center Alignment**
- Icons and text both use center alignment
- `.frame(maxWidth: .infinity)` ensures consistent width
- `.multilineTextAlignment(.center)` for text wrapping

### 3. **Navigation**
- `NavigationStack` for iOS 16+ navigation
- `NavigationLink` provides tap-to-navigate functionality
- Back button automatically provided by NavigationStack

### 4. **Modularity**
- Each utility is a separate View file
- Easy to add new utilities
- Clear separation of concerns

### 5. **Styling**
- SF Symbols for icons (built-in, scalable)
- Blue accent color throughout
- Light background with rounded corners
- Responsive to dark mode

## Data Flow

```
1. App Launch
└─> HelloSwiftApp creates WindowGroup
└─> HomeView is displayed

2. Home Screen
└─> items array defines available utilities
└─> LazyVGrid renders grid
└─> ForEach creates NavigationLink for each item
└─> HomeItemView renders each item

3. User Interaction
└─> User taps on item
└─> NavigationLink activates
└─> destinationView(for:) determines target
└─> Appropriate utility view is pushed

4. Navigation
└─> Utility view appears with back button
└─> User can return to home screen
```

## File Dependencies

```
HelloSwiftApp.swift
↓ imports
HomeView.swift
↓ uses
├── HomeItem.swift (model)
├── HomeItemView.swift (component)
└── [Utility]View.swift (destinations)
↓ all import
SwiftUI (framework)
```

## Extension Pattern

To add a new utility:

```
1. HomeItem.swift
└─> Add case to UtilityDestination enum

2. NewUtilityView.swift
└─> Create new View struct

3. HomeView.swift
├─> Add HomeItem to items array
└─> Add case to destinationView switch

4. project.pbxproj
└─> Add file to Xcode build phases (automatic in Xcode)
```
117 changes: 117 additions & 0 deletions DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
# Home Screen Design

## Layout Structure

The home screen uses a 2-column grid layout with the following characteristics:

### Grid Layout
- **Columns**: 2 flexible columns
- **Spacing**: 20 points between items
- **Container**: ScrollView for scrollable content

### Individual Item Design (HomeItemView)
Each utility item consists of:

1. **Icon**
- Size: 48pt system font
- Color: Blue
- Background: Light blue with 10% opacity
- Frame: 80x80 points
- Corner Radius: 16 points

2. **Text Label**
- Font: System, 16pt, medium weight
- Color: Primary (adapts to light/dark mode)
- Alignment: Center
- Multi-line support

3. **Spacing**
- Icon to text: 12 points
- Vertical padding: 12 points

### Visual Mockup

```
┌─────────────────────────────────────────────┐
│ Utilities │
├─────────────────────────────────────────────┤
│ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ │ │ │ │
│ │ ╔═══════╗ │ │ ╔═══════╗ │ │
│ │ ║ ➕➗ ║ │ │ ║ 📝 ║ │ │
│ │ ╚═══════╝ │ │ ╚═══════╝ │ │
│ │ │ │ │ │
│ │ Calculator │ │ Notes │ │
│ │ │ │ │ │
│ └───────────────┘ └───────────────┘ │
│ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ │ │ │ │
│ │ ╔═══════╗ │ │ ╔═══════╗ │ │
│ │ ║ ☁️☀️ ║ │ │ ║ ⏱️ ║ │ │
│ │ ╚═══════╝ │ │ ╚═══════╝ │ │
│ │ │ │ │ │
│ │ Weather │ │ Timer │ │
│ │ │ │ │ │
│ └───────────────┘ └───────────────┘ │
│ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ │ │ │ │
│ │ ╔═══════╗ │ │ ╔═══════╗ │ │
│ │ ║ ⚙️ ║ │ │ ║ 📅 ║ │ │
│ │ ╚═══════╝ │ │ ╚═══════╝ │ │
│ │ │ │ │ │
│ │ Settings │ │ Calendar │ │
│ │ │ │ │ │
│ └───────────────┘ └───────────────┘ │
│ │
└─────────────────────────────────────────────┘
```

## Navigation Behavior

When a user taps on any utility item:
1. The NavigationLink triggers
2. User navigates to the corresponding utility screen
3. Each utility screen displays:
- Large icon (64pt)
- Title
- Placeholder text for future functionality
- Navigation bar with back button

## Available Utilities

1. **Calculator** - Arithmetic operations utility
2. **Notes** - Note-taking utility
3. **Weather** - Weather information utility
4. **Timer** - Timing utility
5. **Settings** - App settings utility
6. **Calendar** - Calendar and scheduling utility

## Extension Points

To add more utilities:
1. Add a new case to `UtilityDestination` enum in `HomeItem.swift`
2. Create a new View file for the utility (e.g., `NewUtilityView.swift`)
3. Add a new `HomeItem` to the `items` array in `HomeView.swift`
4. Add the new case to the switch statement in `destinationView(for:)` method

Example:
```swift
// In HomeItem.swift
enum UtilityDestination {
// ... existing cases
case newUtility
}

// In HomeView.swift
let items: [HomeItem] = [
// ... existing items
HomeItem(icon: "star.fill", title: "New Utility", destination: .newUtility)
]

// In destinationView(for:) method
case .newUtility:
NewUtilityView()
```
Loading