Move the app's markup to the D components and Tailwind 4

The pages and components now use the daisyUI wrappers and the neo-* utilities
instead of Bulma and the neomorph classes:
- buttons are DButton, with pressed states as Active;
- nav links are btn / btn-active;
- the filter and composer selects are DSelect with a prefix icon;
- the composer's fields are DInput and DTextarea;
- the message options and scope pickers are DDropdown, which now close on an
  outside click and on Escape;
- the settings and admin sections are DCollapse;
- the dark-mode switch is a DToggle with sun and moon icons;
- the hue slider is a DRange on the rainbow track.

DropdownButton, OpenDownContainer and LoadingData are gone. The loader is
DLoading, whose animation runs; the old one's keyframes were never defined.
Icons coloured with Bulma's has-text-* now get daisyUI's text-info, success,
warning and error, which had no rules before.

Tailwind 3 to 4 fixes:
- space-x/y become gap, which also handles the flex-col-reverse feeds;
- !rounded-lg becomes rounded-lg!;
- drop-shadow becomes drop-shadow-sm;
- text-md becomes text-base.
The thread page marks its message with Content's new Highlighted parameter
rather than a second shadow size.

neo.css: a select's prefix icon gets the room daisyUI leaves for a span.label,
and the inner select lets the well show through.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Components/ActionBar.razor

@@ -1,51 +1,47 @@
 @inherits LocalizableComponentBase
 
-<section class="flex flex-col space-y-4">
+<section class="flex flex-col gap-4">
 
 	@if (isPosting)
 	{
-		<div class="block p-3 md:p-4 neomorph rounded-xl is-nxsmall">
+		<div class="block p-3 md:p-4 rounded-xl neo-raised neo-xs">
 			<MessageUpsertForm OnMessageSubmit="OnMessageSubmit" />
 		</div>
 	}
 
-	<div class="flex justify-between space-x-3">
+	<div class="flex justify-between gap-3">
 
 		<EditForm Model="Filters">
-			<div class="field flex flex-row space-x-3">
+			<div class="flex flex-row gap-3">
 				@if (OnTimelineChanged.HasDelegate)
 				{
-					<div class="control has-icons-left">
-						<span class="icon is-left">
+					<DSelect TValue="TimelineType" class="w-auto" Value="Filters.TimelineType"
+							 ValueChanged="async v => await OnTimelineChange(v)" ValueExpression="() => Filters.TimelineType">
+						<Prefix>
 							<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">@Localizer[timelineType.ToString()]</option>
-								}
-							</InputSelect>
-						</span>
-					</div>
+						</Prefix>
+						<ChildContent>
+							@foreach (var timelineType in Enum.GetValues<TimelineType>())
+							{
+								<option value="@timelineType">@Localizer[timelineType.ToString()]</option>
+							}
+						</ChildContent>
+					</DSelect>
 				}
 				@if (OnTimeSortingChanged.HasDelegate)
 				{
-					<div class="control has-icons-left">
-						<span class="icon is-left">
+					<DSelect TValue="TimeSortingType" class="w-auto" Value="Filters.TimeSortingType"
+							 ValueChanged="async v => await OnTimeSortChange(v)" ValueExpression="() => Filters.TimeSortingType">
+						<Prefix>
 							<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">@Localizer[timeSortingType.ToString()]</option>
-								}
-							</InputSelect>
-						</span>
-					</div>
+						</Prefix>
+						<ChildContent>
+							@foreach (var timeSortingType in Enum.GetValues<TimeSortingType>())
+							{
+								<option value="@timeSortingType">@Localizer[timeSortingType.ToString()]</option>
+							}
+						</ChildContent>
+					</DSelect>
 				}
 			</div>
 		</EditForm>
@@ -53,13 +49,10 @@
 		@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>
+				<DButton Active="isPosting" OnClick="OpenCloseMessageForm">
+					<i class="ion-md-create"></i>
 					<span>@Localizer["Post"]</span>
-				</button>
+				</DButton>
 			</div>
 		}
 		else

Components/Content.razor

@@ -1,29 +1,29 @@
 @inherits LocalizableComponentBase
 
