Merge upstream develop

Author: github-actions[bot]

.gitlab/ci/build_app.yml

@@ -28,18 +28,11 @@
     - pnpm config set @polycentric:registry https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/
     - pnpm install
 
-app-format-check:
+app-biome-check:
   extends: .app-check-base
   stage: check
   script:
-    - pnpm format apps/polycentric
-  allow_failure: true
-
-app-lint-check:
-  extends: .app-check-base
-  stage: check
-  script:
-    - pnpm --filter polycentric-app lint
+    - pnpm exec biome check apps/polycentric --diagnostic-level=error
   allow_failure: true
 
 app-tests:

.gitlab/ci/build_js_sdks.yml

@@ -25,18 +25,11 @@
     - pnpm config set @polycentric:registry https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/
     - pnpm install
 
-js-sdks-format-check:
+js-sdks-biome-check:
   extends: .js-sdks-base
   stage: check
   script:
-    - pnpm format
-  allow_failure: true
-
-js-sdks-lint-check:
-  extends: .js-sdks-base
-  stage: check
-  script:
-    - pnpm --filter js-core lint
+    - pnpm exec biome check packages/js-core --diagnostic-level=error
   allow_failure: true
 
 js-core-tests-check:

apps/polycentric/src/common/components/layout/Layout.tsx

