Save

2022-02-14 01:51:52 +01:00 · 2022-02-14 01:51:52 +01:00 · 5cba76554a
commit 5cba76554a
parent ba4a4b14c8
84 changed files with 18148 additions and 11553 deletions
--- a/.gitignore
+++ b/.gitignore
@ -360,4 +360,6 @@ MigrationBackup/
 .ionide/

 # Fody - auto-generated XML schema
-FodyWeavers.xsd
+FodyWeavers.xsd
+/.idea/.idea.decePubClient/.idea
+/.idea/config
--- a/App.razor
+++ b/App.razor
@ -1,12 +1,27 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
+<CascadingState>
+	<CascadingAuthenticationState>
+		<Router AppAssembly="@typeof(App).Assembly">
+			<Found Context="routeData">
+				<AuthorizeRouteView DefaultLayout="@typeof(MainLayout)" RouteData="@routeData">
+					<NotAuthorized>
+						@if (context.User.Identity?.IsAuthenticated != true)
+						{
+							<RedirectToLogin/>
+						}
+						else
+						{
+							<p role="alert">You are not authorized to access this resource.</p>
+						}
+					</NotAuthorized>
+				</AuthorizeRouteView>
+				<FocusOnNavigate RouteData="@routeData" Selector="section"/>
+			</Found>
+			<NotFound>
+				<Title>Not found</Title>
+				<LayoutView Layout="@typeof(MainLayout)">
+					<p role="alert">Sorry, there's nothing at this address.</p>
+				</LayoutView>
+			</NotFound>
+		</Router>
+	</CascadingAuthenticationState>
+</CascadingState>
--- a/Components/ActionBar.razor
+++ b/Components/ActionBar.razor
@ -1,5 +1,106 @@
-<h3>ActionBar</h3>
+<section class="flex flex-col space-y-4">
+
+	@if (isPosting)
+	{
+		<div class="block p-3 md:p-4 neomorph rounded-xl is-nxsmall">
+			<MessageUpsertForm OnMessageSubmit="OnMessageSubmit" />
+		</div>
+	}
+
+	<div class="flex justify-between space-x-3">
+
+		<EditForm Model="Filters">
+			<div class="field flex flex-row space-x-3">
+				@if (OnTimelineChanged.HasDelegate)
+				{
+					<div class="control has-icons-left">
+						<span class="icon is-left">
+							<i class="@Filters.TimelineType.GetTimelineTypeIcon()"></i>
+						</span>
+						<span class="select is-rounded neoSelect">
+							<InputSelect TValue="TimelineType" Value="Filters.TimelineType"
+												 ValueChanged="async v => await OnTimelineChange(v)" ValueExpression="() => Filters.TimelineType">
+								@foreach (var timelineType in Enum.GetValues<TimelineType>())
+								{
+									<option value="@timelineType">@CascadingState.Localizer[timelineType.ToString()]</option>
+								}
+							</InputSelect>
+						</span>
+					</div>
+				}
+				@if (OnTimeSortingChanged.HasDelegate)
+				{
+					<div class="control has-icons-left">
+						<span class="icon is-left">
+							<i class="ion-md-funnel"></i>
+						</span>
+						<span class="select is-rounded neoSelect">
+							<InputSelect TValue="TimeSortingType" Value="Filters.TimeSortingType"
+												 ValueChanged="async v => await OnTimeSortChange(v)" ValueExpression="() => Filters.TimeSortingType">
+								@foreach (var timeSortingType in Enum.GetValues<TimeSortingType>())
+								{
+									<option value="@timeSortingType">@CascadingState.Localizer[timeSortingType.ToString()]</option>
+								}
+							</InputSelect>
+						</span>
+					</div>
+				}
+			</div>
+		</EditForm>
+
+		@if (OnMessageSubmit.HasDelegate)
+		{
+			<div>
+				<button class="button is-rounded @SUtility.IfTrueThen(isPosting, "neoBtnInsetPlain", "neoBtn")"
+							@onclick="OpenCloseMessageForm">
+					<span class="icon is-left">
+						<i class="ion-md-create"></i>
+					</span>
+					<span>@CascadingState.Localizer["Post"]</span>
+				</button>
+			</div>
+		}
+		else
+		{
+			<div></div>
+		}
+
+	</div>
+
+</section>

