step one, starting to separate the big inner circle view page

nirvana-ios.xcodeproj/project.pbxproj

@@ -29,6 +29,8 @@
 		894E80BE276ED7A700624B72 /* avatars.swift in Sources */ = {isa = PBXBuildFile; fileRef = 894E80BD276ED7A700624B72 /* avatars.swift */; };
 		894E80C1276EFD0500624B72 /* AudioPlayerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 894E80C0276EFD0400624B72 /* AudioPlayerView.swift */; };
 		894E80C327702E5900624B72 /* AddBasicInfoViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 894E80C227702E5800624B72 /* AddBasicInfoViewModel.swift */; };
+		896CE6FE27707E6B00DB474E /* CircleNavigationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 896CE6FD27707E6B00DB474E /* CircleNavigationView.swift */; };
+		896CE7002770847400DB474E /* CircleFooterView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 896CE6FF2770847400DB474E /* CircleFooterView.swift */; };
 		89AD5573276DD790001658E0 /* SplashView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89AD5572276DD790001658E0 /* SplashView.swift */; };
 		89AD5575276DE724001658E0 /* PhoneCodeVerificationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89AD5574276DE724001658E0 /* PhoneCodeVerificationView.swift */; };
 		89AD5578276DEAB3001658E0 /* LogoHeaderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 89AD5577276DEAB3001658E0 /* LogoHeaderView.swift */; };
@@ -97,6 +99,8 @@
 		894E80BD276ED7A700624B72 /* avatars.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = avatars.swift; sourceTree = "<group>"; };
 		894E80C0276EFD0400624B72 /* AudioPlayerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AudioPlayerView.swift; sourceTree = "<group>"; };
 		894E80C227702E5800624B72 /* AddBasicInfoViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AddBasicInfoViewModel.swift; sourceTree = "<group>"; };
+		896CE6FD27707E6B00DB474E /* CircleNavigationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleNavigationView.swift; sourceTree = "<group>"; };
+		896CE6FF2770847400DB474E /* CircleFooterView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircleFooterView.swift; sourceTree = "<group>"; };
 		89AD5572276DD790001658E0 /* SplashView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SplashView.swift; sourceTree = "<group>"; };
 		89AD5574276DE724001658E0 /* PhoneCodeVerificationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PhoneCodeVerificationView.swift; sourceTree = "<group>"; };
 		89AD5577276DEAB3001658E0 /* LogoHeaderView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LogoHeaderView.swift; sourceTree = "<group>"; };
@@ -331,6 +335,8 @@
 			children = (
 				89BCABE4276B3D58009E9B10 /* InnerCircleView.swift */,
 				89BCABE6276B3D64009E9B10 /* InnerCircleViewModel.swift */,
+				896CE6FD27707E6B00DB474E /* CircleNavigationView.swift */,
+				896CE6FF2770847400DB474E /* CircleFooterView.swift */,
 			);
 			path = InnerCircle;
 			sourceTree = "<group>";
@@ -502,6 +508,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				891A15E327653A7000B26659 /* ContentView.swift in Sources */,
+				896CE7002770847400DB474E /* CircleFooterView.swift in Sources */,
 				894E80BE276ED7A700624B72 /* avatars.swift in Sources */,
 				89F05B9F276A8D360002E9C7 /* Contact.swift in Sources */,
 				891A160327656FC700B26659 /* HomeView.swift in Sources */,
@@ -520,6 +527,7 @@
 				89BDCDE527695DB900577829 /* NirvanaImage.swift in Sources */,
 				891A16132765A44300B26659 /* ChatsCarouselViewModel.swift in Sources */,
 				89F05B9B276A87920002E9C7 /* ContactsViewModel.swift in Sources */,
+				896CE6FE27707E6B00DB474E /* CircleNavigationView.swift in Sources */,
 				89AD5573276DD790001658E0 /* SplashView.swift in Sources */,
 				89F18AEC276E92BF00115B1E /* CustomExtensions.swift in Sources */,
 				89F18AF1276ECAA300115B1E /* RouterView.swift in Sources */,

