fix appearance crashes #18

···

       
20
       
 
       
  return useMemo(() => {

     

       
21
       
 
       
    return (

     

       
22
       
 
       
      appIconSets.defaults.find(i => i.id === currentAppIcon) ??

     

       
23
       
-
       
      appIconSets.core.find(i => i.id === currentAppIcon) ??

     

       
24
       
 
       
      appIconSets.defaults[0]

     

       
25
       
 
       
    )

     

       
26
       
 
       
  }, [appIconSets, currentAppIcon])

     

···

       
20
       
 
       
  return useMemo(() => {

     

       
21
       
 
       
    return (

     

       
22
       
 
       
      appIconSets.defaults.find(i => i.id === currentAppIcon) ??

     

       
23
       
+
       
      //appIconSets.core.find(i => i.id === currentAppIcon) ??

     

       
24
       
 
       
      appIconSets.defaults[0]

     

       
25
       
 
       
    )

     

       
26
       
 
       
  }, [appIconSets, currentAppIcon])

     

···

       
126
       
 
       
    "babel-plugin-transform-remove-console": "^6.9.4",

     

       
127
       
 
       
    "bcp-47": "^2.1.0",

     

       
128
       
 
       
    "bcp-47-match": "^2.0.3",

     

       
129
       
-
       
    "culori": "^4.0.2",

     

       
130
       
 
       
    "date-fns": "^2.30.0",

     

       
131
       
 
       
    "email-validator": "^2.0.4",

     

       
132
       
 
       
    "emoji-mart": "^5.5.2",

     
···

       
236
       
 
       
    "@sentry/webpack-plugin": "^3.2.2",

     

       
237
       
 
       
    "@testing-library/jest-native": "^5.4.3",

     

       
238
       
 
       
    "@testing-library/react-native": "^13.2.0",

     

       
0
       
 
       

     

       
239
       
 
       
    "@types/culori": "^4.0.1",

     

       
240
       
 
       
    "@types/jest": "29.5.14",

     

       
241
       
 
       
    "@types/lodash.chunk": "^4.2.7",

     

···

       
126
       
 
       
    "babel-plugin-transform-remove-console": "^6.9.4",

     

       
127
       
 
       
    "bcp-47": "^2.1.0",

     

       
128
       
 
       
    "bcp-47-match": "^2.0.3",

     

       
129
       
+
       
    "chroma-js": "^3.2.0",

     

       
130
       
 
       
    "date-fns": "^2.30.0",

     

       
131
       
 
       
    "email-validator": "^2.0.4",

     

       
132
       
 
       
    "emoji-mart": "^5.5.2",

     
···

       
236
       
 
       
    "@sentry/webpack-plugin": "^3.2.2",

     

       
237
       
 
       
    "@testing-library/jest-native": "^5.4.3",

     

       
238
       
 
       
    "@testing-library/react-native": "^13.2.0",

     

       
239
       
+
       
    "@types/chroma-js": "^3.1.2",

     

       
240
       
 
       
    "@types/culori": "^4.0.1",

     

       
241
       
 
       
    "@types/jest": "29.5.14",

     

       
242
       
 
       
    "@types/lodash.chunk": "^4.2.7",

     

···

       
1
       
 
       
import React from 'react'

     

       
2
       
 
       
import {createTheme, type Theme, type ThemeName} from '@bsky.app/alf'

     

       
3
       
-
       
import {formatHex, modeOklch, useMode as utilMode} from 'culori'

     

       
4
       
 
       


     

       
5
       
 
       
import {useThemePrefs} from '#/state/shell/color-mode'

     

       
6
       
 
       
