Skip to content

Commit 23d253e

Browse files
StijnusStijnus
committed
fixes as fequestd
1 parent 07435fc commit 23d253e

File tree

4 files changed

+110
-142
lines changed

4 files changed

+110
-142
lines changed

‎app/components/@settings/core/AvatarDropdown.tsx‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import { classNames } from '~/utils/classNames';
55
import { profileStore } from '~/lib/stores/profile';
66
import type { TabType, Profile } from './types';
77

8+
const BetaLabel = () => (
9+
<span className="px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20 text-[10px] font-medium text-purple-600 dark:text-purple-400 ml-2">
10+
BETA
11+
</span>
12+
);
13+
814
interface AvatarDropdownProps {
915
onSelectTab: (tab: TabType) => void;
1016
}
@@ -15,55 +21,52 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
1521
return (
1622
<DropdownMenu.Root>
1723
<DropdownMenu.Trigger asChild>
18-
<motion.button
19-
className="group flex items-center justify-center"
20-
whileHover={{ scale: 1.02 }}
21-
whileTap={{ scale: 0.98 }}
22-
>
23-
<div
24-
className={classNames(
25-
'w-10 h-10',
26-
'rounded-full overflow-hidden',
27-
'bg-gray-100/50 dark:bg-gray-800/50',
28-
'flex items-center justify-center',
29-
'ring-1 ring-gray-200/50 dark:ring-gray-700/50',
30-
'group-hover:ring-purple-500/50 dark:group-hover:ring-purple-500/50',
31-
'group-hover:bg-purple-500/10 dark:group-hover:bg-purple-500/10',
32-
'transition-all duration-200',
33-
'relative',
34-
)}
35-
>
36-
{profile?.avatar ? (
37-
<div className="w-full h-full">
38-
<img
39-
src={profile.avatar}
40-
alt={profile?.username || 'Profile'}
41-
className={classNames(
42-
'w-full h-full',
43-
'object-cover',
44-
'transform-gpu',
45-
'image-rendering-crisp',
46-
'group-hover:brightness-110',
47-
'group-hover:scale-105',
48-
'transition-all duration-200',
49-
)}
50-
loading="eager"
51-
decoding="sync"
52-
/>
53-
<div
54-
className={classNames(
55-
'absolute inset-0',
56-
'ring-1 ring-inset ring-black/5 dark:ring-white/5',
57-
'group-hover:ring-purple-500/20 dark:group-hover:ring-purple-500/20',
58-
'group-hover:bg-purple-500/5 dark:group-hover:bg-purple-500/5',
59-
'transition-colors duration-200',
60-
)}
61-
/>
62-
</div>
63-
) : (
64-
<div className="i-ph:robot-fill w-6 h-6 text-gray-400 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
65-
)}
66-
</div>
24+
<motion.button className="group outline-none relative" whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
25+
{profile?.avatar ? (
26+
<div
27+
className={classNames(
28+
'w-10 h-10',
29+
'rounded-full overflow-hidden',
30+
'bg-white dark:bg-gray-800',
31+
'transition-all duration-200',
32+
'relative',
33+
'shadow-sm',
34+
)}
35+
>
36+
<img
37+
src={profile.avatar}
38+
alt={profile?.username || 'Profile'}
39+
className={classNames(
40+
'w-full h-full',
41+
'object-cover',
42+
'transform-gpu',
43+
'image-rendering-crisp',
44+
'group-hover:brightness-110',
45+
'group-hover:scale-105',
46+
'transition-all duration-200',
47+
)}
48+
loading="eager"
49+
decoding="sync"
50+
/>
51+
</div>
52+
) : (
53+
<div
54+
className={classNames(
55+
'w-10 h-10',
56+
'rounded-full',
57+
'flex items-center justify-center',
58+
'bg-white dark:bg-gray-800',
59+
'text-gray-400 dark:text-gray-500',
60+
'group-hover:text-purple-500 dark:group-hover:text-purple-400',
61+
'transition-all duration-200',
62+
'shadow-sm',
63+
)}
64+
>
65+
<div className="i-ph:question w-6 h-6" />
66+
</div>
67+
)}
68+
{/* Add subtle circular highlight effect */}
69+
<div className="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
6770
</motion.button>
6871
</DropdownMenu.Trigger>
6972

@@ -86,7 +89,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
8689
'border-b border-gray-200/50 dark:border-gray-800/50',
8790
)}
8891
>
89-
<div className="w-10 h-10 rounded-full overflow-hidden bg-gray-100/50 dark:bg-gray-800/50 flex-shrink-0">
92+
<div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 bg-white dark:bg-gray-800 shadow-sm">
9093
{profile?.avatar ? (
9194
<img
9295
src={profile.avatar}
@@ -96,8 +99,8 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
9699
decoding="sync"
97100
/>
98101
) : (
99-
<div className="w-full h-full flex items-center justify-center">
100-
<div className="i-ph:robot-fill w-6 h-6 text-gray-400 dark:text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
102+
<div className="w-full h-full flex items-center justify-center text-gray-400 dark:text-gray-500 font-medium text-lg">
103+
<span className="relative -top-0.5">?</span>
101104
</div>
102105
)}
103106
</div>
@@ -121,7 +124,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
121124
)}
122125
onClick={() => onSelectTab('profile')}
123126
>
124-
<div className="i-ph:robot-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
127+
<div className="i-ph:user-circle w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
125128
Edit Profile
126129
</DropdownMenu.Item>
127130

