mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-31 13:42:50 +00:00
Mohamed Boudra
19a7d26349
* feat(app): let the file panel close its tree rail The file panel's tree rail was permanent on desktop — the changes panel had a folder-tree toggle in its toolbar, the file toolbar had nothing, so the rail was there whether you wanted it or not. The changes panel's private DesktopTreeToggle becomes a shared TreeRailToggle so both toolbars render the same affordance; that also drops the treeToggleStyle prop threaded through ChangesToolbarProps, which recomputed exactly what the component already built internally. The i18n keys move out of workspace.git.diff into workspace.tree, since a shared component reaching into the git namespace would rot. The two rails keep independent flags — the file rail in panel-store, the changes rail in useChangesPreferences — so closing one leaves the other alone. FileTreeToggle wires itself to the store rather than taking a callback: the bar renders several components below FilePanel, where the rail actually lives. Both rails also get narrower (320 -> 260 default, 200 -> 180 minimum). The persist version bump resets treeRailWidth on purpose: nearly every existing install carries the old 320 default, so without the reset the narrower rail would only ever reach new users. Anyone who dragged their rail to a deliberate custom width loses it once. Note that MIN_CONTENT_WIDTH still clamps the rail to `containerWidth - 240`, so in a narrow pane the new default never applies — that floor, not the default, is what sets the width there. * feat(app): make the side panel an empty workspace surface The fixed, hideable side panel keeps supporting context beside an agent without seeding content. Pane-local choices stay local, while implicit supporting opens follow a persisted routing preference. * test(app): exercise side panel policy through its capability boundary The browser rail journey already covers the real tree-toggle behavior. Side-panel policy tests now pass their platform capability through the public boundary instead of replacing a production module. * test(app): expect an empty side panel after upgrade * test(app): expect an empty first split pane * test(app): account for the empty side panel in split retention * feat(app): make workspace panel tabs independent Give explicit New actions fresh tab instances, keep panel state opaque to tab management, preserve File navigation context, and stabilize uncached File transitions. * fix(app): preserve file conflicts during preview refresh Keep the current preview mounted for same-target reads and conversions so the editor retains its conflict observation state. Clear retained previews only when the file target changes.
112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import { Text, View } from "react-native";
|
|
import { StyleSheet } from "react-native-unistyles";
|
|
import { useTranslation } from "react-i18next";
|
|
import { PaneContentToolbar } from "@/components/ui/pane-content-toolbar";
|
|
import { PrActivitySkeleton, SkeletonPulse, useSkeletonPulse } from "./activity-skeleton";
|
|
|
|
const CHECK_ROW_KEYS = [0, 1, 2].map((i) => `pr-pane-skeleton-check-${i}`);
|
|
|
|
export function PullRequestPaneSkeleton() {
|
|
const { t } = useTranslation();
|
|
const pulse = useSkeletonPulse();
|
|
|
|
return (
|
|
<View style={styles.root} testID="pr-pane-skeleton">
|
|
<View style={styles.header}>
|
|
<SkeletonPulse pulse={pulse} style={styles.title} />
|
|
<SkeletonPulse pulse={pulse} style={styles.subtitle} />
|
|
</View>
|
|
|
|
<PaneContentToolbar style={styles.toolbar}>
|
|
<SkeletonPulse pulse={pulse} style={styles.toolbarButton} />
|
|
<SkeletonPulse pulse={pulse} style={styles.toolbarButton} />
|
|
</PaneContentToolbar>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{t("workspace.git.pr.sections.checks")}</Text>
|
|
<View style={styles.checks}>
|
|
{CHECK_ROW_KEYS.map((key) => (
|
|
<View key={key} style={styles.checkRow}>
|
|
<SkeletonPulse pulse={pulse} style={styles.checkDot} />
|
|
<SkeletonPulse pulse={pulse} style={styles.checkName} />
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<PrActivitySkeleton />
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
root: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
backgroundColor: theme.colors.surfaceSidebar,
|
|
},
|
|
header: {
|
|
gap: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[4],
|
|
paddingVertical: theme.spacing[4],
|
|
},
|
|
title: {
|
|
width: "75%",
|
|
height: 16,
|
|
borderRadius: theme.borderRadius.sm,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
subtitle: {
|
|
width: "40%",
|
|
height: 12,
|
|
borderRadius: theme.borderRadius.sm,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
toolbar: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
},
|
|
toolbarButton: {
|
|
width: 96,
|
|
height: 24,
|
|
borderRadius: theme.borderRadius.lg,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
section: {
|
|
paddingVertical: theme.spacing[2],
|
|
},
|
|
sectionTitle: {
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.medium,
|
|
color: theme.colors.foregroundMuted,
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[2],
|
|
},
|
|
checks: {
|
|
gap: theme.spacing[1],
|
|
},
|
|
checkRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
minHeight: 32,
|
|
},
|
|
checkDot: {
|
|
width: 14,
|
|
height: 14,
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
checkName: {
|
|
width: "60%",
|
|
height: 12,
|
|
borderRadius: theme.borderRadius.sm,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
}));
|