ListView

@* Each contact links to this page with ?contact=, and the one in the address is current: a list
   beside its details that works in every mode, with no script. (A link's address is resolved
   against the page's <base href>, so it's built whole, not as a bare "?contact=".) *@
@inject NavigationManager Navigation
<ListView Items="_people" ItemKey="p => p.Id" ItemText="p => p.Name" ItemDescription="p => p.Email"
          ItemIcon="_ => Lucide.CircleUser" ItemHref="@(p => Navigation.GetUriWithQueryParameter("contact", p.Id))" ItemCurrent="p => p.Id == Contact"
          Bordered MaxWidth="24.Rem" />

@code {
    [SupplyParameterFromQuery] private string? Contact { get; set; }

    private readonly Person[] _people =
    [
        new("ada", "Ada Lovelace", "ada@example.com"),
        new("grace", "Grace Hopper", "grace@example.com"),
        new("alan", "Alan Turing", "alan@example.com"),
        new("katherine", "Katherine Johnson", "katherine@example.com"),
    ];
}

@* Selection in a form: each checked item posts its ItemKey, so Archive works with JavaScript off.
   With script, "Select all messages" above the list checks the page. Archived messages leave the
   list; on static pages hidden fields carry them to the next post. *@
<form method="post" @onsubmit="Submit" @formname="list-view-archive" style="width: 100%">
    <AntiforgeryToken />
    @foreach (var id in _archived)
    {
        <input type="hidden" name="archived" value="@id" />
    }
    <Stack Gap="3" MaxWidth="28.Rem">
        <ListView Items="Inbox" ItemKey="m => m.Id" ItemText="m => m.Subject" ItemDescription="m => m.From"
                  SelectionMode="SelectionMode.Multiple" SelectAllLabel="Select all messages" @bind-Selection="_selected" EmptyText="Nothing left in the inbox." Bordered />
        <Row Gap="3" Align="Align.Center" Wrap>
            <Button Submit Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Archive" Disabled="Inbox.Count == 0">Archive selected</Button>
            @if (_archived.Count > 0)
            {
                <Button Submit Name="restore" Value="all" OnClick="() => _restoring = true" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral">Restore all</Button>
            }
            <TextBlock Size="TextSize.Sm" Color="Color.Muted" role="status">@_status</TextBlock>
        </Row>
    </Stack>
</form>

@code {
    // Static pages: the checked items post as "selected", and the ones archived before as "archived".
    [SupplyParameterFromForm(FormName = "list-view-archive", Name = "selected")]
    private Selection? Posted { get; set; }

    [SupplyParameterFromForm(FormName = "list-view-archive", Name = "archived")]
    private string[]? PostedArchived { get; set; }

    [SupplyParameterFromForm(FormName = "list-view-archive", Name = "restore")]
    private string? PostedRestore { get; set; }

    // Interactive pages: bound to the checkboxes; Restore all says it was pressed.
    private Selection? _selected;
    private bool _restoring;
    private HashSet<string> _archived = [];
    private string? _status;

    private readonly Message[] _messages =
    [
        new("1", "Quarterly report draft", "Grace Hopper"),
        new("2", "Lunch on Friday?", "Alan Turing"),
        new("3", "Build failed on main", "CI"),
        new("4", "Invoice #1042", "Billing"),
    ];

    private List<Message> Inbox => _messages.Where(m => !_archived.Contains(m.Id)).ToList();

    protected override void OnInitialized()
    {
        _archived = [.. PostedArchived ?? []];
        _selected = Posted;
    }

    private void Submit()
    {
        if (PostedRestore is not null || _restoring)
        {
            _restoring = false;
            _archived.Clear();
            _status = "Restored every message.";
        }
        else
        {
            var picked = (Posted ?? _selected ?? Selection.None).Apply(Inbox.AsQueryable(), m => m.Id).ToList();
            _archived.UnionWith(picked.Select(m => m.Id));
            _status = picked.Count switch
            {
                0 => "Select the messages to archive first.",
                1 => $"Archived \"{picked[0].Subject}\".",
                _ => $"Archived {picked.Count} messages.",
            };
        }

        _selected = Selection.None;
    }
}

@* Each button posts its Name=Value with the form, so the actions work with JavaScript off;
   OnClick says which it was on interactive pages, where nothing posts. A file shared with you
   has no Delete, so its menu is shorter. *@
