Add custom picker component

Changelog-Changed: New stylized tabs
Closes: #391

damus.xcodeproj/project.pbxproj

@@ -175,6 +175,7 @@
 		4CF0ABF62985CD5500D66079 /* UserSearch.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4CF0ABF52985CD5500D66079 /* UserSearch.swift */; };
 		4FE60CDD295E1C5E00105A1F /* Wallet.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4FE60CDC295E1C5E00105A1F /* Wallet.swift */; };
 		5C513FCC2984ACA60072348F /* QRCodeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5C513FCB2984ACA60072348F /* QRCodeView.swift */; };
+		5C513FBA297F72980072348F /* CustomPicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5C513FB9297F72980072348F /* CustomPicker.swift */; };
 		6439E014296790CF0020672B /* ProfileZoomView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6439E013296790CF0020672B /* ProfileZoomView.swift */; };
 		647D9A8D2968520300A295DE /* SideMenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 647D9A8C2968520300A295DE /* SideMenuView.swift */; };
 		64FBD06F296255C400D9D3B2 /* Theme.swift in Sources */ = {isa = PBXBuildFile; fileRef = 64FBD06E296255C400D9D3B2 /* Theme.swift */; };
@@ -438,6 +439,7 @@
 		4CF0ABF52985CD5500D66079 /* UserSearch.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserSearch.swift; sourceTree = "<group>"; };
 		4FE60CDC295E1C5E00105A1F /* Wallet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Wallet.swift; sourceTree = "<group>"; };
 		5C513FCB2984ACA60072348F /* QRCodeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = QRCodeView.swift; sourceTree = "<group>"; };
+		5C513FB9297F72980072348F /* CustomPicker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomPicker.swift; sourceTree = "<group>"; };
 		6439E013296790CF0020672B /* ProfileZoomView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProfileZoomView.swift; sourceTree = "<group>"; };
 		647D9A8C2968520300A295DE /* SideMenuView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SideMenuView.swift; sourceTree = "<group>"; };
 		64FBD06E296255C400D9D3B2 /* Theme.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Theme.swift; sourceTree = "<group>"; };
@@ -749,6 +751,7 @@
 				4CB8838C296F710400DC99E7 /* Reposted.swift */,
 				4CBCA92F297DB57F00EC6B2F /* WebsiteLink.swift */,
 				4CC7AAEC297F0B9E00430951 /* Highlight.swift */,
+				5C513FB9297F72980072348F /* CustomPicker.swift */,
 				4CF0ABE22981BC7D00D66079 /* UserView.swift */,
 				7C902AE22981D55B002AB16E /* ZoomableScrollView.swift */,
 			);
@@ -1176,6 +1179,7 @@
 				4C363A8E28236FE4006E126D /* NoteContentView.swift in Sources */,
 				4C90BD1A283AA67F008EE7EF /* Bech32.swift in Sources */,
 				E990020F2955F837003BBC5A /* EditMetadataView.swift in Sources */,
+				5C513FBA297F72980072348F /* CustomPicker.swift in Sources */,
 				4CACA9D5280C31E100D9BBE8 /* ReplyView.swift in Sources */,
 				4C3A1D332960DB0500558C0F /* Markdown.swift in Sources */,
 				4CF0ABD42980996B00D66079 /* Report.swift in Sources */,

damus/Components/CustomPicker.swift