@@ -137,7 +140,7 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
137140
)}
138141
onClick={() => onSelectTab('settings')}
139142
>
140-
<div className="i-ph:gear-six-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
143+
<div className="i-ph:gear-six w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
141144
Settings
142145
</DropdownMenu.Item>
143146

@@ -155,8 +158,9 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
155158
)}
156159
onClick={() => onSelectTab('task-manager')}
157160
>
158-
<div className="i-ph:activity-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
161+
<div className="i-ph:activity w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
159162
Task Manager
163+
<BetaLabel />
160164
</DropdownMenu.Item>
161165

162166
<DropdownMenu.Item
@@ -171,8 +175,9 @@ export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
171175
)}
172176
onClick={() => onSelectTab('service-status')}
173177
>
174-
<div className="i-ph:heartbeat-fill w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
178+
<div className="i-ph:heartbeat w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
175179
Service Status
180+
<BetaLabel />
176181
</DropdownMenu.Item>
177182
</DropdownMenu.Content>
178183
</DropdownMenu.Portal>

‎app/components/@settings/core/ControlPanel.tsx‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,15 @@ const TAB_DESCRIPTIONS: Record<TabType, string> = {
8282
'tab-management': 'Configure visible tabs and their order',
8383
};
8484

85+
// Beta status for experimental features
86+
const BETA_TABS = new Set<TabType>(['task-manager', 'service-status']);
87+
88+
const BetaLabel = () => (
89+
<div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
90+
<span className="text-[10px] font-medium text-purple-600 dark:text-purple-400">BETA</span>
91+
</div>
92+
);
93+
8594
const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchProps) => {
8695
return (
8796
<div className="flex items-center gap-2">
@@ -108,11 +117,12 @@ const AnimatedSwitch = ({ checked, onCheckedChange, id, label }: AnimatedSwitchP
108117
'group-hover:shadow-md group-active:shadow-sm',
109118
'group-hover:scale-95 group-active:scale-90',
110119
)}
111-
layout
120+
initial={false}
112121
transition={{
113122
type: 'spring',
114123
stiffness: 500,
115124
damping: 30,
125+
duration: 0.2,
116126
}}
117127
animate={{
118128
x: checked ? '1.25rem' : '0rem',
@@ -414,29 +424,13 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
414424
{/* Header */}
415425
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
416426
<div className="flex items-center space-x-4">
417-
{activeTab || showTabManagement ? (
427+
{(activeTab || showTabManagement) && (
418428
<button
419429
onClick={handleBack}
420-
className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
430+
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
421431
>
422432
<div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
423433
</button>
424-
) : (
425-
<motion.div
426-
className="w-7 h-7"
427-
initial={{ rotate: -5 }}
428-
animate={{ rotate: 5 }}
429-
transition={{
430-
repeat: Infinity,
431-
repeatType: 'reverse',
432-
duration: 2,
433-
ease: 'easeInOut',
434-
}}
435-
>
436-
<div className="w-full h-full flex items-center justify-center bg-gray-100/50 dark:bg-gray-800/50 rounded-full">
437-
<div className="i-ph:lightning-fill w-5 h-5 text-purple-500 dark:text-purple-400 transition-colors" />
438-
</div>
439-
</motion.div>
440434
)}
441435
<DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
442436
{showTabManagement ? 'Tab Management' : activeTab ? TAB_LABELS[activeTab] : 'Control Panel'}
@@ -462,7 +456,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
462456
{/* Close Button */}
463457
<button
464458
onClick={onClose}
465-
className="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
459+
className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
466460
>
467461
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
468462
</button>
@@ -513,8 +507,10 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
513507
statusMessage={getStatusMessage(tab.id)}
514508
description={TAB_DESCRIPTIONS[tab.id]}
515509
isLoading={loadingTab === tab.id}
516-
className="h-full"
517-
/>
510+
className="h-full relative"
511+
>
512+
{BETA_TABS.has(tab.id) && <BetaLabel />}
513+
</TabTile>
518514
</motion.div>
519515
))}
520516
</AnimatePresence>

‎app/components/@settings/shared/components/TabTile.tsx‎

Lines changed: 25 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@ interface TabTileProps {
1313
description?: string;
1414
isLoading?: boolean;
1515
className?: string;
16+
children?: React.ReactNode;
1617
}
1718

18-
export const TabTile = ({
19+
export const TabTile: React.FC<TabTileProps> = ({
1920
tab,
2021
onClick,
2122
isActive,
@@ -24,6 +25,7 @@ export const TabTile = ({
2425
description,
2526
isLoading,
2627
className,
28+
children,
2729
}: TabTileProps) => {
2830
return (
2931
<Tooltip.Provider delayDuration={200}>
@@ -100,62 +102,33 @@ export const TabTile = ({
100102
</div>
101103
</div>
102104

103-
{/* Status Indicator */}
105+
{/* Update Indicator with Tooltip */}
104106
{hasUpdate && (
105-
<motion.div
106-
className={classNames(
107-
'absolute top-3 right-3',
108-
'w-2.5 h-2.5 rounded-full',
109-
'bg-purple-500',
110-
'ring-4 ring-purple-500',
111-
)}
112-
initial={{ scale: 0 }}
113-
animate={{ scale: 1 }}
114-
transition={{ type: 'spring', bounce: 0.5 }}
115-
/>
107+
<>
108+
<div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
109+
<Tooltip.Portal>
110+
<Tooltip.Content
111+
className={classNames(
112+
'px-3 py-1.5 rounded-lg',
113+
'bg-[#18181B] text-white',
114+
'text-sm font-medium',
115+
'select-none',
116+
'z-[100]',
117+
)}
118+
side="top"
119+
sideOffset={5}
120+
>
121+
{statusMessage}
122+
<Tooltip.Arrow className="fill-[#18181B]" />
123+
</Tooltip.Content>
124+
</Tooltip.Portal>
125+
</>
116126
)}
117127

118-
{/* Loading Overlay */}
119-
{isLoading && (
120-
<motion.div
121-
className={classNames(
122-
'absolute inset-0 rounded-xl z-10',
123-
'bg-white dark:bg-black',
124-
'flex items-center justify-center',
125-
)}
126-
initial={{ opacity: 0 }}
127-
animate={{ opacity: 1 }}
128-
transition={{ duration: 0.2 }}
129-
>
130-
<motion.div
131-
className={classNames('w-8 h-8 rounded-full', 'border-2 border-purple-500', 'border-t-purple-500')}
132-
animate={{ rotate: 360 }}
133-
transition={{
134-
duration: 1,
135-
repeat: Infinity,
136-
ease: 'linear',
137-
}}
138-
/>
139-
</motion.div>
140-
)}
128+
{/* Children (e.g. Beta Label) */}
129+
{children}
141130
</motion.div>
142131
</Tooltip.Trigger>
143-
<Tooltip.Portal>
144-
<Tooltip.Content
145-
className={classNames(
146-
'px-3 py-1.5 rounded-lg',
147-
'bg-[#18181B] text-white',
148-
'text-sm font-medium',
149-
'select-none',
150-
'z-[100]',
151-
)}
152-
side="top"
153-
sideOffset={5}
154-
>
155-
{statusMessage || TAB_LABELS[tab.id]}
156-
<Tooltip.Arrow className="fill-[#18181B]" />
157-
</Tooltip.Content>
158-
</Tooltip.Portal>
159132
</Tooltip.Root>
160133
</Tooltip.Provider>
161134
);

‎app/components/@settings/tabs/features/FeaturesTab.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -121,19 +121,13 @@ export default function FeaturesTab() {
121121

122122
// Enable features by default on first load
123123
React.useEffect(() => {
124-
// Only enable if they haven't been explicitly set before
125-
if (isLatestBranch === undefined) {
126-
enableLatestBranch(true);
127-
}
128-
129-
if (contextOptimizationEnabled === undefined) {
130-
enableContextOptimization(true);
131-
}
132-
133-
if (autoSelectTemplate === undefined) {
134-
setAutoSelectTemplate(true);
135-
}
124+
// Force enable these features by default
125+
enableLatestBranch(true);
126+
enableContextOptimization(true);
127+
setAutoSelectTemplate(true);
128+
setPromptId('optimized');
136129

130+
// Only enable event logs if not explicitly set before
137131
if (eventLogs === undefined) {
138132
setEventLogs(true);
139133
}

0 commit comments

Comments
 (0)