palette hue selection & atoms · whey.party/conven@55c37b2

+7 -7

src/routes/__root.tsx

··· 36 36 //import { PollMutationQueueProvider } from "~/providers/PollMutationQueueProvider"; 37 37 import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; 38 38 import { FeedTabOnTop } from "~/routes/index"; 39 - import { composerAtom, hueAtom, imgCDNAtom, quickAuthAtom, useAtomCssVar } from "~/utils/atoms"; 39 + import { composerAtom, hueAccentAtom, hueAtom, hueBaseAtom, hueContrastAtom, hueMutedAtom, imgCDNAtom, quickAuthAtom, useAtomCssVar } from "~/utils/atoms"; 40 40 import { seo } from "~/utils/seo"; 41 41 import { useQueryIdentity, useQueryPreferences, useQueryProfile } from "~/utils/useQuery"; 42 42 ··· 220 220 221 221 function RootDocument({ children }: { children: React.ReactNode }) { 222 222 useAtomCssVar(hueAtom, "--tw-gray-hue"); 223 - // useAtomCssVar(hueBaseAtom, "--system-hue-base"); 224 - // useAtomCssVar(hueAccentAtom, "--system-hue-accent"); 225 - // useAtomCssVar(hueContrastAtom, "--system-hue-contrast"); 226 - // useAtomCssVar(hueMutedAtom, "--system-hue-muted"); 223 + useAtomCssVar(hueBaseAtom, "--system-hue-base"); 224 + useAtomCssVar(hueAccentAtom, "--system-hue-accent"); 225 + useAtomCssVar(hueContrastAtom, "--system-hue-contrast"); 226 + useAtomCssVar(hueMutedAtom, "--system-hue-muted"); 227 227 const location = useLocation(); 228 228 const navigate = useNavigate(); 229 229 const { agent } = useAuth(); ··· 275 275 return ( 276 276 <> 277 277 <div className="flex flex-row"> 278 - <nav className="w-16 sticky top-0 self-start h-screen p-2 bg-base-800 flex flex-col items-center gap-2"> 278 + <nav className="w-16 sticky top-0 self-start h-screen p-2 bg-base-400 dark:bg-base-800 flex flex-col items-center gap-2"> 279 279 {dummysubscribedcommunitieslist.map((i)=>{ 280 280 return ( 281 281 <Link key={i.did} to="/c/$did" params={{did: i.did}} className=" rounded-full overflow-clip hover:rounded-2xl"> ··· 286 286 <span>hello i am the discord-like persistent left sidebar</span> 287 287 </nav> 288 288 <div className="flex flex-1 flex-col"> 289 - <div className="h-14 sticky top-0 z-50 bg-accent-700 flex items-center justify-between px-6 gap-4"> 289 + <div className="h-14 sticky top-0 z-50 bg-contrast-400 dark:bg-contrast-700 flex items-center justify-between px-6 gap-4"> 290 290 <MaterialNavItem 291 291 small 292 292 InactiveIcon={

+4 -4

src/routes/c.$did.tsx

··· 138 138 </div> 139 139 </div> 140 140 </div> 141 - <div className="sticky top-14 min-h-[calc(100vh - 3.5rem)] flex justify-center bg-base-50 dark:bg-base-700 gap-4"> 142 - <nav className="min-h-14 top-14 sticky z-10 bg-contrast-700 w-[224px]"> 141 + <div className="sticky top-14 min-h-[calc(100vh - 3.5rem)] flex justify-center bg-base-100 dark:bg-base-900 gap-4"> 142 + <nav className="min-h-14 top-14 sticky z-10 w-[224px]"> 143 143 <span>hello i am the sticky left sidebar !</span> 144 144 <ConvenFeedListDesktopSidebar items={dummyfeedlist} /> 145 145 </nav> 146 146 <main className="w-full min-h-[100vh] max-w-[600px] sm:border-x border-base-200 dark:border-base-800 bg-white dark:bg-base-950 pb-16 lg:pb-0 overflow-x-clip outline-red-500 outline-8"> 147 147 <Outlet /> 148 148 </main> 149 - <aside className="min-h-14 top-14 sticky z-10 bg-contrast-700 w-[300px]"> 149 + <aside className="min-h-14 top-14 sticky z-10 w-[300px]"> 150 150 <span>{profile.description}</span> 151 151 {/* hello i am the sticky right sidebar ! */} 152 152 </aside> ··· 194 194 <Link 195 195 to='/c/$did/feed/$rkey' 196 196 params={{ 197 - did: c_did, 197 + did: decodeURIComponent(c_did), 198 198 rkey: rkey 199 199 }} 200 200 key={item.feeduri || idx}

