Relayout hub screen

yuan505 · Dec 4, 2023 · 47c15fd · 47c15fd
1 parent 5d5139a
commit 47c15fd
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 99 deletions.
diff --git a/core/src/types/index.ts b/core/src/types/index.ts
@@ -183,6 +183,11 @@ export interface Model {
    */
   version: number;
 
+  /**
+   * The format of the model.
+   */
+  format: string;
+
   /**
    * The model download source. It can be an external url or a local filepath.
    */

diff --git a/uikit/src/badge/index.tsx b/uikit/src/badge/index.tsx
@@ -10,6 +10,7 @@ const badgeVariants = cva('badge', {
       secondary: 'badge-secondary',
       danger: 'badge-danger',
       outline: 'badge-outline',
+      pink: 'badge-pink',
     },
   },
   defaultVariants: {

diff --git a/uikit/src/badge/styles.scss b/uikit/src/badge/styles.scss
@@ -2,7 +2,11 @@
   @apply focus:ring-ring border-border inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
 
   &-primary {
-    @apply bg-primary text-primary-foreground hover:bg-primary/80 border-transparent;
+    @apply border-transparent bg-blue-100 text-blue-600;
+  }
+
+  &-pink {
+    @apply border-transparent bg-pink-100 text-pink-700;
   }
 
   &-success {
@@ -14,7 +18,7 @@
   }
 
   &-danger {
-    @apply bg-danger text-danger-foreground hover:bg-danger/80 border-transparent;
+    @apply border-transparent bg-red-100 text-red-700;
   }
 
   &-outline {

diff --git a/uikit/src/button/index.tsx b/uikit/src/button/index.tsx
@@ -13,6 +13,7 @@ const buttonVariants = cva('btn', {
       danger: 'btn-danger',
       outline: 'btn-outline',
       secondary: 'btn-secondary',
+      secondaryBlue: 'btn-secondary-blue',
       ghost: 'btn-ghost',
       success: 'btn-success',
     },

diff --git a/uikit/src/button/styles.scss b/uikit/src/button/styles.scss
@@ -1,12 +1,16 @@
 .btn {
-  @apply inline-flex items-center justify-center whitespace-nowrap rounded-md font-semibold transition-colors;
+  @apply inline-flex items-center justify-center whitespace-nowrap rounded-lg font-semibold transition-colors;
   @apply focus-visible:ring-ring cursor-pointer focus-visible:outline-none focus-visible:ring-1;
   @apply disabled:pointer-events-none disabled:opacity-50;
 
   &-primary {
     @apply bg-primary hover:bg-primary/90 text-white;
   }
 
+  &-secondary-blue {
+    @apply bg-blue-200 text-blue-900 hover:bg-blue-500/80;
+  }
+
   &-danger {
     @apply bg-danger text-danger-foreground hover:bg-danger/90;
   }
@@ -62,6 +66,9 @@
   &.btn-secondary {
     @apply bg-secondary hover:bg-secondary/80;
   }
+  &.btn-secondary-blue {
+    @apply bg-blue-200 text-blue-900 hover:bg-blue-200/80;
+  }
   &.btn-danger {
     @apply bg-danger hover:bg-danger/90;
   }

diff --git a/uikit/src/select/styles.scss b/uikit/src/select/styles.scss
@@ -1,5 +1,5 @@
 .select {
-  @apply ring-offset-background placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1;
+  @apply placeholder:text-muted-foreground border-border flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1;
 
   &-caret {
     @apply h-4 w-4 opacity-50;
@@ -18,7 +18,7 @@
   }
 
   &-item {
-    @apply hover:bg-secondary relative my-1 block w-full cursor-pointer select-none items-center rounded-sm px-4 py-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
+    @apply hover:bg-secondary relative my-1 block w-full cursor-pointer select-none items-center rounded-sm px-4 py-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
   }
 
   &-trigger-viewport {

diff --git a/web/containers/CardSidebar/index.tsx b/web/containers/CardSidebar/index.tsx
@@ -48,8 +48,8 @@ export default function CardSidebar({
         >
           <ChevronDownIcon
             className={twMerge(
-              'h-5 w-5 flex-none rotate-180 text-gray-400',
-              show && 'rotate-0'
+              'h-5 w-5 flex-none text-gray-400',
+              show && 'rotate-180'
             )}
           />
           <span className="font-bold">{title}</span>

diff --git a/web/containers/ModalCancelDownload/index.tsx b/web/containers/ModalCancelDownload/index.tsx
@@ -12,6 +12,7 @@ import {
   ModalHeader,
   Button,
   ModalTitle,
+  Progress,
 } from '@janhq/uikit'
 
 import { atom, useAtomValue } from 'jotai'
@@ -21,7 +22,6 @@ import { useDownloadState } from '@/hooks/useDownloadState'
 import { formatDownloadPercentage } from '@/utils/converter'
 
 import { extensionManager } from '@/extension'
-import { downloadingModelsAtom } from '@/helpers/atoms/Model.atom'
 
 type Props = {
   model: Model
@@ -46,7 +46,20 @@ export default function ModalCancelDownload({ model, isFromList }: Props) {
             {cancelText}
           </Button>
         ) : (
-          <Button>{cancelText}</Button>
+          <Button themes="secondaryBlue">
+            <div className="flex items-center space-x-2">
+              <span className="inline-block">Cancel</span>
+              <Progress
+                className="inline-block h-2 w-[80px] bg-blue-100"
+                value={
+                  formatDownloadPercentage(downloadState?.percent, {
+                    hidePercentage: true,
+                  }) as number
+                }
+              />
+              <span>{formatDownloadPercentage(downloadState.percent)}</span>
+            </div>
+          </Button>
         )}
       </ModalTrigger>
       <ModalContent>

diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 
-import { forwardRef } from 'react'
+import { forwardRef, useState } from 'react'
 
 import { Model } from '@janhq/core'
 import { Badge } from '@janhq/uikit'
@@ -12,58 +12,78 @@ type Props = {
 }
 
 const ExploreModelItem = forwardRef<HTMLDivElement, Props>(({ model }, ref) => {
+  const [open, setOpen] = useState('')
+
+  const handleToggle = () => {
+    if (open === model.id) {
+      setOpen('')
+    } else {
+      setOpen(model.id)
+    }
+  }
+
   return (
     <div
       ref={ref}
       className="mb-6 flex flex-col overflow-hidden rounded-xl border border-border bg-background/60"
     >
-      <ExploreModelItemHeader model={model} />
-      <div className="flex flex-col p-4">
-        <div className="mb-4 flex flex-col gap-1">
-          <span className="font-semibold">About</span>
-          <p>{model.description}</p>
-        </div>
-
-        <div className="mb-4 flex space-x-6 border-b border-border pb-4">
-          <div>
-            <span className="font-semibold">Author</span>
-            <p className="mt-1 font-medium">{model.metadata.author}</p>
-          </div>
-          <div>
-            <span className="mb-1 font-semibold">Compatibility</span>
-            <div className="mt-1 flex gap-2">
-              {/* <Badge
-                themes="secondary"
-                className="line-clamp-1 lg:line-clamp-none"
-                title={`${toGigabytes(
-                  model.metadata.maxRamRequired // TODO: check this
-                )} RAM required`}
-              >
-                {toGigabytes(model.metadata.maxRamRequired)} RAM required
-              </Badge> */}
+      <ExploreModelItemHeader
+        model={model}
+        onClick={handleToggle}
+        open={open}
+      />
+      {open === model.id && (
+        <div className="flex">
+          <div className="flex w-full flex-col border-t border-border p-4 ">
+            <div className="mb-6 flex flex-col gap-1">
+              <span className="font-semibold">About</span>
+              <p className="text-muted-foreground">
+                {model.description || '-'}
+              </p>
             </div>
-          </div>
-        </div>
-
-        <div className="grid grid-cols-3 items-center gap-4">
-          <div>
-            <span className="font-semibold">Version</span>
-            <div className="mt-2 flex space-x-2">
-              <Badge themes="outline">v{model.version}</Badge>
+            <div className="flex space-x-10">
+              <div>
+                <span className="font-semibold text-muted-foreground">
+                  Author
+                </span>
+                <p className="mt-2 font-medium">{model.metadata.author}</p>
+              </div>
+              <div>
+                <span className="mb-1 font-semibold text-muted-foreground">
+                  Model ID
+                </span>
+                <p className="mt-2 font-medium">{model.id}</p>
+              </div>
+              <div>
+                <span className="mb-1 font-semibold text-muted-foreground">
+                  Tags
+                </span>
+                <div className="mt-2 flex space-x-2">
+                  {model.metadata.tags.map((tag, i) => (
+                    <Badge key={i} themes={i === 0 ? 'primary' : 'pink'}>
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
             </div>
           </div>
-          <div>
-            <span className="font-semibold">Tags</span>
-            <div className="mt-2 flex space-x-2">
-              {model.metadata.tags.map((tag, i) => (
-                <Badge key={i} themes="outline">
-                  {tag}
-                </Badge>
-              ))}
+          <div className="w-48 flex-shrink-0 border-l border-t border-border p-4">
+            <div>
+              <span className="font-semibold text-muted-foreground">
+                Format
+              </span>
+              <p className="mt-2 font-medium uppercase">{model.format}</p>
+            </div>
+            <div className="mt-4">
+              <span className="font-semibold text-muted-foreground">
+                Compatibility
+              </span>
+              <p className="mt-2 font-medium">-</p>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   )
 })