@code {
-	
+	[CascadingParameter] CascadingState CascadingState { get; set; }
+	[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
+	[Parameter] public EventCallback<TimelineType> OnTimelineChanged { get; set; }
+	[Parameter] public EventCallback<TimeSortingType> OnTimeSortingChanged { get; set; }
+	[Inject] ILocalStorageService LocalStorage { get; set; }
+	bool isPosting { get; set; } = false;
+	ActionBarFilter Filters { get; set; } = new();
+
+	protected override async Task OnInitializedAsync()
+	{
+		var filters = await LocalStorage.GetItemAsync<ActionBarFilter>(nameof(ActionBarFilter));
+		if (filters == default)
+			await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
+		else
+			Filters = filters;
+	}
+
+	void OpenCloseMessageForm()
+	{
+		isPosting = !isPosting;
+	}
+	async Task OnTimelineChange(TimelineType timelineType)
+	{
+		Filters.TimelineType = timelineType;
+		await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
+		await OnTimelineChanged.InvokeAsync(Filters.TimelineType);
+	}
+	async Task OnTimeSortChange(TimeSortingType timeSorting)
+	{
+		Filters.TimeSortingType = timeSorting;
+		await LocalStorage.SetItemAsync(nameof(ActionBarFilter), Filters);
+		await OnTimeSortingChanged.InvokeAsync(Filters.TimeSortingType);
+	}
 }
--- a/Components/Content.razor
+++ b/Components/Content.razor
@ -0,0 +1,248 @@
+<div class="flex space-x-3 w-full neomorph is-nxxsmall rounded-xl @CssContainer">
+
+	<div class="flex flex-col py-3 pl-3 md:py-4 md:pl-4 flex-none rounded-l-xl bg-cover bg-no-repeat bg-center"
+			 style="background-image:linear-gradient(to left, var(--background), transparent), url('@(Message.User?.BackgroundUrl)');">
+
+		<a class="block h-12 w-12 md:h-16 md:w-16" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
+			<img alt="@Message.User.UserName" class="h-12 w-12 md:h-16 md:w-16 object-cover rounded-full neomorph is-nxxsmall" src="@(Message.User.PictureUrl ?? "/imgs/icon-192.png")" />
+		</a>
+
+	</div>
+
+	<div class="flex flex-col space-y-3 flex-1 py-3 pr-3 md:py-4 md:pr-4 min-w-0">
+
+		<div class="flex flex-col space-y-1 flex-1 min-w-0">
+			<p class="inline-flex flex-1 space-x-2 min-w-0 justify-between text-xs md:text-sm">
+				<span class="inline-flex space-x-2 min-w-0">
+					<b class="shrink truncate max-w-[80%]" title="@Message.User.DisplayName">
+						@Message.User.DisplayName
+					</b>
+					<a class="underline flex-1 min-w-6 opacity-50 truncate self-center text-xs" href="@Message.User.ProfileUrl" title="@Message.User.UserName">
+						@Message.User.UserName
+					</a>
+				</span>
+				<span class="flex-none inline-flex space-x-1 items-center">
+					<span title="@Message.CreatedAt.ToLocalTime().ToString("📅dd/MM/yy 🕒HH:mm")">
+						@Message.CreatedAt.GetPassedTime(CascadingState.Localizer)
+					</span>
+					<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-md"
+						 title="@CascadingState.Localizer[Message.MessageType.ToString()]">
+					</i>
+				</span>
+			</p>
+			@if (Message.Title is { Length: > 0 })
+			{
+				<p class="text-sm md:text-base font-bold break-all">@Message.Title</p>
+			}
+
+			@if (Message.Content is { Length: > 0 })
+			{
+				<div class="text-sm md:text-base break-all">
+					@((MarkupString)Message.Content)
+				</div>
+			}
+
+			@if (Message.Medias.Count != 0)
+			{
+				<div class="grid gap-4 auto-cols-auto grid-rows-1 grid-flow-col-dense">
+					@foreach (var media in Message.Medias)
+					{
+						if (media.ContentType.StartsWith("image"))
+						{
+							<a class="w-auto" href="@media.Url">
+								<img alt="@media.AltText" class="w-full rounded-lg @SUtility.IfTrueThen(Message.Medias.Count > 1, "max-h-[30vh]")" src="@media.Url" title="@media.AltText">
+							</a>
+						}
+						else if (media.ContentType.StartsWith("video"))
+						{
+							<video class="w-full max-h-[50vh] aspect-video rounded-lg mx-auto neomorphInset is-nxxsmall" controls="controls" playsinline="playsinline" preload="metadata" title="@media.FileName">
+								<source src="@media.Url" type="@media.ContentType" />
+							</video>
+						}
+						else if (media.ContentType.StartsWith("audio"))
+						{
+							<audio class="w-full max-h-8" controls="controls" preload="metadata" title="@media.FileName">
+								<source src="@media.Url" type="@media.ContentType" />
+							</audio>
+						}
+						else
+						{
+							<div class="flex items-center space-x-3 align-center rounded-lg p-3 md:p-4 neomorph is-nxxsmall">
+								<span>
+									<i class="text-2xl ion-md-document"></i>
+								</span>
+								<div class="flex flex-col w-full space-y-1">
+									<p class="text-xs md:text-sm break-all">
+										<b>@media.FileName</b>
+									</p>
+									<p class="text-xs break-all">
+										<i class="ion-md-code"></i> @media.ContentType
+									</p>
+								</div>
+								<button class="button is-small is-rounded neoBtnSmall" @onclick="async () => await OnMessageMediaDownload.InvokeAsync(media)" type="button">
+									<span class="icon">
+										<i class="ion-md-download text-base"></i>
+									</span>
+								</button>
+							</div>
+						}
+					}
+				</div>
+			}
+
+		</div>
+
+		<div class="flex space-x-3 mt-3 justify-between">
+			<div class="flex space-x-3">
+				@if (OnMessageReply.HasDelegate)
+				{
+					<button class="button is-small is-rounded @(isAnswering ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="Reply"
+								title="@CascadingState.Localizer[isAnswering ? "Close" : "Reply"]">
+						<span class="icon">
+							<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg has-text-success"></i>
+						</span>
+					</button>
+				}
+				@if (OnMessageBoost.HasDelegate)
+				{
+					<button class="button is-small is-rounded @(Message.IsBoosted ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="() => OnMessageBoost.InvokeAsync(Message)"
+								title="@CascadingState.Localizer["Boost"]">
+						<span class="icon">
+							<i aria-hidden="true" class="ion-md-repeat text-lg has-text-info"></i>
+						</span>
+					</button>
+				}
+				@if (OnMessageFavourite.HasDelegate)
+				{
+					<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsFavourite, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => OnMessageFavourite.InvokeAsync(Message)"
+								title="@CascadingState.Localizer["Favourite"]">
+						<span class="icon">
+							<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
+						</span>
+					</button>
+				}
+			</div>
+
+			<div class="flex space-x-3">
+				<DropdownButton IsOpen="Message.IsOptionsOpen">
+					<DropdownTrigger>
+						<button class="button is-small is-rounded neoBtnSmall" @onclick="() => Message.IsOptionsOpen = !Message.IsOptionsOpen"
+										title="@CascadingState.Localizer["Other"]">
+							<span class="icon">
+								<i aria-hidden="true" class="ion-md-more text-lg"></i>
+							</span>
+						</button>
+					</DropdownTrigger>
+					<DropdownContent>
+						@if (OnUserDirectMessage.HasDelegate)
+						{
+							<div class="dropdown-item">
+								<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserDirectMessage.InvokeAsync(Message)">
+									<span class="icon is-left">
+										<i aria-hidden="true" class="ion-md-paper-plane text-base has-text-success"></i>
+									</span>
+									<span>@CascadingState.Localizer["Direct message"]</span>
+								</button>
+							</div>
+						}
+						@if (OnUserSilence.HasDelegate)
+						{
+							<div class="dropdown-item">
+								<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserSilence.InvokeAsync(Message.User)">
+									<span class="icon is-left">
+										<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow has-text-warning"></i>
+									</span>
+									<span>@CascadingState.Localizer["Mute"]</span>
+								</button>
+							</div>
+						}
+						@if (OnUserBlock.HasDelegate)
+						{
+							<div class="dropdown-item">
+								<button class="button is-small is-rounded has-icons-left neoBtnSmall" @onclick="() => OnUserBlock.InvokeAsync(Message.User)">
+									<span class="icon is-left">
+										<i aria-hidden="true" class="ion-md-remove-circle text-base has-text-danger"></i>
+									</span>
+									<span>@CascadingState.Localizer["Block"]</span>
+								</button>
+							</div>
+						}
+						@if (@*Message.User.UserName == CurrentUserName &&*@ OnMessageDelete.HasDelegate)
+						{
+							<div class="dropdown-item">
+								<button class="button is-small has-icons-left is-rounded neoBtnSmall" @onclick="DeleteMessage"
+											title="@CascadingState.Localizer["Delete"]">
+									<span class="icon is-left">
+										<i aria-hidden="true" class="ion-md-trash text-lg has-text-danger"></i>
+									</span>
+									<span>@CascadingState.Localizer["Delete"]</span>
+								</button>
+							</div>
+						}
+					</DropdownContent>
+				</DropdownButton>
+				@if (IncludeExpand)
+				{
+					<NavLink class="button is-small is-rounded neoBtnSmall" href="@($"expand/{Message.MessageId}")"
+								 title="@CascadingState.Localizer["Expand"]">
+						<span class="icon">
+							<i aria-hidden="true" class="ion-md-expand text-lg"></i>
+						</span>
+					</NavLink>
+				}
+			</div>
+		</div>
+
+		@if (isAnswering)
+		{
+			<MessageUpsertForm AnsweringMessage="Message" OnMessageSubmit="SubmitReply"></MessageUpsertForm>
+		}
+	</div>
+
+</div>
+
+@code {
+	[CascadingParameter] Task<AuthenticationState> AuthState { get; set; }
+	[CascadingParameter] CascadingState CascadingState { get; set; }
+	[Parameter] public Message Message { get; set; } = new();
+	[Parameter] public EventCallback<MessageForm> OnMessageReply { get; set; }
+	[Parameter] public EventCallback<Message> OnMessageBoost { get; set; }
+	[Parameter] public EventCallback<Message> OnMessageFavourite { get; set; }
+	[Parameter] public EventCallback<Message> OnMessageDelete { get; set; }
+	[Parameter] public EventCallback<Message> OnUserDirectMessage { get; set; }
+	[Parameter] public EventCallback<Media> OnMessageMediaDownload { get; set; }
+	[Parameter] public EventCallback<MessageUser> OnUserBlock { get; set; }
+	[Parameter] public EventCallback<MessageUser> OnUserSilence { get; set; }
+	[Parameter] public string CssContainer { get; set; }
+	[Parameter] public bool IncludeExpand { get; set; } = true;
+
+	bool isAnswering { get; set; } = false;
+
+	string CurrentUserName
+	{
+		get
+		{
+			return AuthState.Result.User.Identity?.Name;
+		}
+	}
+
+	async Task DeleteMessage()
+	{
+		isAnswering = false;
+		await OnMessageDelete.InvokeAsync(Message);
+	}
+
+	async Task SubmitReply(MessageForm messageForm)
+	{
+		isAnswering = false;
+		await OnMessageReply.InvokeAsync(messageForm);
+	}
+
+	async Task Reply()
+	{
+		await Task.Run(() =>
+		{
+		});
+		isAnswering = !isAnswering;
+	}
+}
--- a/Components/LoadingData.razor
+++ b/Components/LoadingData.razor
@ -0,0 +1,13 @@
+<p class="w-full loadAnimation text-center">
+	<span>.</span>
+	<span>.</span>
+	<span>.</span>
+	@CascadingState.Localizer["loading"]
+	<span>.</span>
+	<span>.</span>
+	<span>.</span>
+</p>
+
+@code {
+	[CascadingParameter] CascadingState CascadingState { get; set; }
+}
--- a/Components/MessageUpsertForm.razor
+++ b/Components/MessageUpsertForm.razor
@ -1,7 +1,430 @@
-<EditForm Model="">
-	
+<EditForm Model="MessageForm" OnValidSubmit="OnValidSubmit">
+	<DataAnnotationsValidator />
+
+	<div class="field mb-3">
+		<div class="control">
+			<InputText class="input rounded-t-[1.4rem] rounded-b-lg neoInput" maxlength="64"
+								 placeholder="@CascadingState.Localizer["Title (optional)"]" Value="@MessageForm.Title"
+								 ValueChanged="(v) => OnTitleChanged(v)"
+								 ValueExpression="() => MessageForm.Title" />
+		</div>
+		<div class="control relative mt-1">
+			<textarea @bind="@MessageForm.Content" @bind:event="oninput"
+								class="textarea rounded-b-[1.4rem] rounded-t-lg neoInput"
+								maxlength="5000"
+								placeholder="@CascadingState.Localizer["oh shit... here we go again"]" rows="3"></textarea>
+			<span class="absolute text-xs opacity-50 right-2 bottom-1">@(MessageForm.Content?.Length ?? 0)/5000</span>
+		</div>
+		@if (showPreviewButton && isPreviewOpen && MessageForm.Content is { Length: > 0 })
+		{
+			<div class="control relative mt-1 px-8">
+				<div class="neomorphInset rounded-t-lg rounded-b-[1.4rem] px-2 py-1 md:px-3 md:py-2 text-xs md:text-sm">
+					@switch (MessageForm.ContentType)
+					{
+						case ContentType.Markdown:
+							@((MarkupString)Markdown.ToHtml(MessageForm.Content))
+							break;
+						case ContentType.HTML:
+							<p>@((MarkupString)MessageForm.Content)</p>
+							break;
+					}
+				</div>
+			</div>
+		}
+		<div class="help is-danger">
+			<ValidationMessage For="() => MessageForm.Content" />
+			@contentError
+		</div>
+	</div>
+
+	<div class="flex flex-col space-y-3 mb-3 @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "hidden")">
+		@foreach (var media in MessageForm.Media)
+		{
+			switch (MessageForm.MediaType)
+			{
+				case MediaType.Images:
+					<div class="flex w-full items-center space-x-3 rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
+						<img alt="@media.AltText" class="object-cover rounded-lg neomorph is-nxxsmall max-h-24 md:max-h-40 max-w-[6rem] md:max-w-[12rem]" src="@media.Base64Preview" />
+						<div class="flex w-full self-start flex-col justify-between space-y-2">
+							<div class="flex w-full space-x-3">
+								<div class="flex-1">
+									<p class="text-xs md:text-sm break-all">
+										<i class="ion-md-image"></i> <b>@media.FileName</b>
+									</p>
+									<p class="text-xs break-all">
+										<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
+									</p>
+								</div>
+								<button class="button is-small is-rounded self-start neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
+									<span class="icon">
+										<i class="ion-md-trash text-base text-red-400"></i>
+									</span>
+								</button>
+							</div>
+							<div class="field w-full">
+								<div class="control w-full">
+									<InputTextArea @bind-Value="media.AltText" class="textarea w-full is-small !rounded-lg neoInput"
+													 placeholder="@CascadingState.Localizer["Alternative text"]" rows="1" />
+								</div>
+							</div>
+						</div>
+					</div>
+					break;
+				case MediaType.Video:
+				case MediaType.Documents:
+					<div class="flex items-center space-x-3 align-center rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
+						<span>
+							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
+						</span>
+						<div class="flex flex-col w-full space-y-1">
+							<p class="text-xs md:text-sm break-all">
+								<b>@media.FileName</b>
+							</p>
+							<p class="text-xs break-all">
+								<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
+							</p>
+						</div>
+						<button class="button is-small is-rounded neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
+							<span class="icon">
+								<i class="ion-md-trash text-base text-red-400"></i>
+							</span>
+						</button>
+					</div>
+					break;
+				case MediaType.Audio:
+					<div class="flex items-center space-x-3 align-center rounded-xl p-3 md:p-4 neomorph is-nxxsmall">
+						<span>
+							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
+						</span>
+						<div class="flex flex-col w-full space-y-1">
+							<p class="text-xs md:text-sm break-all">
+								<b>@media.FileName</b>
+							</p>
+							<p class="text-xs break-all">
+								<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(CascadingState.Localizer)
+							</p>
+							<audio controls="controls" class="w-full max-h-8">
+								<source src="@media.Base64Preview" type="@media.ContentType">
+							</audio>
+						</div>
+						<button class="button is-small is-rounded neoBtnSmall" @onclick="() => RemoveFile(media)" type="button">
+							<span class="icon">
+								<i class="ion-md-trash text-base text-red-400"></i>
+							</span>
+						</button>
+					</div>
+					break;
+			}
+		}
+
+	</div>
+
+	@if (fileInputErrorMessage is { Length: > 0 })
+	{
+		<div class="help is-danger p-1 md:p-2 mb-3 rounded-xl neomorphInset is-nxxsmall">
+			@((MarkupString)fileInputErrorMessage)
+		</div>
+	}
+
+	<div class="flex justify-between space-x-3 h-[30px]">
+		<div class="flex space-x-3">
+			<DropdownButton CssDirection="is-left" IsOpen="MessageForm.IsScopeOptionsOpen">
+				<DropdownTrigger>
+					<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.IsScopeOptionsOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OpenCloseMessageType"
+									title="@string.Format(CascadingState.Localizer["Message scope type: {0}"], CascadingState.Localizer[MessageType.Direct.ToString()])" type="button">
+						<span class="icon">
+							<i class="@MessageForm.MessageType.GetMessageTypeIcon() text-base"></i>
+						</span>
+					</button>
+				</DropdownTrigger>
+				<DropdownContent>
+					<div class="flex space-x-3 px-2">
+						<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Direct, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Direct)"
+										title="@CascadingState.Localizer[MessageType.Direct.ToString()]" type="button">
+							<span class="icon">
+								<i class="ion-md-paper-plane text-base"></i>
+							</span>
+						</button>
+						<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.FollowersOnly, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.FollowersOnly)"
+										title="@CascadingState.Localizer[MessageType.FollowersOnly.ToString()]" type="button">
+							<span class="icon">
+								<i class="ion-md-lock text-base"></i>
+							</span>
+						</button>
+						<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Unlisted, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Unlisted)"
+										title="@CascadingState.Localizer[MessageType.Unlisted.ToString()]" type="button">
+							<span class="icon">
+								<i class="ion-md-unlock text-base"></i>
+							</span>
+						</button>
+						<button class="button is-small is-rounded @SUtility.IfTrueThen(MessageForm.MessageType is MessageType.Public, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => UpdateMessageType(MessageType.Public)"
+										title="@CascadingState.Localizer[MessageType.Public.ToString()]" type="button">
+							<span class="icon">
+								<i class="ion-md-globe text-base"></i>
+							</span>
+						</button>
+					</div>
+				</DropdownContent>
+			</DropdownButton>
+
+			<div class="file is-small">
+				<label class="file-label overflow-visible rounded-full neoBtnSmall h-[30px]">
+					<InputFile accept="@acceptedFilesTypes" class="file-input" multiple="@ShouldHaveMultipleUpload()" OnChange="OnFileChange" disabled="@ShouldDisableUpload()" />
+					<span class="file-cta">
+						<span class="file-icon @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "mr-0")">
+							<i class="ion-md-attach text-base"></i>
+						</span>
+						@if (MessageForm.Media.Count != 0)
+						{
+							<span class="file-label">+@MessageForm.Media.Count</span>
+						}
+					</span>
+				</label>
+			</div>
+
+			<div class="field">
+				<div class="control has-icons-left">
+					<div class="select is-small is-rounded neoSelect">
+						<InputSelect TValue="MediaType" Value="MessageForm.MediaType" ValueChanged="v => OnMediaTypeChanged(v)" ValueExpression="() => MessageForm.MediaType" disabled="@(MessageForm.Media.Count > 0)">
+							@foreach (var mediaType in Enum.GetValues<MediaType>())
+							{
+								<option value="@mediaType">@CascadingState.Localizer[mediaType.ToString()]</option>
+							}
+						</InputSelect>
+					</div>
+					<span class="icon is-small is-left">
+						<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
+					</span>
+				</div>
+			</div>
+
+			<div class="field">
+				<div class="control has-icons-left">
+					<div class="select is-small is-rounded neoSelect">
+						<InputSelect TValue="ContentType" Value="MessageForm.ContentType" ValueChanged="v => OnContentTypeChanged(v)" ValueExpression="() => MessageForm.ContentType">
+							@foreach (var contentType in Enum.GetValues<ContentType>())
+							{
+								<option value="@contentType">@CascadingState.Localizer[contentType.ToString()]</option>
+							}
+						</InputSelect>
+					</div>
+					<span class="icon is-small is-left">
+						<i class="@MessageForm.ContentType.GetContentTypeIcon()"></i>
+					</span>
+					<div class="help is-danger">
+						<ValidationMessage For="() => MessageForm.ContentType" />
+					</div>
+				</div>
+			</div>
+
+			@if (showPreviewButton)
+			{
+				<button class="button is-small is-rounded @SUtility.IfTrueThen(isPreviewOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OnOpenClosePreview"
+							title="@CascadingState.Localizer["Show preview"]" type="button">
+					<span class="icon">
+						<i class="@SUtility.IfTrueThen(isPreviewOpen, "ion-md-eye-off", "ion-md-eye") text-base"></i>
+					</span>
+				</button>
+			}
+
+		</div>
+
+		<div class="flex space-x-3">
+
+			<button class="button is-small is-rounded has-icons-right neoBtnSmall" type="submit">
+				<span>@CascadingState.Localizer["Post"]</span>
+				<span class="icon is-right">
+					<i class="ion-md-send"></i>
+				</span>
+			</button>
+
+		</div>
+
+	</div>
+
 </EditForm>

