icon-only

TabbyML · May 14, 2024 · 69fd288 · 69fd288
1 parent 4b27706
commit 69fd288
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 23 deletions.
diff --git a/ee/tabby-ui/app/(home)/page.tsx b/ee/tabby-ui/app/(home)/page.tsx
@@ -6,15 +6,14 @@ import { noop } from 'lodash-es'
 import Link from 'next/link'
 import { useTheme } from 'next-themes'
 
-import { cn } from '@/lib/utils'
 import { graphql } from '@/lib/gql/generates'
 import { useHealth } from '@/lib/hooks/use-health'
 import { useMe } from '@/lib/hooks/use-me'
 import { useExternalURL } from '@/lib/hooks/use-network-setting'
 import { useIsChatEnabled } from '@/lib/hooks/use-server-info'
 import { useSignOut } from '@/lib/tabby/auth'
 import { useMutation } from '@/lib/tabby/gql'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { Button } from '@/components/ui/button'
 import { CardContent, CardFooter } from '@/components/ui/card'
 import {
   IconChat,
@@ -34,6 +33,11 @@ import { CopyButton } from '@/components/copy-button'
 import SlackDialog from '@/components/slack-dialog'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { UserAvatar } from '@/components/user-avatar'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
 
 import Stats from './components/stats'
 
@@ -107,27 +111,48 @@ function Configuration({ className }: { className?: string }) {
         </span>
       </CardFooter>
 
-      <div className="flex gap-x-3 justify-between mt-4 mb-6 lg:mb-0">
-        <Link
-          className={cn(buttonVariants({ variant: theme === 'dark' ? 'default' : 'outline' }), "flex flex-1 items-center")}
+      <div className="mb-6 mt-3 flex gap-x-3 lg:mb-0">
+        <IDELink
           href="https://marketplace.visualstudio.com/items?itemName=TabbyML.vscode-tabby"
-          target='_blank'>
-            <IconVSCode  />
-            <p className="text-xs ml-1">VS Code</p>
-        </Link>
-        <Link
-          className={cn(buttonVariants({ variant: theme === 'dark' ? 'default' : 'outline' }), "flex flex-1 items-center")}
+          name='VS Code'
+          icon={<IconVSCode className="h-5 w-5" />}
+        />
+        <IDELink
           href="https://plugins.jetbrains.com/plugin/22379-tabby"
-          target='_blank'>
-            <IconJetBrains />
-            <p className="text-xs ml-1">JetBrains</p>
-        </Link>
-
+          name='JetBrains'
+          icon={<IconJetBrains className="h-5 w-5" />}
+        />
       </div>
     </div>
   )
 }
 