nirvana-ios/Views/InnerCircle/CircleFooterView.swift

@@ -0,0 +1,74 @@
+//
+//  CircleFooterView.swift
+//  nirvana-ios
+//
+//  Created by Arjun Patel on 12/20/21.
+//
+
+import SwiftUI
+import NavigationStack
+
+struct CircleFooterView: View {
+    @EnvironmentObject var navigationStack: NavigationStack
+    @EnvironmentObject var authSessionStore: AuthSessionStore
+
+    
+    var body: some View {
+        // TODO: do cool animations with this footer background fill in while recording or playing a message
+        ZStack(alignment:.bottomTrailing) {
+            VStack(alignment:.center) {
+                Spacer()
+                
+                HStack {
+                    if self.selectedUserIndex != nil {
+                        Image("Artboards_Diversity_Avatars_by_Netguru-\(self.selectedUserIndex! + 1)")
+                            .resizable()
+                            .scaledToFit()
+                            .background(NirvanaColor.teal.opacity(0.1))
+                            .frame(width: 40, height: 40)
+                            .clipShape(Circle())
+                            .padding(5)
+                    }
+                    
+                    
+                    VStack (alignment: .leading) {
+                        Text("Sarth Shah")
+                            .font(.footnote)
+                            .foregroundColor(NirvanaColor.light)
+                        Text("sent 20 minutes ago")
+                            .font(.caption)
+                            .foregroundColor(.gray)
+                    }
+                    
+                    Spacer()
+                    
+                    Label("Replay", systemImage: "repeat.1.circle.fill")
+                        .font(.title2)
+                        .labelStyle(.iconOnly)
+                        .foregroundColor(Color.orange)
+                    
+                    
+                    Spacer(minLength: 65)
+                }
+                .frame(maxWidth: .infinity, maxHeight: 60) // 60 is the height of the footer control big circle
+                .background(Color.white.opacity(0.5))
+                .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
+                .shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
+            }
+            
+            FooterControlsView()
+        }
+        .padding()
+        .offset(
+            x:0,
+            y:self.selectedUserIndex == nil ? 150 : 0
+        )
+        .animation(Animation.spring(), value: self.selectedUserIndex)
+    }
+}
+
+struct CircleFooterView_Previews: PreviewProvider {
+    static var previews: some View {
+        CircleFooterView()
+    }
+}

nirvana-ios/Views/InnerCircle/CircleNavigationView.swift