@@ -14,6 +14,7 @@ import {
   KeyboardAvoidingView,
   Platform,
   Pressable,
+  ScrollView as RNScrollView,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -142,7 +143,10 @@ function Screen({
       testID="layout-screen"
       style={[
         Atoms.flex_row,
-        Atoms.flex_1,
+        // Web: grow with content so the sidebars' containing block spans the
+        // full scroll height, letting `position: sticky` pin them. Native
+        // keeps a fixed viewport-height screen.
+        isWeb ? { minHeight: '100%' } : Atoms.flex_1,
         { backgroundColor: theme.palette.neutral_0 },
         { paddingTop: insets.top },
         !isWeb && {
@@ -200,22 +204,23 @@ export const LeftSidebar = memo(function LeftSidebar({
         { alignItems: 'flex-end' },
       ]}
     >
-      <View style={{ width: narrowSidebar ? 88 : 275 }}>
+      <View style={{ width: narrowSidebar ? 88 : 275, height: '100%' }}>
         <View
           style={[
             {
-              position: 'fixed',
+              position: 'sticky',
               top: 0,
-              height: '100%',
+              height: '100vh',
             },
           ]}
         >
-          <View
-            style={[
+          <RNScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={[
               Atoms.justify_between,
               Atoms.align_center,
-              Atoms.h_full,
               {
+                minHeight: '100%',
                 paddingHorizontal: narrowSidebar ? 0 : 30,
                 width: narrowSidebar ? 88 : 275,
               },
@@ -280,7 +285,7 @@ export const LeftSidebar = memo(function LeftSidebar({
             >
               {identity && <IdentityFooter compact={narrowSidebar} />}
             </View>
-          </View>
+          </RNScrollView>
         </View>
       </View>
     </View>
@@ -293,13 +298,11 @@ export const RightSidebar = memo(function RightSidebar() {
   const marginRight = deviceWidth <= Breakpoints['2xl'] ? 10 : 70;
 
   return (
-    <View style={{ width, marginRight }}>
-      {/* Pin to viewport on web so it stays visible while the primary
-          column scrolls; the outer View reserves the row space. */}
+    <View style={{ width, marginRight, height: '100%' }}>
       <View
         style={
           isWeb
-            ? { position: 'fixed', top: 0, height: '100%', width }
+            ? { position: 'sticky', top: 0, height: '100vh', width }
             : undefined
         }
       >

apps/polycentric/src/features/composer/ComposeSheet.tsx

@@ -110,6 +110,7 @@ export function ComposeSheet({
           onRemoveAttachment={composer.handleRemoveAttachment}
           linkPreview={composer.linkPreview}
           linkPreviewLoading={composer.linkPreviewLoading}
+          onRemoveLinkPreview={composer.handleRemoveLinkPreview}
           autoFocus={autoFocus}
         />
       </Sheet.Content>

apps/polycentric/src/features/composer/ComposeTabScreen.tsx

@@ -74,6 +74,7 @@ export default function ComposeTabScreen() {
             onRemoveAttachment={composer.handleRemoveAttachment}
             linkPreview={composer.linkPreview}
             linkPreviewLoading={composer.linkPreviewLoading}
+            onRemoveLinkPreview={composer.handleRemoveLinkPreview}
           />
         </View>
         <ComposeSheetFooterBar

apps/polycentric/src/features/composer/ComposerFields.tsx

@@ -44,6 +44,10 @@ type ComposerFieldsProps = {
   linkPreview: v2.Link | null;
   /** True while the link preview is being fetched. */
   linkPreviewLoading: boolean;
+  /**
+   * Remove the link preview (X button).
+   */
+  onRemoveLinkPreview: () => void;
   /** Auto-focus the text field.**/
   autoFocus?: boolean;
 };
@@ -67,6 +71,7 @@ export function ComposerFields({
   onRemoveAttachment,
   linkPreview,
   linkPreviewLoading,
+  onRemoveLinkPreview,
   autoFocus = true,
 }: ComposerFieldsProps) {
   const { theme } = useTheme();
@@ -136,6 +141,8 @@ export function ComposerFields({
           <ComposerLinkPreview
             link={linkPreview}
             loading={linkPreviewLoading}
+            disabled={submitting}
+            onRemove={onRemoveLinkPreview}
           />
           {/* Quote preview */}
           {!!quote && <ComposerPostEmbed post={quote} intentText="Quoting" />}
@@ -148,39 +155,71 @@ export function ComposerFields({
 /**
  * Live link preview shown while composing: a loading row until the unfurl
  * resolves, then the same `LinkPreviewCard` used in the feed (so the composer
- * preview matches what the post will look like).
+ * preview matches what the post will look like). Both states carry an X
+ * button that removes the preview from the draft.
  */
 function ComposerLinkPreview({
   link,
   loading,
+  disabled,
+  onRemove,
 }: {
   link: v2.Link | null;
   loading: boolean;
+  disabled: boolean;
+  onRemove: () => void;
 }) {
   const { theme } = useTheme();
 
-  if (link) return <LinkPreviewCard link={link} />;
-  if (!loading) return null;
+  if (!link && !loading) return null;
 
   return (
-    <View
-      style={[
-        Atoms.flex_row,
-        Atoms.align_center,
-        Atoms.gap_sm,
-        Atoms.p_md,
-        Atoms.rounded_md,
-        Atoms.mt_md,
-        {
-          borderWidth: 1,
-          borderColor: withHexOpacity(theme.palette.neutral_500, '30'),
-        },
-      ]}
-    >
-      <ActivityIndicator size="small" color={theme.palette.neutral_500} />
-      <Text variant="secondary" color="neutral_500">
-        Loading preview…
-      </Text>
+    <View>
+      {link ? (
+        <LinkPreviewCard link={link} />
+      ) : (
+        <View
+          style={[
+            Atoms.flex_row,
+            Atoms.align_center,
+            Atoms.gap_sm,
+            Atoms.p_md,
+            Atoms.rounded_md,
+            Atoms.mt_md,
+            {
+              borderWidth: 1,
+              borderColor: withHexOpacity(theme.palette.neutral_500, '30'),
+            },
+          ]}
+        >
+          <ActivityIndicator size="small" color={theme.palette.neutral_500} />
+          <Text variant="secondary" color="neutral_500">
+            Loading preview…
+          </Text>
+        </View>
+      )}
+      <Pressable
+        onPress={onRemove}
+        disabled={disabled}
+        accessibilityLabel="Remove link preview"
+        hitSlop={6}
+        style={{
+          position: 'absolute',
+          // Below the card's own mt_md top margin (margins stay inside the
+          // wrapper, so the card's top edge is Spacing.md down from ours).
+          top: Spacing.md + 4,
+          right: 4,
+          width: 22,
+          height: 22,
+          borderRadius: 11,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: withHexOpacity(theme.palette.black, 'b0'),
+          opacity: disabled ? 0.4 : 1,
+        }}
+      >
+        <Icon name="close" size={14} color="white" />
+      </Pressable>
     </View>
   );
 }