A step-by-step process for adding a new feature to the Mynos app with CUSSOR

vibe-codeng to create websites and apps for iOS. I already have two apps sitting in the app store.

My first Brabus app is the tracker, which helps you track your daily brushing habits, stay consistent, and keep your teeth clean by cleaning small adzes. I also wrote an article on the entire process of building an app and submitting it to the app store.

Recently, I decided to add a new feature to the brushing tracker: A calendar-like grid that shows the user's monthly consistency. In this article, I'll walk through how I use this feature using the pointer and a few manual settings I made.

Very fast

What I envisioned was similar to the grids you see in trend tracking apps or the contribution graph on GitHub.

I started with the cursor plan mode, which I've found works well when adding a new feature or making a big change. You define a feature or define a function and the pointer generates a detailed implementation plan.

Here is the exact answer I used in strategy mode to get started:

I want to add a calendar grid to track the user's total days. Make a grid of scenes where each square represents a day of the month. The initial state of the scenes in the grid is dark. Paint the square green if the user finishes all brushing, light green if the user partially finishes brushing. For example, the user sets the daily anointing to be counted as 2. If they complete one brushing per day, the square should be light green. If they complete two brushings a day, the square for that day should be green. The grid should be accessible by pressing the calendar icon at the top left of the screen.

The guide asked me two questions to clarify some details before completing the boot process. I really liked this step because it reaffirms that seeing the Cursor wants to be defined instead of making artificial thoughts on its own.

Two Cursors Asked:

• Should the calendar grid only show the current month, or allow navigation between months?
• Should we start tracking from today forward, or also show past days (which can be dark)?

I ordered a pointer to allow navigation between months and to show the previous days of the dark month. After that, the guide created a Markdown file describing the detailed implementation plan.

The program explains in detail how the feature will be used and includes a list of usable todo items.

Curdo's Todo Items:

• Extend Brushmodel to track historical daily brushing data persistently

• Create a calendarview component with a month bird and color-coded squares

• Add a calendar Icon button to the left of the content

• Combine the Calendar view with a content view using sheet presentation

Next, I asked the cursor to run the program. It also allows modifying the program before execution, but I wanted to stick with the original Cursor frame as-.

The implementation worked on the first try, and I was able to test the feature directly in the xcode simulator. However, the design was bad:

Note: All images used in this article include screenshots from my app, Brush Tracker.

XCode Simulator DOES NOT SUPPORT DESTE AND CURRENCY, so I changed the date on my Mac to test how the grid colors update on different days.

I didn't like this style at all. So I asked the pointer to rearrange the grid using the following:

We need to change the grid structure. What I have in mind is something like the githib contribution grid. Also, do not display date values ​​in fields that represent dates.

This fast did not work as I hoped. The only change you made is to remove the date numbers:

Next, I shared a sample image of the grid style I wanted and asked the presenter to create a similar design.

The new design was close to what I had in mind but had some structural issues. The scenes were too small and didn't fit well within the plot:

So there are two main problems with this design:

1. Each month contains 42 scenes (which do not represent days in any given month).
2. The squares are very small.

I asked for a pointer to fix the first problem this time:

In the current launch, there are 42 scenes in November and December. The squares in the grid represent the days in a month so the number of squares must equal the number of days in that month.

The other problem was simple and I could solve it by adjusting some parameter values. For example, the size of the scenes in the grid can be changed by squareSize parameter:

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int
    
    private let squareSize: CGFloat = 8 // change this parameter

Here's how the grid looks after changing the square size to 32:

Another problem that can be solved by adjusting the parameter values ​​is the drag between lines.

In the screenshot above, there seems to be no space between the lines. This can be changed by increasing the padding between the lines.

I also want to have 8 squares (ie dates) in a row and change the space between the lines.

All this can be done in the following Code Snippet:

            // Calendar grid - smaller GitHub style
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: model.brushesPerDay,
                        size: 32
                    )
                    .padding(.bottom, 3)
                }
            }

• spacing Controls the space between consecutive squares
• padding controls the space between lines
• count Controls the number of squares in a row

After playing around with these parameter values ​​in the Code Snippet above, I got the following grid:

If the user finishes all brushing in a day, he gets a bright green. If a part is completed, the square for that day is colored green. Other dates are shown in black and the current day is shown in white.

After using the feature to keep track of previous days, it seemed natural to add stream notifications. I asked the cursor to do this using the following:

Add notifications when the user completes all brushing for 10, 20, and 30 days. Also, add a monthly notification when the user completes all the days in the month. Notifications should motivate and inspire.

The grid I created is not the best design but it is good enough to get the message across. When the user looks at this grid, he immediately gets an impression of the teeth that move the teeth regularly.

With the help of a pointer and some tweaks, I was able to get this feature up and running in a few hours. At the time of writing this article, this version is still in App Store Review. While reading the article, it can be distributed. Here's a link to the app on the brush store tracker if you'd like to check it out or try the app.

Thanks for reading! If you have any feedback about the article or app, I'd love to hear your thoughts.