@@ -0,0 +1,112 @@
+//
+//  NavigationView.swift
+//  nirvana-ios
+//
+//  Created by Arjun Patel on 12/20/21.
+//
+
+import SwiftUI
+import NavigationStack
+
+struct CircleNavigationView: View {
+    @EnvironmentObject var navigationStack: NavigationStack
+    @EnvironmentObject var authSessionStore: AuthSessionStore
+    
+    var body: some View {
+        HStack(alignment: .center) {
+            Menu {
+                Button("Edit Profile") {
+                    self.navigationStack.push(AddBasicInfoView())
+                }
+                
+                Button("Friends") {
+                    print("manage friends page")
+                }
+                
+                Button("Log out") {
+                    print("log out button clicked")
+                    
+                    self.authSessionStore.logOut()
+                    
+                    // once logged out, then the listener will listen and router view will take care of us thereafter
+                }
+            } label: {
+                if self.authSessionStore.user?.avatar == nil {
+                    Image("Artboards_Diversity_Avatars_by_Netguru-1")
+                        .resizable()
+                        .scaledToFit()
+                        .background(NirvanaColor.teal.opacity(0.1))
+                        .blur(radius: 5)
+                        .frame(width: 40, height: 40)
+                        .clipShape(Circle())
+                        .padding(5)
+                } else {
+                    Image((self.authSessionStore.user?.avatar)!)
+                        .resizable()
+                        .scaledToFit()
+                        .background(NirvanaColor.teal.opacity(0.1))
+                        .frame(width: 40, height: 40)
+                        .clipShape(Circle())
+                        .padding(5)
+                }
+                
+            }
+            
+            ScrollView(.horizontal) {
+                HStack {
+                    Button {
+                        
+                    } label: {
+                        Label("circle", systemImage: "peacesign")
+                            .font(.caption2)
+                            .foregroundColor(Color.white)
+                            .padding(.vertical, 10)
+                            .padding(.horizontal, 8)
+                            .background(
+                                RoundedRectangle(cornerRadius: 20, style: .continuous)
+                                    .fill(Color.teal.opacity(0.5))
+                            ).overlay(
+                                RoundedRectangle(cornerRadius: 20, style: .continuous)
+                                    .strokeBorder(Color.white.opacity(01), lineWidth: 1)
+                            )
+                    }
+                    
+                    Button {
+                        
+                    } label: {
+                        Label("groups", systemImage: "rectangle.3.group")
+                            .font(.caption2)
+                            .foregroundColor(Color.gray)
+                            .padding(.vertical, 10)
+                            .padding(.horizontal, 8)
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 20, style: .continuous)
+                                    .strokeBorder(Color.white.opacity(1), lineWidth: 1)
+                            )
+                    }
+                    
+                    Button {
+                        
+                    } label: {
+                        Label("work", systemImage: "suitcase")
+                            .font(.caption2)
+                            .foregroundColor(Color.gray)
+                            .padding(.vertical, 10)
+                            .padding(.horizontal, 8)
+                            .overlay(
+                                RoundedRectangle(cornerRadius: 20, style: .continuous)
+                                    .strokeBorder(Color.white.opacity(1), lineWidth: 1)
+                            )
+                    }
+                }
+            }
+        }
+        .padding(.horizontal)
+    }
+}
+
+struct CircleNavigationView_Previews: PreviewProvider {
+    static var previews: some View {
+        CircleNavigationView()
+    }
+}

nirvana-ios/Views/InnerCircle/InnerCircleView.swift

@@ -28,31 +28,13 @@ struct InnerCircleView: View {
             
             // header
             VStack(alignment: .leading) {
-                header
                 
-                bubbleNavigation
+                CircleNavigationView()
                 
                 Spacer()
             }
             
-//            Path { path in
+            CircleFooterView()
-//
-//                //draw the axes
-//                path.move(to: CGPoint(x:0, y:universalSize.height*0.5 ))
-//
-//                path.addLine(to: CGPoint(x:universalSize.width, y: universalSize.height*0.5))
-//
-//                path.move(to: CGPoint(x:universalSize.width*0.5, y:0 ))
-//
-//                path.addLine(to: CGPoint(x:universalSize.width * 0.5, y: universalSize.height))
-//
-//
-//                //TODO: draw the acceptance boxes
-//            }
-//            .stroke(Color.black)
-//            .edgesIgnoringSafeArea(.all)
-            
-            footerNavigation
         }
         .onAppear() {            
             // TESTING
@@ -63,112 +45,7 @@ struct InnerCircleView: View {
         }
     }
     
