Taske.UI/Components/Layout/MainLayout.razor

@inherits LayoutComponentBase
@using Tasks.Module.Services
@using Tasks.Module.Models
@using Tasks.Module.Components.Dialogs
@inject IViewService ViewService
@inject IDialogService DialogService

<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1">
        <MudText Typo="Typo.h5">Taske</MudText>
        <MudSpacer />
    </MudAppBar>
    <MudDrawer Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2" Width="300px" Anchor="Anchor.Start" Variant="DrawerVariant.Persistent">
        <MudStack Orientation="Orientation.Vertical" Spacing="0" Style="height: 100%;">
            @* My Tasks Section *@
            <div class="pa-2">
                <MudLink Href="/tasks" Underline="Underline.None" Class="d-flex align-center pa-2 rounded">
                    <MudIcon Icon="@Icons.Material.Filled.CheckCircle" Color="Color.Primary" Class="mr-2" />
                    <MudText Typo="Typo.body1" Color="Color.Default">My Tasks</MudText>
                </MudLink>
            </div>
            
            <div style="height: 1px; background-color: var(--mud-palette-lines-default); margin: 0 8px;"></div>
            
            @* Categories Section *@
            <div class="pa-2">
                <div class="d-flex align-center justify-space-between px-2 py-1">
                    <MudLink Href="/tasks/categories" Underline="Underline.None" Class="flex-grow-1">
                        <MudText Typo="Typo.caption" Color="Color.Default">CATEGORIES</MudText>
                    </MudLink>
                </div>
            </div>
            
            <div style="height: 1px; background-color: var(--mud-palette-lines-default); margin: 0 8px;"></div>
            
            @* Tags Section *@
            <div class="pa-2">
                <div class="d-flex align-center justify-space-between px-2 py-1">
                    <MudLink Href="/tasks/tags" Underline="Underline.None" Class="flex-grow-1">
                        <MudText Typo="Typo.caption" Color="Color.Default">TAGS</MudText>
                    </MudLink>
                </div>
            </div>
            
            <div style="height: 1px; background-color: var(--mud-palette-lines-default); margin: 0 8px;"></div>
            
            @* Views Section *@
            <div class="pa-2">
                <div class="d-flex align-center justify-space-between px-2 py-1">
                    <MudText Typo="Typo.caption" Color="Color.Default">VIEWS</MudText>
                    <MudIconButton Icon="@Icons.Material.Filled.Add" Size="Size.Small" Color="Color.Inherit" OnClick="CreateView" ToolTip="Create View" />
                </div>
                @if (_loadingViews)
                {
                    <MudProgressLinear Indeterminate="true" Class="my-2" />
                }
                else
                {
                    @foreach (var view in _views)
                    {
                        <MudLink Href="@($"/tasks/view/{view.Id}")" Underline="Underline.None" Class="d-flex align-center pa-2 rounded">
                            <MudIcon Icon="@Icons.Material.Filled.ViewKanban" Color="Color.Default" Class="mr-2" Size="Size.Small" />
                            <MudText Typo="Typo.body2" Color="Color.Default">@view.Name</MudText>
                        </MudLink>
                    }
                }
            </div>
            
            <div style="height: 1px; background-color: var(--mud-palette-lines-default); margin: 0 8px;"></div>
            
            @* Files Section *@
            <div style="flex: 1; overflow-y: auto; min-height: 0;">
                <FolderSidebar />
            </div>
        </MudStack>
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-4">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

<style>
    .mud-link:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
</style>

@code {
    private bool _drawerOpen = true;
    private List<TaskViewDto> _views = new();
    private bool _loadingViews = true;

    protected override async Task OnInitializedAsync()
    {
        await LoadViews();
    }

    private async Task LoadViews()
    {
        _loadingViews = true;
        try
        {
            _views = await ViewService.GetAllViewsAsync();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error loading views: {ex.Message}");
        }
        finally
        {
            _loadingViews = false;
        }
    }

    private async Task CreateView()
    {
        var parameters = new DialogParameters<CreateViewDialog>();
        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
        var dialog = await DialogService.ShowAsync<CreateViewDialog>("Create View", parameters, options);
        var result = await dialog.Result;

        if (result is { Canceled: false } && result.Data is CreateTaskViewDto createDto)
        {
            try
            {
                var newView = await ViewService.CreateViewAsync(createDto);
                _views.Add(newView);
                StateHasChanged();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error creating view: {ex.Message}");
            }
        }
    }
}