-<div class="flex space-x-3 w-full neomorph is-nxxsmall rounded-xl @CssContainer">
+<div class="flex gap-3 w-full rounded-xl neo-raised @(Highlighted ? "neo-sm" : "neo-2xs") @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)');">
+			 style="background-image:linear-gradient(to left, var(--color-base-100), 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")" />
+			<img alt="@Message.User.UserName" class="h-12 w-12 md:h-16 md:w-16 object-cover rounded-full neo-raised neo-2xs" 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 gap-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">
+		<div class="flex flex-col gap-1 flex-1 min-w-0">
 			@if (Message.BoostingUser != null)
 			{
-				<p class="inline-flex flex-1 space-x-2 min-w-0 text-xs text-xs">
+				<p class="inline-flex flex-1 gap-2 min-w-0 text-xs">
 					<a class="font-bold" href="@Message.BoostingUser.ProfileUrl" title="@Message.BoostingUser.UserName">@Message.BoostingUser.DisplayName</a>
-					<i class="ion-md-repeat has-text-info" aria-hidden="true"></i>
+					<i class="ion-md-repeat text-info" aria-hidden="true"></i>
 					<span>@Localizer["boosted"]</span>
 				</p>
 			}
-			<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">
+			<p class="inline-flex flex-1 gap-2 min-w-0 justify-between text-xs md:text-sm">
+				<span class="inline-flex gap-2 min-w-0">
 					<b class="shrink truncate max-w-[80%]" title="@Message.User.DisplayName">
 						@Message.User.DisplayName
 					</b>
@@ -31,11 +31,11 @@
 						@Message.User.UserName
 					</a>
 				</span>
-				<span class="flex-none inline-flex space-x-1 items-center">
+				<span class="flex-none inline-flex gap-1 items-center">
 					<span title="@Message.CreatedAt.ToLocalTime().ToString("📅dd/MM/yy 🕒HH:mm")">
 						@Message.CreatedAt.GetPassedTime(Localizer._pLocalizer)
 					</span>
-					<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-md"
+					<i aria-hidden="true" class="@Message.MessageType.GetMessageTypeIcon() text-base"
 						 title="@Localizer[Message.MessageType.ToString()]">
 					</i>
 				</span>
@@ -65,7 +65,7 @@
 						}
 						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">
+							<video class="w-full max-h-[50vh] aspect-video rounded-lg mx-auto neo-inset neo-2xs" controls="controls" playsinline="playsinline" preload="metadata" title="@media.FileName">
 								<source src="@media.Url" type="@media.ContentType" />
 							</video>
 						}
@@ -77,11 +77,11 @@
 						}
 						else
 						{
-							<div class="flex items-center space-x-3 align-center rounded-lg p-3 md:p-4 neomorph is-nxxsmall">
+							<div class="flex items-center gap-3 rounded-lg p-3 md:p-4 neo-raised neo-2xs">
 								<span>
 									<i class="text-2xl ion-md-document"></i>
 								</span>
-								<div class="flex flex-col w-full space-y-1">
+								<div class="flex flex-col w-full gap-1">
 									<p class="text-xs md:text-sm break-all">
 										<b>@media.FileName</b>
 									</p>
@@ -89,11 +89,9 @@
 										<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>
+								<DButton Size="DSize.Sm" OnClick="async () => await OnMessageMediaDownload.InvokeAsync(media)">
+									<i class="ion-md-download text-base"></i>
+								</DButton>
 							</div>
 						}
 					}
@@ -102,106 +100,76 @@
 
 		</div>
 
