feat: Modernize UI with comprehensive UX improvements and contemporary design

src/App.vue

@@ -7,7 +7,9 @@ import { loadingOxc } from '~/composables/oxc'
 
 <template>
   <Suspense>
-    <div class="w-screen flex bg-white md:h-screen dark:bg-[#1b1b1f]">
+    <div
+      class="h-screen w-screen flex overflow-hidden from-white via-blue-50/30 to-purple-50/20 bg-gradient-to-br dark:from-[#1b1b1f] dark:via-[#1b1b2f] dark:to-[#1f1b2f] dark:bg-gradient-to-br"
+    >
       <Sidebar />
       <div class="min-w-0 flex flex-1 flex-col">
         <Header />
@@ -17,11 +19,40 @@ import { loadingOxc } from '~/composables/oxc'
 
     <template #fallback>
       <div
-        class="h-screen w-screen flex flex-col items-center justify-center gap-4 text-2xl"
+        class="h-screen w-screen flex flex-col items-center justify-center gap-6 from-white via-blue-50/30 to-purple-50/20 bg-gradient-to-br dark:from-[#1b1b1f] dark:via-[#1b1b2f] dark:to-[#1f1b2f] dark:bg-gradient-to-br"
       >
-        <div class="i-ri:loader-2-line animate-spin text-6xl" />
-        <span v-if="loadingOxc">Loading Oxc wasm...</span>
-        <span v-else>Loading resources...</span>
+        <div class="relative">
+          <div
+            class="i-ri:loader-2-line animate-spin text-6xl text-blue-500 dark:text-blue-400"
+          />
+          <div
+            class="i-ri:loader-2-line absolute inset-0 animate-ping text-6xl text-blue-500/20 dark:text-blue-400/20"
+          />
+        </div>
+        <span
+          v-if="loadingOxc"
+          class="from-blue-600 to-purple-600 bg-gradient-to-r bg-clip-text px-4 text-center text-xl text-transparent font-medium dark:from-blue-400 dark:to-purple-400 md:text-2xl"
+          >Loading Oxc wasm...</span
+        >
+        <span
+          v-else
+          class="from-blue-600 to-purple-600 bg-gradient-to-r bg-clip-text px-4 text-center text-xl text-transparent font-medium dark:from-blue-400 dark:to-purple-400 md:text-2xl"
+          >Loading resources...</span
+        >
+        <div class="mt-4 flex gap-2">
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+            style="animation-delay: 0ms"
+          />
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-purple-500"
+            style="animation-delay: 150ms"
+          />
+          <div
+            class="h-2 w-2 animate-bounce rounded-full bg-blue-500"
+            style="animation-delay: 300ms"
+          />
+        </div>
       </div>
     </template>
   </Suspense>

src/components/CopyContainer.vue