@code {
-	
+	[CascadingParameter] CascadingState CascadingState { get; set; }
+	[Parameter] public Message AnsweringMessage { get; set; }
+	[Parameter] public EventCallback<MessageForm> OnMessageSubmit { get; set; }
+	MessageForm MessageForm { get; set; } = new();
+	int totalCharacters { get; set; } = 0;
+	string fileInputErrorMessage { get; set; }
+	string contentError { get; set; }
+	string acceptedFilesTypes { get; set; } = ".jpg,.jpeg,.png,.gif";
+	bool showPreviewButton { get; set; } = false;
+	bool isPreviewOpen { get; set; } = false;
+
+	void OpenCloseMessageType()
+	{
+		MessageForm.IsScopeOptionsOpen = !MessageForm.IsScopeOptionsOpen;
+	}
+
+	void UpdateMessageType(MessageType messageType)
+	{
+		MessageForm.MessageType = messageType;
+		MessageForm.IsScopeOptionsOpen = false;
+	}
+
+	protected override void OnInitialized()
+	{
+		if (AnsweringMessage != default)
+		{
+			MessageForm.Title = AnsweringMessage.Title;
+			MessageForm.RootMessageId = AnsweringMessage.RootMessageId ?? AnsweringMessage.MessageId;
+		}
+	}
+
+	bool ShouldDisableUpload()
+	{
+		switch (MessageForm.MediaType)
+		{
+			case MediaType.Images:
+				return MessageForm.Media.Count == 5;
+			case MediaType.Video:
+			case MediaType.Audio:
+				return MessageForm.Media.Count == 1;
+			case MediaType.Documents:
+				return MessageForm.Media.Count == 3;
+			default:
+				return true;
+		}
+	}
+
+	bool ShouldHaveMultipleUpload()
+	{
+		return MessageForm.MediaType is MediaType.Images or MediaType.Documents;
+	}
+
+	async Task OnFileChange(InputFileChangeEventArgs eventArgs)
+	{
+		try
+		{
+			fileInputErrorMessage = string.Empty;
+			var maximumFileCount = MessageForm.MediaType switch
+			{
+				MediaType.Images => 5,
+				MediaType.Audio => 1,
+				MediaType.Video => 1,
+				MediaType.Documents => 3
+			};
+			if (eventArgs.FileCount > maximumFileCount)
+			{
+				fileInputErrorMessage = string.Format(CascadingState.Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, eventArgs.FileCount);
+				return;
+			}
+			if (eventArgs.FileCount + MessageForm.Media.Count > maximumFileCount)
+			{
+				fileInputErrorMessage = string.Format(CascadingState.Localizer["The maximum number of files accepted is {0}, but {1} were supplied."], maximumFileCount, $"{MessageForm.Media.Count}+{eventArgs.FileCount}");
+				return;
+			}
+			var maxAllowedSize = MessageForm.MediaType switch
+			{
+				MediaType.Images => 3_145_728,
+				MediaType.Audio => 5_242_880,
+				MediaType.Video => 20_971_520,
+				MediaType.Documents => 3_145_728
+			};
+			var uploadMedia = default(UploadMedia);
+			using (var memStream = new MemoryStream())
+				foreach (var file in eventArgs.GetMultipleFiles(maximumFileCount))
+				{
+					if (file.Name == default || file.ContentType == default) continue;
+					if (MessageForm.Media.Any(m => m.FileName == file.Name)) continue;
+					if (file.Size > maxAllowedSize)
+					{
+						fileInputErrorMessage += string.Format(CascadingState.Localizer["Supplied file \"{0}\" with size {1:N0}MBs exceeds the maximum of {2:N0}MBs."], file.Name, file.Size / 1_048_576, maxAllowedSize / 1_048_576) + "<br/>";
+						continue;
+					}
+
+					uploadMedia = new()
+						{
+							FileName = file.Name,
+							ContentType = file.ContentType,
+							Size = file.Size
+						};
+					try
+					{
+						using (var imgStream = file.OpenReadStream(maxAllowedSize))
+						{
+							await imgStream.CopyToAsync(memStream);
+							memStream.Position = 0;
+							uploadMedia.Blob = memStream.ToArray();
+							await memStream.FlushAsync();
+						}
+					}
+					catch (IOException e)
+					{
+						fileInputErrorMessage = e.Message;
+						continue;
+					}
+					catch (Exception e)
+					{
+						fileInputErrorMessage = e.Message;
+						continue;
+					}
+					if (MessageForm.MediaType is MediaType.Images or MediaType.Audio)
+						uploadMedia.Base64Preview = $"data:{uploadMedia.ContentType};base64,{Convert.ToBase64String(uploadMedia.Blob)}";
+
+					MessageForm.Media.Add(uploadMedia);
+				}
+		}
+		catch (Exception e)
+		{
+			fileInputErrorMessage = e.Message;
+		}
+	}
+
+	void RemoveFile(UploadMedia media)
+	{
+		MessageForm.Media.Remove(media);
+	}
+
+	void OnTitleChanged(string value)
+	{
+		MessageForm.Title = value;
+	}
+
+	void ContentLengthChanged()
+	{
+		totalCharacters = MessageForm.Content?.Length ?? 0;
+		StateHasChanged();
+	}
+
+	void OnContentTypeChanged(ContentType contentType)
+	{
+		MessageForm.ContentType = contentType;
+		showPreviewButton = contentType is ContentType.Markdown or ContentType.HTML;
+	}
+
+	void OnMediaTypeChanged(MediaType mediaType)
+	{
+		MessageForm.MediaType = mediaType;
+		acceptedFilesTypes = mediaType switch
+		{
+			MediaType.Images => ".jpg,.jpeg,.png,.gif",
+			MediaType.Video => ".webm,.mp4,.m4v",
+			MediaType.Audio => ".mp3,.wav,.flac,.m4a",
+			MediaType.Documents => ".xlsx,.csv,.ppt,.odt",
+			_ => default
+		};
+	}
+
+	void OnOpenClosePreview()
+	{
+		isPreviewOpen = !isPreviewOpen;
+	}
+
+	async Task OnValidSubmit()
+	{
+		contentError = default;
+		if ((MessageForm.Content is { Length: 0 } && MessageForm.Media.Count == 0))
+		{
+			contentError = CascadingState.Localizer["Missing content, either message or media"];
+			return;
+		}
+
+		await OnMessageSubmit.InvokeAsync(MessageForm);
+	}
 }
