From ed9ad0c1114b40bfaf530e15a33fc007a6f28de4 Mon Sep 17 00:00:00 2001 From: Aji Anaz Date: Thu, 10 Sep 2026 20:17:18 +0700 Subject: [PATCH] refactor(web): adopt shadcn form controls in schedules, accounts, comments Following #230/#231, replace the remaining raw form controls in admin pages with shadcn/ui components: - Schedules: filter search + date-range inputs, create/edit modal datetime inputs, image/carousel URL inputs, and the bundle-item select + textarea now use shadcn Input/Select/Textarea; drop the legacy form-input classes still attached to already-adopted Textareas - Accounts: Add Account form fields (user ID, username, access token, expiry, app ID/secret) now use shadcn Input - Comments: search field now uses shadcn Input - remove CSS orphaned by the swap: the mobile .form-group:has(> input[type='date']) grid rule (redundant default span) and .carousel-url-row .form-input, the latter replaced with :global(input) so the flex layout still applies to the component - custom non-form elements (thumbnail lightbox buttons, calendar cell buttons, sidebar hamburger, OAuth connect button) intentionally stay as-is Raw form controls in admin routes are now zero. svelte-check matches the pre-existing baseline (1 known process typing error, 36 warnings); vite build passes. --- web/src/routes/admin/accounts/+page.svelte | 13 +-- web/src/routes/admin/comments/+page.svelte | 6 +- web/src/routes/admin/schedules/+page.svelte | 112 +++++++++----------- 3 files changed, 61 insertions(+), 70 deletions(-) diff --git a/web/src/routes/admin/accounts/+page.svelte b/web/src/routes/admin/accounts/+page.svelte index b4373b8..91b4438 100644 --- a/web/src/routes/admin/accounts/+page.svelte +++ b/web/src/routes/admin/accounts/+page.svelte @@ -5,6 +5,7 @@ import * as Dialog from '$lib/components/ui/dialog'; import { listAccounts, createAccount, deleteAccount, refreshToken, getOAuthConfig, getThreadsProfile, createOAuthState } from '$lib/api'; import { Button } from '$lib/components/ui/button'; + import { Input } from '$lib/components/ui/input'; import * as Table from '$lib/components/ui/table'; import Skeleton from '$lib/components/ui/skeleton/skeleton.svelte'; import { formatDate as formatDateTz } from '$lib/tz'; @@ -332,27 +333,27 @@
{ e.preventDefault(); handleAddAccount(); }}>
- +
- +
- +
- +
- +
- +
diff --git a/web/src/routes/admin/comments/+page.svelte b/web/src/routes/admin/comments/+page.svelte index 4e18a88..a036549 100644 --- a/web/src/routes/admin/comments/+page.svelte +++ b/web/src/routes/admin/comments/+page.svelte @@ -9,6 +9,7 @@ replyToComment, } from '$lib/api'; import { Button } from '$lib/components/ui/button'; + import { Input } from '$lib/components/ui/input'; import * as Select from '$lib/components/ui/select'; import Skeleton from '$lib/components/ui/skeleton/skeleton.svelte'; import Textarea from '$lib/components/ui/textarea/textarea.svelte'; @@ -241,9 +242,8 @@
- diff --git a/web/src/routes/admin/schedules/+page.svelte b/web/src/routes/admin/schedules/+page.svelte index ffa203c..b02790a 100644 --- a/web/src/routes/admin/schedules/+page.svelte +++ b/web/src/routes/admin/schedules/+page.svelte @@ -24,6 +24,7 @@ import * as Select from '$lib/components/ui/select'; import DataTable from '$lib/components/DataTable.svelte'; import Textarea from '$lib/components/ui/textarea/textarea.svelte'; + import { Input } from '$lib/components/ui/input'; import MediaLightbox from '$lib/components/MediaLightbox.svelte'; type StatusFilter = 'all' | 'draft' | 'pending' | 'processing' | 'published' | 'failed' | 'rejected'; @@ -522,16 +523,15 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte';
-
- - -
+
+ + +
{#if hasActiveFilters} @@ -618,25 +618,23 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte';
-
- - -
+
+ + +
-
- - -
+
+ + +
@@ -861,8 +859,7 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte';
- - 2–20 image URLs. Each becomes a carousel slide. - {#each modalCarouselUrls as _, idx} -
- + {#each modalCarouselUrls as _, idx} +
+ {#if modalCarouselUrls.length > 2} {/if}
- - + class="mb-2" + /> {#if item.mediaType === 'IMAGE'} - @@ -1011,7 +1009,6 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte'; placeholder="Write your post caption..." rows={4} maxlength={499} - class="form-input" />
{/if} @@ -1043,8 +1040,7 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte';
-
@@ -1097,7 +1092,6 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte'; bind:value={rejectReason} placeholder="Why is this schedule being rejected?" rows={3} - class="form-input" />
@@ -1372,10 +1366,6 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte'; grid-template-columns: repeat(2, 1fr); } - .filter-fields .form-group:has(> input[type='date']) { - grid-column: span 1; - } - .view-toggle :global(button) { flex: 0 0 auto; } @@ -1535,7 +1525,7 @@ import MediaLightbox from '$lib/components/MediaLightbox.svelte'; align-items: center; margin-bottom: 0.5rem; } - .carousel-url-row .form-input { + .carousel-url-row :global(input) { flex: 1; }