+34 -22

src/routes/settings.tsx

··· 21 21 enableBitesAtom, 22 22 enableBridgyTextAtom, 23 23 enableWafrnTextAtom, 24 + hueAccentAtom, 24 25 hueAtom, 26 + hueBaseAtom, 27 + hueContrastAtom, 28 + hueMutedAtom, 25 29 imgCDNAtom, 26 30 lycanURLAtom, 27 31 slingshotURLAtom, ··· 135 139 136 140 <SettingHeading title="Personalization" top /> 137 141 <Hue /> 142 + <Hue palette="base" atom={hueBaseAtom}/> 143 + <Hue palette="accent" atom={hueAccentAtom}/> 144 + <Hue palette="contrast" atom={hueContrastAtom}/> 145 + <Hue palette="muted" atom={hueMutedAtom}/> 146 + <Colors /> 138 147 139 148 <SettingHeading title="Network Configuration" /> 140 149 <div className="flex flex-col px-4 pb-2"> ··· 183 192 atom={enableBitesAtom} 184 193 title={"Bites"} 185 194 description={"Enable Wafrn Bites to bite and be bitten by other people"} 186 - //init={false} 195 + //init={false} 187 196 /> 188 197 <div className="h-4" /> 189 198 <SwitchSetting ··· 192 201 description={ 193 202 "Show the original text of posts bridged from the Fediverse" 194 203 } 195 - //init={false} 204 + //init={false} 196 205 /> 197 206 <div className="h-4" /> 198 207 <SwitchSetting 199 208 atom={enableWafrnTextAtom} 200 209 title={"Wafrn Text"} 201 210 description={"Show the original text of posts from Wafrn instances"} 202 - //init={false} 211 + //init={false} 203 212 /> 204 213 <div className="h-4" /> 205 214 <SwitchSetting 206 215 atom={enableAppViewAtom} 207 216 title={"AppView-First"} 208 217 description={"Prioritize using an AppView to fetch posts before using microcosm"} 209 - //init={false} 218 + //init={false} 210 219 /> 211 220 <div className={`${isAppViewEnabled ? "" : "opacity-50 pointer-events-none"}`}> 212 221 <div className="h-4" /> ··· 289 298 ); 290 299 } 291 300 292 - function Hue() { 293 - const [hue, setHue] = useAtom(hueAtom); 301 + function Hue({ palette, atom }: { palette?: string, atom?: typeof hueAtom }) { 302 + const [hue, setHue] = useAtom(atom || hueAtom); 294 303 return ( 295 304 <div className="flex flex-col px-4"> 296 - <span className="z-[2] text-md">Hue</span> 297 - <span className="z-[2] text-sm text-gray-500 dark:text-gray-400"> 298 - Change the colors of the app 299 - </span> 305 + {!palette && ( 306 + <> 307 + <span className="z-[2] text-md">Hue</span> 308 + <span className="z-[2] text-sm text-gray-500 dark:text-gray-400"> 309 + Change the colors of the app 310 + </span> 311 + </> 312 + )} 300 313 <div className="z-[1] flex flex-row items-center gap-4"> 301 - <span>gray</span> 302 - <SliderComponent atom={hueAtom} max={360} /> 314 + <span className="w-16">{palette || "gray"}</span> 315 + <SliderComponent atom={atom || hueAtom} max={360} /> 303 316 <button 304 317 onClick={() => setHue(defaulthue ?? 28)} 305 318 className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 ··· 308 321 Reset 309 322 </button> 310 323 </div> 311 - <Colors /> 312 324 </div> 313 325 ); 314 326 } ··· 426 438 min={min} 427 439 max={max} 428 440 step={step} 429 - onValueChange={(v: number[]) => {}} 441 + onValueChange={(v: number[]) => { }} 430 442 > 431 443 <Slider.Track className="relative flex-grow h-4 bg-gray-300 dark:bg-gray-700 rounded-full"> 432 444 <Slider.Range className="absolute h-full bg-gray-500 dark:bg-gray-400 rounded-l-full rounded-r-none" /> ··· 440 452 const palettes: palette[] = ["base", "accent", "contrast", "muted", "gray"] 441 453 type index = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950" 442 454 const indexes: index[] = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"] 443 - function ColorRow({palette, index}: {palette: palette, index:index}){ 444 - return( 455 + function ColorRow({ palette, index }: { palette: palette, index: index }) { 456 + return ( 445 457 <div className="flex flex-col gap-0"> 446 - <div className={`h-6 w-32`} style={{backgroundColor: `var(--color-${palette}-${index})`}} /> 458 + <div className={`h-6 w-32`} style={{ backgroundColor: `var(--color-${palette}-${index})` }} /> 447 459 {/* <div className={`h-6 w-32 bg-${palette}-${index}`} /> */} 448 460 </div> 449 461 ) 450 462 } 451 - function ColorSet({palette}:{palette: palette}) { 452 - return( 463 + function ColorSet({ palette }: { palette: palette }) { 464 + return ( 453 465 <div className="flex flex-col gap-2"> 454 466 <span className="text-black">{palette}</span> 455 - {indexes.map((i)=>(<ColorRow palette={palette} index={i} key={i}/>))} 467 + {indexes.map((i) => (<ColorRow palette={palette} index={i} key={i} />))} 456 468 </div> 457 469 ) 458 470 } 459 471 function Colors() { 460 - return( 472 + return ( 461 473 <div className="flex flex-row gap-2 bg-white"> 462 - {palettes.map((i)=>(<ColorSet palette={i} key={i}/>))} 474 + {palettes.map((i) => (<ColorSet palette={i} key={i} />))} 463 475 {/* DUMMY DIV TO TRICK THE TREE-SHAKER */} 464 476 <div className="hidden bg-base-50 bg-base-100 bg-base-200 bg-base-300 bg-base-400 bg-base-500 bg-base-600 bg-base-700 bg-base-800 bg-base-900 bg-base-950 bg-accent-50 bg-accent-100 bg-accent-200 bg-accent-300 bg-accent-400 bg-accent-500 bg-accent-600 bg-accent-700 bg-accent-800 bg-accent-900 bg-accent-950 bg-contrast-50 bg-contrast-100 bg-contrast-200 bg-contrast-300 bg-contrast-400 bg-contrast-500 bg-contrast-600 bg-contrast-700 bg-contrast-800 bg-contrast-900 bg-contrast-950 bg-muted-50 bg-muted-100 bg-muted-200 bg-muted-300 bg-muted-400 bg-muted-500 bg-muted-600 bg-muted-700 bg-muted-800 bg-muted-900 bg-muted-950" /> 465 477 </div>

+4

src/utils/atoms.ts

··· 106 106 107 107 export const defaulthue = HOST_DEFAULT_HUE; 108 108 export const hueAtom = atomWithStorage<number>("hue", defaulthue); 109 + export const hueBaseAtom = atomWithStorage<number>("huebase", defaulthue); 110 + export const hueAccentAtom = atomWithStorage<number>("hueaccent", defaulthue); 111 + export const hueContrastAtom = atomWithStorage<number>("huecontrast", defaulthue); 112 + export const hueMutedAtom = atomWithStorage<number>("huemuted", defaulthue); 109 113 110 114 export const isAtTopAtom = atom<boolean>(true); 111 115

Configure Feed

Configure Feed