-		<div class="flex space-x-3 mt-3 justify-between">
-			<div class="flex space-x-3">
+		<div class="flex gap-3 mt-3 justify-between">
+			<div class="flex gap-3">
 				@if (OnMessageReply.HasDelegate)
 				{
-					<button class="button is-small is-rounded @(isAnswering ? "neoBtnSmallInsetPlain" : "neoBtnSmall")" @onclick="Reply"
-								title="@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>
+					<DButton Size="DSize.Sm" Active="isAnswering" OnClick="Reply" title="@Localizer[isAnswering ? "Close" : "Reply"]">
+						<i aria-hidden="true" class="@SUtility.IfTrueThen(isAnswering, "ion-md-close-circle", "ion-md-text") text-lg text-success"></i>
+					</DButton>
 				}
 				@if (OnMessageBoost.HasDelegate)
 				{
-					<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsBoostedByCurrentUser,"neoBtnSmallInsetPlain","neoBtnSmall") @SUtility.IfTrueThen(Message.BoostsCounter != 0, "has-icons-left")" @onclick="() => OnMessageBoost.InvokeAsync(Message)"
-								title="@Localizer["Boost"]">
-						<span class="icon is-left">
-							<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0,null,"text-lg") has-text-info"></i>
-						</span>
+					<DButton Size="DSize.Sm" Active="Message.IsBoostedByCurrentUser" OnClick="() => OnMessageBoost.InvokeAsync(Message)"
+							 title="@Localizer["Boost"]">
+						<i aria-hidden="true" class="ion-md-repeat @SUtility.IfTrueThen(Message.BoostsCounter != 0, null, "text-lg") text-info"></i>
 						@if (Message.BoostsCounter != 0)
 						{
 							<span>@Message.BoostsCounter</span>
 						}
-					</button>
+					</DButton>
 				}
 				@if (OnMessageFavourite.HasDelegate)
 				{
-					<button class="button is-small is-rounded @SUtility.IfTrueThen(Message.IsFavourite, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="() => OnMessageFavourite.InvokeAsync(Message)"
-								title="@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>
+					<DButton Size="DSize.Sm" Active="Message.IsFavourite" OnClick="() => OnMessageFavourite.InvokeAsync(Message)"
+							 title="@Localizer["Favourite"]">
+						<i aria-hidden="true" class="@SUtility.IfTrueThen(Message.IsFavourite, "ion-md-heart-dislike", "ion-md-heart") text-lg text-pink-300"></i>
+					</DButton>
 				}
 			</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="@Localizer["Other"]">
-							<span class="icon">
-								<i aria-hidden="true" class="ion-md-more text-lg"></i>
-							</span>
-						</button>
-					</DropdownTrigger>
-					<DropdownContent>
+			<div class="flex gap-3">
+				<DDropdown @bind-IsOpen="Message.IsOptionsOpen" Align="DDropdownAlign.End" CloseOnContentClick="true"
+						   TriggerClass="@(Message.IsOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
+						   ContentClass="mt-2 flex flex-col gap-2 p-2 rounded-box" title="@Localizer["Other"]">
+					<Trigger>
+						<i aria-hidden="true" class="ion-md-more text-lg"></i>
+					</Trigger>
+					<ChildContent>
 						@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>@Localizer["Direct message"]</span>
-								</button>
-							</div>
+							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserDirectMessage.InvokeAsync(Message)">
+								<i aria-hidden="true" class="ion-md-paper-plane text-base text-success"></i>
+								<span>@Localizer["Direct message"]</span>
+							</DButton>
 						}
 						@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>@Localizer["Mute"]</span>
-								</button>
-							</div>
+							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserSilence.InvokeAsync(Message.User)">
+								<i aria-hidden="true" class="ion-md-eye-off text-base drop-shadow-sm text-warning"></i>
+								<span>@Localizer["Mute"]</span>
+							</DButton>
 						}
 						@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>@Localizer["Block"]</span>
-								</button>
-							</div>
+							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="() => OnUserBlock.InvokeAsync(Message.User)">
+								<i aria-hidden="true" class="ion-md-remove-circle text-base text-error"></i>
+								<span>@Localizer["Block"]</span>
+							</DButton>
 						}
 						@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="@Localizer["Delete"]">
-									<span class="icon is-left">
-										<i aria-hidden="true" class="ion-md-trash text-lg has-text-danger"></i>
-									</span>
-									<span>@Localizer["Delete"]</span>
-								</button>
-							</div>
+							<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" OnClick="DeleteMessage" title="@Localizer["Delete"]">
+								<i aria-hidden="true" class="ion-md-trash text-lg text-error"></i>
+								<span>@Localizer["Delete"]</span>
+							</DButton>
 						}