--- a/Components/OpenDownContainer.razor
+++ b/Components/OpenDownContainer.razor
@ -0,0 +1,36 @@
+<div class="flex flex-col w-full space-y-4">
+
+	<div class="flex w-full justify-between items-center py-2 md:py-3 px-3 md:px-4 space-x-2 rounded-lg neomorph is-nxsmall">
+		@TitleChildren
+		<button class="button is-rounded is-small @ButtonCss"
+						@onclick:preventDefault @onclick="OpenCloseInnerContent" disabled="@(!HasInnerContent)">
+			<span class="icon">
+				<i aria-hidden="true" class="@LeftIconCss"></i>
+			</span>
+		</button>
+	</div>
+
+	<div class="@InnerContentContainerCss @Hidden">
+		@InnerContent
+	</div>
+
+</div>
+
+@code {
+	[Parameter] public RenderFragment TitleChildren { get; set; }
+	[Parameter] public RenderFragment InnerContent { get; set; }
+	[Parameter] public bool HasInnerContent { get; set; } = true;
+	[Parameter] public string InnerContentContainerCss { get; set; } = "block w-auto ml-5 md:ml-10 rounded-lg neomorph is-nxsmall";
+
+	[Parameter]
+	public bool IsOpen { get; set; } = false;
+	string Hidden { get; set; } = VConstants.HideClass;
+	string ButtonCss => $"{(HasInnerContent ? default : "cursor-not-allowed")} neoBtnSmall";
+	string LeftIconCss => IsOpen ? "ion-md-arrow-dropup" : "ion-md-arrow-dropdown";
+
+	void OpenCloseInnerContent()
+	{
+		IsOpen = !IsOpen;
+		Hidden = IsOpen ? default : VConstants.HideClass;
+	}
+}
--- a/Extensions/GenericExtensions.cs
+++ b/Extensions/GenericExtensions.cs
@ -1,6 +1,187 @@
-namespace decePubClient.Extensions;
+using System.Collections.Specialized;
+using System.ComponentModel;
+using System.Globalization;
+using System.Reflection;
+using System.Web;

