chore: Merge branch 'dev'

openRin · Jul 6, 2024 · ee88254 · ee88254
2 parents a01c05f + 3b757b9
commit ee88254
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 26 deletions.
diff --git a/client/src/base.css b/client/src/base.css
@@ -10,8 +10,8 @@
       @apply bg-neutral-100 dark:bg-neutral-700;
     }
 
-    .bg-hover {
-      @apply hover:bg-neutral-200 dark:hover:bg-neutral-600;
+    .bg-active {
+      @apply active:bg-neutral-200 dark:active:bg-neutral-600;
     }
 
     .shadow-light {

diff --git a/client/src/components/feed_card.tsx b/client/src/components/feed_card.tsx
@@ -1,15 +1,16 @@
 import { Link } from "wouter";
 import { useTranslation } from "react-i18next";
 import { timeago } from "../utils/timeago";
+import { HashTag } from "./hashtag";
 export function FeedCard({ id, title, avatar, draft, listed, summary, hashtags, createdAt, updatedAt }: { id: string, avatar?: string, draft?: number, listed?: number, title: string, summary: string, hashtags: { id: number, name: string }[], createdAt: Date, updatedAt: Date }) {
     const { t } = useTranslation()
     return (
         <>
-            <Link href={`/feed/${id}`} target="_blank" className="wauto rounded-2xl bg-w bg-hover m-2 p-6 duration-300 ani-show">
+            <Link href={`/feed/${id}`} target="_blank" className="w-full rounded-2xl bg-w m-2 p-6 duration-300 ani-show bg-active">
                 {avatar &&
-                    <div className="flex flex-row items-center mb-2">
+                    <div className="flex flex-row items-center mb-2 rounded-xl overflow-clip">
                         <img src={avatar} alt=""
-                            className="object-cover object-center w-full max-h-96 rounded-xl" />
+                            className="object-cover object-center w-full max-h-96 hover:scale-105 translation duration-300" />
                     </div>}
                 <h1 className="text-xl font-bold text-gray-700 dark:text-white text-pretty overflow-hidden">
                     {title}
@@ -30,11 +31,9 @@ export function FeedCard({ id, title, avatar, draft, listed, summary, hashtags,
                     {summary}
                 </p>
                 {hashtags.length > 0 &&
-                    <div className="mt-2 flex flex-row">
+                    <div className="mt-2 flex flex-row space-x-2">
                         {hashtags.map(({ name }, index) => (
-                            <div key={index} className="bg-neutral-100 dark:bg-neutral-600 dark:text-neutral-300 py-1 px-2 m-1 rounded-lg">
-                                {name}
-                            </div>
+                            <HashTag key={index} name={name} />
                         ))}
                     </div>
                 }

diff --git a/client/src/components/hashtag.tsx b/client/src/components/hashtag.tsx
@@ -0,0 +1,9 @@
+export function HashTag({ name }: { name: string }) {
+    return (<div className="flex gap-0.5">
+        <div className="text-sm opacity-70 italic dark:text-gray-300">#</div>
+        <div className="text-sm opacity-70 dark:text-gray-300">
+            {name}
+        </div>
+    </div>
+    )
+}
diff --git a/client/src/components/header.tsx b/client/src/components/header.tsx
@@ -105,7 +105,7 @@ function UserAvatar({ profile, className, mobile }: { className?: string, profil
         </> : <>
             <button title={githubLoginText} aria-label={githubLoginText}
                 onClick={() => window.location.href = `${oauth_url}`}
-                className={`flex rounded-xl border dark:border-neutral-600 ${mobile ? "bg-secondary" : "bg-w"} h-10 sm:h-auto px-2 py-2 bg-w bg-hover t-primary items-center justify-center`}>
+                className={`flex rounded-xl border dark:border-neutral-600 ${mobile ? "bg-secondary" : "bg-w"} h-10 sm:h-auto px-2 py-2 bg-w bg-active t-primary items-center justify-center`}>
                 <i className="ri-github-line ri-xl"></i>
                 <p className="text-sm ml-1">
                     {githubLoginText}
@@ -188,7 +188,7 @@ function LanguageSwitch({ className }: { className?: string }) {
         <div className={className + " flex flex-row items-center"}>
             <Popup trigger={
                 <button title={label} aria-label={label}
-                    className="flex rounded-full border dark:border-neutral-600 px-2 bg-w aspect-[1] items-center justify-center t-primary bg-hover">
+                    className="flex rounded-full border dark:border-neutral-600 px-2 bg-w aspect-[1] items-center justify-center t-primary bg-active">
                     <i className="ri-translate-2"></i>
                 </button>
             }

diff --git a/client/src/components/icon.tsx b/client/src/components/icon.tsx
@@ -1,14 +1,14 @@
 export function Icon({ name, label, className, onClick, hover = true }: { name: string, label: string, className?: string, onClick: () => any, hover?: boolean }) {
     return (
-        <button title={label} aria-label={label} onClick={onClick} className={`max-w-12 flex rounded-full border px-2 bg-w aspect-[1] items-center justify-center t-primary ${hover ? "bg-hover" : ""} ` + className}>
+        <button title={label} aria-label={label} onClick={onClick} className={`max-w-12 flex rounded-full border px-2 bg-w aspect-[1] items-center justify-center t-primary ${hover ? "bg-active" : ""} ` + className}>
             <i className={name}></i>
         </button>
     )
 }
 
 export function IconSmall({ name, label, className, onClick, hover = true }: { name: string, label: string, className?: string, onClick: () => any, hover?: boolean }) {
     return (
-        <button title={label} aria-label={label} onClick={onClick} className={`max-w-8 flex rounded-full border px-2 bg-w aspect-[1] items-center justify-center t-primary ${hover ? "bg-hover" : ""} ` + className}>
+        <button title={label} aria-label={label} onClick={onClick} className={`max-w-8 flex rounded-full border px-2 bg-w aspect-[1] items-center justify-center t-primary ${hover ? "bg-active" : ""} ` + className}>
             <i className={name}></i>
         </button>
     )

diff --git a/client/src/page/feed.tsx b/client/src/page/feed.tsx
@@ -12,6 +12,7 @@ import { ProfileContext } from "../state/profile";
 import { headersWithAuth } from "../utils/auth";
 import { siteName } from "../utils/constants";
 import { timeago } from "../utils/timeago";
+import { HashTag } from "../components/hashtag";
 
 type Feed = {
   id: number;
@@ -195,12 +196,7 @@ export function FeedPage({ id }: { id: string }) {
                   {feed.hashtags.length > 0 && (
                     <div className="flex flex-row gap-2">
                       {feed.hashtags.map(({ name }, index) => (
-                        <div className="flex gap-0.5">
-                          <div className="text-sm opacity-70 italic dark:text-gray-300">#</div>
-                          <div key={index} className="text-sm opacity-70 dark:text-gray-300">
-                            {name}
-                          </div>
-                        </div>
+                        <HashTag key={index} name={name} />
                       ))}
                     </div>
                   )}

diff --git a/client/src/page/feeds.tsx b/client/src/page/feeds.tsx
@@ -98,9 +98,11 @@ export function FeedsPage() {
                         </div>
                     </div>
                     <Waiting for={status === 'idle'}>
+                        <div className="wauto flex flex-col">
                         {feeds[listState].data.map(({ id, ...feed }: any) => (
                             <FeedCard key={id} id={id} {...feed} />
                         ))}
+                        </div>
                         <div className="wauto flex flex-row items-center mt-4 ani-show">
                             {page > 1 &&
                                 <Link href={`/?type=${listState}&page=${(page - 1)}`}

diff --git a/client/src/page/friends.tsx b/client/src/page/friends.tsx
@@ -191,19 +191,19 @@ function Friend({ friend }: { friend: FriendItem }) {
     ]
     return (
         <>
-            <div title={friend.health} onClick={(e) => { console.log(e); window.open(friend.url) }} className="bg-hover w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative ani-show">
+            <a title={friend.name} href={friend.url} target="_blank" className="bg-active w-full bg-w rounded-xl p-4 flex flex-col justify-center items-center relative ani-show">
                 <div className="w-16 h-16">
-                    <img className={"rounded-xl " + (friend.health.length > 0 ? "grayscale" : "")} src={friend.avatar} alt={friend.name} />
+                    <img className={"rounded-full " + (friend.health.length > 0 ? "grayscale" : "")} src={friend.avatar} alt={friend.name} />
                 </div>
                 <p className="text-base text-center">{friend.name}</p>
                 {friend.health.length == 0 && <p className="text-sm text-neutral-500 text-center">{friend.desc}</p>}
                 {friend.accepted != 1 && <p className={`${friend.accepted === 0 ? "t-primary" : "text-theme"}`}>{statusOption[friend.accepted + 1].label}</p>}
                 {friend.health.length > 0 && <p className="text-sm text-gray-500 text-center">{errorHumanize(friend.health)}</p>}
                 {(profile?.permission || profile?.id === friend.uid) && <>
-                    <button onClick={(e) => { e.stopPropagation(); setIsOpen(true) }} className="absolute top-0 right-0 m-2 px-2 py-1 bg-secondary t-primary rounded-full bg-hover">
+                    <button onClick={(e) => { e.preventDefault(); setIsOpen(true) }} className="absolute top-0 right-0 m-2 px-2 py-1 bg-secondary t-primary rounded-full bg-active">
                         <i className="ri-settings-line"></i>
                     </button></>}
-            </div >
+            </a>
 
             <Modal
                 isOpen={modalIsOpen}
@@ -263,8 +263,8 @@ function Friend({ friend }: { friend: FriendItem }) {
                     <Input value={avatar} setValue={setAvatar} placeholder={t('avatar.url')} className="mt-2" />
                     <Input value={url} setValue={setUrl} placeholder={t('url')} className="my-2" />
                     <div className='flex flex-row justify-center space-x-2'>
-                        <button onClick={deleteFriend} className="bg-secondary text-theme rounded-full bg-hover px-4 py-2 mt-2">{t('delete.title')}</button>
-                        <button onClick={updateFriend} className="bg-secondary t-primary rounded-full bg-hover px-4 py-2 mt-2">{t('save')}</button>
+                        <button onClick={deleteFriend} className="bg-secondary text-theme rounded-full bg-active px-4 py-2 mt-2">{t('delete.title')}</button>
+                        <button onClick={updateFriend} className="bg-secondary t-primary rounded-full bg-active px-4 py-2 mt-2">{t('save')}</button>
                     </div>
                 </div >
             </Modal>

diff --git a/server/src/services/friends.ts b/server/src/services/friends.ts
@@ -72,7 +72,7 @@ export function FriendService() {
                 .put('/:id', async ({ admin, uid, set, params: { id }, body: { name, desc, avatar, url, accepted } }) => {
                     const config = ClientConfig()
                     const enable = await config.getOrDefault('friend_apply_enable', true)
-                    if (!enable) {
+                    if (!enable && !admin) {
                         set.status = 403;
                         return 'Friend Link Apply Disabled';
                     }