fix: side filter

Author: diyor28

components/scaffold/filters/filters.templ

@@ -125,7 +125,10 @@ templ (t *TableFilter) Component() {
 			},
 		}) {
 			for _, opt := range t.options {
-				<option value={ opt.Value }>
+				<option
+					selected?={ isOptionChecked(ctx, t.Name, opt) }
+					value={ opt.Value }
+				>
 					{ opt.Label }
 				</option>
 			}

components/scaffold/filters/filters_templ.go

@@ -6,6 +6,8 @@ package scaffold
 
 import (
 	"fmt"
+	"time"
+
 	icons "github.com/iota-uz/icons/phosphor"
 	"github.com/iota-uz/iota-sdk/components/base"
 	"github.com/iota-uz/iota-sdk/components/base/button"
@@ -14,9 +16,9 @@ import (
 	"github.com/iota-uz/iota-sdk/components/loaders"
 	"github.com/iota-uz/iota-sdk/modules/core/presentation/templates/layouts"
 	"github.com/iota-uz/iota-sdk/pkg/composables"
-	"time"
 )
 
+// DateTime renders a timestamp with Alpine-based relative formatting
 templ DateTime(ts time.Time) {
 	<div x-data="relativeformat">
 		<span x-text={ fmt.Sprintf(`format('%s')`, ts.Format(time.RFC3339)) }>
@@ -30,17 +32,13 @@ templ Rows(config *TableConfig) {
 	<tr class="hidden">
 		<td colspan={ fmt.Sprintf("%d", len(config.Columns)) }>
 			@loaders.Spinner(loaders.SpinnerProps{
-				ContainerClass: templ.Classes(
-					"flex justify-center items-center py-4",
-				),
+				ContainerClass: templ.Classes("flex justify-center items-center py-4"),
 			})
 		</td>
 	</tr>
 	for _, item := range config.Rows {
 		@base.TableRow(base.TableRowProps{
-			Attrs: templ.Attributes{
-				"class": "hide-on-load",
-			},
+			Attrs: templ.Attributes{"class": "hide-on-load"},
 		}) {
 			for _, cell := range item.Cells() {
 				@base.TableCell(base.TableCellProps{}) {
@@ -71,40 +69,54 @@ templ Table(config *TableConfig) {
 	}
 }
 
-// TableContent renders the table with search and filters
-templ TableContent(config *TableConfig) {
+// TableSection combines filters and table into one form to enable unified HTMX update
+templ TableSection(config *TableConfig) {
 	{{ pageCtx := composables.UsePageCtx(ctx) }}
-	<div class="bg-surface-600 border border-primary rounded-lg">
-		<form
-			class="p-4 flex items-center gap-3"
-			hx-get={ config.DataURL }
-			hx-push-url="true"
-			hx-trigger="keyup changed delay:300ms from:(form input), change changed from:(form select), change from:(form input[type='checkbox'])"
-			hx-target="#table-body"
-			hx-swap="innerHTML"
-			hx-indicator="#table-body"
-		>
-			<input type="hidden" name="page" value="1"/>
-			<div class="flex-1">
-				@input.Text(&input.Props{
-					AddonLeft: &input.Addon{
-						Component: icons.MagnifyingGlass(icons.Props{Size: "20"}),
-					},
-					Placeholder: pageCtx.T("Search"),
-					Attrs: templ.Attributes{
-						"name":  "search",
-						"value": "",
-					},
-				})
+	<form
+		hx-get={ config.DataURL }
+		hx-push-url="true"
+		hx-trigger="keyup changed delay:300ms from:(form input), change from:(form select), change from:(form input[type='checkbox'])"
+		hx-target="#table-body"
+		hx-swap="innerHTML"
+		hx-indicator="#table-body"
+		class="flex flex-col md:flex-row gap-5"
+		x-data="checkboxes"
+		x-init="init"
+	>
+		<!-- Left sidebar with filters -->
+		if config.SideFilter != nil {
+			<div class="hidden md:block w-64 flex-shrink-0">
+				<div class="bg-surface-600 border border-primary rounded-lg p-4 mb-4">
+					@config.SideFilter
+				</div>
 			</div>
-			<div class="hidden md:flex gap-3 h-full">
-				for _, filter := range config.Filters {
-					@filter
-				}
+		}
+		<!-- Main content area with search, filters, and table -->
+		<div class="flex-1">
+			<div class="bg-surface-600 border border-primary rounded-lg">
+				<div class="p-4 flex flex-col md:flex-row md:items-center gap-3">
+					<div class="flex-1">
+						@input.Text(&input.Props{
+							AddonLeft: &input.Addon{
+								Component: icons.MagnifyingGlass(icons.Props{Size: "20"}),
+							},
+							Placeholder: pageCtx.T("Search"),
+							Attrs: templ.Attributes{
+								"name":  "search",
+								"value": "",
+							},
+						})
+					</div>
+					<div class="hidden md:flex gap-3 h-full">
+						for _, filter := range config.Filters {
+							@filter
+						}
+					</div>
+				</div>
+				@Table(config)
 			</div>
-		</form>
-		@Table(config)
-	</div>
+		</div>
+	</form>
 }
 
 // Content renders the complete scaffold page content with filters and table
@@ -135,35 +147,9 @@ templ Content(config *TableConfig) {
 				})
 			</div>
 		</div>
-		if config.SideFilter != nil {
-			<div class="mt-5 flex gap-5">
-				<!-- Left sidebar with filters -->
-				<div class="hidden md:block w-64 flex-shrink-0">
-					<div class="bg-surface-600 border border-primary rounded-lg p-4 mb-4">
-						<form
-							hx-get={ config.DataURL }
-							hx-target="#table-body"
-							hx-swap="innerHTML"
-							hx-push-url="true"
-							hx-indicator="#table-body"
-							hx-trigger="change"
-							x-data="checkboxes"
-							x-init="init"
-						>
-							@config.SideFilter
-						</form>
-					</div>
-				</div>
-				<!-- Main content area with table -->
-				<div class="flex-1">
-					@TableContent(config)
-				</div>
-			</div>
-		} else {
-			<div class="mt-5">
-				@TableContent(config)
-			</div>
-		}
+		<div class="mt-5">
+			@TableSection(config)
+		</div>
 	</div>
 }
 
@@ -176,6 +162,7 @@ templ Page(config *TableConfig) {
 	}
 }
 
+// Helper to convert scaffold columns to base table columns
 func toBaseTableColumns(columns []TableColumn) []*base.TableColumn {
 	result := make([]*base.TableColumn, len(columns))
 	for i, col := range columns {