-public class GenericExtensions
+using Blazored.LocalStorage;
+
+using decePubClient.Models;
+using decePubClient.Models.Types;
+using decePubClient.Resources;
+using decePubClient.Services;
+
+using DnetIndexedDb;
+using DnetIndexedDb.Fluent;
+using DnetIndexedDb.Models;
+
+using Markdig;
+
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.Localization;
+
+namespace decePubClient.Extensions;
+
+public static class GenericExtensions
 {
-	
+	public static NameValueCollection QueryString(this NavigationManager navigationManager) =>
+		HttpUtility.ParseQueryString(new Uri(navigationManager.Uri).Query);
+
+	public static string QueryString(this NavigationManager navigationManager, string key) =>
+		navigationManager.QueryString()[key];
+
+	public static T QueryString<T>(this NavigationManager navigationManager, string key)
+	{
+		var value = navigationManager.QueryString()[key];
+		var converter = TypeDescriptor.GetConverter(typeof(T));
+		if (converter.IsValid(value))
+			return (T)Convert.ChangeType(value, typeof(T));
+		else
+			return default;
+	}
+
+	public static async Task SetDefaultCulture(this WebAssemblyHost host)
+	{
+		var storage = host.Services.GetRequiredService<ILocalStorageService>();
+		var language = await storage.GetItemAsync<string>("languageCode");
+		if (language is { Length: 0 })
+			await storage.SetItemAsync("languageCode", language);
+
+		var culture = new CultureInfo(language ??= "en-GB");
+		CultureInfo.DefaultThreadCurrentCulture = culture;
+		CultureInfo.DefaultThreadCurrentUICulture = culture;
+	}
+
+	public static IServiceCollection AddIndexedDb(this IServiceCollection services)
+	{
+		return services.AddIndexedDbDatabase<IndexedDb>(options =>
+		{
+			var model = new IndexedDbDatabaseModel()
+				.WithName("data")
+				.WithVersion(1)
+				.WithModelId(1);
+
+			model.AddStore(nameof(Message))
+				.WithKey(nameof(Message.MessageId))
+				.AddUniqueIndex(nameof(Message.MessageId))
+				.AddIndex(nameof(Message.RootMessageId))
+				.AddIndex(nameof(Message.User))
+				.AddIndex(nameof(Message.MessageType))
+				.AddIndex(nameof(Message.Title))
+				.AddIndex(nameof(Message.Content))
+				.AddIndex(nameof(Message.CreatedAt))
+				.AddIndex(nameof(Message.Medias));
+
+			options.UseDatabase(model);
+		});
+	}
+
+	public static string GetPassedTime(this DateTime dateTime, IStringLocalizer<AllStrings> localizer)
+	{
+		var timeframe = DateTime.Now - dateTime.ToLocalTime();
+		switch ((int)timeframe.TotalHours)
+		{
+			case >= 24:
+				return string.Format(localizer["{0}d"], (int)timeframe.TotalDays);
+			case >= 1 and < 24:
+				return string.Format(localizer["{0}h"], (int)timeframe.TotalHours);
+			case 0:
+				return string.Format(localizer["{0}m"], (int)timeframe.TotalMinutes);
+			default:
+				return default;
+		}
+	}
+
+	public static string GetFileSize(this long size, IStringLocalizer<AllStrings> localizer)
+	{
+		switch (size)
+		{
+			case >= 1_048_576:
+				return string.Format(localizer["{0:N0}MB"], size / 1_048_576);
+			case < 1_048_576:
+				return string.Format(localizer["{0}KB"], size / 1_024);
+			default:
+				return default;
+		}
+	}
+
+	public static string ParseContent(this string content, ContentType contentType)
+	{
+		switch (contentType)
+		{
+			case ContentType.PlainText:
+				return content;
+			case ContentType.HTML:
+				return ((MarkupString)content).Value;
+			case ContentType.Markdown:
+				return Markdown.ToHtml(content);
+			default:
+				return default;
+		}
+	}
+
+	public static string GetMessageTypeIcon(this MessageType messageType)
+	{
+		switch (messageType)
+		{
+			case MessageType.Public:
+				return "ion-md-globe";
+			case MessageType.Unlisted:
+				return "ion-md-unlock";
+			case MessageType.FollowersOnly:
+				return "ion-md-lock";
+			case MessageType.Direct:
+				return "ion-md-paper-plane";
+			default:
+				return default;
+		}
+	}
+
+	public static string GetTimelineTypeIcon(this TimelineType timelineType)
+	{
+		switch (timelineType)
+		{
+			case TimelineType.Home:
+				return "ion-md-home";
+			case TimelineType.Local:
+				return "ion-md-people";
+			case TimelineType.Federation:
+				return "ion-md-globe";
+			default:
+				return default;
+		}
+	}
+
+	public static string GetContentTypeIcon(this ContentType contentType)
+	{
+		switch (contentType)
+		{
+			case ContentType.PlainText:
+				return "ion-md-quote";
+			case ContentType.HTML:
+				return "ion-logo-html5";
+			case ContentType.Markdown:
+				return "ion-logo-markdown";
+			default:
+				return default;
+		}
+	}
+
+	public static string GetMediaTypeIcon(this MediaType mediaType)
+	{
+		switch (mediaType)
+		{
+			case MediaType.Images:
+				return "ion-md-images";
+			case MediaType.Video:
+				return "ion-md-videocam";
+			case MediaType.Documents:
+				return "ion-md-document";
+			case MediaType.Audio:
+				return "ion-md-volume-high";
+			default:
+				return default;
+		}
+	}
 }
