Skip to content

Commit b549f8f

Browse files
blinko-spaceblinko-space
committed
💄style: improve ui style
1 parent f104cd9 commit b549f8f

File tree

10 files changed

+99
-40
lines changed

10 files changed

+99
-40
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@
6868
"jsonwebtoken": "^9.0.2",
6969
"langchain": "^0.3.2",
7070
"lexical": "0.17.1",
71-
"link-preview-extractor": "^1.0.2",
7271
"lodash": "^4.17.21",
7372
"lottie-react": "^2.4.0",
7473
"mantine-datatable": "^7.12.4",
@@ -114,6 +113,7 @@
114113
"trpc-to-openapi": "^2.0.2",
115114
"typed-emitter": "^2.1.0",
116115
"typeorm": "^0.3.20",
116+
"unfurl.js": "^6.4.0",
117117
"usehooks-ts": "^3.1.0",
118118
"zod": "^3.23.8"
119119
},

‎pnpm-lock.yaml‎

Lines changed: 59 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/fallback.png‎

18.2 KB
Loading

‎src/components/BlinkoCard/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export const BlinkoCard = observer(({ blinkoItem }: { blinkoItem: Note }) => {
3030
blinko.onMultiSelectNote(blinkoItem.id!)
3131
}
3232
}}>
33-
<Card onContextMenu={e => !isPc && e.stopPropagation()} shadow='none' className={`mb-4 flex flex-col p-4 bg-background transition-all ${blinko.curMultiSelectIds?.includes(blinkoItem.id!) ? 'border-2 border-primary' : ''}`}>
33+
<Card onContextMenu={e => !isPc && e.stopPropagation()} shadow='none'
34+
className={`hover:translate-y-1 mb-4 flex flex-col p-4 bg-background transition-all ${blinko.curMultiSelectIds?.includes(blinkoItem.id!) ? 'border-2 border-primary' : ''}`}>
3435
<div className="flex items-center select-none">
3536
<div className='mb-2 text-xs text-desc'>{dayjs(blinkoItem.createdAt).fromNow()}</div>
3637
{blinkoItem.isTop && <Icon className="ml-auto text-[#EFC646]" icon="solar:bookmark-bold" width="24" height="24" />}

