feat: redesign files management routes with new components and hooks

- Introduced new components for file management: FileThumbnail, FileListRow, FileDetailPane, UploadDropOverlay, and UploadProgressDock.
- Implemented hooks for file uploading (useFileUploader) and file searching (useFileSearch).
- Refactored existing routes to use the new components, improving code organization and maintainability.
- Added utility functions for formatting bytes and validating color previews.
- Updated constants and adapters for file types and statuses.
- Enhanced UI with improved search functionality and upload overlays.
- Updated translations for new UI elements and messages.
- Documented the redesign goals, structure, and migration plan in a new design spec.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/admin/src/features/ai/components/AiTasksSurface.tsx

@@ -220,7 +220,7 @@ export function AiTasksSurface() {
     <MasterDetailLayout
       showDetailOnMobile={showDetailOnMobile}
       list={
-        <section className="flex h-full min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">
+        <section className="flex h-full min-h-0 flex-col">
           <div
             className={cn(
               'flex shrink-0 items-center justify-between gap-3 border-b border-neutral-200 px-4 dark:border-neutral-800',

apps/admin/src/features/categories/components/CategoriesRouteViewContent.tsx

@@ -103,7 +103,7 @@ export function CategoriesRouteViewContent() {
     <MasterDetailLayout
       showDetailOnMobile={showDetailOnMobile}
       list={
-        <section className="flex h-full min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">
+        <section className="flex h-full min-h-0 flex-col">
           <div
             className={cn(
               'flex shrink-0 items-center justify-between border-b border-neutral-200 px-4 dark:border-neutral-800',

apps/admin/src/features/cron/components/CronRouteViewContent.tsx

@@ -186,7 +186,7 @@ export function CronRouteViewContent() {
         </section>
       }
       list={
-        <section className="flex min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">
+        <section className="flex min-h-0 flex-col">
           <div
             className={cn(
               'flex shrink-0 items-center justify-between gap-3 border-b border-neutral-200 px-4 dark:border-neutral-800',

apps/admin/src/features/drafts/components/DraftsRouteViewContent.tsx

@@ -203,7 +203,7 @@ export function DraftsRouteViewContent() {
     <MasterDetailLayout
       list={
         <FocusScope
-          className="outline-hidden flex h-full min-h-0 flex-col border-r border-neutral-200 dark:border-neutral-800"
+          className="outline-hidden flex h-full min-h-0 flex-col"
           id={FOCUS_SCOPE_ID}
         >
           <div

apps/admin/src/features/enrichment/components/EnrichmentRouteViewContent.tsx

@@ -198,7 +198,7 @@ export function EnrichmentRouteViewContent() {
     <MasterDetailLayout
       showDetailOnMobile={showDetailOnMobile}
       list={
-        <section className="flex h-full min-h-0 flex-col border-b border-neutral-200 lg:border-b-0 lg:border-r dark:border-neutral-800">
+        <section className="flex h-full min-h-0 flex-col">
           <div className="border-b border-neutral-200 px-4 py-3 dark:border-neutral-800">
             <SourceSwitcher onChange={setSourceAndReset} value={source} />
             {source === 'cache' ? (

apps/admin/src/features/files/components/ChipStrip.tsx

@@ -0,0 +1,50 @@
+import type { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { cn } from '~/utils/cn'
+
+export interface ChipOption<V extends string> {
+  value: V
+  label: ReactNode
+  icon?: LucideIcon
+}
+
+interface ChipStripProps<V extends string> {
+  options: ChipOption<V>[]
+  value: V
+  onChange: (value: V) => void
+  ariaLabel?: string
+}
+
+export function ChipStrip<V extends string>(props: ChipStripProps<V>) {
+  return (
+    <div
+      aria-label={props.ariaLabel}
+      className="flex flex-wrap gap-2 border-b border-neutral-200 px-4 py-3 dark:border-neutral-800"
+      role="tablist"
+    >
+      {props.options.map((option) => {
+        const active = props.value === option.value
+        const Icon = option.icon
+        return (
+          <button
+            aria-selected={active}
+            className={cn(
+              'inline-flex items-center gap-1.5 rounded border px-2.5 py-1 text-xs transition-colors',
+              active
+                ? 'border-neutral-950 bg-neutral-950 text-white dark:border-neutral-50 dark:bg-neutral-50 dark:text-neutral-950'
+                : 'border-neutral-200 text-neutral-600 hover:bg-neutral-50 dark:border-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-900',
+            )}
+            key={option.value}
+            onClick={() => props.onChange(option.value)}
+            role="tab"
+            type="button"
+          >
+            {Icon ? <Icon aria-hidden="true" className="size-3" /> : null}
+            {option.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}