--- a/Helpers/Faker.cs
+++ b/Helpers/Faker.cs
@ -1 +1,34 @@
-
+using decePubClient.Models;
+
+namespace decePubClient.Helpers;
+
+public static class Faker
+{
+	static IReadOnlyList<MessageUser> Users => new List<MessageUser>
+	{
+		new(),
+		new()
+		{
+			UserId = "7b5703dc-aee8-46b1-aed2-cd06021a1c0c",
+			DisplayName = "loweel",
+			UserName = "@loweel@bbs.keinpfusch.net",
+			PictureUrl = "https://bbs.keinpfusch.net/media/4729611f9aaef76399600ba2f117e5da609e5bf46dd7d502dae3e7b9fdc5cc78.WBMX2L9V1D00",
+			BackgroundUrl = "https://bbs.keinpfusch.net/media/6e283b943ca297629cb35b7fdfc790907dfd24b6303518e10992b2b5a6658947.3EUB6O4OMR2X",
+			ProfileUrl = "https://letsrulethe.world/users/AG6rE2nRya826QEJFY"
+		},
+		new()
+		{
+			UserId = "bc9c2a2b-fc5f-42fc-b907-ac30203eed45",
+			DisplayName = "Valentina Nappi",
+			UserName = "@valentina.nappi@mastodon.uno",
+			PictureUrl = "https://cdn.masto.host/mastodonuno/cache/accounts/avatars/106/816/797/491/758/442/original/2b2995b82af966fb.jpg",
+			BackgroundUrl = "https://cdn.masto.host/mastodonuno/cache/accounts/headers/106/816/797/491/758/442/original/898aedf6cd3a2da3.jpeg",
+			ProfileUrl = "https://mastodon.uno/web/@valenappi@beta.birdsite.live"
+		}
+	};
+
+	public static MessageUser GetRandomUser()
+	{
+		return Users[Random.Shared.Next(0, Users.Count)];
+	}
+}
--- a/Helpers/SUtility.cs
+++ b/Helpers/SUtility.cs
@ -1,10 +1,6 @@
-using collAnon.Shared;
-using System;
-using System.IO;
-using System.Net.Mail;
-using System.Text.Json;
+using System.Net.Mail;

-namespace collAnon.Client.Helpers
+namespace decePubClient.Helpers
 {
 	public static class SUtility
 	{
@ -27,12 +23,6 @@ namespace collAnon.Client.Helpers
 			return !(end < now && now < start);
 		}

-		public static bool CacheHasExpired(long? lastTimeCacheTimeTicks)
-		{
-			if (!lastTimeCacheTimeTicks.HasValue) return true;
-			return (DateTime.Now.Ticks - lastTimeCacheTimeTicks.Value) > VConstants.CacheExpirationPeriod.Ticks;
-		}
-
 		public static string GetFileIcon(string fileName)
 		{
 			switch (Path.GetExtension(fileName))
@ -62,21 +52,6 @@ namespace collAnon.Client.Helpers
 			}
 		}

-		public static string GetMissingMimeType(string fileName)
-		{
-			switch (Path.GetExtension(fileName))
-			{
-				case ".docx":
-					return "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
-
-				case ".xlsx":
-					return "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-
-				default:
-					return string.Empty;
-			}
-		}
-
 		public static bool IsValidEmail(string email)
 		{
 			try
@ -89,18 +64,5 @@ namespace collAnon.Client.Helpers
 				return false;
 			}
 		}
-
-		public static string GetQrCodeBase64(string base64String) => $"data:image/png;base64,{base64String}";
-
-		public static int GetRand()
-		{
-			var random = new Random(DateTime.Now.Millisecond);
-			return random.Next(0, random.Next(10, 1000));
-		}
-
-		public static T Deserialize<T>(string value)
-		{
-			return JsonSerializer.Deserialize<T>(value, new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });
-		}
 	}
 }
