diff options
| -rw-r--r-- | apps/browser-extension/package.json | 2 | ||||
| -rw-r--r-- | apps/landing/package.json | 2 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx | 8 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/EditorCard.tsx | 13 | ||||
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/TagList.tsx | 4 | ||||
| -rw-r--r-- | apps/web/components/dashboard/search/SearchInput.tsx | 2 | ||||
| -rw-r--r-- | apps/web/components/dashboard/sidebar/AllLists.tsx | 6 | ||||
| -rw-r--r-- | apps/web/components/ui/info-tooltip.tsx | 2 | ||||
| -rw-r--r-- | apps/web/components/ui/input.tsx | 42 | ||||
| -rw-r--r-- | apps/web/lib/i18n/locales/en/translation.json | 1 | ||||
| -rw-r--r-- | apps/web/package.json | 2 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 20 |
12 files changed, 67 insertions, 37 deletions
diff --git a/apps/browser-extension/package.json b/apps/browser-extension/package.json index 2f4dd7f7..8a6a66b8 100644 --- a/apps/browser-extension/package.json +++ b/apps/browser-extension/package.json @@ -30,7 +30,7 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "cmdk": "^1.0.0", - "lucide-react": "^0.330.0", + "lucide-react": "^0.501.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.22.0", diff --git a/apps/landing/package.json b/apps/landing/package.json index 4d231443..b097ec72 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -19,7 +19,7 @@ "@svgr/webpack": "^8.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", - "lucide-react": "^0.330.0", + "lucide-react": "^0.501.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-select": "^5.8.0", diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx index be061148..a0437c71 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx @@ -46,7 +46,7 @@ function BottomRow({ }) { return ( <div className="justify flex w-full shrink-0 justify-between text-gray-500"> - <div className="flex items-center gap-2 overflow-hidden text-nowrap"> + <div className="flex items-center gap-2 overflow-hidden text-nowrap font-light"> {footer && <>{footer}•</>} <Link href={`/dashboard/preview/${bookmark.id}`} @@ -122,7 +122,7 @@ function ListView({ return ( <div className={cn( - "relative flex max-h-96 gap-4 overflow-hidden rounded-lg p-2 shadow-md", + "relative flex max-h-96 gap-4 overflow-hidden rounded-lg p-2", className, )} > @@ -167,7 +167,7 @@ function GridView({ return ( <div className={cn( - "relative flex flex-col overflow-hidden rounded-lg shadow-md", + "relative flex flex-col overflow-hidden rounded-lg", className, fitHeight && layout != "grid" ? "max-h-96" : "h-96", )} @@ -200,7 +200,7 @@ function CompactView({ bookmark, title, footer, className }: Props) { return ( <div className={cn( - "relative flex flex-col overflow-hidden rounded-lg shadow-md", + "relative flex flex-col overflow-hidden rounded-lg", className, "max-h-96", )} diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx index 1938fdec..75745bad 100644 --- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx +++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx @@ -148,7 +148,7 @@ export default function EditorCard({ className }: { className?: string }) { }; const cardHeight = useBookmarkLayoutSwitch({ grid: "h-96", - masonry: "h-96", + masonry: "h-48", list: undefined, compact: undefined, }); @@ -195,10 +195,10 @@ export default function EditorCard({ className }: { className?: string }) { ref={inputRef} disabled={isPending} className={cn( - "h-full w-full border-none p-0 text-lg focus-visible:ring-0", + "text-md h-full w-full border-none p-0 font-light focus-visible:ring-0", { "resize-none": bookmarkLayout !== "list" }, )} - placeholder={t("editor.placeholder")} + placeholder={t("editor.placeholder_v2")} onKeyDown={(e) => { if (demoMode) { return; @@ -218,7 +218,12 @@ export default function EditorCard({ className }: { className?: string }) { /> </FormControl> </FormItem> - <ActionButton loading={isPending} type="submit" variant="default"> + <ActionButton + disabled={!form.formState.dirtyFields.text} + loading={isPending} + type="submit" + variant="secondary" + > {form.formState.dirtyFields.text ? demoMode ? t("editor.disabled_submissions") diff --git a/apps/web/components/dashboard/bookmarks/TagList.tsx b/apps/web/components/dashboard/bookmarks/TagList.tsx index 49a1156c..593a269b 100644 --- a/apps/web/components/dashboard/bookmarks/TagList.tsx +++ b/apps/web/components/dashboard/bookmarks/TagList.tsx @@ -29,8 +29,8 @@ export default function TagList({ <Link key={t.id} className={cn( - badgeVariants({ variant: "outline" }), - "text-nowrap font-normal hover:bg-foreground hover:text-secondary", + badgeVariants({ variant: "secondary" }), + "text-nowrap font-light text-gray-700 hover:bg-foreground hover:text-secondary dark:text-gray-400", )} href={`/dashboard/tags/${t.id}`} > diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx index 5e46fc18..c58542bf 100644 --- a/apps/web/components/dashboard/search/SearchInput.tsx +++ b/apps/web/components/dashboard/search/SearchInput.tsx @@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input"; import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search"; import { useTranslation } from "@/lib/i18n/client"; import { cn } from "@/lib/utils"; +import { SearchIcon } from "lucide-react"; import { EditListModal } from "../lists/EditListModal"; import QueryExplainerTooltip from "./QueryExplainerTooltip"; @@ -99,6 +100,7 @@ const SearchInput = React.forwardRef< </Button> )} <Input + startIcon={SearchIcon} ref={inputRef} value={value} onChange={onChange} diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx index 823f439f..8296dafa 100644 --- a/apps/web/components/dashboard/sidebar/AllLists.tsx +++ b/apps/web/components/dashboard/sidebar/AllLists.tsx @@ -9,7 +9,7 @@ import { Button } from "@/components/ui/button"; import { CollapsibleTriggerTriangle } from "@/components/ui/collapsible"; import { useTranslation } from "@/lib/i18n/client"; import { cn } from "@/lib/utils"; -import { MoreHorizontal, Plus } from "lucide-react"; +import { CirclePlus, MoreHorizontal } from "lucide-react"; import type { ZBookmarkList } from "@karakeep/shared/types/lists"; import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils"; @@ -34,11 +34,11 @@ export default function AllLists({ return ( <ul className="max-h-full gap-y-2 overflow-auto text-sm"> - <li className="flex justify-between pb-2 font-bold"> + <li className="flex justify-between pb-3 font-bold"> <p>Lists</p> <EditListModal> <Link href="#"> - <Plus /> + <CirclePlus className="mr-4 size-5" strokeWidth={1.5} /> </Link> </EditListModal> </li> diff --git a/apps/web/components/ui/info-tooltip.tsx b/apps/web/components/ui/info-tooltip.tsx index 0254aa80..4dd97199 100644 --- a/apps/web/components/ui/info-tooltip.tsx +++ b/apps/web/components/ui/info-tooltip.tsx @@ -23,7 +23,7 @@ export default function InfoTooltip({ {variant === "tip" ? ( <Info color="#494949" - className={cn("cursor-pointer", className)} + className={cn("z-10 cursor-pointer", className)} size={size} /> ) : ( diff --git a/apps/web/components/ui/input.tsx b/apps/web/components/ui/input.tsx index 5543446c..09f9def9 100644 --- a/apps/web/components/ui/input.tsx +++ b/apps/web/components/ui/input.tsx @@ -1,20 +1,42 @@ import * as React from "react"; import { cn } from "@/lib/utils"; +import { LucideIcon } from "lucide-react"; -export type InputProps = React.InputHTMLAttributes<HTMLInputElement>; +export interface InputProps + extends React.InputHTMLAttributes<HTMLInputElement> { + startIcon?: LucideIcon; + endIcon?: LucideIcon; +} const Input = React.forwardRef<HTMLInputElement, InputProps>( - ({ className, type, ...props }, ref) => { + ({ className, type, startIcon, endIcon, ...props }, ref) => { + const StartIcon = startIcon; + const EndIcon = endIcon; + return ( - <input - type={type} - className={cn( - "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", - className, + <div className="relative w-full"> + {StartIcon && ( + <div className="absolute left-2 top-1/2 -translate-y-1/2 transform"> + <StartIcon size={18} className="text-muted-foreground" /> + </div> + )} + <input + type={type} + className={cn( + "flex h-10 w-full rounded-md border border-input bg-background px-4 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50", + startIcon ? "pl-8" : "", + endIcon ? "pr-8" : "", + className, + )} + ref={ref} + {...props} + /> + {EndIcon && ( + <div className="absolute right-3 top-1/2 -translate-y-1/2 transform"> + <EndIcon className="text-muted-foreground" size={18} /> + </div> )} - ref={ref} - {...props} - /> + </div> ); }, ); diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json index 4e622df5..1d99a96f 100644 --- a/apps/web/lib/i18n/locales/en/translation.json +++ b/apps/web/lib/i18n/locales/en/translation.json @@ -298,6 +298,7 @@ "import_as_text": "Import as Text Bookmark", "import_as_separate_bookmarks": "Import as separate Bookmarks", "placeholder": "Paste a link or an image, write a note or drag and drop an image in here…", + "placeholder_v2": "Paste a link, write a note or drop an image…", "new_item": "NEW ITEM", "disabled_submissions": "Submissions are disabled", "text_toolbar": { diff --git a/apps/web/package.json b/apps/web/package.json index 1b26b183..34e4752a 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -64,7 +64,7 @@ "i18next": "^23.16.5", "i18next-resources-to-backend": "^1.2.1", "lexical": "^0.20.2", - "lucide-react": "^0.330.0", + "lucide-react": "^0.501.0", "next": "14.2.25", "next-auth": "^4.24.5", "next-i18next": "^15.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9dac1f20..6c077304 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,8 +95,8 @@ importers: specifier: ^1.0.0 version: 1.0.0(@types/react-dom@18.2.19)(@types/react@18.2.58)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) lucide-react: - specifier: ^0.330.0 - version: 0.330.0(react@18.3.1) + specifier: ^0.501.0 + version: 0.501.0(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -234,8 +234,8 @@ importers: specifier: ^2.1.0 version: 2.1.0 lucide-react: - specifier: ^0.330.0 - version: 0.330.0(react@18.3.1) + specifier: ^0.501.0 + version: 0.501.0(react@18.3.1) react: specifier: ^18.3.1 version: 18.3.1 @@ -645,8 +645,8 @@ importers: specifier: ^0.20.2 version: 0.20.2 lucide-react: - specifier: ^0.330.0 - version: 0.330.0(react@18.3.1) + specifier: ^0.501.0 + version: 0.501.0(react@18.3.1) next: specifier: 14.2.25 version: 14.2.25(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10445,10 +10445,10 @@ packages: react-native: '*' react-native-svg: ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 - lucide-react@0.330.0: - resolution: {integrity: sha512-CQwY+Fpbt2kxCoVhuN0RCZDCYlbYnqB870Bl/vIQf3ER/cnDDQ6moLmEkguRyruAUGd4j3Lc4mtnJosXnqHheA==} + lucide-react@0.501.0: + resolution: {integrity: sha512-E2KoyhW59fCb/yUbR3rbDer83fqn7a8NG91ZhIot2yWaPHjPyGzzsNKh40N//GezYShAuycf3TcQksRQznIsRw==} peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 magic-string@0.25.9: resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} @@ -27995,7 +27995,7 @@ snapshots: react-native-svg: 15.8.0(react-native@0.76.3(@babel/core@7.26.0)(@babel/preset-env@7.26.9(@babel/core@7.26.0))(@types/react@18.3.12)(react@18.3.1))(react@18.3.1) dev: false - lucide-react@0.330.0(react@18.3.1): + lucide-react@0.501.0(react@18.3.1): dependencies: react: 18.3.1 dev: false |