-					</DropdownContent>
-				</DropdownButton>
+					</ChildContent>
+				</DDropdown>
 				@if (IncludeExpand)
 				{
-					<NavLink class="button is-small is-rounded neoBtnSmall" href="@($"expand/{Message.MessageId}")"
-								 title="@Localizer["Expand"]">
-						<span class="icon">
-							<i aria-hidden="true" class="ion-md-expand text-lg"></i>
-						</span>
+					<NavLink class="btn btn-sm" href="@($"expand/{Message.MessageId}")" title="@Localizer["Expand"]">
+						<i aria-hidden="true" class="ion-md-expand text-lg"></i>
 					</NavLink>
 				}
 			</div>
@@ -228,6 +196,8 @@
 	[Parameter] public EventCallback<MessageUser> OnUserBlock { get; set; }
 	[Parameter] public EventCallback<MessageUser> OnUserSilence { get; set; }
 	[Parameter] public string CssContainer { get; set; }
+	/// <summary>Deeper shadow, for the message a thread page is about.</summary>
+	[Parameter] public bool Highlighted { get; set; }
 	[Parameter] public bool IncludeExpand { get; set; } = true;
 
 	bool isAnswering { get; set; } = false;

Components/DropdownButton.razor

@@ -1,23 +0,0 @@
-<div class="dropdown @CssDirection @(IsOpen ? "is-active" : default)">
-	<div class="dropdown-trigger">
-		@DropdownTrigger
-	</div>
-	<div class="dropdown-menu min-w-full pt-2" id="dropdown-menu6" role="menu">
-		<div class="dropdown-content text-right background neomorph is-nxsmall rounded-lg">
-			@DropdownContent
-		</div>
-	</div>
-</div>
-
-@code {
-	[Parameter] public RenderFragment DropdownTrigger { get; set; }
-	[Parameter] public RenderFragment DropdownContent { get; set; }
-	[Parameter] public bool IsOpen { get; set; } = false;
-	[Parameter] public string CssDirection { get; set; } = "is-right";
-
-	void OpenCloseOptions()
-	{
-		IsOpen = !IsOpen;
-	}
-
-}

Components/LoadingData.razor

@@ -1,10 +0,0 @@
-@inherits LocalizableComponentBase
-<p class="w-full loadAnimation text-center">
-	<span>.</span>
-	<span>.</span>
-	<span>.</span>
-	@Localizer["loading"]
-	<span>.</span>
-	<span>.</span>
-	<span>.</span>
-</p>

Components/MessageUpsertForm.razor

@@ -3,24 +3,21 @@
 <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="@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="@Localizer["oh shit... here we go again"]" rows="3"></textarea>
+	<div class="flex flex-col mb-3">
+		<DInput TValue="string" class="w-full rounded-t-[1.4rem] rounded-b-lg" maxlength="64"
+				placeholder="@Localizer["Title (optional)"]" Value="@MessageForm.Title"
+				ValueChanged="(v) => OnTitleChanged(v)"
+				ValueExpression="() => MessageForm.Title" />
+		<div class="relative mt-1">
+			<DTextarea TValue="string" @bind-Value="MessageForm.Content" Immediate="true"
+					   class="w-full rounded-b-[1.4rem] rounded-t-lg" maxlength="5000"
+					   placeholder="@Localizer["oh shit... here we go again"]" rows="3" />
 			<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">
+			<div class="relative mt-1 px-8">
+				<div class="neo-inset neo-xs 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:
@@ -33,22 +30,22 @@
 				</div>
 			</div>
 		}
-		<div class="help is-danger">
+		<div class="text-error text-sm">
 			<ValidationMessage For="() => MessageForm.Content" />
 			@contentError
 		</div>
 	</div>
 
-	<div class="flex flex-col space-y-3 mb-3 @SUtility.IfTrueThen(MessageForm.Media.Count == 0, "hidden")">
+	<div class="flex flex-col gap-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 w-full items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
+						<img alt="@media.AltText" class="object-cover rounded-lg neo-raised neo-2xs 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 gap-2">
+							<div class="flex w-full gap-3">
 								<div class="flex-1">
 									<p class="text-xs md:text-sm break-all">
 										<i class="ion-md-image"></i> <b>@media.FileName</b>
@@ -57,28 +54,22 @@
 										<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
 									</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="@Localizer["Alternative text"]" rows="1" />
