refactor: simplify frontend structure

src/App.vue

@@ -83,7 +83,7 @@ provide('activatedView', activatedView)
 
 <template>
   <main
-    class="app-shell"
+    size-full flex flex-col select-none
     :style="{ '--window-titlebar-height': useNativeTitleBar ? '0px' : '40px' }"
   >
     <WindowHeader v-if="!useNativeTitleBar" shrink-0 />
@@ -98,8 +98,7 @@ provide('activatedView', activatedView)
 </template>
 
 <style lang="scss" scoped>
-.app-shell {
-  @apply size-full flex flex-col select-none;
+main {
   caret-color: var(--theme-text-caret);
 }
 </style>

src/components/LanguagePop/LanguagePop.vue

@@ -33,7 +33,10 @@ function updateOpen(open: boolean) {
 }
 
 function languageLabel(text: string) {
-  return text === 'Other' ? t('language_pop.other') : text
+  const normalized = text.trim()
+  if (normalized.toLowerCase() === 'unknown' || normalized.toLowerCase() === 'unknow')
+    return t('app.common.unknown')
+  return normalized === 'Other' ? t('language_pop.other') : normalized
 }
 </script>
 
@@ -45,6 +48,10 @@ function languageLabel(text: string) {
     <PopoverPortal v-if="anchorElement && shouldRenderContent">
       <PopoverContent
         class="language-pop"
+        z-50 w-270px rounded-6px border px-12px
+        py-10px outline-none
+        color="$ui-foreground"
+        backdrop-blur-8px backdrop-saturate-140
         :class="{ 'loading': visibleAnalyzing || !hasLanguages, 'dark-language-pop': isDarkTheme }"
         :reference="anchorElement"
         side="top"
@@ -55,44 +62,76 @@ function languageLabel(text: string) {
         @open-auto-focus.prevent
         @close-auto-focus.prevent
       >
-        <div v-if="visibleAnalyzing" class="state-panel">
-          <span class="state-loader" />
+        <div
+          v-if="visibleAnalyzing"
+          class="state-panel"
+          h-44px flex items-center justify-center gap-8px
+          text-12px color="$ui-muted-foreground"
+        >
+          <span
+            class="state-loader"
+            block size-13px shrink-0 rounded-full border-2
+          />
           <span>{{ t('language_pop.loading') }}</span>
         </div>
 
-        <div v-else-if="getAnalyzeError || !languagesGroup?.length" class="state-panel error">
+        <div
+          v-else-if="getAnalyzeError || !languagesGroup?.length"
+          class="state-panel error"
+          h-44px flex items-center justify-center gap-8px
+          text-12px color="$ui-muted-foreground"
+        >
           <span class="i-lucide:triangle-alert" />
           <span>{{ t('language_pop.failed') }}</span>
         </div>
 
         <template v-else>
-          <header class="language-pop-header">
-            <span>{{ t('language_pop.count', { count: languagesGroup.length }) }}</span>
+          <header mb-8px flex items-center justify-end>
+            <span shrink-0 text-11px color="$ui-muted-foreground">{{ t('language_pop.count', { count: languagesGroup.length }) }}</span>
           </header>
 
-          <div class="language-bar" :aria-label="t('language_pop.overall_label')">
+          <div
+            class="language-bar"
+            h-6px mb-9px rounded-full overflow-hidden flex
+            gap-1px
+            bg="$ui-hover-background"
+            :aria-label="t('language_pop.overall_label')"
+          >
             <span
               v-for="languageItem in languagesGroup"
               :key="languageItem.text"
+              block h-full
               :style="{ backgroundColor: languageItem.color ?? '#ccc', width: `${languageItem.percentage}%` }"
               :aria-label="`${languageLabel(languageItem.text)} ${languageItem.percentage}%`"
             />
           </div>
 
-          <ul class="language-list">
+          <ul
+            m-0 p-0 flex flex-col gap-7px
+            list-none
+          >
             <li
               v-for="languageItem in visibleLanguages"
               :key="languageItem.text"
+              min-w-0 flex items-center justify-between gap-10px
+              text-12px
             >
-              <div>
-                <span class="color-dot" :style="{ backgroundColor: languageItem.color ?? '#ccc' }" />
+              <div min-w-0 flex items-center gap-6px truncate>
+                <span
+                  class="color-dot"
+                  size-8px rounded-full shrink-0
+                  :style="{ backgroundColor: languageItem.color ?? '#ccc' }"
+                />
                 {{ languageLabel(languageItem.text) }}
               </div>
-              <span>
+              <span shrink-0 light:color="$gray-7" dark:color="$gray-8">
                 {{ languageItem.percentage }}%
               </span>
             </li>
-            <li v-if="hiddenLanguageCount" class="more-row">
+            <li
+              v-if="hiddenLanguageCount"
+              justify-start text-11px color="$ui-muted-foreground"
+            >
               <div>{{ t('language_pop.more', { count: hiddenLanguageCount }) }}</div>
             </li>
           </ul>
@@ -104,14 +143,10 @@ function languageLabel(text: string) {
 
 <style lang="scss">
 .language-pop {
-  @apply z-50 w-270px rounded-6px border px-12px py-10px outline-none;
-  @apply border-$ui-border color-$ui-foreground;
-  @apply backdrop-blur-8px backdrop-saturate-140;
-  background: var(--ui-popover-background);
-  box-shadow: var(--shadow-popup);
+  @apply border-$ui-border bg-$ui-popover-background shadow-$shadow-popup;
 
   &[data-state="open"] {
-    animation: language-pop-enter 120ms cubic-bezier(0.16, 1, 0.3, 1);
+    @apply animate-[language-pop-enter_120ms_cubic-bezier(0.16,1,0.3,1)];
   }
 }
 
@@ -120,60 +155,14 @@ function languageLabel(text: string) {
 }
 
 .state-panel {
-  @apply h-44px flex items-center justify-center gap-8px;
-  @apply text-12px color-$ui-muted-foreground;
-}
-
-.state-panel.error {
-  @apply color-$red-5;
-}
-
-.state-loader {
-  @apply block size-13px shrink-0 rounded-full border-2;
-  border-style: solid;
-  border-color: var(--ui-border);
-  border-top-color: var(--ui-primary);
-  animation: state-loader-spin 0.75s linear infinite;
-}
-
-.language-pop-header {
-  @apply mb-8px flex items-center justify-end;
-
-  > span {
-    @apply shrink-0 text-11px color-$ui-muted-foreground;
+  &.error {
+    @apply color-$red-5;
   }
 }
 
-.language-bar {
-  @apply h-6px mb-9px rounded-full overflow-hidden flex gap-1px bg-$ui-hover-background;
-
-  span {
-    @apply block h-full;
-  }
-}
-
-.language-list {
-  @apply m-0 p-0 flex flex-col gap-7px list-none;
-}
-
-.language-list li {
-  @apply min-w-0 flex items-center justify-between gap-10px text-12px;
-
-  div {
-    @apply min-w-0 flex items-center gap-6px truncate;
-  }
-
-  > span {
-    @apply shrink-0 light:color-$gray-7 dark:color-$gray-8;
-  }
-}
-
-.language-list .more-row {
-  @apply justify-start text-11px color-$ui-muted-foreground;
-}
-
-.color-dot {
-  @apply size-8px rounded-full shrink-0;
+.state-loader {
+  @apply border-solid border-$ui-border border-t-$ui-primary;
+  @apply animate-[state-loader-spin_0.75s_linear_infinite];
 }
 
 .language-pop.dark-language-pop {
@@ -187,12 +176,12 @@ function languageLabel(text: string) {
 }
 
 .language-pop.dark-language-pop .language-bar span {
-  opacity: 0.74;
+  @apply opacity-74;
   filter: saturate(0.72) brightness(0.92);
 }
 
 .language-pop.dark-language-pop .color-dot {
-  opacity: 0.84;
+  @apply opacity-84;
   filter: saturate(0.72) brightness(0.94);
   box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
 }
@@ -205,7 +194,7 @@ function languageLabel(text: string) {
 
 @keyframes language-pop-enter {
   from {
-    opacity: 0;
+    @apply opacity-0;
     transform: translateY(3px) scale(0.985);
   }
 }

src/components/RemoveProjectDialog/RemoveProjectDialog.vue

@@ -54,7 +54,10 @@ function confirmRemove(deleteFiles = false) {
       }}
     </template>
 
-    <p v-if="!isRemove" class="warning-text">
+    <p
+      v-if="!isRemove" mt-8px mb-0 text-13px lh-18px
+      color="$red-5"
+    >
       {{ t('remove_project_dialog.dialog_desc.delete_note') }}
     </p>
 
@@ -71,9 +74,3 @@ function confirmRemove(deleteFiles = false) {
     </template>
   </UiDialog>
 </template>
-
-<style lang="scss" scoped>
-.warning-text {
-  @apply mt-8px mb-0 text-13px lh-18px color-$red-5;
-}
-</style>

src/components/WindowHeader.vue

@@ -19,47 +19,68 @@ function closeWindow() {
 <template>
   <header
     class="window-header"
+    h-40px w-full shrink-0 flex items-center
+    bg="$ui-page-background"
     data-tauri-drag-region
   >
-    <span class="window-title" data-tauri-drag-region>CodeNest</span>
-
-    <div class="window-controls">
-      <button class="window-control" type="button" :aria-label="t('app.window.minimize')" @click="minimizeWindow">
-        <span class="window-control-icon minimize" />
+    <span
+      relative left-30px lh-20px text-13px font-500
+      font="$font-title"
+      data-tauri-drag-region
+    >CodeNest</span>
+
+    <div class="window-controls" h-full ml-auto flex items-center>
+      <button
+        class="window-control"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.minimize')"
+        @click="minimizeWindow"
+      >
+        <span class="window-control-icon minimize" relative block size-12px />
       </button>
-      <button class="window-control" type="button" :aria-label="t('app.window.maximize')" @click="toggleMaximizeWindow">
-        <span class="window-control-icon maximize" />
+      <button
+        class="window-control"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.maximize')"
+        @click="toggleMaximizeWindow"
+      >
+        <span class="window-control-icon maximize" relative block size-12px />
       </button>
-      <button class="window-control close" type="button" :aria-label="t('app.window.close')" @click="closeWindow">
-        <span class="window-control-icon close-icon" />
+      <button
+        class="window-control close"
+        relative h-full w-46px border-0 bg-transparent
+        p-0
+        flex items-center justify-center
+        light:color="$gray-1" dark:color="$gray-11"
+        type="button"
+        :aria-label="t('app.window.close')"
+        @click="closeWindow"
+      >
+        <span class="window-control-icon close-icon" relative block size-12px />
       </button>
     </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
 .window-header {
-  @apply h-40px w-full shrink-0 flex items-center;
-  @apply bg-$ui-page-background;
   -webkit-app-region: drag;
   -webkit-user-select: none;
 }
 
 .window-controls {
-  @apply h-full ml-auto flex items-center;
   -webkit-app-region: no-drag;
 }
 
-.window-title {
-  @apply relative left-30px lh-20px text-13px font-500;
-  font-family: var(--font-title);
-}
-
 .window-control {
-  @apply relative h-full w-46px border-0 bg-transparent p-0;
-  @apply flex items-center justify-center;
-  @apply color-$gray-1 dark:color-$gray-11;
-
   &:hover {
     @apply bg-$ui-hover-background;
   }
@@ -69,10 +90,6 @@ function closeWindow() {
   }
 }
 
-.window-control-icon {
-  @apply relative block size-12px;
-}
-
 .window-control-icon.minimize::before {
   content: "";
   @apply absolute left-1px right-1px top-6px h-1px bg-current;