An ATproto social media client -- with an independent Appview.
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: merge weirdness

serenity 1de143de e33d3c1b

-546
-545
src/alf/themes.ts
··· 1 1 import {atoms} from '#/alf/atoms' 2 2 import {mocha} from '#/alf/catppuccin/palette' 3 3 import {type Palette, type Theme} from '#/alf/types' 4 - import {type Palette, type Theme} from '#/alf/types' 5 - import {defaultScale, dimScale} from '#/alf/util/colorGeneration' 6 4 import { 7 5 BLUE_HUE, 8 6 defaultScale, ··· 613 611 dim, 614 612 } 615 613 } 616 - 617 - export const defaultTheme = themes.light 618 - 619 - export function createThemes({ 620 - hues, 621 - }: { 622 - hues: { 623 - primary: number 624 - negative: number 625 - positive: number 626 - } 627 - }): { 628 - lightPalette: Palette 629 - darkPalette: Palette 630 - dimPalette: Palette 631 - light: Theme 632 - dark: Theme 633 - dim: Theme 634 - } { 635 - const color = { 636 - like: '#ec4899', 637 - trueBlack: '#000000', 638 - 639 - gray_0: `hsl(${hues.primary}, 20%, ${defaultScale[14]}%)`, 640 - gray_25: `hsl(${hues.primary}, 20%, ${defaultScale[13]}%)`, 641 - gray_50: `hsl(${hues.primary}, 20%, ${defaultScale[12]}%)`, 642 - gray_100: `hsl(${hues.primary}, 20%, ${defaultScale[11]}%)`, 643 - gray_200: `hsl(${hues.primary}, 20%, ${defaultScale[10]}%)`, 644 - gray_300: `hsl(${hues.primary}, 20%, ${defaultScale[9]}%)`, 645 - gray_400: `hsl(${hues.primary}, 20%, ${defaultScale[8]}%)`, 646 - gray_500: `hsl(${hues.primary}, 20%, ${defaultScale[7]}%)`, 647 - gray_600: `hsl(${hues.primary}, 24%, ${defaultScale[6]}%)`, 648 - gray_700: `hsl(${hues.primary}, 24%, ${defaultScale[5]}%)`, 649 - gray_800: `hsl(${hues.primary}, 28%, ${defaultScale[4]}%)`, 650 - gray_900: `hsl(${hues.primary}, 28%, ${defaultScale[3]}%)`, 651 - gray_950: `hsl(${hues.primary}, 28%, ${defaultScale[2]}%)`, 652 - gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`, 653 - gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`, 654 - 655 - primary_25: `hsl(${hues.primary}, 99%, 97%)`, 656 - primary_50: `hsl(${hues.primary}, 99%, 95%)`, 657 - primary_100: `hsl(${hues.primary}, 99%, 90%)`, 658 - primary_200: `hsl(${hues.primary}, 99%, 80%)`, 659 - primary_300: `hsl(${hues.primary}, 99%, 70%)`, 660 - primary_400: `hsl(${hues.primary}, 99%, 60%)`, 661 - primary_500: `hsl(${hues.primary}, 99%, 53%)`, 662 - primary_600: `hsl(${hues.primary}, 99%, 42%)`, 663 - primary_700: `hsl(${hues.primary}, 99%, 34%)`, 664 - primary_800: `hsl(${hues.primary}, 99%, 26%)`, 665 - primary_900: `hsl(${hues.primary}, 99%, 18%)`, 666 - primary_950: `hsl(${hues.primary}, 99%, 10%)`, 667 - primary_975: `hsl(${hues.primary}, 99%, 7%)`, 668 - 669 - green_25: `hsl(${hues.positive}, 82%, 97%)`, 670 - green_50: `hsl(${hues.positive}, 82%, 95%)`, 671 - green_100: `hsl(${hues.positive}, 82%, 90%)`, 672 - green_200: `hsl(${hues.positive}, 82%, 80%)`, 673 - green_300: `hsl(${hues.positive}, 82%, 70%)`, 674 - green_400: `hsl(${hues.positive}, 82%, 60%)`, 675 - green_500: `hsl(${hues.positive}, 82%, 50%)`, 676 - green_600: `hsl(${hues.positive}, 82%, 42%)`, 677 - green_700: `hsl(${hues.positive}, 82%, 34%)`, 678 - green_800: `hsl(${hues.positive}, 82%, 26%)`, 679 - green_900: `hsl(${hues.positive}, 82%, 18%)`, 680 - green_950: `hsl(${hues.positive}, 82%, 10%)`, 681 - green_975: `hsl(${hues.positive}, 82%, 7%)`, 682 - 683 - red_25: `hsl(${hues.negative}, 91%, 97%)`, 684 - red_50: `hsl(${hues.negative}, 91%, 95%)`, 685 - red_100: `hsl(${hues.negative}, 91%, 90%)`, 686 - red_200: `hsl(${hues.negative}, 91%, 80%)`, 687 - red_300: `hsl(${hues.negative}, 91%, 70%)`, 688 - red_400: `hsl(${hues.negative}, 91%, 60%)`, 689 - red_500: `hsl(${hues.negative}, 91%, 50%)`, 690 - red_600: `hsl(${hues.negative}, 91%, 42%)`, 691 - red_700: `hsl(${hues.negative}, 91%, 34%)`, 692 - red_800: `hsl(${hues.negative}, 91%, 26%)`, 693 - red_900: `hsl(${hues.negative}, 91%, 18%)`, 694 - red_950: `hsl(${hues.negative}, 91%, 10%)`, 695 - red_975: `hsl(${hues.negative}, 91%, 7%)`, 696 - } as const 697 - 698 - const lightPalette = { 699 - white: color.gray_0, 700 - black: color.gray_1000, 701 - like: color.like, 702 - 703 - contrast_25: color.gray_25, 704 - contrast_50: color.gray_50, 705 - contrast_100: color.gray_100, 706 - contrast_200: color.gray_200, 707 - contrast_300: color.gray_300, 708 - contrast_400: color.gray_400, 709 - contrast_500: color.gray_500, 710 - contrast_600: color.gray_600, 711 - contrast_700: color.gray_700, 712 - contrast_800: color.gray_800, 713 - contrast_900: color.gray_900, 714 - contrast_950: color.gray_950, 715 - contrast_975: color.gray_975, 716 - 717 - primary_25: color.primary_25, 718 - primary_50: color.primary_50, 719 - primary_100: color.primary_100, 720 - primary_200: color.primary_200, 721 - primary_300: color.primary_300, 722 - primary_400: color.primary_400, 723 - primary_500: color.primary_500, 724 - primary_600: color.primary_600, 725 - primary_700: color.primary_700, 726 - primary_800: color.primary_800, 727 - primary_900: color.primary_900, 728 - primary_950: color.primary_950, 729 - primary_975: color.primary_975, 730 - 731 - positive_25: color.green_25, 732 - positive_50: color.green_50, 733 - positive_100: color.green_100, 734 - positive_200: color.green_200, 735 - positive_300: color.green_300, 736 - positive_400: color.green_400, 737 - positive_500: color.green_500, 738 - positive_600: color.green_600, 739 - positive_700: color.green_700, 740 - positive_800: color.green_800, 741 - positive_900: color.green_900, 742 - positive_950: color.green_950, 743 - positive_975: color.green_975, 744 - 745 - negative_25: color.red_25, 746 - negative_50: color.red_50, 747 - negative_100: color.red_100, 748 - negative_200: color.red_200, 749 - negative_300: color.red_300, 750 - negative_400: color.red_400, 751 - negative_500: color.red_500, 752 - negative_600: color.red_600, 753 - negative_700: color.red_700, 754 - negative_800: color.red_800, 755 - negative_900: color.red_900, 756 - negative_950: color.red_950, 757 - negative_975: color.red_975, 758 - } as const 759 - 760 - const darkPalette: Palette = { 761 - white: color.gray_25, 762 - black: color.trueBlack, 763 - like: color.like, 764 - 765 - contrast_25: color.gray_975, 766 - contrast_50: color.gray_950, 767 - contrast_100: color.gray_900, 768 - contrast_200: color.gray_800, 769 - contrast_300: color.gray_700, 770 - contrast_400: color.gray_600, 771 - contrast_500: color.gray_500, 772 - contrast_600: color.gray_400, 773 - contrast_700: color.gray_300, 774 - contrast_800: color.gray_200, 775 - contrast_900: color.gray_100, 776 - contrast_950: color.gray_50, 777 - contrast_975: color.gray_25, 778 - 779 - primary_25: color.primary_975, 780 - primary_50: color.primary_950, 781 - primary_100: color.primary_900, 782 - primary_200: color.primary_800, 783 - primary_300: color.primary_700, 784 - primary_400: color.primary_600, 785 - primary_500: color.primary_500, 786 - primary_600: color.primary_400, 787 - primary_700: color.primary_300, 788 - primary_800: color.primary_200, 789 - primary_900: color.primary_100, 790 - primary_950: color.primary_50, 791 - primary_975: color.primary_25, 792 - 793 - positive_25: color.green_975, 794 - positive_50: color.green_950, 795 - positive_100: color.green_900, 796 - positive_200: color.green_800, 797 - positive_300: color.green_700, 798 - positive_400: color.green_600, 799 - positive_500: color.green_500, 800 - positive_600: color.green_400, 801 - positive_700: color.green_300, 802 - positive_800: color.green_200, 803 - positive_900: color.green_100, 804 - positive_950: color.green_50, 805 - positive_975: color.green_25, 806 - 807 - negative_25: color.red_975, 808 - negative_50: color.red_950, 809 - negative_100: color.red_900, 810 - negative_200: color.red_800, 811 - negative_300: color.red_700, 812 - negative_400: color.red_600, 813 - negative_500: color.red_500, 814 - negative_600: color.red_400, 815 - negative_700: color.red_300, 816 - negative_800: color.red_200, 817 - negative_900: color.red_100, 818 - negative_950: color.red_50, 819 - negative_975: color.red_25, 820 - } as const 821 - 822 - const dimPalette: Palette = { 823 - ...darkPalette, 824 - black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`, 825 - like: color.like, 826 - 827 - contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`, 828 - contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`, 829 - contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`, 830 - contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`, 831 - contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`, 832 - contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`, 833 - contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`, 834 - contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`, 835 - contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`, 836 - contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`, 837 - contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`, 838 - contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, 839 - contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, 840 - 841 - primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`, 842 - primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`, 843 - primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`, 844 - primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`, 845 - primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`, 846 - primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`, 847 - primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`, 848 - primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`, 849 - primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`, 850 - primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`, 851 - primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`, 852 - primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`, 853 - primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`, 854 - 855 - positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`, 856 - positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`, 857 - positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`, 858 - positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`, 859 - positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`, 860 - positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`, 861 - positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`, 862 - positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`, 863 - positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`, 864 - positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`, 865 - positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`, 866 - positive_950: `hsl(${hues.positive}, 82%, ${dimScale[12]}%)`, 867 - positive_975: `hsl(${hues.positive}, 82%, ${dimScale[13]}%)`, 868 - 869 - negative_25: `hsl(${hues.negative}, 70%, ${dimScale[1]}%)`, 870 - negative_50: `hsl(${hues.negative}, 80%, ${dimScale[2]}%)`, 871 - negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`, 872 - negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`, 873 - negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`, 874 - negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`, 875 - negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`, 876 - negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`, 877 - negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`, 878 - negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`, 879 - negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`, 880 - negative_950: `hsl(${hues.negative}, 91%, ${dimScale[12]}%)`, 881 - negative_975: `hsl(${hues.negative}, 91%, ${dimScale[13]}%)`, 882 - } as const 883 - 884 - const light: Theme = { 885 - scheme: 'light', 886 - name: 'light', 887 - palette: lightPalette, 888 - atoms: { 889 - text: { 890 - color: lightPalette.black, 891 - }, 892 - text_contrast_low: { 893 - color: lightPalette.contrast_400, 894 - }, 895 - text_contrast_medium: { 896 - color: lightPalette.contrast_700, 897 - }, 898 - text_contrast_high: { 899 - color: lightPalette.contrast_900, 900 - }, 901 - text_inverted: { 902 - color: lightPalette.white, 903 - }, 904 - bg: { 905 - backgroundColor: lightPalette.white, 906 - }, 907 - bg_contrast_25: { 908 - backgroundColor: lightPalette.contrast_25, 909 - }, 910 - bg_contrast_50: { 911 - backgroundColor: lightPalette.contrast_50, 912 - }, 913 - bg_contrast_100: { 914 - backgroundColor: lightPalette.contrast_100, 915 - }, 916 - bg_contrast_200: { 917 - backgroundColor: lightPalette.contrast_200, 918 - }, 919 - bg_contrast_300: { 920 - backgroundColor: lightPalette.contrast_300, 921 - }, 922 - bg_contrast_400: { 923 - backgroundColor: lightPalette.contrast_400, 924 - }, 925 - bg_contrast_500: { 926 - backgroundColor: lightPalette.contrast_500, 927 - }, 928 - bg_contrast_600: { 929 - backgroundColor: lightPalette.contrast_600, 930 - }, 931 - bg_contrast_700: { 932 - backgroundColor: lightPalette.contrast_700, 933 - }, 934 - bg_contrast_800: { 935 - backgroundColor: lightPalette.contrast_800, 936 - }, 937 - bg_contrast_900: { 938 - backgroundColor: lightPalette.contrast_900, 939 - }, 940 - bg_contrast_950: { 941 - backgroundColor: lightPalette.contrast_950, 942 - }, 943 - bg_contrast_975: { 944 - backgroundColor: lightPalette.contrast_975, 945 - }, 946 - border_contrast_low: { 947 - borderColor: lightPalette.contrast_100, 948 - }, 949 - border_contrast_medium: { 950 - borderColor: lightPalette.contrast_200, 951 - }, 952 - border_contrast_high: { 953 - borderColor: lightPalette.contrast_300, 954 - }, 955 - shadow_sm: { 956 - ...atoms.shadow_sm, 957 - shadowColor: lightPalette.black, 958 - }, 959 - shadow_md: { 960 - ...atoms.shadow_md, 961 - shadowColor: lightPalette.black, 962 - }, 963 - shadow_lg: { 964 - ...atoms.shadow_lg, 965 - shadowColor: lightPalette.black, 966 - }, 967 - }, 968 - } 969 - 970 - const dark: Theme = { 971 - scheme: 'dark', 972 - name: 'dark', 973 - palette: darkPalette, 974 - atoms: { 975 - text: { 976 - color: darkPalette.white, 977 - }, 978 - text_contrast_low: { 979 - color: darkPalette.contrast_400, 980 - }, 981 - text_contrast_medium: { 982 - color: darkPalette.contrast_600, 983 - }, 984 - text_contrast_high: { 985 - color: darkPalette.contrast_900, 986 - }, 987 - text_inverted: { 988 - color: darkPalette.black, 989 - }, 990 - bg: { 991 - backgroundColor: darkPalette.black, 992 - }, 993 - bg_contrast_25: { 994 - backgroundColor: darkPalette.contrast_25, 995 - }, 996 - bg_contrast_50: { 997 - backgroundColor: darkPalette.contrast_50, 998 - }, 999 - bg_contrast_100: { 1000 - backgroundColor: darkPalette.contrast_100, 1001 - }, 1002 - bg_contrast_200: { 1003 - backgroundColor: darkPalette.contrast_200, 1004 - }, 1005 - bg_contrast_300: { 1006 - backgroundColor: darkPalette.contrast_300, 1007 - }, 1008 - bg_contrast_400: { 1009 - backgroundColor: darkPalette.contrast_400, 1010 - }, 1011 - bg_contrast_500: { 1012 - backgroundColor: darkPalette.contrast_500, 1013 - }, 1014 - bg_contrast_600: { 1015 - backgroundColor: darkPalette.contrast_600, 1016 - }, 1017 - bg_contrast_700: { 1018 - backgroundColor: darkPalette.contrast_700, 1019 - }, 1020 - bg_contrast_800: { 1021 - backgroundColor: darkPalette.contrast_800, 1022 - }, 1023 - bg_contrast_900: { 1024 - backgroundColor: darkPalette.contrast_900, 1025 - }, 1026 - bg_contrast_950: { 1027 - backgroundColor: darkPalette.contrast_950, 1028 - }, 1029 - bg_contrast_975: { 1030 - backgroundColor: darkPalette.contrast_975, 1031 - }, 1032 - border_contrast_low: { 1033 - borderColor: darkPalette.contrast_100, 1034 - }, 1035 - border_contrast_medium: { 1036 - borderColor: darkPalette.contrast_200, 1037 - }, 1038 - border_contrast_high: { 1039 - borderColor: darkPalette.contrast_300, 1040 - }, 1041 - shadow_sm: { 1042 - ...atoms.shadow_sm, 1043 - shadowOpacity: 0.7, 1044 - shadowColor: color.trueBlack, 1045 - }, 1046 - shadow_md: { 1047 - ...atoms.shadow_md, 1048 - shadowOpacity: 0.7, 1049 - shadowColor: color.trueBlack, 1050 - }, 1051 - shadow_lg: { 1052 - ...atoms.shadow_lg, 1053 - shadowOpacity: 0.7, 1054 - shadowColor: color.trueBlack, 1055 - }, 1056 - }, 1057 - } 1058 - 1059 - const dim: Theme = { 1060 - ...dark, 1061 - scheme: 'dark', 1062 - name: 'dim', 1063 - palette: dimPalette, 1064 - atoms: { 1065 - ...dark.atoms, 1066 - text: { 1067 - color: dimPalette.white, 1068 - }, 1069 - text_contrast_low: { 1070 - color: dimPalette.contrast_400, 1071 - }, 1072 - text_contrast_medium: { 1073 - color: dimPalette.contrast_600, 1074 - }, 1075 - text_contrast_high: { 1076 - color: dimPalette.contrast_900, 1077 - }, 1078 - text_inverted: { 1079 - color: dimPalette.black, 1080 - }, 1081 - bg: { 1082 - backgroundColor: dimPalette.black, 1083 - }, 1084 - bg_contrast_25: { 1085 - backgroundColor: dimPalette.contrast_25, 1086 - }, 1087 - bg_contrast_50: { 1088 - backgroundColor: dimPalette.contrast_50, 1089 - }, 1090 - bg_contrast_100: { 1091 - backgroundColor: dimPalette.contrast_100, 1092 - }, 1093 - bg_contrast_200: { 1094 - backgroundColor: dimPalette.contrast_200, 1095 - }, 1096 - bg_contrast_300: { 1097 - backgroundColor: dimPalette.contrast_300, 1098 - }, 1099 - bg_contrast_400: { 1100 - backgroundColor: dimPalette.contrast_400, 1101 - }, 1102 - bg_contrast_500: { 1103 - backgroundColor: dimPalette.contrast_500, 1104 - }, 1105 - bg_contrast_600: { 1106 - backgroundColor: dimPalette.contrast_600, 1107 - }, 1108 - bg_contrast_700: { 1109 - backgroundColor: dimPalette.contrast_700, 1110 - }, 1111 - bg_contrast_800: { 1112 - backgroundColor: dimPalette.contrast_800, 1113 - }, 1114 - bg_contrast_900: { 1115 - backgroundColor: dimPalette.contrast_900, 1116 - }, 1117 - bg_contrast_950: { 1118 - backgroundColor: dimPalette.contrast_950, 1119 - }, 1120 - bg_contrast_975: { 1121 - backgroundColor: dimPalette.contrast_975, 1122 - }, 1123 - border_contrast_low: { 1124 - borderColor: dimPalette.contrast_100, 1125 - }, 1126 - border_contrast_medium: { 1127 - borderColor: dimPalette.contrast_200, 1128 - }, 1129 - border_contrast_high: { 1130 - borderColor: dimPalette.contrast_300, 1131 - }, 1132 - shadow_sm: { 1133 - ...atoms.shadow_sm, 1134 - shadowOpacity: 0.7, 1135 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1136 - }, 1137 - shadow_md: { 1138 - ...atoms.shadow_md, 1139 - shadowOpacity: 0.7, 1140 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1141 - }, 1142 - shadow_lg: { 1143 - ...atoms.shadow_lg, 1144 - shadowOpacity: 0.7, 1145 - shadowColor: `hsl(${hues.primary}, 28%, 6%)`, 1146 - }, 1147 - }, 1148 - } 1149 - 1150 - return { 1151 - lightPalette, 1152 - darkPalette, 1153 - dimPalette, 1154 - light, 1155 - dark, 1156 - dim, 1157 - } 1158 - }
-1
src/view/com/composer/Composer.tsx
··· 65 65 SUPPORTED_MIME_TYPES, 66 66 type SupportedMimeTypes, 67 67 } from '#/lib/constants' 68 - import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' 69 68 import {useAppState} from '#/lib/hooks/useAppState' 70 69 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible' 71 70 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'