app_for_reddit/Reddit App/Views/Components/ModernSidebarIconView.swift

import SwiftUI

struct ModernSidebarIconView: View {
    let kind: SidebarIconKind
    var size: CGFloat = AppTheme.iconContainerSize

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(
                    LinearGradient(
                        colors: [
                            kind.gradient[0].opacity(0.22),
                            kind.gradient[1].opacity(0.08),
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )

            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(
                    LinearGradient(
                        colors: [.white.opacity(0.14), .clear],
                        startPoint: .top,
                        endPoint: .center
                    )
                )

            Image(systemName: kind.systemImage)
                .font(.system(size: size * 0.4, weight: .semibold))
                .foregroundStyle(
                    LinearGradient(
                        colors: kind.gradient,
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .shadow(color: kind.glowColor.opacity(0.35), radius: 3, y: 1)
        }
        .frame(width: size, height: size)
        .compositingGroup()
        .overlay {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .stroke(
                    LinearGradient(
                        colors: [
                            kind.gradient[0].opacity(0.45),
                            kind.gradient[1].opacity(0.15),
                            .white.opacity(0.06),
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    lineWidth: 1
                )
        }
        .shadow(color: kind.glowColor.opacity(0.15), radius: 4, y: 1)
    }
}

struct ModernRedditIconView: View {
    var size: CGFloat = AppTheme.iconContainerSize

    private let gradient: [Color] = [
        Color(hex: 0xFF8C42),
        Color(hex: 0xFF4500),
    ]

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(
                    LinearGradient(
                        colors: [
                            gradient[0].opacity(0.22),
                            gradient[1].opacity(0.08),
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )

            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .fill(
                    LinearGradient(
                        colors: [.white.opacity(0.14), .clear],
                        startPoint: .top,
                        endPoint: .center
                    )
                )

            RedditLogoView(size: size * 0.5)
        }
        .frame(width: size, height: size)
        .compositingGroup()
        .overlay {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .stroke(
                    LinearGradient(
                        colors: [
                            gradient[0].opacity(0.5),
                            gradient[1].opacity(0.2),
                            .white.opacity(0.06),
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    lineWidth: 1
                )
        }
        .shadow(color: gradient[1].opacity(0.18), radius: 4, y: 1)
    }
}