feat (folders): hide/show animation

lucasromanomr · Feb 26, 2023 · e1e852e · e1e852e
1 parent cb9c0a0
commit e1e852e
Showing 1 changed file with 22 additions and 21 deletions.
diff --git a/Swiftcord/Views/Server/ServerFolder.swift b/Swiftcord/Views/Server/ServerFolder.swift
@@ -8,6 +8,9 @@
 import SwiftUI
 import DiscordKitCore
 
+/// A single server folder item
+///
+/// Used to render a server folder in the server list
 struct ServerFolder: View {
     let folder: GuildFolder
     @State private var hovered = false
@@ -54,13 +57,14 @@ struct ServerFolder: View {
 
                 VStack {
                     Button("") {
-                        open.toggle()
+                        withAnimation(.interactiveSpring()) { open.toggle() }
                         if open {
                             UserDefaults.standard.setValue(true, forKey: "folders.\(folder.id).open")
                         } else {
                             UserDefaults.standard.removeObject(forKey: "folders.\(folder.id).open")
                         }
-                    }.onAppear {
+                    }
+                    .onAppear {
                         open = UserDefaults.standard.bool(forKey: "folders.\(folder.id).open")
                     }
                     .buttonStyle(
@@ -81,7 +85,7 @@ struct ServerFolder: View {
                     }
 
                     if open {
-                        ForEach(folder.guilds) { [self] guild in
+                        ForEach(folder.guilds, id: \.id) { [self] guild in
                             ServerButton(
                                 selected: selectedGuildID == guild.id || loadingGuildID == guild.id,
                                 name: guild.name,
@@ -90,7 +94,7 @@ struct ServerFolder: View {
                             ) {
                                 selectedGuildID = guild.id
                             }
-                            .transition(.identity) // Prevent server buttons from "fading in" during transition
+                            .transition(.move(edge: .top).combined(with: .opacity)) // Prevent server buttons from "fading in" during transition
                         }
                     }
                 }
@@ -121,33 +125,31 @@ struct ServerFolderButtonStyle: ButtonStyle {
     let open: Bool
     let color: Color
     let guilds: [Guild]
-    var filledGuilds: [Guild?] {
-        guilds + [Guild?](repeating: nil, count: 4 - guilds.count)
-    }
     @Binding var hovered: Bool
 
     func makeBody(configuration: Configuration) -> some View {
         ZStack {
             if open {
                 Image(systemName: "folder.fill")
-                    .font(.system(size: 16))
+                    .font(.system(size: 18))
                     .foregroundColor(color)
-                    .transition(.asymmetric(insertion: .move(edge: .top), removal: .move(edge: .bottom)))
+                    .transition(.move(edge: .top).combined(with: .opacity))
             } else {
-                LazyVGrid(columns: [
-                    GridItem(.fixed(16), spacing: 4),
-                    GridItem(.fixed(16), spacing: 4)
-                ], spacing: 4) {
-                    ForEach(filledGuilds, id: \.?.id) { guild in
-                        if let guild = guild {
-                            MiniServerThumb(guild: guild, animate: hovered)
-                        } else {
-                            Circle().fill(.clear)
-                        }
+                LazyVGrid(
+                    columns: [
+                        GridItem(.fixed(16), spacing: 4),
+                        GridItem(.fixed(16), spacing: 4)
+                    ],
+                    spacing: 4
+                ) {
+                    ForEach(guilds, id: \.id) { guild in
+                        MiniServerThumb(guild: guild, animate: hovered)
                     }
                 }
                 .foregroundColor(hovered ? .white : Color(nsColor: .labelColor))
-                .transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .top)))
+                .transition(.move(edge: .bottom).combined(with: .opacity))
+                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+                .padding(6)
             }
         }
         .frame(width: 48, height: 48)
@@ -164,7 +166,6 @@ struct ServerFolderButtonStyle: ButtonStyle {
         .animation(.none, value: configuration.isPressed)
         .animation(.interpolatingSpring(stiffness: 500, damping: 30), value: hovered)
         .onHover { hover in hovered = hover }
-        .animation(.linear(duration: 0.1), value: open)
     }
 }