Better array UI (skip object level)

BlazorOpenApi/Controls/ComponentsControl.razor

@@ -7,7 +7,7 @@
             @foreach (var (name, val) in Value.Schemas)
             {
                 <h4>@name</h4>
-                <SchemaControl Value="@val"/>
+                <SchemaControl Value="@val" Collapsed="false"/>
             }
         </TocMember>
     }

BlazorOpenApi/Controls/SchemaChildControl.razor

@@ -5,9 +5,24 @@
             @if (Value.Type == "array")
             {
                 <Expander HeaderClass="s-type" Class="s-bg-odd" Title="@ArrayText" Collapsed="@Collapsed">
-                    <div class="s-nested">
-                        <SchemaControl Value="@Value.Items" />
-                    </div>
+                    @if (Value.Items?.Type == "object" && SchemaControl.Resolve(Value.Items, Api)?.Properties != null)
+                    {
+                        @* Skip one level *@
+                        <div class="s-props s-nested">
+                            <table class="schema">
+                                @foreach (var p in SchemaControl.Resolve(Value.Items, Api)!.Properties)
+                                {
+                                    <SchemaChildControl Value="@p.Value" Title="@p.Key" Required="@IsRequired(p.Key)" />
+                                }
+                            </table>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="s-nested">
+                            <SchemaControl Value="@Value.Items" />
+                        </div>
+                    }
                 </Expander>
             }
             else if (Value.Type == "object")
@@ -55,6 +70,8 @@
 }
 
 @code {
+    [CascadingParameter]
+    public OpenApiDocument? Api { get; set; }
     [Parameter]
     public OpenApiSchema? Value { get; set; }
     [Parameter]
@@ -73,11 +90,15 @@
             if (Value?.Type != "array")
                 return "";
 
+            string arrayType = Value.Items?.Type ?? "";
+            if ( Value.Items?.Type != "array" && Value.Items?.Type != "object")
+                arrayType = Value.Items?.Type ?? "array";
+
             var nullable = Value.Nullable ? "?" : "";
 
             if (Value.MinItems != null || Value.MaxItems != null)
-                return $"array{nullable} [{(Value.MinItems == null ? "" : Value.MinItems.Value)}..{(Value.MaxItems == null ? "" : Value.MaxItems.Value)}]";
-            return $"array{nullable} []";
+                return $"{arrayType}{nullable} [{(Value.MinItems == null ? "" : Value.MinItems.Value)}..{(Value.MaxItems == null ? "" : Value.MaxItems.Value)}]";
+            return $"{arrayType}{nullable} []";
         }
     }
 

BlazorOpenApi/Controls/SchemaControl.razor

@@ -19,15 +19,17 @@
     [CascadingParameter]
     public OpenApiDocument? Api { get; set; }
 
-    private OpenApiSchema? ResolvedValue
+    private OpenApiSchema? ResolvedValue => Resolve(Value, Api) ?? Value;
+
+    public static OpenApiSchema? Resolve(OpenApiSchema? schema, OpenApiDocument? api)
     {
-        get
+        if (schema == null)
+            return null;
+        if (schema.Reference != null && api != null)
         {
-            if (Api == null || Value?.Reference == null )
-                return Value;
-            if (!Api.Components.Schemas.TryGetValue(Value.Reference.Id, out var resolved))
-                return Value;
-            return resolved;
+            if (api.Components.Schemas.TryGetValue(schema.Reference.Id, out var resolved))
+                return resolved;
         }
+        return schema;
     }
 }

BlazorOpenApi/wwwroot/css/openapi-ui.css

@@ -162,7 +162,7 @@
     height: fit-content;
     width: fit-content;
     margin-right: 5px;
-    border-radius: 5px;
+    border-radius: 3px;
     margin-top: 3px;
     padding-left: 3px;
     padding-right: 3px;
@@ -314,16 +314,30 @@
 
 .openapi-ui h1 {
     margin-top: 24px;
+    border-left-width: 5px;
+    border-color: var(--oa-bg-7);
+    padding-left: 5px;
+    margin-bottom: 3px;
 }
 
 .openapi-ui h2 {
     margin-top: 18px;
+    margin-bottom: 3px;
+    color: var(--oa-fg-7);
+    border-bottom-width: 4px;
+    border-color: var(--oa-bg-7);
 }
 .openapi-ui h3 {
     margin-top: 12px;
+    margin-bottom: 3px;
+    border-bottom-width: 1px;
+    border-color: var(--oa-bg-7);
 }
 .openapi-ui h4 {
     margin-top: 8px;
+    margin-bottom: 3px;
+    border-bottom-width: 1px;
+    border-color: var(--oa-bg-1);
 }
 
 .openapi-ui .tooltip {