-								</div>
+								<DButton Size="DSize.Sm" class="self-start" OnClick="() => RemoveFile(media)">
+									<i class="ion-md-trash text-base text-red-400"></i>
+								</DButton>
 							</div>
+							<DTextarea TValue="string" @bind-Value="media.AltText" Size="DSize.Sm" class="w-full rounded-lg!"
+									   placeholder="@Localizer["Alternative text"]" rows="1" />
 						</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">
+					<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
 						<span>
 							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
 						</span>
-						<div class="flex flex-col w-full space-y-1">
+						<div class="flex flex-col w-full gap-1">
 							<p class="text-xs md:text-sm break-all">
 								<b>@media.FileName</b>
 							</p>
@@ -86,19 +77,17 @@
 								<i class="ion-md-code"></i> @media.ContentType <i class="ion-md-fitness"></i> @media.Size.GetFileSize(Localizer._pLocalizer)
 							</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>
+						<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
+							<i class="ion-md-trash text-base text-red-400"></i>
+						</DButton>
 					</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">
+					<div class="flex items-center gap-3 rounded-xl p-3 md:p-4 neo-raised neo-2xs">
 						<span>
 							<i class="text-2xl @MessageForm.MediaType.GetMediaTypeIcon()"></i>
 						</span>
-						<div class="flex flex-col w-full space-y-1">
+						<div class="flex flex-col w-full gap-1">
 							<p class="text-xs md:text-sm break-all">
 								<b>@media.FileName</b>
 							</p>
@@ -109,11 +98,9 @@
 								<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>
+						<DButton Size="DSize.Sm" OnClick="() => RemoveFile(media)">
+							<i class="ion-md-trash text-base text-red-400"></i>
+						</DButton>
 					</div>
 					break;
 			}
