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
This commit is contained in:
thepraandClaude Opus 5.5 committed
1 parent
90e4b9200c
commit
3ad4f55b11
17 files changed
+383
-562
No files matched your search
+79
-79
@@ -3,174 +3,174 @@
|
||||
|
||||
<Title>@Localizer["Settings"]</Title>
|
||||
|
||||
<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
|
||||
<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Users"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Reports"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["ActivityPub?"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Authentication"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Emoji?"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Frontend"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Instance"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Link formatter"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Metadata"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Policies"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-albums text-xl"></i> <span>@Localizer["Upload"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
@inherits PagesBase
|
||||
|
||||
|
||||
<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
|
||||
<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
|
||||
<RemoteAuthenticatorView Action="@Action" />
|
||||
|
||||
|
||||
@@ -2,14 +2,17 @@
|
||||
@page "/expand/{messageId}"
|
||||
@inherits LocalizableComponentBase
|
||||
|
||||
<div class="flex w-full h-full flex-col space-y-4">
|
||||
<div class="flex w-full h-full flex-col gap-4">
|
||||
|
||||
<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 @SUtility.IfTrueThen(TimeSortingType is TimeSortingType.Descending, "flex-col-reverse")">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto @SUtility.IfTrueThen(TimeSortingType is TimeSortingType.Descending, "flex-col-reverse")">
|
||||
|
||||
@if (IsLoading)
|
||||
{
|
||||
<LoadingData />
|
||||
<p class="flex w-full items-center justify-center gap-2">
|
||||
<DLoading Variant="DLoadingVariant.Dots" LabelText="@Localizer["loading"]" />
|
||||
@Localizer["loading"]
|
||||
</p>
|
||||
}
|
||||
|
||||
@foreach (var message in Ancestors)
|
||||
@@ -21,7 +24,7 @@
|
||||
OnUserBlock="async (u) => await OnUserBlock(u)" OnUserDirectMessage="async (u) => await OnUserDirectMessage(u)" OnUserSilence="async (u) => await OnUserSilence(u)" />
|
||||
}
|
||||
|
||||
<Content CssContainer="is-nsmall" IncludeExpand="false" Message="CurrentMessage"
|
||||
<Content Highlighted="true" IncludeExpand="false" Message="CurrentMessage"
|
||||
OnMessageBoost="async (m) => await OnMessageBoost(m)" OnMessageDelete="async (m) => await OnMessageDelete(m)"
|
||||
OnMessageFavourite="async (m) => await OnMessageFavourite(m)" OnMessageReply="async (m) => await OnMessageReply(m)"
|
||||
OnMessageMediaDownload="async (m) => await OnMessageMediaDownload(m)"
|
||||
|
||||
+7
-4
@@ -4,14 +4,17 @@
|
||||
@inherits LocalizableComponentBase
|
||||
<Title>@Localizer["Index"]</Title>
|
||||
|
||||
<div class="flex w-full h-full flex-col space-y-4">
|
||||
<div class="flex w-full h-full flex-col gap-4">
|
||||
|
||||
<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 @SUtility.IfTrueThen(TimeSortingType is TimeSortingType.Descending, "flex-col-reverse")">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto @SUtility.IfTrueThen(TimeSortingType is TimeSortingType.Descending, "flex-col-reverse")">
|
||||
|
||||
@if (IsLoading)
|
||||
{
|
||||
<LoadingData />
|
||||
<p class="flex w-full items-center justify-center gap-2">
|
||||
<DLoading Variant="DLoadingVariant.Dots" LabelText="@Localizer["loading"]" />
|
||||
@Localizer["loading"]
|
||||
</p>
|
||||
}
|
||||
else if (Messages.Count == 0)
|
||||
{
|
||||
|
||||
+2
-2
@@ -2,9 +2,9 @@
|
||||
@inherits LocalizableComponentBase
|
||||
<Title>@Localizer["Login"]</Title>
|
||||
|
||||
<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
|
||||
<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<LoginDisplay />
|
||||
</div>
|
||||
|
||||
|
||||
+2
-2
@@ -2,9 +2,9 @@
|
||||
@inherits LocalizableComponentBase
|
||||
<Title>@Localizer["Logout"]</Title>
|
||||
|
||||
<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
|
||||
<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<h1 class="text-center">@Localizer["Logging out..."]</h1>
|
||||
</div>
|
||||
|
||||
|
||||
+30
-30
@@ -2,69 +2,69 @@
|
||||
@inherits LocalizableComponentBase
|
||||
<Title>@Localizer["Settings"]</Title>
|
||||
|
||||
<section class="block relative w-full h-full neomorphInset is-nxsmall rounded-xl">
|
||||
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
||||
|
||||
<div class="flex flex-col space-y-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-cog text-xl"></i> <span>@Localizer["General"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-person text-xl"></i> <span>@Localizer["Profile"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-archive text-xl"></i> <span>@Localizer["Data import/export"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
<OpenDownContainer>
|
||||
<TitleChildren>
|
||||
<p class="inline-flex items-center space-x-2">
|
||||
<DCollapse Icon="DCollapseIcon.Arrow">
|
||||
<Header>
|
||||
<p class="inline-flex items-center gap-2">
|
||||
<i class="ion-md-eye-off text-xl"></i> <span>@Localizer["Mutes/Blocks"]</span>
|
||||
</p>
|
||||
</TitleChildren>
|
||||
<InnerContent>
|
||||
</Header>
|
||||
<ChildContent>
|
||||
<div class="block w-full p-3 md:p-4">
|
||||
<p class="w-full text-center text-lg">
|
||||
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
||||
</p>
|
||||
</div>
|
||||
</InnerContent>
|
||||
</OpenDownContainer>
|
||||
</ChildContent>
|
||||
</DCollapse>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in new issue
Block a user