refactor(tabby-ui): add unused-imports lint (#993)

.github/workflows/autofix-tabby-ui.yml

@@ -35,6 +35,10 @@ jobs:
         working-directory: ./ee/tabby-ui
         run: yarn install
 
+      - name: Lint
+        working-directory: ./ee/tabby-ui
+        run: yarn lint:fix
+
       - name: Format
         working-directory: ./ee/tabby-ui
         run: yarn format:write

ee/tabby-ui/.eslintrc.json

@@ -6,8 +6,9 @@
     "prettier",
     "plugin:tailwindcss/recommended"
   ],
-  "plugins": ["tailwindcss"],
+  "plugins": ["tailwindcss", "unused-imports"],
   "rules": {
+    "unused-imports/no-unused-imports": "error",
     "tailwindcss/no-custom-classname": "off"
   },
   "settings": {

ee/tabby-ui/app/(dashboard)/components/sidebar.tsx

@@ -18,7 +18,7 @@ export default function Sidebar({ children, className }: SidebarProps) {
       className={cn('grid overflow-hidden lg:grid-cols-[280px_1fr]', className)}
     >
       <div className="hidden border-r bg-zinc-100/40 dark:bg-zinc-800/40 lg:block">
-        <div className="flex flex-col gap-2 h-full">
+        <div className="flex h-full flex-col gap-2">
           <div className="h-[12px]"></div>
           <div className="flex-1">
             <nav className="grid items-start gap-4 px-4 text-sm font-medium">

ee/tabby-ui/app/(dashboard)/components/worker-card.tsx

@@ -21,7 +21,7 @@ export default function RunnerCard({
     'ml-2',
     'whitespace-nowrap',
     'overflow-hidden',
-    'overflow-ellipsis'
+    'text-ellipsis'
   )
   const cpuMessage = `${cpuInfo} (${cpuCount} cores)`
   return (

ee/tabby-ui/app/(dashboard)/layout.tsx

@@ -16,7 +16,7 @@ export default function RootLayout({ children }: DashboardLayoutProps) {
   return (
     <>
       <Header />
-      <main className="bg-muted/50 flex flex-1 flex-col">
+      <main className="flex flex-1 flex-col bg-muted/50">
         <Sidebar className="flex-1">{children}</Sidebar>
       </main>
     </>

ee/tabby-ui/app/(dashboard)/page.tsx

@@ -7,7 +7,7 @@ import { WorkerKind } from '@/lib/gql/generates/graphql'
 import { useHealth } from '@/lib/hooks/use-health'
 import { useWorkers } from '@/lib/hooks/use-workers'
 import { useSession } from '@/lib/tabby/auth'
-import { useAuthenticatedGraphQLQuery, useGraphQLQuery } from '@/lib/tabby/gql'
+import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
 import { buttonVariants } from '@/components/ui/button'
 import {
   Dialog,
@@ -122,7 +122,7 @@ function MainPanel() {
         {!!registrationTokenRes?.registrationToken && (
           <div className="flex items-center gap-1">
             Registeration token:{' '}
-            <span className="text-sm rounded-lg text-red-600">
+            <span className="rounded-lg text-sm text-red-600">
               {registrationTokenRes.registrationToken}
             </span>
             <CopyButton value={registrationTokenRes.registrationToken} />

ee/tabby-ui/app/auth/layout.tsx

@@ -4,7 +4,7 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="flex flex-col items-center justify-center flex-1">
+    <div className="flex flex-1 flex-col items-center justify-center">
       {children}
     </div>
   )

ee/tabby-ui/app/auth/signin/components/signin.tsx

@@ -4,7 +4,7 @@ import UserSignInForm from './user-signin-form'
 
 export default function Signin() {
   return (
-    <div className="space-y-6 w-[350px]">
+    <div className="w-[350px] space-y-6">
       <div className="flex flex-col space-y-2 text-center">
         <h1 className="text-2xl font-semibold tracking-tight">Sign In</h1>
         <p className="text-sm text-muted-foreground">

ee/tabby-ui/app/auth/signup/components/signup.tsx

@@ -40,7 +40,7 @@ function Content({
   const invitationCode = searchParams.get('invitationCode') || undefined
 
   return (
-    <div className="space-y-6 w-[350px]">
+    <div className="w-[350px] space-y-6">
       <div className="flex flex-col space-y-2 text-center">
         <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
         <p className="text-sm text-muted-foreground">{description}</p>

ee/tabby-ui/app/playground/components/chat-sessions.tsx

@@ -19,7 +19,6 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 import { ListSkeleton } from '@/components/skeleton'
-import UserPanel from '@/components/user-panel'
 
 import { ClearChatsButton } from './clear-chats-button'
 import { EditChatTitleDialog } from './edit-chat-title-dialog'
@@ -75,7 +74,7 @@ export const ChatSessions = ({ className }: ChatSessionsProps) => {
                       key={chat.id}
                       onClick={e => setActiveChatId(chat.id)}
                       className={cn(
-                        'hover:bg-accent flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-zinc-900 transition-all hover:text-zinc-900  dark:text-zinc-50 hover:dark:bg-zinc-900 dark:hover:text-zinc-50',
+                        'flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-zinc-900 transition-all hover:bg-accent hover:text-zinc-900  dark:text-zinc-50 hover:dark:bg-zinc-900 dark:hover:text-zinc-50',
                         isActive && '!bg-zinc-200 dark:!bg-zinc-800'
                       )}
                     >

ee/tabby-ui/app/playground/components/edit-chat-title-dialog.tsx

@@ -11,7 +11,7 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
-import { IconArrowElbow, IconEdit, IconTrash } from '@/components/ui/icons'
+import { IconArrowElbow, IconEdit } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 import {
   Tooltip,

ee/tabby-ui/app/playground/page.tsx

@@ -12,7 +12,7 @@ export default function IndexPage() {
   return (
     <>
       <Header />
-      <main className="bg-muted/50 flex flex-1 flex-col">
+      <main className="flex flex-1 flex-col bg-muted/50">
         <Chats />
       </main>
     </>

ee/tabby-ui/components/chat-panel.tsx

@@ -44,7 +44,7 @@ export function ChatPanel({
   return (
     <div
       className={cn(
-        'from-muted/10 to-muted/30 bg-gradient-to-b from-10% to-50%',
+        'bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50%',
         className
       )}
     >
@@ -73,7 +73,7 @@ export function ChatPanel({
             )
           )}
         </div>
-        <div className="bg-background space-y-4 border-t px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
+        <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
           <PromptForm
             ref={promptFormRef}
             onSubmit={onSubmit}

ee/tabby-ui/components/header.tsx

@@ -28,7 +28,7 @@ export function Header() {
   const newVersionAvailable = isNewVersionAvailable(version, latestRelease)
 
   return (
-    <header className="from-background/10 via-background/50 to-background/80 sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b px-4 backdrop-blur-xl">
+    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
       <div className="flex items-center">
         <ThemeToggle />
         <Link href="/" className={cn(buttonVariants({ variant: 'link' }))}>

ee/tabby-ui/components/prompt-form.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { UseChatHelpers } from 'ai/react'
-import { debounce, has, isEqual } from 'lodash-es'
+import { debounce, has } from 'lodash-es'
 import useSWR from 'swr'
 
 import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
-import { useAuthenticatedApi, useSession } from '@/lib/tabby/auth'
+import { useAuthenticatedApi } from '@/lib/tabby/auth'
 import fetcher from '@/lib/tabby/fetcher'
 import type { ISearchHit, SearchReponse } from '@/lib/types'
 import { cn } from '@/lib/utils'
@@ -184,11 +184,11 @@ function PromptFormRenderer(
           return (
             <>
               <ComboboxAnchor>
-                <div className="bg-background relative flex max-h-60 w-full grow flex-col overflow-hidden px-8 sm:rounded-md sm:border sm:px-12">
+                <div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md sm:border sm:px-12">
                   <span
                     className={cn(
                       buttonVariants({ size: 'sm', variant: 'ghost' }),
-                      'bg-background hover:bg-background absolute left-0 top-4 h-8 w-8 rounded-full p-0 sm:left-4'
+                      'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 hover:bg-background sm:left-4'
                     )}
                   >
                     <IconEdit />
@@ -253,7 +253,7 @@ function PromptFormRenderer(
                                   {item?.doc?.name}(...)
                                 </div>
                               </div>
-                              <div className="text-muted-foreground flex-1 truncate text-right text-sm">
+                              <div className="flex-1 truncate text-right text-sm text-muted-foreground">
                                 {item?.doc?.body}
                               </div>
                             </div>
@@ -278,7 +278,7 @@ function PromptFormRenderer(
                           : ''}
                         {highlightedOption?.doc?.name}
                       </div>
-                      <div className="text-muted-foreground flex-1 whitespace-pre-wrap break-all">
+                      <div className="flex-1 whitespace-pre-wrap break-all text-muted-foreground">
                         {highlightedOption?.doc?.body}
                       </div>
                     </div>

ee/tabby-ui/components/ui/combobox.tsx

@@ -131,7 +131,7 @@ export const ComboboxOption = React.forwardRef<
       <div
         className={cn(
           'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-          highlighted && 'text-accent-foreground bg-accent',
+          highlighted && 'bg-accent text-accent-foreground',
           selected && 'font-bold',
           disabled && 'pointer-events-none opacity-50',
           className

ee/tabby-ui/components/ui/select.tsx

@@ -4,11 +4,7 @@ import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
 
 import { cn } from '@/lib/utils'
-import {
+import { IconCheck, IconChevronUpDown } from '@/components/ui/icons'
-  IconArrowDown,
-  IconCheck,
-  IconChevronUpDown
-} from '@/components/ui/icons'
 
 const Select = SelectPrimitive.Root
 

ee/tabby-ui/components/user-panel.tsx

@@ -10,7 +10,7 @@ export default function UserPanel() {
 
   return (
     session && (
-      <div className="py-4 flex justify-center text-sm font-medium">
+      <div className="flex justify-center py-4 text-sm font-medium">
         <span className="flex items-center gap-2">
           <span title="Sign out">
             <IconLogout className="cursor-pointer" onClick={signOut} />

ee/tabby-ui/lib/hooks/use-health.tsx

@@ -4,7 +4,7 @@ import useSWR, { SWRResponse } from 'swr'
 
 import fetcher from '@/lib/tabby/fetcher'
 
-import { useAuthenticatedApi, useSession } from '../tabby/auth'
+import { useAuthenticatedApi } from '../tabby/auth'
 
 export interface HealthInfo {
   device: 'metal' | 'cpu' | 'cuda'

ee/tabby-ui/lib/hooks/use-workers.ts

@@ -3,7 +3,7 @@ import { findIndex, groupBy, slice } from 'lodash-es'
 
 import { graphql } from '@/lib/gql/generates'
 import { Worker, WorkerKind } from '@/lib/gql/generates/graphql'
-import { useAuthenticatedGraphQLQuery, useGraphQLQuery } from '@/lib/tabby/gql'
+import { useAuthenticatedGraphQLQuery } from '@/lib/tabby/gql'
 
 import type { HealthInfo } from './use-health'
 

ee/tabby-ui/package.json

@@ -79,10 +79,10 @@
     "eslint-config-next": "13.4.7-canary.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-tailwindcss": "^3.12.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
     "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.2.4",
     "tailwind-merge": "^1.12.0",
     "tailwindcss": "^3.3.1",
     "tailwindcss-animate": "^1.0.5",

ee/tabby-ui/yarn.lock

@@ -3368,6 +3368,18 @@ eslint-plugin-tailwindcss@^3.12.0:
     fast-glob "^3.2.5"
     postcss "^8.4.4"
 
+eslint-plugin-unused-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz#d25175b0072ff16a91892c3aa72a09ca3a9e69e7"
+  integrity sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==
+  dependencies:
+    eslint-rule-composer "^0.3.0"
+
+eslint-rule-composer@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
+  integrity sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==
+
 eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
@@ -5815,11 +5827,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-organize-imports@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz#77967f69d335e9c8e6e5d224074609309c62845e"
-  integrity sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==
-
 prettier@^2.7.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"