@@ -123,124 +110,94 @@
 
 	@if (fileInputErrorMessage is { Length: > 0 })
 	{
-		<div class="help is-danger p-1 md:p-2 mb-3 rounded-xl neomorphInset is-nxxsmall">
+		<div class="text-error text-sm p-1 md:p-2 mb-3 rounded-xl neo-inset neo-2xs">
 			@((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(Localizer["Message scope type: {0}"], 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="@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="@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="@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="@Localizer[MessageType.Public.ToString()]" type="button">
-							<span class="icon">
-								<i class="ion-md-globe text-base"></i>
-							</span>
-						</button>
-					</div>
-				</DropdownContent>
-			</DropdownButton>
+	<div class="flex flex-wrap items-start justify-between gap-3">
+		<div class="flex flex-wrap items-start gap-3">
+			<DDropdown @bind-IsOpen="MessageForm.IsScopeOptionsOpen"
+					   TriggerClass="@(MessageForm.IsScopeOptionsOpen ? "btn btn-sm btn-active" : "btn btn-sm")"
+					   ContentClass="mt-2 flex gap-2 p-2 rounded-box"
+					   title="@string.Format(Localizer["Message scope type: {0}"], Localizer[MessageForm.MessageType.ToString()])">
+				<Trigger>
+					<i class="@MessageForm.MessageType.GetMessageTypeIcon() text-base"></i>
+				</Trigger>
+				<ChildContent>
+					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Direct" OnClick="() => UpdateMessageType(MessageType.Direct)"
+							 title="@Localizer[MessageType.Direct.ToString()]">
+						<i class="ion-md-paper-plane text-base"></i>
+					</DButton>
+					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.FollowersOnly" OnClick="() => UpdateMessageType(MessageType.FollowersOnly)"
+							 title="@Localizer[MessageType.FollowersOnly.ToString()]">
+						<i class="ion-md-lock text-base"></i>
+					</DButton>
+					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Unlisted" OnClick="() => UpdateMessageType(MessageType.Unlisted)"
+							 title="@Localizer[MessageType.Unlisted.ToString()]">
+						<i class="ion-md-unlock text-base"></i>
+					</DButton>
+					<DButton Size="DSize.Sm" Active="MessageForm.MessageType is MessageType.Public" OnClick="() => UpdateMessageType(MessageType.Public)"
+							 title="@Localizer[MessageType.Public.ToString()]">
+						<i class="ion-md-globe text-base"></i>
+					</DButton>
+				</ChildContent>
+			</DDropdown>
 
-			<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>
+			@* A label styled as a button opens the hidden file input. *@
+			<label class="btn btn-sm @SUtility.IfTrueThen(ShouldDisableUpload(), "btn-disabled")">
+				<InputFile accept="@acceptedFilesTypes" class="hidden" multiple="@ShouldHaveMultipleUpload()" OnChange="OnFileChange" disabled="@ShouldDisableUpload()" />
+				<i class="ion-md-attach text-base"></i>
+				@if (MessageForm.Media.Count != 0)
+				{
+					<span>+@MessageForm.Media.Count</span>
+				}
+			</label>
 
-			<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">@Localizer[mediaType.ToString()]</option>
-							}
-						</InputSelect>
-					</div>
-					<span class="icon is-small is-left">
-						<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
-					</span>
-				</div>
-			</div>
+			<DSelect TValue="MediaType" Size="DSize.Sm" class="w-auto" Value="MessageForm.MediaType" ValueChanged="v => OnMediaTypeChanged(v)"
+					 ValueExpression="() => MessageForm.MediaType" disabled="@(MessageForm.Media.Count > 0)">
+				<Prefix>
+					<i class="@MessageForm.MediaType.GetMediaTypeIcon()"></i>
+				</Prefix>
+				<ChildContent>
+					@foreach (var mediaType in Enum.GetValues<MediaType>())
+					{
+						<option value="@mediaType">@Localizer[mediaType.ToString()]</option>
+					}
+				</ChildContent>
+			</DSelect>
 
-			<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">@Localizer[contentType.ToString()]</option>
-							}
-						</InputSelect>
-					</div>
-					<span class="icon is-small is-left">
+			<div class="flex flex-col">
+				<DSelect TValue="ContentType" Size="DSize.Sm" class="w-auto" Value="MessageForm.ContentType" ValueChanged="v => OnContentTypeChanged(v)"
+						 ValueExpression="() => MessageForm.ContentType">
+					<Prefix>
 						<i class="@MessageForm.ContentType.GetContentTypeIcon()"></i>
-					</span>
-					<div class="help is-danger">
-						<ValidationMessage For="() => MessageForm.ContentType" />
-					</div>
+					</Prefix>
+					<ChildContent>
+						@foreach (var contentType in Enum.GetValues<ContentType>())
+						{
+							<option value="@contentType">@Localizer[contentType.ToString()]</option>
+						}
+					</ChildContent>
+				</DSelect>
+				<div class="text-error text-sm">
+					<ValidationMessage For="() => MessageForm.ContentType" />
 				</div>
 			</div>
 
 			@if (showPreviewButton)
 			{
-				<button class="button is-small is-rounded @SUtility.IfTrueThen(isPreviewOpen, "neoBtnSmallInsetPlain", "neoBtnSmall")" @onclick="OnOpenClosePreview"
-							title="@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>
+				<DButton Size="DSize.Sm" Active="isPreviewOpen" OnClick="OnOpenClosePreview" title="@Localizer["Show preview"]">
+					<i class="@SUtility.IfTrueThen(isPreviewOpen, "ion-md-eye-off", "ion-md-eye") text-base"></i>
+				</DButton>
 			}
 
 		</div>
 
-		<div class="flex space-x-3">
-
-			<button class="button is-small is-rounded has-icons-right neoBtnSmall" type="submit">
-				<span>@Localizer["Post"]</span>
-				<span class="icon is-right">
-					<i class="ion-md-send"></i>
-				</span>
-			</button>
-
-		</div>
+		<DButton Size="DSize.Sm" Type="submit">
+			<span>@Localizer["Post"]</span>
+			<i class="ion-md-send"></i>
+		</DButton>
 
 	</div>
 
@@ -258,11 +215,6 @@
 	bool showPreviewButton { get; set; } = false;
 	bool isPreviewOpen { get; set; } = false;
 
-	void OpenCloseMessageType()
-	{
-		MessageForm.IsScopeOptionsOpen = !MessageForm.IsScopeOptionsOpen;
-	}
-
 	void UpdateMessageType(MessageType messageType)
 	{
 		MessageForm.MessageType = messageType;

Components/OpenDownContainer.razor

@@ -1,36 +0,0 @@
-<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;
-	}
-}