@@ -21,11 +21,15 @@ function handleCopy() {
     <Button
       variant="ghost"
       size="sm"
-      class="absolute right-4 top-4 op0 transition-opacity group-hover:opacity-100"
+      class="absolute right-4 top-4 border border-[#e2e2e3] bg-white/80 opacity-0 shadow-lg backdrop-blur-sm transition-all dark:border-[#2e2e32] dark:bg-[#1b1b1f]/80 group-hover:opacity-100 hover:shadow-xl"
       @click="handleCopy"
     >
       <div
-        :class="copied ? 'i-ri:check-line text-green' : 'i-ri:file-copy-line'"
+        :class="
+          copied
+            ? 'i-ri:check-line text-green-500'
+            : 'i-ri:file-copy-line text-blue-500 dark:text-blue-400'
+        "
       />
     </Button>
   </div>

src/components/IoContainer.vue

@@ -33,8 +33,10 @@ function stringifyError(error: unknown) {
   <main class="min-h-0 flex flex-1">
     <Splitter :direction="splitterDirection" class="flex-1">
       <SplitterPanel :default-size="50" :min-size="20" class="flex flex-col">
-        <div class="min-w-0 flex flex-1 flex-col pt-2">
-          <div class="min-h-50vh flex-grow-2 flex-basis-none">
+        <div class="min-w-0 flex flex-1 flex-col pt-1 md:pt-2">
+          <div
+            class="min-h-50vh flex-grow-2 flex-basis-none overflow-hidden shadow-inner md:rounded-tl-xl"
+          >
             <InputEditor
               :language="monacoLanguage"
               :filename="`/test.${options.parser.extension}`"
@@ -44,25 +46,29 @@ function stringifyError(error: unknown) {
 
           <div
             v-if="oxc.getDiagnostics().length"
-            class="min-h-0 flex flex-1 flex-col gap2 overflow-auto border-t px-3 py-2 text-sm font-mono op80"
+            class="min-h-0 flex flex-1 flex-col gap2 overflow-auto border-t border-[#e2e2e3]/50 bg-amber-50/30 px-3 py-3 text-sm font-mono opacity-90 dark:border-[#2e2e32]/50 dark:bg-amber-950/10"
           >
             <DiagnosticPanel />
           </div>
         </div>
       </SplitterPanel>
 
-      <SplitterResizeHandle />
+      <SplitterResizeHandle
+        class="relative w-1.5 bg-[#e2e2e3]/40 transition-colors md:h-1.5 dark:bg-[#2e2e32]/40 hover:bg-[#3451b2]/20 dark:hover:bg-[#a8b1ff]/20"
+      />
 
       <SplitterPanel :default-size="50" :min-size="20" class="overflow-hidden">
-        <div class="h-full min-w-0 overflow-hidden">
+        <div
+          class="h-full min-w-0 overflow-hidden shadow-inner md:rounded-tr-xl"
+        >
           <Output v-if="!error" class="h-full overflow-auto" />
           <CopyContainer
             v-else
             :value="errorStr || ''"
             class="min-w-0 w-full flex"
           >
             <pre
-              class="h-full overflow-auto p-2 text-sm text-red-400"
+              class="m-2 h-full overflow-auto border border-red-200/50 rounded-xl bg-red-50/50 p-4 text-sm text-red-500 dark:border-red-800/50 dark:bg-red-950/20 dark:text-red-400"
               v-text="errorStr"
             />
           </CopyContainer>

src/components/header/Header.vue

@@ -7,10 +7,13 @@ import Switch from './Switch.vue'
 
 <template>
   <header
-    class="h-16 w-full flex justify-between border-b border-[#e2e2e3] px-8 dark:border-[#2e2e32]"
+    class="sticky top-0 z-50 h-16 w-full flex items-center justify-between border-b border-[#e2e2e3]/60 bg-white/80 px-4 shadow-sm backdrop-blur-xl dark:border-[#2e2e32]/60 dark:bg-[#1b1b1f]/80 md:px-8"
   >
     <Logo class="visible lg:invisible" />
-    <div class="hidden md:flex">
+    <div class="flex items-center gap-2 md:hidden">
+      <Switch />
+    </div>
+    <div class="hidden items-center md:flex">
       <Nav />
       <Switch />
       <Media />

src/components/header/Media.vue

@@ -4,43 +4,43 @@
   <div
     class="hidden items-center before:ml-4 before:mr-2 before:h-6 before:w-px xl:flex before:bg-[#e2e2e3] before:content-[''] dark:before:bg-[#2e2e32]"
   >
-    <ul class="flex items-center">
+    <ul class="flex items-center gap-1">
       <li>
         <a
-          class="mx-2 block"
+          class="group rounded-lg p-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
           href="https://bsky.app/profile/boshen.github.io"
           aria-label="twitter"
           target="_blank"
           rel="noopener"
         >
           <div
-            class="i-ri:bluesky-fill h-5 w-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]"
+            class="i-ri:bluesky-fill h-5 w-5 text-[#3c3c43]/[.78] transition-all group-hover:scale-110 dark:text-[#ebebf5]/[.6] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
           />
         </a>
       </li>
       <li>
         <a
-          class="mx-2 block"
+          class="group rounded-lg p-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
           href="https://discord.gg/9uXCAwqQZW"
           aria-label="discord"
           target="_blank"
           rel="noopener"
         >
           <div
-            class="i-ri:discord-fill h-5 w-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]"
+            class="i-ri:discord-fill h-5 w-5 text-[#3c3c43]/[.78] transition-all group-hover:scale-110 dark:text-[#ebebf5]/[.6] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
           />
         </a>
       </li>
       <li>
         <a
-          class="mx-2 block"
+          class="group rounded-lg p-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
           href="https://github.com/oxc-project/oxc"
           aria-label="github"
           target="_blank"
           rel="noopener"
         >
           <div
-            class="i-ri:github-fill h-5 w-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]"
+            class="i-ri:github-fill h-5 w-5 text-[#3c3c43]/[.78] transition-all group-hover:scale-110 dark:text-[#ebebf5]/[.6] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
           />
         </a>
       </li>

src/components/header/Nav.vue

@@ -13,18 +13,18 @@ import {
       <NavigationMenuItem>
         <NavigationMenuLink as-child>
           <a
-            class="flex items-center px-3"
+            class="group flex items-center rounded-lg px-3 py-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
             href="https://oxc.rs/docs/guide/introduction.html"
             target="_blank"
             rel="noopener"
           >
             <span
-              class="text-sm text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+              class="text-sm text-[#3c3c43] font-medium transition-colors dark:text-[#fffff5]/[.86] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
             >
               Guide
             </span>
             <div
-              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] transition-transform group-hover:translate-x-0.5 dark:text-[#fffff5]/[.6] group-hover:-translate-y-0.5"
             />
           </a>
         </NavigationMenuLink>
@@ -33,41 +33,45 @@ import {
       <NavigationMenuItem>
         <NavigationMenuLink as-child>
           <a
-            class="flex items-center px-3"
+            class="group flex items-center rounded-lg px-3 py-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
             href="https://oxc.rs/docs/learn/parser_in_rust/intro.html"
             target="_blank"
             rel="noopener"
           >
             <span
-              class="text-sm text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+              class="text-sm text-[#3c3c43] font-medium transition-colors dark:text-[#fffff5]/[.86] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
               >Learn</span
             >
             <div
-              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] transition-transform group-hover:translate-x-0.5 dark:text-[#fffff5]/[.6] group-hover:-translate-y-0.5"
             />
           </a>
         </NavigationMenuLink>
       </NavigationMenuItem>
 
       <NavigationMenuItem>
         <NavigationMenuLink
-          class="flex items-center px-3"
+          class="group flex items-center rounded-lg px-3 py-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
           href="https://oxc.rs/docs/contribute/introduction.html"
         >
           <span
-            class="text-sm text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+            class="text-sm text-[#3c3c43] font-medium transition-colors dark:text-[#fffff5]/[.86] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
           >
             Contribute
           </span>
           <div
-            class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+            class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] transition-transform group-hover:translate-x-0.5 dark:text-[#fffff5]/[.6] group-hover:-translate-y-0.5"
           />
         </NavigationMenuLink>
       </NavigationMenuItem>
 
       <NavigationMenuItem>
-        <NavigationMenuLink class="flex items-center px-3" href="#" active>
-          <span class="text-sm text-[#3451b2] font-medium dark:text-[#a8b1ff]"
+        <NavigationMenuLink
+          class="flex items-center border border-blue-200/50 rounded-lg from-blue-500/10 to-purple-500/10 bg-gradient-to-r px-3 py-2 dark:border-blue-800/50 dark:from-blue-500/20 dark:to-purple-500/20"
+          href="#"
+          active
+        >
+          <span class="text-sm text-[#3451b2] font-semibold dark:text-[#a8b1ff]"
             >Playground</span
           >
         </NavigationMenuLink>
@@ -76,18 +80,18 @@ import {
       <NavigationMenuItem>
         <NavigationMenuLink as-child>
           <a
-            class="flex items-center px-3"
+            class="group flex items-center rounded-lg px-3 py-2 transition-all hover:bg-blue-50/50 dark:hover:bg-blue-950/20"
             href="#"
             target="_blank"
             rel="noopener"
           >
             <span
-              class="text-sm text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+              class="text-sm text-[#3c3c43] font-medium transition-colors dark:text-[#fffff5]/[.86] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
             >
               Resources
             </span>
             <div
-              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+              class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] transition-transform group-hover:translate-x-0.5 dark:text-[#fffff5]/[.6] group-hover:-translate-y-0.5"
             />
           </a>
         </NavigationMenuLink>

src/components/header/Switch.vue

@@ -33,20 +33,27 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       role="switch"
       :class="
         cn(
-          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-[#8e96aa]/[.16] dark:bg-[#657585]/[.16] border border-[#c2c2c4] dark:border-[#3c3f44] hover:border-[#a8b1ff] dark:hover:border-[#a8b1ff] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+          'peer inline-flex h-7 w-13 shrink-0 cursor-pointer items-center rounded-full bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-950/40 dark:to-purple-950/40 border-2 border-[#c2c2c4] dark:border-[#3c3f44] hover:border-[#a8b1ff] dark:hover:border-[#a8b1ff] transition-all shadow-sm hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50',
           props.class,
         )
       "
     >
       <SwitchThumb
         :class="
           cn(
-            'pointer-events-none block h-5 w-5 rounded-full bg-white dark:bg-[#1b1b1f] shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+            'pointer-events-none block h-5 w-5 rounded-full bg-gradient-to-br from-white to-blue-50 dark:from-[#1b1b1f] dark:to-blue-950/50 shadow-lg ring-2 ring-white/20 transition-all data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1',
             'flex items-center justify-center',
           )
         "
       >
-        <div :class="dark ? 'i-ri:moon-line' : 'i-ri:sun-line'" scale-70 />
+        <div
+          :class="
+            dark
+              ? 'i-ri:moon-line text-blue-400'
+              : 'i-ri:sun-line text-amber-500'
+          "
+          class="scale-75 transition-all"
+        />
       </SwitchThumb>
     </SwitchRoot>
   </div>

src/components/output/CodegenPanel.vue

@@ -26,17 +26,17 @@ const sourcemapLink = computed(() => {
     <OutputPreview :code="oxc.codegenText" lang="tsx" />
     <a
       v-if="sourcemapLink"
-      class="m-2 flex items-center self-start text-sm opacity-80"
+      class="group m-3 flex items-center self-start border border-[#e2e2e3]/50 rounded-lg px-3 py-2 text-sm transition-all dark:border-[#2e2e32]/50 hover:border-blue-200 hover:bg-blue-50/50 hover:shadow-md dark:hover:border-blue-800/50 dark:hover:bg-blue-950/20"
       :href="sourcemapLink"
       target="_blank"
       rel="noopener"
     >
       <span
-        class="text-[#3c3c43] font-medium dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]"
+        class="text-[#3c3c43] font-medium transition-colors dark:text-[#fffff5]/[.86] group-hover:text-[#3451b2] dark:group-hover:text-[#a8b1ff]"
         >Visualize source map</span
       >
       <div
-        class="i-ri:arrow-right-up-line ml-1 h-3 w-3 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]"
+        class="i-ri:arrow-right-up-line ml-2 h-4 w-4 text-[#3c3c43]/[.56] transition-transform group-hover:translate-x-0.5 dark:text-[#fffff5]/[.6] group-hover:-translate-y-0.5"
       />
     </a>
   </div>

src/components/output/DiagnosticPanel.vue

@@ -8,6 +8,7 @@ const { oxc } = await useOxc()
   <div
     v-for="(diag, i) in oxc.getDiagnostics()"
     :key="i"
+    class="mb-3 border-l-4 border-amber-500 rounded-lg bg-amber-50/50 p-3 shadow-sm transition-shadow dark:border-amber-600 dark:bg-amber-950/20 hover:shadow-md"
     style="white-space: pre"
   >
     {{ diag.codeframe }}

src/components/output/EsTreePanel.vue

@@ -31,11 +31,15 @@ const code = computed(() => {
 </script>
 
 <template>
-  <div w-full overflow-auto p2>
-    <Checkbox v-model="raw" label="Raw" />
+  <div class="w-full overflow-auto p-3">
+    <div
+      class="mb-3 inline-block rounded-lg from-blue-50/30 to-purple-50/30 bg-gradient-to-r p-2 dark:from-blue-950/10 dark:to-purple-950/10"
+    >
+      <Checkbox v-model="raw" label="Raw" />
+    </div>
 
     <OutputPreview v-if="raw" :code lang="json" />
-    <div v-else pl4 pt2 text-sm leading-relaxed font-mono>
+    <div v-else class="pl-4 pt-2 text-sm leading-relaxed font-mono">
       <AstProperty :value root open />
     </div>
   </div>