fix: add card columns option #155

blinko-space · Nov 23, 2024 · 0c5858c · 0c5858c
1 parent f0f1b0f
commit 0c5858c
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 15 deletions.
diff --git a/public/locales/ar/translation.json b/public/locales/ar/translation.json
@@ -149,5 +149,6 @@
   "ai-polish": "الذكاء الاصطناعي البولندي",
   "accept": "قبول",
   "reject": "رفض",
-  "stop": "توقف"
+  "stop": "توقف",
+  "card-columns": "أعمدة البطاقة"
 }
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -141,5 +141,6 @@
   "ai-polish": "AI Polnisch",
   "accept": "Akzeptieren",
   "reject": "Ablehnen",
-  "stop": "Stopp"
+  "stop": "Stopp",
+  "card-columns": "Kartenspalten"
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -146,5 +146,6 @@
   "ai-polish": "AI Polish",
   "accept": "Accept",
   "reject": "Reject",
-  "stop": "Stop"
+  "stop": "Stop",
+  "card-columns": "Card Columns"
 }
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
@@ -140,5 +140,6 @@
   "ai-polish": "AI Polaco",
   "accept": "Acepte",
   "reject": "Rechazar",
-  "stop": "Stop"
+  "stop": "Stop",
+  "card-columns": "Columnas de tarjetas"
 }
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
@@ -141,5 +141,6 @@
   "ai-polish": "AI Polish",
   "accept": "Accepter",
   "reject": "Rejeter",
-  "stop": "Arrêter"
+  "stop": "Arrêter",
+  "card-columns": "Colonnes de la carte"
 }
diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json
@@ -139,5 +139,6 @@
   "ai-polish": "AIポーランド語",
   "accept": "受け入れる",
   "reject": "却下",
-  "stop": "ストップ"
+  "stop": "ストップ",
+  "card-columns": "カード・コラム"
 }
diff --git a/public/locales/ko/translation.json b/public/locales/ko/translation.json
@@ -141,5 +141,6 @@
   "ai-polish": "AI 폴란드어",
   "accept": "수락",
   "reject": "거부",
-  "stop": "중지"
+  "stop": "중지",
+  "card-columns": "카드 열"
 }
diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -140,5 +140,6 @@
   "ai-polish": "Polaco AI",
   "accept": "Aceitar",
   "reject": "Rejeitar",
-  "stop": "Parar"
+  "stop": "Parar",
+  "card-columns": "Colunas de cartões"
 }
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -142,5 +142,6 @@
   "ai-polish": "AI Polish",
   "accept": "Принять",
   "reject": "Отклонить",
-  "stop": "Остановите"
+  "stop": "Остановите",
+  "card-columns": "Колонки карты"
 }
diff --git a/public/locales/zh-TW/translation.json b/public/locales/zh-TW/translation.json
@@ -141,5 +141,6 @@
   "ai-polish": "AI润色",
   "accept": "接受",
   "reject": "拒绝",
-  "stop": "停止"
+  "stop": "停止",
+  "card-columns": "卡片列"
 }
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -142,5 +142,6 @@
   "ai-polish": "AI润色",
   "accept": "接受",
   "reject": "拒绝",
-  "stop": "停止"
+  "stop": "停止",
+  "card-columns": "卡片列"
 }
diff --git a/src/components/BlinkoSettings/PerferSetting.tsx b/src/components/BlinkoSettings/PerferSetting.tsx
@@ -44,6 +44,37 @@ export const PerferSetting = observer(() => {
           }))
         }}
       />} />
+    <Item
+      leftContent={<>{t('card-columns')}</>}
+      rightContent={
+        <div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button
+                startContent={<Icon icon="fluent:layout-column-one-third-right-16-regular" width="20" height="20" />}
+              >
+                {blinko.config.value?.cardColumns ?? 'Select a card columns'}
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu
+              aria-label="Time format selection"
+              onAction={async (key) => {
+                console.log(key)
+                await PromiseCall(api.config.update.mutate({
+                  key: 'cardColumns',
+                  value: key.toString()
+                }))
+              }}
+              selectedKeys={[blinko.config.value?.cardColumns || '']}
+            >
+              <DropdownItem key="1">1</DropdownItem>
+              <DropdownItem key="2">2</DropdownItem>
+              <DropdownItem key="3">3</DropdownItem>
+              <DropdownItem key="4">4</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
+        </div>
+      } />
     <Item
       leftContent={<>{t('time-format')}</>}
       rightContent={
@@ -52,11 +83,10 @@ export const PerferSetting = observer(() => {
             <DropdownTrigger>
               <Button
                 startContent={<Icon icon="mingcute:time-line" width="20" height="20" />}
-                color="primary"
               >
                 {blinko.config.value?.timeFormat ?? 'Select a time format'}
               </Button>
-            </DropdownTrigger>  
+            </DropdownTrigger>
             <DropdownMenu
               aria-label="Time format selection"
               onAction={async (key) => {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -30,7 +30,7 @@ const Home = observer(() => {
 
   return (
     <div className="md:p-0 relative h-full flex flex-col-reverse md:flex-col">
-    
+
       {store.showEditor && <div className='px-2 md:px-6' >
         <BlinkoEditor mode='create' key='create-key' onHeightChange={height => store.editorHeight = height} />
       </div>}
@@ -51,7 +51,7 @@ const Home = observer(() => {
           className={`px-2 mt-0 md:mt-6 md:px-6 w-full h-full transition-all scroll-area`}>
           <Masonry
             breakpointCols={{
-              default: 2,
+              default: blinko.config?.value?.cardColumns ? Number(blinko.config?.value?.cardColumns) : 2,
               500: 1
             }}
             className="my-masonry-grid"

diff --git a/src/server/types.ts b/src/server/types.ts
@@ -29,6 +29,7 @@ export const ZConfigKey = z.union([
   z.literal('s3Endpoint'),
   z.literal('s3Bucket'),
   z.literal('s3Region'),
+  z.literal('cardColumns'),
 ]);
 
 export type ConfigKey = z.infer<typeof ZConfigKey>;
@@ -45,6 +46,7 @@ export const ZConfigSchema = z.object({
   isAllowRegister: z.any().optional(),
   isOrderByCreateTime: z.any().optional(),
   timeFormat: z.any().optional(),
+  cardColumns: z.any().optional(),
   objectStorage: z.any().optional(),
   s3AccessKeyId: z.any().optional(),
   s3AccessKeySecret: z.any().optional(),