@@ -0,0 +1,60 @@
+//
+//  CustomPicker.swift
+//  damus
+//
+//  Created by Eric Holguin on 1/22/23.
+//
+
+import SwiftUI
+
+let RECTANGLE_GRADIENT = LinearGradient(gradient: Gradient(colors: [
+    Color("DamusPurple"),
+    Color("DamusBlue")
+]), startPoint: .leading, endPoint: .trailing)
+
+struct CustomPicker<SelectionValue: Hashable, Content: View>: View {
+    
+    @Environment(\.colorScheme) var colorScheme
+    
+    @Namespace var picker
+    @Binding var selection: SelectionValue
+    @ViewBuilder let content: Content
+    
+    public var body: some View {
+        let contentMirror = Mirror(reflecting: content)
+        let blocksCount = Mirror(reflecting: contentMirror.descendant("value")!).children.count
+        HStack {
+            ForEach(0..<blocksCount, id: \.self) { index in
+                let tupleBlock = contentMirror.descendant("value", ".\(index)")
+                let text = Mirror(reflecting: tupleBlock!).descendant("content") as! Text
+                let tag = Mirror(reflecting: tupleBlock!).descendant("modifier", "value", "tagged") as! SelectionValue
+                
+                Button {
+                    withAnimation(.spring()) {
+                        selection = tag
+                    }
+                } label: {
+                    text
+                        .padding(EdgeInsets(top: 15, leading: 0, bottom: 10, trailing: 0))
+                        .font(.system(size: 14, weight: .heavy))
+                }
+                .background(
+                    Group {
+                        if tag == selection {
+                            Rectangle().fill(RECTANGLE_GRADIENT).frame(height: 2.5)
+                                .matchedGeometryEffect(id: "selector", in: picker)
+                                .cornerRadius(2.5)
+                        }
+                    },
+                    alignment: .bottom
+                )
+                .frame(maxWidth: .infinity)
+                .accentColor(tag == selection ? textColor() : .gray)
+            }
+        }
+    }
+    
+    func textColor() -> Color {
+        colorScheme == .light ? Color("DamusBlack") : Color("DamusWhite")
+    }
+}

damus/ContentView.swift

@@ -120,9 +120,10 @@ struct ContentView: View {
         }
         .safeAreaInset(edge: .top, spacing: 0) {
             VStack(spacing: 0) {
-                FiltersView
-                    //.frame(maxWidth: 275)
-                    .padding()
+                CustomPicker(selection: $filter_state, content: {
+                    Text("Posts", comment: "Label for filter for seeing only posts (instead of posts and replies).").tag(FilterState.posts)
+                    Text("Posts & Replies", comment: "Label for filter for seeing posts and replies (instead of only posts).").tag(FilterState.posts_and_replies)
+                })
                 Divider()
                     .frame(height: 1)
             }
@@ -138,16 +139,6 @@ struct ContentView: View {
         }
     }
     
-    var FiltersView: some View {
-        VStack{
-            Picker(NSLocalizedString("Filter State", comment: "Filter state for seeing either only posts, or posts & replies."), selection: $filter_state) {
-                Text("Posts", comment: "Label for filter for seeing only posts (instead of posts and replies).").tag(FilterState.posts)
-                Text("Posts & Replies", comment: "Label for filter for seeing posts and replies (instead of only posts).").tag(FilterState.posts_and_replies)
-            }
-            .pickerStyle(.segmented)
-        }
-    }
-    
     func MainContent(damus: DamusState) -> some View {
         VStack {
             NavigationLink(destination: MaybeProfileView, isActive: $profile_open) {

damus/Views/DirectMessagesView.swift

@@ -62,16 +62,16 @@ struct DirectMessagesView: View {
     }
     
     var body: some View {
-        VStack {
-            Picker(NSLocalizedString("DM Type", comment: "DM selector for seeing either DMs or message requests, which are messages that have not been responded to yet. DM is the English abbreviation for Direct Message."), selection: $dm_type) {
+        VStack(spacing: 0) {
+            CustomPicker(selection: $dm_type, content: {
                 Text("DMs", comment: "Picker option for DM selector for seeing only DMs that have been responded to. DM is the English abbreviation for Direct Message.")
                     .tag(DMType.friend)
-                
                 Text("Requests", comment: "Picker option for DM selector for seeing only message requests (DMs that someone else sent the user which has not been responded to yet). DM is the English abbreviation for Direct Message.")
                     .tag(DMType.rando)
-                
-            }
-            .pickerStyle(.segmented)
+            })
+            
+            Divider()
+                .frame(height: 1)
             
             TabView(selection: $dm_type) {
                 MainContent(requests: false)
@@ -83,7 +83,6 @@ struct DirectMessagesView: View {
             .tabViewStyle(.page(indexDisplayMode: .never))
         }
         .padding(.horizontal)
-        .padding(.top)
         .navigationTitle(NSLocalizedString("DMs", comment: "Navigation title for view of DMs, where DM is an English abbreviation for Direct Message."))
     }
 }