import {

     
···

       
70
       
 
       


     

       
71
       
 
       
export type SchemeType = typeof themes

     

       
72
       
 
       


     

       
73
       
-
       
function changeHue(color: string, hueShift: number) {

     

       
74
       
-
       
  if (!hueShift || hueShift === 0) return color

     

       
75
       
 
       


     

       
76
       
-
       
  let lablch = utilMode(modeOklch)

     

       
77
       
-
       
  const parsed = lablch(color)

     

       
78
       
 
       


     

       
79
       
-
       
  if (!parsed) return color

     

       
80
       
 
       


     

       
81
       
-
       
  const {l, c, h} = parsed as {l: number; c: number; h: number | undefined}

     

       
82
       
-
       


     

       
83
       
-
       
  const currentHue = h || 0

     

       
84
       
-
       


     

       
85
       
-
       
  const newHue = (currentHue + hueShift + 360) % 360

     

       
86
       
-
       


     

       
87
       
-
       
  return formatHex({mode: 'oklch', l, c, h: newHue})

     

       
88
       
 
       
}

     

       
89
       
 
       


     

       
90
       
 
       
export function shiftPalette(palette: Palette, hueShift: number): Palette {

     

···

       
1
       
 
       
import React from 'react'

     

       
2
       
 
       
import {createTheme, type Theme, type ThemeName} from '@bsky.app/alf'

     

       
3
       
+
       
import chroma from 'chroma-js'

     

       
4
       
 
       


     

       
5
       
 
       
import {useThemePrefs} from '#/state/shell/color-mode'

     

       
6
       
 
       
import {

     
···

       
70
       
 
       


     

       
71
       
 
       
export type SchemeType = typeof themes

     

       
72
       
 
       


     

       
73
       
+
       
export function changeHue(colorStr: string, hueShift: number) {

     

       
74
       
+
       
  if (!hueShift || hueShift === 0) return colorStr

     

       
75
       
 
       


     

       
76
       
+
       
  const color = chroma(colorStr).oklch()

     

       
0
       
 
       

     

       
77
       
 
       


     

       
78
       
+
       
  const newHue = (color[2] + hueShift + 360) % 360

     

       
79
       
 
       


     

       
80
       
+
       
  return chroma.oklch(color[0], color[1], newHue).hex()

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
81
       
 
       
}

     

       
82
       
 
       


     

       
83
       
 
       
export function shiftPalette(palette: Palette, hueShift: number): Palette {

     

···

       
0
       
 
       

     

       
1
       
 
       
import {type ViewStyle} from 'react-native'

     

       
2
       
 
       
import {Slider as RNSlider} from '@miblanchard/react-native-slider'

     

       
3
       
 
       


     

       
4
       
-
       
import {useTheme} from '#/alf'

     

       
5
       
 
       


     

       
6
       
 
       
interface SliderProps {

     

       
7
       
 
       
  value: number

     
···

       
13
       
 
       
  minimumTrackStyle?: ViewStyle

     

       
14
       
 
       
  thumbStyle?: ViewStyle

     

       
15
       
 
       
  thumbTouchSize?: {width: number; height: number}

     

       
0
       
 
       

     

       
16
       
 
       
}

     

       
17
       
 
       


     

       
18
       
 
       
export function Slider({

     
···

       
25
       
 
       
  minimumTrackStyle,

     

       
26
       
 
       
  thumbStyle,

     

       
27
       
 
       
  thumbTouchSize = {width: 40, height: 40},

     

       
0
       
 
       

     

       
28
       
 
       
}: SliderProps) {

     

       
29
       
 
       
  const t = useTheme()

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
30
       
 
       


     

       
31
       
 
       
  return (

     

       
32
       
 
       
    <RNSlider

     

       
33
       
-
       
      value={[value]} // always an array

     

       
34
       
-
       
      onValueChange={values => onValueChange(values[0])}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
35
       
 
       
      minimumValue={minimumValue}

     

       
36
       
 
       
      maximumValue={maximumValue}

     

       
37
       
 
       
      step={step}

     
···

       
44
       
 
       
      minimumTrackStyle={{

     

       
45
       
 
       
        height: 4,

     

       
46
       
 
       
        borderRadius: 2,

     

       
47
       
-
       
        backgroundColor: t.palette.primary_500,

     

       
48
       
 
       
        ...minimumTrackStyle,

     

       
49
       
 
       
      }}

     

       
50
       
 
       
      thumbStyle={{

     

···

       
1
       
+
       
import {useEffect, useState} from 'react'

     

       
2
       
 
       
import {type ViewStyle} from 'react-native'

     

       
3
       
 
       
import {Slider as RNSlider} from '@miblanchard/react-native-slider'

     

       
4
       
 
       


     

       
5
       
+
       
import {changeHue, useTheme} from '#/alf'

     

       
6
       
 
       


     

       
7
       
 
       
interface SliderProps {

     

       
8
       
 
       
  value: number

     
···

       
14
       
 
       
  minimumTrackStyle?: ViewStyle

     

       
15
       
 
       
  thumbStyle?: ViewStyle

     

       
16
       
 
       
  thumbTouchSize?: {width: number; height: number}

     

       
17
       
+
       
  debounceFull?: boolean

     

       
18
       
 
       
}

     

       
19
       
 
       


     

       
20
       
 
       
export function Slider({

     
···

       
27
       
 
       
  minimumTrackStyle,

     

       
28
       
 
       
  thumbStyle,

     

       
29
       
 
       
  thumbTouchSize = {width: 40, height: 40},

     

       
30
       
+
       
  debounceFull,

     

       
31
       
 
       
}: SliderProps) {

     

       
32
       
 
       
  const t = useTheme()

     

       
33
       
+
       
  // We need local state to handle visual updates while dragging if debounceFull is true

     

       
34
       
+
       
  const [localValue, setLocalValue] = useState(value)

     

       
35
       
+
       


     

       
36
       
+
       
  // Sync local state if the parent updates the value prop externally

     

       
37
       
+
       
  useEffect(() => {

     

       
38
       
+
       
    setLocalValue(value)

     

       
39
       
+
       
  }, [value])

     

       
40
       
 
       


     

       
41
       
 
       
  return (

     

       
42
       
 
       
    <RNSlider

     

       
43
       
+
       
      value={[localValue]} // Read from local state

     

       
44
       
+
       
      onValueChange={values => {

     

       
45
       
+
       
        const nextVal = values[0]

     

       
46
       
+
       
        setLocalValue(nextVal)

     

       
47
       
+
       


     

       
48
       
+
       
        // If NOT debouncing, update parent immediately while dragging

     

       
49
       
+
       
        if (!debounceFull) {

     

       
50
       
+
       
          onValueChange(nextVal)

     

       
51
       
+
       
        }

     

       
52
       
+
       
      }}

     

       
53
       
+
       
      onSlidingComplete={values => {

     

       
54
       
+
       
        // If debouncing, update parent only when done dragging

     

       
55
       
+
       
        if (debounceFull) {

     

       
56
       
+
       
          onValueChange(values[0])

     

       
57
       
+
       
        }

     

       
58
       
+
       
      }}

     

       
59
       
 
       
      minimumValue={minimumValue}

     

       
60
       
 
       
      maximumValue={maximumValue}

     

       
61
       
 
       
      step={step}

     
···

       
68
       
 
       
      minimumTrackStyle={{

     

       
69
       
 
       
        height: 4,

     

       
70
       
 
       
        borderRadius: 2,

     

       
71
       
+
       
        backgroundColor: changeHue(t.palette.primary_500, localValue - value),

     

       
72
       
 
       
        ...minimumTrackStyle,

     

       
73
       
 
       
      }}

     

       
74
       
 
       
      thumbStyle={{

     

···

       
189
       
 
       
                  minimumValue={0}

     

       
190
       
 
       
                  maximumValue={360}

     

       
191
       
 
       
                  step={1}

     

       
0
       
 
       

     

       
192
       
 
       
                />

     

       
193
       
 
       
              </View>

     

       
194
       
 
       
            </SettingsList.Group>

     

···

       
189
       
 
       
                  minimumValue={0}

     

       
190
       
 
       
                  maximumValue={360}

     

       
191
       
 
       
                  step={1}

     

       
192
       
+
       
                  debounceFull={true}

     

       
193
       
 
       
                />

     

       
194
       
 
       
              </View>

     

       
195
       
 
       
            </SettingsList.Group>

     

···

       
7427
       
 
       
  dependencies:

     

       
7428
       
 
       
    "@types/node" "*"

     

       
7429
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
7430
       
 
       
"@types/connect-history-api-fallback@^1.3.5":

     

       
7431
       
 
       
  version "1.5.0"

     

       
7432
       
 
       
  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"

     
···

       
9331
       
 
       
  resolved "https://registry.yarnpkg.com/chownr/-/chownr-3.0.0.tgz#9855e64ecd240a9cc4267ce8a4aa5d24a1da15e4"

     

       
9332
       
 
       
  integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==

     

       
9333
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
9334
       
 
       
chrome-launcher@^0.15.2:

     

       
9335
       
 
       
  version "0.15.2"

     

       
9336
       
 
       
  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.2.tgz#4e6404e32200095fdce7f6a1e1004f9bd36fa5da"

     
···

       
9980
       
 
       
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"

     

       
9981
       
 
       
  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

     

       
9982
       
 
       


     

       
9983
       
-
       
culori@^4.0.2:

     

       
9984
       
-
       
  version "4.0.2"

     

       
9985
       
-
       
  resolved "https://registry.yarnpkg.com/culori/-/culori-4.0.2.tgz#fbb28dbeb8d13d0eeab7520191f74ab822a8ca71"

     

       
9986
       
-
       
  integrity sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==

     

       
9987
       
-
       


     

       
9988
       
 
       
data-urls@^3.0.2:

     

       
9989
       
 
       
  version "3.0.2"

     

       
9990
       
 
       
  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"

     

···

       
7427
       
 
       
  dependencies:

     

       
7428
       
 
       
    "@types/node" "*"

     

       
7429
       
 
       


     

       
7430
       
+
       
"@types/chroma-js@^3.1.2":

     

       
7431
       
+
       
  version "3.1.2"

     

       
7432
       
+
       
  resolved "https://registry.yarnpkg.com/@types/chroma-js/-/chroma-js-3.1.2.tgz#29dd767ae46124c9d0cd3370bedad7364adcfd10"

     

       
7433
       
+
       
  integrity sha512-YBTQqArPN8A0niHXCwrO1z5x++a+6l0mLBykncUpr23oIPW7L4h39s6gokdK/bDrPmSh8+TjMmrhBPnyiaWPmQ==

     

       
7434
       
+
       


     

       
7435
       
 
       
"@types/connect-history-api-fallback@^1.3.5":

     

       
7436
       
 
       
  version "1.5.0"

     

       
7437
       
 
       
  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#9fd20b3974bdc2bcd4ac6567e2e0f6885cb2cf41"

     
···

       
9336
       
 
       
  resolved "https://registry.yarnpkg.com/chownr/-/chownr-3.0.0.tgz#9855e64ecd240a9cc4267ce8a4aa5d24a1da15e4"

     

       
9337
       
 
       
  integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==

     

       
9338
       
 
       


     

       
9339
       
+
       
chroma-js@^3.2.0:

     

       
9340
       
+
       
  version "3.2.0"

     

       
9341
       
+
       
  resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-3.2.0.tgz#4e9e665290b9bbfece524fccf759d5120e351ff2"

     

       
9342
       
+
       
  integrity sha512-os/OippSlX1RlWWr+QDPcGUZs0uoqr32urfxESG9U93lhUfbnlyckte84Q8P1UQY/qth983AS1JONKmLS4T0nw==

     

       
9343
       
+
       


     

       
9344
       
 
       
chrome-launcher@^0.15.2:

     

       
9345
       
 
       
  version "0.15.2"

     

       
9346
       
 
       
  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.2.tgz#4e6404e32200095fdce7f6a1e1004f9bd36fa5da"

     
···

       
9990
       
 
       
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"

     

       
9991
       
 
       
  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

     

       
9992
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
9993
       
 
       
data-urls@^3.0.2:

     

       
9994
       
 
       
  version "3.0.2"

     

       
9995
       
 
       
  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"