<form method="post" @onsubmit="Act" @formname="list-view-files" style="width: 100%">
    <AntiforgeryToken />
    <Stack Gap="3" MaxWidth="32.Rem">
        <ListView Items="_files" ItemKey="f => f.Id" ItemText="f => f.Name" ItemDescription="f => f.Detail" ItemIcon="_ => Lucide.FileText" Bordered Context="file">
            <ItemActions>
                @if (file.Shared)
                {
                    <Badge>Shared</Badge>
                }
                <IconButton Icon="Lucide.Star" Label="@($"Star {file.Name}")" Submit Name="intent" Value="@($"star:{file.Id}")"
                            OnClick="@(() => _clicked = $"star:{file.Id}")" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" Size="ControlSize.Sm" />
            </ItemActions>
            <ItemMenu>
                <MenuItem Submit Name="intent" Value="@($"download:{file.Id}")" OnClick="@(() => _clicked = $"download:{file.Id}")" Icon="Lucide.Download">Download</MenuItem>
                <MenuItem Submit Name="intent" Value="@($"archive:{file.Id}")" OnClick="@(() => _clicked = $"archive:{file.Id}")" Icon="Lucide.Archive">Archive</MenuItem>
                @if (!file.Shared)
                {
                    <MenuDivider />
                    <MenuItem Submit Name="intent" Value="@($"delete:{file.Id}")" OnClick="@(() => _clicked = $"delete:{file.Id}")" Icon="Lucide.Trash" Accent="Accent.Danger">Delete</MenuItem>
                }
            </ItemMenu>
        </ListView>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted" role="status">@_done</TextBlock>
    </Stack>
</form>

@code {
    // Static pages: the pressed button's Name=Value posts with the form.
    [SupplyParameterFromForm(FormName = "list-view-files", Name = "intent")]
    private string? Posted { get; set; }

    // Interactive pages post nothing, so OnClick says which button it was.
    private string? _clicked;
    private string? _done;

    private readonly FileEntry[] _files =
    [
        new("1", "Quarterly report.pdf", "2.4 MB, edited today"),
        new("2", "Brand guidelines.pdf", "8.1 MB, shared by Grace", Shared: true),
        new("3", "Budget 2027.xlsx", "640 KB, edited Monday"),
    ];

    private void Act()
    {
        var (verb, id) = (Posted ?? _clicked)?.Split(':', 2) is [var v, var i] ? (v, i) : (null, null);
        _clicked = null;
        var done = verb switch { "star" => "Starred", "download" => "Downloaded", "archive" => "Archived", "delete" => "Deleted", _ => null };
        if (done is not null && _files.FirstOrDefault(f => f.Id == id) is { } file)
        {
            _done = $"{done} {file.Name}.";
        }
    }
}

@* Columns lays the items out as cards, three across from 640px up and one on phones. Each card
   links to this page with ?product=, and the chosen one is current. *@
@inject NavigationManager Navigation
<ListView Items="_products" ItemKey="p => p.Sku" ItemLabel="p => p.Name" ItemHref="@(p => Navigation.GetUriWithQueryParameter("product", p.Sku))"
          ItemCurrent="p => p.Sku == Product" Columns="3" Context="product">
    <Stack Gap="1">
        <Row Justify="Justify.Between" Align="Align.Center">
            <Heading Level="3" Size="TextSize.Md">@product.Name</Heading>
            @if (product.New)
            {
                <Badge Accent="Accent.Primary">New</Badge>
            }
        </Row>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">@product.Description</TextBlock>
        <TextBlock Weight="FontWeight.Semibold">@product.Price.ToString("C", System.Globalization.CultureInfo.GetCultureInfo("en-US"))</TextBlock>
    </Stack>
</ListView>

@code {
    [SupplyParameterFromQuery] private string? Product { get; set; }

    private readonly Item[] _products =
    [
        new("desk", "Standing desk", "Oak top, quiet motor, three memory positions.", 549m, New: true),
        new("chair", "Task chair", "Mesh back with adjustable lumbar support.", 329m),
        new("lamp", "Desk lamp", "Warm to cool light, dims to 5%.", 79m),
        new("arm", "Monitor arm", "Holds screens up to 32 inches.", 119m),
        new("mat", "Standing mat", "Cushioned, with beveled edges.", 59m, New: true),
        new("shelf", "Wall shelf", "Floating, holds 20 kg.", 89m),
    ];
}

@* PageSize with Paging="DataPaging.LoadMore": the first page, and a button after it that adds
   the next, scrolling with the items in a box as tall as MaxHeight. On static pages and with
   JavaScript off, the button is a link to the same list with one more page. *@
<ListView Items="_events" ItemKey="e => e.Id" ItemText="e => e.Title" ItemDescription="e => e.When"
          ItemIcon="_ => Lucide.Bell" PageSize="4" Paging="DataPaging.LoadMore" QueryPrefix="events-"
          MaxHeight="16.Rem" Bordered AriaLabel="Notifications" MaxWidth="28.Rem" Grow />

@code {
    private readonly Event[] _events = Enumerable.Range(1, 11)
        .Select(i => new Event(i.ToString(System.Globalization.CultureInfo.InvariantCulture), $"Notification {i}", $"{i * 7} minutes ago"))
        .ToArray();
}

