Skip to content

Commit b5d3ce9

Browse files
ayangwebayangweb
authored
feat: add window opacity configuration option (#963)
* feat: add window opacity configuration option * docs: update changelog
1 parent abac92d commit b5d3ce9

10 files changed

Lines changed: 60 additions & 37 deletions

File tree

‎docs/content.en/docs/release-notes/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ feat: open quick ai with modifier key + enter #939
2424
feat: allow navigate back when cursor is at the beginning #940
2525
feat: add compact mode for window #947
2626
feat(extension compatibility): minimum_coco_version #946
27+
feat: add window opacity configuration option #963
2728

2829
### 🐛 Bug fix
2930

‎src/components/Search/InputBox.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,6 @@ export default function ChatInput({
310310
<div className={`w-full relative`}>
311311
<div
312312
ref={containerRef}
313-
id="search-bar"
314313
className={`flex items-center dark:text-[#D8D8D8] rounded-md transition-all relative overflow-hidden`}
315314
>
316315
{lineCount === 1 && renderSearchIcon()}

‎src/components/Search/InputControls.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,6 @@ const InputControls = ({
165165

166166
return (
167167
<div
168-
id="filter-bar"
169168
data-tauri-drag-region
170169
className="flex justify-between items-center pt-2"
171170
>

‎src/components/SearchChat/index.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -118,20 +118,11 @@ function SearchChat({
118118
const { windowMode } = useAppearanceStore.getState();
119119

120120
if (windowMode === "compact") {
121-
const searchBar = document.querySelector("#search-bar");
122-
const filterBar = document.querySelector("#filter-bar");
123-
124-
if (searchBar && filterBar) {
125-
height = searchBar.clientHeight + filterBar.clientHeight + 16;
126-
} else {
127-
height = 84;
128-
}
129-
130-
height = Math.min(height, 88);
131-
//
132-
setHideMiddleBorder(height < 590);
133-
setSuppressErrors(height < 590);
121+
height = 84;
134122
}
123+
124+
setHideMiddleBorder(height < 590);
125+
setSuppressErrors(height < 590);
135126
} else {
136127
setHideMiddleBorder(false);
137128
setSuppressErrors(false);
@@ -293,7 +284,7 @@ function SearchChat({
293284
return state.defaultStartupWindow;
294285
});
295286

296-
const opacity = useAppearanceStore((state) => state.opacity);
287+
const { normalOpacity, blurOpacity } = useAppearanceStore();
297288

298289
useEffect(() => {
299290
if (isTauri) {
@@ -327,7 +318,7 @@ function SearchChat({
327318
)}
328319
style={{
329320
backgroundSize: "auto 590px",
330-
opacity: blurred ? (opacity ?? 30) / 100 : 1,
321+
opacity: blurred ? blurOpacity / 100 : normalOpacity / 100,
331322
}}
332323
>
333324
<div

‎src/components/Settings/Advanced/components/Appearance/index.tsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
66

77
const Appearance = () => {
88
const { t } = useTranslation();
9-
const opacity = useAppearanceStore((state) => state.opacity);
10-
const setOpacity = useAppearanceStore((state) => state.setOpacity);
9+
const { normalOpacity, setNormalOpacity, blurOpacity, setBlurOpacity } =
10+
useAppearanceStore();
1111

1212
return (
1313
<>
@@ -17,16 +17,34 @@ const Appearance = () => {
1717

1818
<SettingsItem
1919
icon={AppWindowMac}
20-
title={t("settings.advanced.appearance.opacity.title")}
21-
description={t("settings.advanced.appearance.opacity.description")}
20+
title={t("settings.advanced.appearance.normalOpacity.title")}
21+
description={t(
22+
"settings.advanced.appearance.normalOpacity.description"
23+
)}
2224
>
2325
<SettingsInput
2426
type="number"
2527
min={10}
2628
max={100}
27-
value={opacity}
29+
value={normalOpacity}
2830
onChange={(value) => {
29-
return setOpacity(!value ? void 0 : Number(value));
31+
return setNormalOpacity(!value ? 100 : Number(value));
32+
}}
33+
/>
34+
</SettingsItem>
35+
36+
<SettingsItem
37+
icon={AppWindowMac}
38+
title={t("settings.advanced.appearance.blurOpacity.title")}
39+
description={t("settings.advanced.appearance.blurOpacity.description")}
40+
>
41+
<SettingsInput
42+
type="number"
43+
min={10}
44+
max={100}
45+
value={blurOpacity}
46+
onChange={(value) => {
47+
return setBlurOpacity(!value ? 30 : Number(value));
3048
}}
3149
/>
3250
</SettingsItem>

‎src/components/Settings/SettingsItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function SettingsItem({
1414
children,
1515
}: SettingsItemProps) {
1616
return (
17-
<div className="flex items-center justify-between">
17+
<div className="flex items-center justify-between gap-6">
1818
<div className="flex items-center space-x-3">
1919
<Icon className="h-5 min-w-5 text-gray-400 dark:text-gray-500" />
2020
<div>

‎src/hooks/useSyncStore.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const useSyncStore = () => {
8282
const setQueryTimeout = useConnectStore((state) => {
8383
return state.setQuerySourceTimeout;
8484
});
85-
const setOpacity = useAppearanceStore((state) => state.setOpacity);
85+
const { setNormalOpacity, setBlurOpacity } = useAppearanceStore();
8686
const setSnapshotUpdate = useAppearanceStore((state) => {
8787
return state.setSnapshotUpdate;
8888
});
@@ -197,11 +197,11 @@ export const useSyncStore = () => {
197197
}),
198198

199199
platformAdapter.listenEvent("change-appearance-store", ({ payload }) => {
200-
const { opacity, snapshotUpdate, windowMode } = payload;
200+
const { normalOpacity, blurOpacity, snapshotUpdate, windowMode } =
201+
payload;
201202

202-
if (isNumber(opacity)) {
203-
setOpacity(opacity);
204-
}
203+
setNormalOpacity(normalOpacity);
204+
setBlurOpacity(blurOpacity);
205205
setSnapshotUpdate(snapshotUpdate);
206206
setWindowMode(windowMode);
207207
}),

‎src/locales/en/translation.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,11 @@
181181
},
182182
"appearance": {
183183
"title": "Appearance Settings",
184-
"opacity": {
184+
"normalOpacity": {
185+
"title": "Active Window Opacity",
186+
"description": "Adjust the opacity of the Coco AI window while in use. The range is from 10% to 100%, where 100% means fully opaque, and lower values increase transparency, allowing the underlying content to show through."
187+
},
188+
"blurOpacity": {
185189
"title": "Pinned Window Dimness Setting",
186190
"description": "Adjusts the opacity level of the Coco AI window when it’s pinned and not in focus. Set a value between 10% and 100%, where 100% means fully opaque (no dimming), and lower values increase transparency, allowing underlying content to show through."
187191
}

‎src/locales/zh/translation.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,11 @@
181181
},
182182
"appearance": {
183183
"title": "外观设置",
184-
"opacity": {
184+
"normalOpacity": {
185+
"title": "窗口透明度",
186+
"description": "调整 Coco AI 窗口在使用时的透明度。范围为10%到100%，其中100%表示完全不透明，较低的值会增加透明度，使底层内容能够透过窗口显示出来。"
187+
},
188+
"blurOpacity": {
185189
"title": "置顶时失焦透明度",
186190
"description": "设置 Coco AI 窗口在置顶且失去焦点时的不透明度（10%–100%，100% 表示完全不透明）。"
187191
}

‎src/stores/appearanceStore.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { persist, subscribeWithSelector } from "zustand/middleware";
44
export type WindowMode = "default" | "compact";
55

66
export type IAppearanceStore = {
7-
opacity: number;
8-
setOpacity: (opacity?: number) => void;
7+
normalOpacity: number;
8+
setNormalOpacity: (normalOpacity: number) => void;
9+
blurOpacity: number;
10+
setBlurOpacity: (blurOpacity: number) => void;
911
snapshotUpdate: boolean;
1012
setSnapshotUpdate: (snapshotUpdate: boolean) => void;
1113
windowMode: WindowMode;
@@ -16,9 +18,13 @@ export const useAppearanceStore = create<IAppearanceStore>()(
1618
subscribeWithSelector(
1719
persist(
1820
(set) => ({
19-
opacity: 30,
20-
setOpacity: (opacity) => {
21-
return set({ opacity: opacity });
21+
normalOpacity: 100,
22+
setNormalOpacity(normalOpacity) {
23+
return set({ normalOpacity });
24+
},
25+
blurOpacity: 30,
26+
setBlurOpacity(blurOpacity) {
27+
return set({ blurOpacity });
2228
},
2329
snapshotUpdate: false,
2430
setSnapshotUpdate: (snapshotUpdate) => {
@@ -32,7 +38,8 @@ export const useAppearanceStore = create<IAppearanceStore>()(
3238
{
3339
name: "startup-store",
3440
partialize: (state) => ({
35-
opacity: state.opacity,
41+
normalOpacity: state.normalOpacity,
42+
blurOpacity: state.blurOpacity,
3643
snapshotUpdate: state.snapshotUpdate,
3744
windowMode: state.windowMode,
3845
}),

0 commit comments

Comments
 (0)