--- a/LayerComponents/CascadingState.razor
+++ b/LayerComponents/CascadingState.razor
@ -1,5 +1,179 @@
-<h3>CascadingState</h3>
+@if (PublicCacheData != null)
+{
+	if (PublicCacheData.ThemeIsDarkMode)
+	{
+		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},16%,12%)")" Name="theme-color"/>
+		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},16%,12%)")" Name="background-color"/>
+	}
+	else
+	{
+		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},84%,88%)")" Name="theme-color"/>
+		<Meta Content="@($"hsl({PublicCacheData.ThemeIndexColour},84%,88%)")" Name="background-color"/>
+	}
+}
+<style>
+	:root {
+	@if (PublicCacheData != null)
+	{@if (PublicCacheData.ThemeIsDarkMode)
+	{
+		@($@"--background: hsl({PublicCacheData.ThemeIndexColour},16%,12%); 
+--text-color: hsl({PublicCacheData.ThemeIndexColour},16%,73.6%); 
+--placeholder-text-color: hsla({PublicCacheData.ThemeIndexColour},84%,52.8%,.3); 
+--primary-color: hsl({PublicCacheData.ThemeIndexColour},16%,12%); 
+--primary-color-light: hsl({PublicCacheData.ThemeIndexColour},84%,100%); 
+--primary-color-dark: hsl({PublicCacheData.ThemeIndexColour},16%,33%); 
+--primary-gradiend-light: hsl({PublicCacheData.ThemeIndexColour},16%,16%); 
+--primary-gradiend-dark: hsl({PublicCacheData.ThemeIndexColour},16%,8%); 
+--primary-gradiend-lighter: hsl({PublicCacheData.ThemeIndexColour},16%,20%); 
+--primary-gradiend-darker: hsl({PublicCacheData.ThemeIndexColour},16%,4%); 
+--light-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,66%,.1); 
+--dark-shadow: hsla({PublicCacheData.ThemeIndexColour},16%,1%,.5);")
+	}
+	else
+	{
+		@($@"--background: hsl({PublicCacheData.ThemeIndexColour},84%,88%); 
+--text-color: hsl({PublicCacheData.ThemeIndexColour},84%,26.4%); 
+--placeholder-text-color: hsla({PublicCacheData.ThemeIndexColour},84%,26.4%,.3); 
+--primary-color: hsl({PublicCacheData.ThemeIndexColour},84%,88%); 
+--primary-color-light: hsl({PublicCacheData.ThemeIndexColour},84%,100%); 
+--primary-color-dark: hsl({PublicCacheData.ThemeIndexColour},84%,66%); 
+--primary-gradiend-light: hsl({PublicCacheData.ThemeIndexColour},84%,92%); 
+--primary-gradiend-dark: hsl({PublicCacheData.ThemeIndexColour},84%,84%); 
+--primary-gradiend-lighter: hsl({PublicCacheData.ThemeIndexColour},84%,96%); 
+--primary-gradiend-darker: hsl({PublicCacheData.ThemeIndexColour},84%,80%); 
+--light-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,100%,.5); 
+--dark-shadow: hsla({PublicCacheData.ThemeIndexColour},84%,66%,.5);")
+	}
+	}
+	}
+</style>
+
+<CascadingValue IsFixed=false Value=this>
+	@ChildContent
+</CascadingValue>

@code {
-	
+	[Parameter] public RenderFragment ChildContent { get; set; }
+	[Inject] public IStringLocalizer<AllStrings> Localizer { get; set; }
+	[Inject] IStorage DbStorage { get; set; }
+	[Inject] ILocalStorageService Storage { get; set; }
+	[Inject] IJSRuntime JS { get; set; }
+	// [Inject] DataService DataService { get; set; }
+	[Inject] public AppStatusService Status { get; set; }
+	[Inject] ILogger<CascadingState> Logger { get; set; }
+
+	public bool IsOnline { get; set; } = true;
+	Timer IsOnlineTimer { get; set; }
+	public PublicCacheData PublicCacheData { get; set; }
+	public User User { get; set; }
+
+	DotNetObjectReference<CascadingState> cascadingStateReference;
+
+	protected override async Task OnInitializedAsync()
+	{
+		try
+		{
+			IsOnlineTimer = new Timer(async _ => await UpdateIsOnline(), new AutoResetEvent(false), 0, 10000);
+			cascadingStateReference = DotNetObjectReference.Create(this);
+			await JS.InvokeVoidAsync("cascadingStateInstanceReference", cascadingStateReference);
+			PublicCacheData = await Storage.GetItemAsync<PublicCacheData>(nameof(PublicCacheData));
+			if (PublicCacheData == null)
+			{
+				PublicCacheData = new();
+				await UpdatePublicCache(PublicCacheData);
+			}
+
+			User = new();
+		}
+		catch (Exception ex)
+		{
+			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(OnInitializedAsync)}");
+		}
+	}
+
+	public async ValueTask UpdatePublicCache(PublicCacheData publicCacheData)
+	{
+		try
+		{
+			PublicCacheData = publicCacheData;
+			await Storage.SetItemAsync(nameof(PublicCacheData), PublicCacheData);
+			StateHasChanged();
+		}
+		catch (Exception ex)
+		{
+			Console.WriteLine($"{nameof(CascadingState)}.{nameof(UpdatePublicCache)}");
+			Console.WriteLine(ex.ToString());
+		}
+	}
+
+	[JSInvokable]
+	public async Task LogFromJs(string message, string where)
+	{
+		try
+		{
+			await ProcessError(new(message), where);
+		}
+		catch (Exception ex)
+		{
+			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(LogFromJs)}");
+		}
+	}
+
+	async Task UpdateIsOnline()
+	{
+		try
+		{
+			var latestOnlineState = await Status.IsOnline();
+
+	//var latestOnlineState = Random.Shared.Next() % 2 == 0;
+			if (latestOnlineState != IsOnline)
+			{
+				IsOnline = latestOnlineState;
+				StateHasChanged();
+			}
+	// else
+	// {
+	// 	var pingIsOnline = await DataService.Ping();
+	// 	if (pingIsOnline != IsOnline)
+	// 	{
+	// 		IsOnline = pingIsOnline;
+	// 		StateHasChanged();
+	// 	}
+	// }
+		}
+		catch (Exception ex)
+		{
+			Logger.LogError(ex, $"{nameof(CascadingState)}.{nameof(UpdateIsOnline)}");
+		}
+	}
+
+	public async ValueTask ProcessError(Exception ex, string where)
+	{
+		try
+		{
+			await DbStorage.AddLog(ex, where);
+			Logger.LogError(ex, where);
+			await Task.Run(() => {
+			});
+		}
+		catch (Exception exception)
+		{
+			Logger.LogError(exception, $"{nameof(CascadingState)}.{nameof(ProcessError)}");
+		}
+	}
+
+	public async ValueTask ProcessWarning(string message, string where)
+	{
+		try
+		{
+			await DbStorage.AddLog(message, where);
+			Logger.LogWarning("{where} - {message}", where, message);
+			await Task.Run(() => {
+			});
+		}
+		catch (Exception exception)
+		{
+			Logger.LogError(exception, $"{nameof(CascadingState)}.{nameof(ProcessWarning)}");
+		}
+	}
 }
--- a/LayerComponents/PagesBase.cs
+++ b/LayerComponents/PagesBase.cs
@ -0,0 +1,9 @@
+using Microsoft.AspNetCore.Components;
+
+namespace decePubClient.LayerComponents
+{
+	public class PagesBase : ComponentBase
+	{
+		public bool IsLoading { get; set; } = true;
+	}
+}
--- a/Models/ActionBarFilter.cs
+++ b/Models/ActionBarFilter.cs
@ -1,6 +1,9 @@
-namespace decePubClient.Models;
+using decePubClient.Models.Types;
+
+namespace decePubClient.Models;

 public class ActionBarFilter
 {
-	
+	public TimelineType TimelineType { get; set; } = TimelineType.Home;
+	public TimeSortingType TimeSortingType { get; set; } = TimeSortingType.Ascending;
 }