@* PageSize with Paging="DataPaging.LoadOnScroll" and a MaxHeight: the next page loads as the
   last item scrolls into view, on interactive pages. *@
<ListView Items="_messages" ItemKey="m => m.Id" ItemText="m => m.Title" ItemDescription="m => m.When"
          ItemIcon="_ => Lucide.MessageSquare" PageSize="8" Paging="DataPaging.LoadOnScroll" QueryPrefix="feed-"
          MaxHeight="18.Rem" Bordered AriaLabel="Messages" MaxWidth="28.Rem" Grow />

@code {
    private readonly Message[] _messages = Enumerable.Range(1, 40)
        .Select(i => new Message(i.ToString(System.Globalization.CultureInfo.InvariantCulture), $"Message {i}", $"{i * 3} minutes ago"))
        .ToArray();
}

@* On a static page the list posts with its form: Order holds the posted keys and any menu move,
   and the list shows them. Save arranges the steps when the form's own button posted. *@
<Stack Gap="3" MaxWidth="24.Rem" Grow>
    <Form Model="this" FormName="list-view-steps" OnValidSubmit="Save">
        <ListView @bind-Items="_steps" ItemKey="s => s.Id" ItemText="s => s.Title" Reorderable Name="order" Order="Order" Bordered />
        <FormActions><Button Submit>Save order</Button></FormActions>
    </Form>
    @if (_saved is not null)
    {
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">@_saved</TextBlock>
    }
</Stack>

@code {
    [SupplyParameterFromForm(FormName = "list-view-steps", Name = "order")]
    private ListOrder? Order { get; set; }

    private IReadOnlyList<Step> _steps = [new("1", "Draft"), new("2", "Review"), new("3", "Approve"), new("4", "Publish")];
    private string? _saved;

    private void Save()
    {
        // A menu move posts too; only the Save button saves.
        if (Order?.Move is not null)
        {
            return;
        }

        if (Order is not null)
        {
            _steps = Order.Arrange(_steps, s => s.Id);
        }

        _saved = $"Saved: {string.Join(", ", _steps.Select(s => s.Title))}.";
    }
}

@* DragWholeItem: each card drags from anywhere on it, with a mouse after a small move and on touch
   after a long press, so a swipe still scrolls. With an ItemMenu there are no handles: each card's
   ⋯ menu ends with Move, a submenu of Move up, Move down, Move to top and Move to bottom. Open stands in for
   a link to the tile's report: here it names the tile under the list. *@
@inject NavigationManager Navigation
<Stack Gap="3" Grow>
    <Form Model="this" FormName="list-view-tiles" OnValidSubmit="Save">
        <ListView @bind-Items="_tiles" ItemKey="t => t.Id" ItemLabel="t => t.Title" Reorderable DragWholeItem Name="tiles" Order="Order"
                  Columns="3" Bordered Context="tile">
            <ChildContent>
                <Stack Gap="1">
                    <Heading Level="3" Size="TextSize.Md">@tile.Title</Heading>
                    <TextBlock Size="TextSize.Sm" Color="Color.Muted">@tile.Description</TextBlock>
                </Stack>
            </ChildContent>
            <ItemMenu>
                <MenuItem Href="@Navigation.GetUriWithQueryParameter("tile", tile.Id)" Icon="Lucide.ExternalLink">Open</MenuItem>
            </ItemMenu>
        </ListView>
        <FormActions><Button Submit>Save layout</Button></FormActions>
    </Form>
    @if (Opened is not null && _tiles.FirstOrDefault(t => t.Id == Opened) is { } open)
    {
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">Opened: @open.Title.</TextBlock>
    }
    @if (_saved is not null)
    {
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">@_saved</TextBlock>
    }
</Stack>

@code {
    [SupplyParameterFromQuery(Name = "tile")] private string? Opened { get; set; }

    [SupplyParameterFromForm(FormName = "list-view-tiles", Name = "tiles")]
    private ListOrder? Order { get; set; }

    private IReadOnlyList<Tile> _tiles =
    [
        new("sales", "Sales", "Revenue this month against last."),
        new("orders", "Orders", "Open, shipped and returned."),
        new("traffic", "Traffic", "Visitors by source."),
        new("stock", "Stock", "Items running low."),
        new("support", "Support", "Tickets waiting for a reply."),
        new("team", "Team", "Who's in today."),
    ];
    private string? _saved;

    private void Save()
    {
        // A menu move posts too; only the Save button saves.
        if (Order?.Move is not null)
        {
            return;
        }

        if (Order is not null)
        {
            _tiles = Order.Arrange(_tiles, t => t.Id);
        }

        _saved = $"Saved: {string.Join(", ", _tiles.Select(t => t.Title))}.";
    }
}