+function IDELink ({
+  href,
+  name,
+  icon
+}: {
+  href: string;
+  name: string;
+  icon: React.ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Link
+          href={href}
+          className="transition-all hover:opacity-80 dark:text-muted-foreground"
+          target='_blank'>
+            {icon}
+        </Link>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{name}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 function MainPanel() {
   const { data: healthInfo } = useHealth()
   const [{ data }] = useMe()

diff --git a/ee/tabby-ui/components/ui/icons.tsx b/ee/tabby-ui/components/ui/icons.tsx
@@ -1420,10 +1420,11 @@ function IconVSCode({ className, ...props }: React.ComponentProps<'svg'>) {
       xmlns="http://www.w3.org/2000/svg"
       className={cn('h-4 w-4', className)}
       viewBox="0 0 1024 1024"
+      fill="currentColor"
       {...props}>
         <path
           d="M746.222933 102.239573l-359.799466 330.820267L185.347413 281.4976 102.2464 329.864533l198.20544 182.132054-198.20544 182.132053 83.101013 48.510293 201.076054-151.558826 359.799466 330.676906 175.527254-85.251413V187.4944z m0 217.57952v384.341334l-255.040853-192.177494z"
-          fill="#000000" />
+          />
     </svg>
   )
 }
@@ -1434,14 +1435,14 @@ function IconJetBrains({ className, ...props }: React.ComponentProps<'svg'>) {
       xmlns="http://www.w3.org/2000/svg"
       className={cn('h-4 w-4', className)}
       viewBox="0 0 1024 1024"
+      fill="currentColor"
       {...props}>
         <path
-          d="M64 960h896V64H64z"
-          fill="#000000" />
-          <path
-            d="M161.51 848.32h336V792h-336zM197.4 318.72a53 53 0 0 0 38.4-14.08 51.76 51.76 0 0 0 12.8-39V176h-38.4v89.6c0 12.8-6.4 19.2-16 19.2-9-0.64-17.28-5.12-21.76-12.8l-25 23.68a57.67 57.67 0 0 0 49.96 23.04zM303.36 230.4v-21.76h74.88V176H265.6v139.52h113.28v-33.28h-74.24v-22.4h65.92V230.4zM433.09 316.16h39V209.92h42.24V176H391.49v33.92h41.6zM228.88 371.22a55.87 55.87 0 0 1 38.4 12.8 32 32 0 0 1 9 22.4c0 14.08-8.32 26.88-21.76 31.36 16.64 3.2 28.16 17.28 27.52 33.92 0 24.28-19.2 39-52.48 39H163V371.22zM220 402.54h-19.2v24.32h18.56c11.381 0 18.39-3.748 18.557-11.861l0.003-0.299c-0.01-7.7-6.41-12.16-17.92-12.16z m-19.2 51.67v25.6h24.32c11.52 0 18.56-4.48 18.56-12.8 0-7-6.4-12.8-19.2-12.8h-23.69 0.01zM356.91 371.19a64.87 64.87 0 0 1 44.8 15.36c8.96 8.32 13.44 19.84 13.44 32.64 0.64 18.56-11.52 35.81-28.8 42.88l33.28 48.64h-44.8l-28.16-42.24h-12.8v42.24h-38.4V371.19z m-1.6 34.04h-21.76v33.92l21.76-0.64c12.8 0 20.48-6.4 20.48-16.64 0-10.88-7.68-16.64-20.48-16.64z" fill="#FFFFFF" /><path d="M505.9 370.13l59.52 140.8h-41.6l-9.6-25h-54.4l-10.24 25h-40.32l59.52-140.8h37.12z m-18.22 46l-16 39.68h30.72l-14.72-39.68zM571.14 511h39V370.88h-39zM715.78 511h33.92V370.88h-38.4v74.88l-50.56-74.88H624.9V511h38.4v-76.8zM816.47 401.36c14.08 0 27.52 5.12 39 13.44l18.56-27.52a88.83 88.83 0 0 0-57.6-18.56c-33.28 0-53.76 19.2-53.76 44.8 0 28.8 22.4 37.12 52.48 43.52 19.2 5.12 23.68 7.68 23.68 14.08 0 5.76-5.76 9.6-16 9.6-16.64-0.64-32.64-6.4-44.8-16.64l-21.76 25.6c18.56 14.72 41.6 23 64.64 22.4 34.56 0 57-16.64 57-44.8 0-26.24-19.2-36.48-51.2-43.52-19.84-4.48-24.32-7-24.32-13.44 0-5.12 4.48-8.96 14.08-8.96z"
-            fill="#FFFFFF"
-          />
+          d="M64 960h896V64H64z" />
+        <path
+          d="M161.51 848.32h336V792h-336zM197.4 318.72a53 53 0 0 0 38.4-14.08 51.76 51.76 0 0 0 12.8-39V176h-38.4v89.6c0 12.8-6.4 19.2-16 19.2-9-0.64-17.28-5.12-21.76-12.8l-25 23.68a57.67 57.67 0 0 0 49.96 23.04zM303.36 230.4v-21.76h74.88V176H265.6v139.52h113.28v-33.28h-74.24v-22.4h65.92V230.4zM433.09 316.16h39V209.92h42.24V176H391.49v33.92h41.6zM228.88 371.22a55.87 55.87 0 0 1 38.4 12.8 32 32 0 0 1 9 22.4c0 14.08-8.32 26.88-21.76 31.36 16.64 3.2 28.16 17.28 27.52 33.92 0 24.28-19.2 39-52.48 39H163V371.22zM220 402.54h-19.2v24.32h18.56c11.381 0 18.39-3.748 18.557-11.861l0.003-0.299c-0.01-7.7-6.41-12.16-17.92-12.16z m-19.2 51.67v25.6h24.32c11.52 0 18.56-4.48 18.56-12.8 0-7-6.4-12.8-19.2-12.8h-23.69 0.01zM356.91 371.19a64.87 64.87 0 0 1 44.8 15.36c8.96 8.32 13.44 19.84 13.44 32.64 0.64 18.56-11.52 35.81-28.8 42.88l33.28 48.64h-44.8l-28.16-42.24h-12.8v42.24h-38.4V371.19z m-1.6 34.04h-21.76v33.92l21.76-0.64c12.8 0 20.48-6.4 20.48-16.64 0-10.88-7.68-16.64-20.48-16.64z" fill="#FFFFFF" /><path d="M505.9 370.13l59.52 140.8h-41.6l-9.6-25h-54.4l-10.24 25h-40.32l59.52-140.8h37.12z m-18.22 46l-16 39.68h30.72l-14.72-39.68zM571.14 511h39V370.88h-39zM715.78 511h33.92V370.88h-38.4v74.88l-50.56-74.88H624.9V511h38.4v-76.8zM816.47 401.36c14.08 0 27.52 5.12 39 13.44l18.56-27.52a88.83 88.83 0 0 0-57.6-18.56c-33.28 0-53.76 19.2-53.76 44.8 0 28.8 22.4 37.12 52.48 43.52 19.2 5.12 23.68 7.68 23.68 14.08 0 5.76-5.76 9.6-16 9.6-16.64-0.64-32.64-6.4-44.8-16.64l-21.76 25.6c18.56 14.72 41.6 23 64.64 22.4 34.56 0 57-16.64 57-44.8 0-26.24-19.2-36.48-51.2-43.52-19.84-4.48-24.32-7-24.32-13.44 0-5.12 4.48-8.96 14.08-8.96z"
+          fill="#FFFFFF"
+        />
     </svg>
   )
 }