--- a/Models/Media.cs
+++ b/Models/Media.cs
@ -0,0 +1,11 @@
+namespace decePubClient.Models
+{
+	public class Media
+	{
+		public string FileName { get; set; }
+		public string Url { get; set; }
+		public string ContentType { get; set; }
+		public string AltText { get; set; }
+		public byte[] Blob { get; set; } //TODO TEMPORARY
+	}
+}
--- a/Models/Mention.cs
+++ b/Models/Mention.cs
@ -0,0 +1,10 @@
+namespace decePubClient.Models
+{
+	public class Mention
+	{
+		public string DisplayName { get; set; }
+		public string UserName { get; set; }
+		public string UserId { get; set; }
+		public string ProfileUrl { get; set; }
+	}
+}
--- a/Models/Message.cs
+++ b/Models/Message.cs
@ -0,0 +1,23 @@
+using System.ComponentModel;
+using System.Text.Json.Serialization;
+using decePubClient.Models.Types;
+
+namespace decePubClient.Models
+{
+	public class Message
+	{
+		public MessageUser User { get; set; } = new();
+		public MessageType MessageType { get; set; } = MessageType.Public;
+		public string RootMessageId { get; set; }
+		public string MessageId { get; set; }
+		public string Title { get; set; }
+		public string Content { get; set; }
+		public bool IsFavourite { get; set; } = false;
+		public bool IsBoosted { get; set; } = false;
+		public List<Media> Medias { get; set; } = new();
+		public DateTime CreatedAt { get; set; }
+
+		[Bindable(false), JsonIgnore]
+		public bool IsOptionsOpen { get; set; } = false;
+	}
+}
--- a/Models/MessageForm.cs
+++ b/Models/MessageForm.cs
@ -1,6 +1,28 @@
-namespace decePubClient.Models;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.Text.Json.Serialization;
+
+using decePubClient.Models.Types;
+using decePubClient.Resources;
+
+namespace decePubClient.Models;

 public class MessageForm
 {
-	
+	public string RootMessageId { get; set; }
+
+	[Required(ErrorMessageResourceName = ValidationNames.Required, ErrorMessageResourceType = typeof(ErrorMessages))]
+	public MessageType MessageType { get; set; } = MessageType.Public;
+	[Required(ErrorMessageResourceName = ValidationNames.Required, ErrorMessageResourceType = typeof(ErrorMessages))]
+	public ContentType ContentType { get; set; } = ContentType.PlainText;
+	[StringLength(64, ErrorMessageResourceName = ValidationNames.MaxLength, ErrorMessageResourceType = typeof(ErrorMessages))]
+	public string Title { get; set; }
+	[StringLength(5_000, ErrorMessageResourceName = ValidationNames.MaxLength, ErrorMessageResourceType = typeof(ErrorMessages))]
+	public string Content { get; set; }
+	public List<UploadMedia> Media { get; set; } = new();
+
+	[JsonIgnore, Bindable(false)]
+	public MediaType MediaType { get; set; } = MediaType.Images;
+	[JsonIgnore, Bindable(false)]
+	public bool IsScopeOptionsOpen { get; set; } = false;
 }
--- a/Models/MessageUser.cs
+++ b/Models/MessageUser.cs
@ -0,0 +1,12 @@
+namespace decePubClient.Models
+{
+	public class MessageUser
+	{
+		public string UserId { get; set; } = "45f14fa8-c40f-4121-997c-ef2542196a50";
+		public string UserName { get; set; } = "@loosy@letsrulethe.world";
+		public string DisplayName { get; set; } = "loosy";
+		public string PictureUrl { get; set; } = "https://letsrulethe.world/media/c22d7a6dfcce11e4d2d8d4f6298842a36751b0a179dc5333d24663e4b93793b4.jpg";
+		public string BackgroundUrl { get; set; } = "https://letsrulethe.world/media/717cc7f5a090cfbe77be46941060b9a54454c351c74ff2f056363e002c8e2c3f.png";
+		public string ProfileUrl { get; set; } = "https://letsrulethe.world/users/loosy";
+	}
+}
--- a/Models/SettingsOptions.cs
+++ b/Models/SettingsOptions.cs
@ -0,0 +1,7 @@
+namespace decePubClient.Models
+{
+	public class SettingsOptions
+	{
+		public bool IsOpen { get; set; }
+	}
+}
--- a/Models/Types/ContentType.cs
+++ b/Models/Types/ContentType.cs
@ -1,6 +1,8 @@
 namespace decePubClient.Models.Types;

-public class ContentType
+public enum ContentType
 {
-	
+	PlainText,
+	HTML,
+	Markdown
 }
--- a/Models/Types/MessageType.cs
+++ b/Models/Types/MessageType.cs
@ -0,0 +1,10 @@
+namespace decePubClient.Models.Types
+{
+	public enum MessageType
+	{
+		Direct,
+		FollowersOnly,
+		Unlisted,
+		Public
+	}
+}
--- a/Models/Types/TimeSortingType.cs
+++ b/Models/Types/TimeSortingType.cs
@ -1,3 +1,7 @@
 namespace decePubClient.Models.Types;

-public enum TimeSortingType {  }
+public enum TimeSortingType
+{
+	Ascending,
+	Descending
+}
--- a/Models/UploadMedia.cs
+++ b/Models/UploadMedia.cs
@ -1,6 +1,16 @@
-namespace decePubClient.Models;
+using System.ComponentModel;
+using System.Text.Json.Serialization;
+
+namespace decePubClient.Models;

 public class UploadMedia
 {
-	
+	public string ContentType { get; set; }
+	public string FileName { get; set; }
+	public string AltText { get; set; }
+	public byte[] Blob { get; set; }
+	public string Base64Preview { get; set; }
+
+	[JsonIgnore, Bindable(false)]
+	public long Size { get; set; }
 }
--- a/Models/User.cs
+++ b/Models/User.cs
@ -0,0 +1,21 @@
+namespace decePubClient.Models
+{
+	public class User
+	{
+		public string Id { get; set; } = "45f14fa8-c40f-4121-997c-ef2542196a50";
+		public bool IsAuthenticated { get; set; } = false;
+		public List<UserClaim> Claims { get; set; } = new();
+		
+		public string UserName { get; set; } = "@loosy@letsrulethe.world";
+		public string DisplayName { get; set; } = "loosy";
+		public string PictureUrl { get; set; } = "https://letsrulethe.world/media/c22d7a6dfcce11e4d2d8d4f6298842a36751b0a179dc5333d24663e4b93793b4.jpg";
+		public string BackgroundUrl { get; set; } = "https://letsrulethe.world/media/717cc7f5a090cfbe77be46941060b9a54454c351c74ff2f056363e002c8e2c3f.png";
+		public string ProfileUrl { get; set; } = "https://letsrulethe.world/users/loosy";
+	}
+
+	public class UserClaim
+	{
+		public string Type { get; set; }
+		public string Value { get; set; }
+	}
+}
--- a/Models/VConstants.cs
+++ b/Models/VConstants.cs
@ -0,0 +1,7 @@
+namespace decePubClient.Models
+{
+	public static class VConstants
+	{
+		public const string HideClass = "hidden";
+	}
+}
--- a/Pages/Administration.razor
+++ b/Pages/Administration.razor
@ -1,4 +1,5 @@
@page "/administration"
+@inherits PagesBase

 <section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">

--- a/Pages/Authentication.razor
+++ b/Pages/Authentication.razor
@ -0,0 +1,23 @@
+@page "/authentication/{action}"
+@inherits PagesBase
+
+
+<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
+
+	<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">