-    // TODO: do cool animations with this footer background fill in while
-    // recording or playing a message
-    var footerNavigation: some View {
-        ZStack(alignment:.bottomTrailing) {
-            VStack(alignment:.center) {
-                Spacer()
-                
-                HStack {
-                    if self.selectedUserIndex != nil {
-                        Image("Artboards_Diversity_Avatars_by_Netguru-\(self.selectedUserIndex! + 1)")
-                            .resizable()
-                            .scaledToFit()
-                            .background(NirvanaColor.teal.opacity(0.1))
-                            .frame(width: 40, height: 40)
-                            .clipShape(Circle())
-                            .padding(5)
-                    }
-                    
-                    
-                    VStack (alignment: .leading) {
-                        Text("Sarth Shah")
-                            .font(.footnote)
-                            .foregroundColor(NirvanaColor.light)
-                        Text("sent 20 minutes ago")
-                            .font(.caption)
-                            .foregroundColor(.gray)
-                    }
-                    
-                    Spacer()
-                    
-                    Label("Replay", systemImage: "repeat.1.circle.fill")
-                        .font(.title2)
-                        .labelStyle(.iconOnly)
-                        .foregroundColor(Color.orange)
-                    
-                    
-                    Spacer(minLength: 65)
-                }
-                .frame(maxWidth: .infinity, maxHeight: 60) // 60 is the height of the footer control big circle
-                .background(Color.white.opacity(0.5))
-                .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
-                .shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
-            }
-            
-            FooterControlsView()
-        }
-        .padding()
-        .offset(
-            x:0,
-            y:self.selectedUserIndex == nil ? 150 : 0
-        )
-        .animation(Animation.spring(), value: self.selectedUserIndex)
-    }
-    
-    var bubbleNavigation : some View {
-        HStack(alignment: .center) {
-            Button {
-                
-            } label: {
-                Label("circle", systemImage: "peacesign")
-                    .font(.caption2)
-                    .foregroundColor(Color.white)
-                    .padding(.vertical, 10)
-                    .padding(.horizontal, 8)
-                    .background(
-                        RoundedRectangle(cornerRadius: 20, style: .continuous)
-                            .fill(Color.teal.opacity(0.5))
-                    ).overlay(
-                        RoundedRectangle(cornerRadius: 20, style: .continuous)
-                            .strokeBorder(Color.white.opacity(01), lineWidth: 1)
-                    )
-            }
-            
-            Button {
-                
-            } label: {
-                Label("groups", systemImage: "rectangle.3.group")
-                    .font(.caption2)
-                    .foregroundColor(Color.gray)
-                    .padding(.vertical, 10)
-                    .padding(.horizontal, 8)
-                    .overlay(
-                        RoundedRectangle(cornerRadius: 20, style: .continuous)
-                            .strokeBorder(Color.white.opacity(1), lineWidth: 1)
-                    )
-            }
-            
-            Button {
-                
-            } label: {
-                Label("work", systemImage: "suitcase")
-                    .font(.caption2)
-                    .foregroundColor(Color.gray)
-                    .padding(.vertical, 10)
-                    .padding(.horizontal, 8)
-                    .overlay(
-                        RoundedRectangle(cornerRadius: 20, style: .continuous)
-                            .strokeBorder(Color.white.opacity(1), lineWidth: 1)
-                    )
-            }
-        }
-        .padding(.horizontal)
-    }
-    
     // magic variables for grid
-    // TODO: change the number of columns based on the number of items
     // TODO: make the top left person or one horizontal person be in the center of screen...makes the top honeycomb pop
     private static var numberOfItems: Int = 12
     private static let size: CGFloat = UIScreen.main.bounds.height*0.15 // scaling with screen size
@@ -328,53 +205,6 @@ struct InnerCircleView: View {
         
         return 0
     }
-    
-    private var header: some View {
-        HStack(alignment: .center) {
-            Image("undraw_handcrafts_leaf")
-                .resizable()
-                .frame(width: 20.0, height: 32.132)
-                .padding(.leading, 20)
-            
-            Spacer()
-            
-            Image(systemName: "message.and.waveform")
-                .foregroundColor(Color.red.opacity(1))
-                .font(.title2)
-            
-            Menu {
-                Button("Edit Profile") {
-                    self.navigationStack.push(AddBasicInfoView())
-                }
-                
-                Button("Friends") {
-                    print("manage friends page")
-                }
-                
-                Button("Log out") {
-                    print("log out button clicked")
-                    
-                    self.authSessionStore.logOut()
-                    
-                    // once logged out, then the listener will listen and router view will take care of us thereafter
-                }
-            } label: {
-                Image("Artboards_Diversity_Avatars_by_Netguru-51")
-                    .resizable()
-                    .scaledToFit()
-                    .background(NirvanaColor.teal.opacity(0.1))
-                    .frame(width: 40, height: 40)
-                    .clipShape(Circle())
-                    .padding(5)
-            }
-            
-        }
-        .frame(maxWidth: .infinity)
-        .background(Color.white.opacity(0.5))
-        .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
-        .shadow(color: Color.black.opacity(0.25), radius: 30, x: 0, y: 20)
-        .padding(.horizontal)
-    }
 }
 
 struct InnerCircleView_Previews: PreviewProvider {