‎src/components/BlinkoRightClickMenu/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export const BlinkoRightClickMenu = observer(() => {
136136
export const LeftCickMenu = observer(({ onTrigger, className }: { onTrigger: () => void, className: string }) => {
137137
return <Dropdown onOpenChange={e => onTrigger()}>
138138
<DropdownTrigger >
139-
<Icon onClick={onTrigger} className={`${className} text-desc hover:text-primary cursor-pointer`} icon="fluent:more-vertical-16-regular" width="16" height="16" />
139+
<Icon onClick={onTrigger} className={`${className} text-desc hover:text-primary cursor-pointer hover:scale-1.3 transition-all`} icon="fluent:more-vertical-16-regular" width="16" height="16" />
140140
</DropdownTrigger>
141141
<DropdownMenu aria-label="Static Actions">
142142
<DropdownItem key="EditItem"><EditItem /></DropdownItem>
@@ -151,10 +151,9 @@ export const LeftCickMenu = observer(({ onTrigger, className }: { onTrigger: ()
151151
<ArchivedItem />
152152
</DropdownItem>
153153

154-
<DropdownItem key="DeleteItem" className="text-danger" color="danger">
154+
<DropdownItem key="DeleteItem" className="text-danger" >
155155
<DeleteItem />
156156
</DropdownItem>
157-
158157
</DropdownMenu>
159158
</Dropdown>
160159
})

‎src/components/Common/Editor/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
110110
clearMarkdown() {
111111
if (mdxEditorRef.current) {
112112
mdxEditorRef.current.setMarkdown("")
113+
if (!isPc) return
113114
mdxEditorRef.current.focus(() => {
114115
onChange?.("")
115116
})
@@ -203,7 +204,7 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
203204

204205
return <Card
205206
shadow='none' {...getRootProps()}
206-
className={`p-2 relative border-2 border-[#cfcfcf] transition-all ${isDragAccept ? 'border-2 border-green-500 border-dashed transition-all' : ''}`}>
207+
className={`p-2 relative border-2 border-border transition-all ${isDragAccept ? 'border-2 border-green-500 border-dashed transition-all' : ''}`}>
207208
<div ref={cardRef}>
208209
<MDXEditor
209210
translation={(key, defaultValue) => {
@@ -223,8 +224,7 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot,
223224
onChange?.(v)
224225
}}
225226
autoFocus={{
226-
defaultSelection: 'rootEnd',
227-
preventScroll:true
227+
defaultSelection: 'rootEnd'
228228
}}
229229
markdown={content}
230230
plugins={[

‎src/components/Common/MarkdownRender.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,12 @@ const LinkPreview = ({ href }) => {
7575
return (
7676
<div className="link-preview">
7777
<a href={href} target="_blank" rel="noopener noreferrer">{href}</a>
78-
{store.previewData.value && <Card className='p-2 my-1 bg-sencondbackground rounded-lg select-none' radius='none' shadow='none'>
79-
<div className='flex items-center gap-2'>
80-
{store.previewData.value.image && <Image className='rounded-none' src={store.previewData.value.image} width={20} height={20}></Image>}
81-
<div>{store.previewData.value.domain}</div>
78+
{store.previewData.value && <Card className='p-2 my-1 bg-sencondbackground rounded-xl select-none ' radius='none' shadow='none'>
79+
<div className='flex items-center gap-2 w-full'>
80+
<div className='font-bold truncate text-sm'>{store.previewData.value?.title}</div>
81+
{store.previewData.value?.favicon && <Image fallbackSrc="/fallback.png" className='flex-1 rounded-full ml-auto' src={store.previewData.value.favicon} width={16} height={16}></Image>}
8282
</div>
83-
<div className='font-bold'>{store.previewData.value.title}</div>
84-
<div className='text-desc truncate'>{store.previewData.value.description}</div>
83+
<div className='text-desc truncate text-xs'>{store.previewData.value?.description}</div>
8584
</Card>}
8685
</div>
8786
);

‎src/components/Layout/index.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import { BlinkoAi } from "../BlinkoAi";
1717
import { ScrollArea } from "../Common/ScrollArea";
1818
import { BlinkoNewVersion } from "../BlinkoNewVersion";
1919
import { BlinkoRightClickMenu } from '@/components/BlinkoRightClickMenu';
20+
import { useMediaQuery } from "usehooks-ts";
2021

21-
export const SideBarItem = "p-2 flex flex-row items-center cursor-pointer gap-2 hover:bg-hover hover:bg-hover-foreground rounded-xl transition-all"
22+
export const SideBarItem = "p-2 flex flex-row items-center cursor-pointer gap-2 hover:bg-hover rounded-xl transition-all"
2223
export const CommonLayout = observer(({
2324
children,
2425
header,
@@ -29,6 +30,7 @@ export const CommonLayout = observer(({
2930
const router = useRouter()
3031
const [isOpen, setisOpen] = useState(false)
3132
const [isClient, setClient] = useState(false)
33+
const isPc = useMediaQuery('(min-width: 768px)')
3234
const { t } = useTranslation()
3335
const { theme } = useTheme();
3436
const user = RootStore.Get(UserStore)
@@ -53,7 +55,14 @@ export const CommonLayout = observer(({
5355
}
5456

5557
const content = (
56-
<div className="flex h-full w-64 flex-1 flex-col p-4">
58+
<div className="flex h-full w-64 flex-1 flex-col p-4 relative">
59+
<div className="absolute inset-0 z-[-1] h-[250px] w-[250px] overflow-hidden blur-3xl ">
60+
<div className="w-full h-[100%] bg-[#ffc65c] opacity-20"
61+
style={{ "clipPath": "circle(35% at 50% 50%)" }} />
62+
</div>
63+
64+
65+
5766
<div className="flex items-center gap-2 px-2 select-none w-full">
5867
{
5968
theme == 'dark' ? <Image src="/logo-dark.svg" width={100} /> : <Image src="/logo.svg" width={100} />
@@ -101,8 +110,12 @@ export const CommonLayout = observer(({
101110
</SidebarDrawer>
102111
<div className="flex w-full flex-col gap-y-1 sm:max-w-[calc(100%_-_250px)] bg-sencondbackground">
103112
{/* nav bar */}
104-
<header className="flex h-16 min-h-16 items-center justify-between gap-2 rounded-medium px-4 pt-2 pb-2">
105-
<div className="flex max-w-full items-center gap-2 md:p-2 w-full">
113+
<header className="relative flex h-16 min-h-16 items-center justify-between gap-2 rounded-medium px-2 md:px:4 pt-2 pb-2">
114+
<div className="absolute bottom-[20%] right-[5%] z-[0] h-[350px] w-[350px] overflow-hidden blur-3xl ">
115+
<div className="w-full h-[100%] bg-[#9936e6] opacity-20"
116+
style={{ "clipPath": "circle(50% at 50% 50%)" }} />
117+
</div>
118+
<div className="flex max-w-full items-center gap-2 md:p-2 w-full z-[1]">
106119
<Button
107120
isIconOnly
108121
className="flex sm:hidden"
@@ -124,6 +137,7 @@ export const CommonLayout = observer(({
124137
<Icon className="cursor-pointer hover:rotate-180 transition-all" onClick={e => blinkoStore.updateTicker++} icon="fluent:arrow-sync-12-filled" width="20" height="20" />
125138
<Input
126139
fullWidth
140+
size={isPc ? 'md' : 'sm'}
127141
variant="flat"
128142
aria-label="search"
129143
className={`ml-auto w-[200px] md:w-[300px]`}
@@ -177,10 +191,10 @@ export const CommonLayout = observer(({
177191
</div>
178192
{header}
179193
</header>
180-
194+
{/* backdrop */}
181195

182196
<ScrollArea onBottom={() => { }} className="flex h-[calc(100%_-_70px)] overflow-y-scroll scroll-container">
183-
<div className="flex h-full w-full flex-col rounded-medium" >
197+
<div className="relative flex h-full w-full flex-col rounded-medium " >
184198
{children}
185199
</div>
186200
</ScrollArea>

0 commit comments

Comments
 (0)