add title attr to text text links (#1228)

* add title attr to text text links

* Revert "add title attr to text text links"

This reverts commit c028cd184efd3b2788d8f46134eecf521e5d7b07.

* use css tooltips

* add to expanded post state

* handle theming

* add to bskyweb

src/state/models/ui/shell.ts

@@ -267,13 +267,20 @@ export class ShellUiModel {
   hydrate(v: unknown) {
     if (isObj(v)) {
       if (hasProp(v, 'colorMode') && isColorMode(v.colorMode)) {
-        this.colorMode = v.colorMode
+        this.setColorMode(v.colorMode)
       }
     }
   }
 
   setColorMode(mode: ColorMode) {
     this.colorMode = mode
+
+    if (typeof window !== 'undefined') {
+      const html = window.document.documentElement
+      // remove any other color mode classes
+      html.className = html.className.replace(/colorMode--\w+/g, '')
+      html.classList.add(`colorMode--${mode}`)
+    }
   }
 
   setMinimalShellMode(v: boolean) {

src/view/com/post-thread/PostThreadItem.tsx

@@ -193,7 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
               />
             </View>
             <View style={styles.layoutContent}>
-              <View style={[styles.meta, styles.metaExpandedLine1]}>
+              <View
+                style={[styles.meta, styles.metaExpandedLine1, {zIndex: 1}]}>
                 <View style={[s.flexRow]}>
                   <Link
                     style={styles.metaItem}
@@ -210,12 +211,16 @@ export const PostThreadItem = observer(function PostThreadItem({
                       )}
                     </Text>
                   </Link>
-                  <Text type="md" style={[styles.metaItem, pal.textLight]}>
-                    &middot;&nbsp;
-                    <TimeElapsed timestamp={item.post.indexedAt}>
-                      {({timeElapsed}) => <>{timeElapsed}</>}
-                    </TimeElapsed>
-                  </Text>
+                  <TimeElapsed timestamp={item.post.indexedAt}>
+                    {({timeElapsed}) => (
+                      <Text
+                        type="md"
+                        style={[styles.metaItem, pal.textLight]}
+                        title={niceDate(item.post.indexedAt)}>
+                        &middot;&nbsp;{timeElapsed}
+                      </Text>
+                    )}
+                  </TimeElapsed>
                 </View>
               </View>
               <View style={styles.meta}>

src/view/com/util/Link.tsx

@@ -135,6 +135,7 @@ export const TextLink = observer(function TextLink({
   numberOfLines,
   lineHeight,
   dataSet,
+  title,
 }: {
   testID?: string
   type?: TypographyVariant
@@ -144,6 +145,7 @@ export const TextLink = observer(function TextLink({
   numberOfLines?: number
   lineHeight?: number
   dataSet?: any
+  title?: string
 } & TextProps) {
   const {...props} = useLinkProps({to: sanitizeUrl(href)})
   const store = useStores()
@@ -173,8 +175,8 @@ export const TextLink = observer(function TextLink({
       style={style}
       numberOfLines={numberOfLines}
       lineHeight={lineHeight}
-      // @ts-ignore web only -prf
       dataSet={dataSet}
+      title={title}
       // @ts-ignore web only -prf
       hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
       {...props}>
@@ -197,6 +199,7 @@ interface DesktopWebTextLinkProps extends TextProps {
   accessible?: boolean
   accessibilityLabel?: string
   accessibilityHint?: string
+  title?: string
 }
 export const DesktopWebTextLink = observer(function DesktopWebTextLink({
   testID,
@@ -218,6 +221,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
         text={text}
         numberOfLines={numberOfLines}
         lineHeight={lineHeight}
+        title={props.title}
         {...props}
       />
     )
@@ -229,6 +233,7 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({
       style={style}
       numberOfLines={numberOfLines}
       lineHeight={lineHeight}
+      title={props.title}
       {...props}>
       {text}
     </Text>

src/view/com/util/PostMeta.tsx

@@ -79,6 +79,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
             lineHeight={1.2}
             text={timeElapsed}
             accessibilityLabel={niceDate(opts.timestamp)}
+            title={niceDate(opts.timestamp)}
             accessibilityHint=""
             href={opts.postHref}
           />
@@ -94,6 +95,7 @@ const styles = StyleSheet.create({
     alignItems: isAndroid ? 'center' : 'baseline',
     paddingBottom: 2,
     gap: 4,
+    zIndex: 1,
   },
   avatar: {
     alignSelf: 'center',

src/view/com/util/text/Text.tsx

@@ -6,6 +6,8 @@ import {useTheme, TypographyVariant} from 'lib/ThemeContext'
 export type CustomTextProps = TextProps & {
   type?: TypographyVariant
   lineHeight?: number
+  title?: string
+  dataSet?: Record<string, string | number>
 }
 
 export function Text({
@@ -13,13 +15,19 @@ export function Text({
   children,
   lineHeight,
   style,
+  title,
+  dataSet,
   ...props
 }: React.PropsWithChildren<CustomTextProps>) {
   const theme = useTheme()
   const typography = theme.typography[type]
   const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
   return (
-    <RNText style={[s.black, typography, lineHeightStyle, style]} {...props}>
+    <RNText
+      style={[s.black, typography, lineHeightStyle, style]}
+      // @ts-ignore web only -esb
+      dataSet={Object.assign({tooltip: title}, dataSet || {})}
+      {...props}>
       {children}
     </RNText>
   )