From 47c15fd5506154d5331a6b73a0f29a71c4a2092a Mon Sep 17 00:00:00 2001 From: Faisal Amir Date: Mon, 4 Dec 2023 18:38:06 +0700 Subject: [PATCH] Relayout hub screen --- core/src/types/index.ts | 5 + uikit/src/badge/index.tsx | 1 + uikit/src/badge/styles.scss | 8 +- uikit/src/button/index.tsx | 1 + uikit/src/button/styles.scss | 9 +- uikit/src/select/styles.scss | 4 +- web/containers/CardSidebar/index.tsx | 4 +- web/containers/ModalCancelDownload/index.tsx | 17 ++- .../ExploreModels/ExploreModelItem/index.tsx | 108 +++++++++++------- .../ExploreModelItemHeader/index.tsx | 74 +++++++----- .../ExploreModels/ExploreModelList/index.tsx | 14 ++- web/screens/ExploreModels/index.tsx | 86 +++++++++++--- 12 files changed, 230 insertions(+), 101 deletions(-) diff --git a/core/src/types/index.ts b/core/src/types/index.ts index 7580c2432..7a7faad6d 100644 --- 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 index a2eeaac2d..387932ff0 100644 --- 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 index cf8e52c8b..77feb0769 100644 --- 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 index 55be33f98..7561b5c73 100644 --- 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 index b103987c9..481508841 100644 --- a/uikit/src/button/styles.scss +++ b/uikit/src/button/styles.scss @@ -1,5 +1,5 @@ .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; @@ -7,6 +7,10 @@ @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 index a0bf625f0..2c9c03333 100644 --- 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 index 38264e457..c26033367 100644 --- a/web/containers/CardSidebar/index.tsx +++ b/web/containers/CardSidebar/index.tsx @@ -48,8 +48,8 @@ export default function CardSidebar({ > {title} diff --git a/web/containers/ModalCancelDownload/index.tsx b/web/containers/ModalCancelDownload/index.tsx index 4153b89ee..d1a6f1a44 100644 --- 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} ) : ( - + )} diff --git a/web/screens/ExploreModels/ExploreModelItem/index.tsx b/web/screens/ExploreModels/ExploreModelItem/index.tsx index 5b0c1e408..1ca539a7d 100644 --- 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(({ model }, ref) => { + const [open, setOpen] = useState('') + + const handleToggle = () => { + if (open === model.id) { + setOpen('') + } else { + setOpen(model.id) + } + } + return (
- -
-
- About -

{model.description}

-
- -
-
- Author -

{model.metadata.author}

+ + {open === model.id && ( +
+
+
+ About +

+ {model.description || '-'} +

+
+
+
+ + Author + +

{model.metadata.author}

+
+
+ + Model ID + +

{model.id}

+
+
+ + Tags + +
+ {model.metadata.tags.map((tag, i) => ( + + {tag} + + ))} +
+
+
-
- Compatibility -
- {/* - {toGigabytes(model.metadata.maxRamRequired)} RAM required - */} +
+
+ + Format + +

{model.format}

+
+
+ + Compatibility + +

-

- -
-
- Version -
- v{model.version} -
-
-
- Tags -
- {model.metadata.tags.map((tag, i) => ( - - {tag} - - ))} -
-
-
-
+ )}
) }) diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx index 6345d5f1e..6c34a2074 100644 --- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx +++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx @@ -1,16 +1,20 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useMemo } from 'react' import { Model } from '@janhq/core' import { Badge, Button } from '@janhq/uikit' import { atom, useAtomValue } from 'jotai' +import { ChevronDownIcon } from 'lucide-react' + +import { twMerge } from 'tailwind-merge' + import ModalCancelDownload from '@/containers/ModalCancelDownload' import { MainViewState } from '@/constants/screens' -import { ModelPerformance, TagType } from '@/constants/tagType' +// import { ModelPerformance, TagType } from '@/constants/tagType' import useDownloadModel from '@/hooks/useDownloadModel' import { useDownloadState } from '@/hooks/useDownloadState' @@ -21,18 +25,20 @@ import { toGigabytes } from '@/utils/converter' type Props = { model: Model + onClick: () => void + open: string } -const ExploreModelItemHeader: React.FC = ({ model }) => { - console.log(model) +const ExploreModelItemHeader: React.FC = ({ model, onClick, open }) => { const { downloadModel } = useDownloadModel() const { downloadedModels } = useGetDownloadedModels() const { modelDownloadStateAtom, downloadStates } = useDownloadState() - const [title, setTitle] = useState('Recommended') + // const [title, setTitle] = useState('Recommended') + + // const [performanceTag, setPerformanceTag] = useState( + // ModelPerformance.PerformancePositive + // ) - const [performanceTag, setPerformanceTag] = useState( - ModelPerformance.PerformancePositive - ) const downloadAtom = useMemo( () => atom((get) => get(modelDownloadStateAtom)[model.id]), [model.id] @@ -48,18 +54,14 @@ const ExploreModelItemHeader: React.FC = ({ model }) => { const isDownloaded = downloadedModels.find((md) => md.id === model.id) != null let downloadButton = ( - + ) if (isDownloaded) { downloadButton = (
- +