TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

codemods + manual

Browse Source
This commit is contained in:
Manav Rathi
2025-01-06 12:12:57 +05:30
parent ac10ce7bff
commit 670a75048e
14 changed files with 166 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/packages/new/albums/components/UploaderNameInput.tsx
View File

@@ -54,21 +54,20 @@ export const UploaderNameInput: React.FC<UploaderNameInput> = ({
fullWidth
>
<Box
sx={{
sx={(theme) => ({
padding: "24px 16px 0px 16px",
svg: {
width: "44px",
height: "44px",
},
color: (theme) => theme.colors.stroke.muted,
}}
color: theme.colors.stroke.muted,
})}
>
{<AutoAwesomeOutlinedIcon />}
</Box>
<DialogTitle>{t("enter_name")}</DialogTitle>
<DialogContent>
<Typography color={"text.muted"} sx={{ pb: 1 }}>
<Typography sx={{ color: "text.muted", pb: 1 }}>
{t("uploader_name_hint")}
</Typography>
<SingleInputForm

4
web/packages/new/photos/components/CollectionMappingChoice.tsx
View File

@@ -49,7 +49,9 @@ export const CollectionMappingChoice: React.FC<
gap: "20px",
}}
>
<Typography color="text.muted">{t("upload_to_choice")}</Typography>
<Typography sx={{ color: "text.muted" }}>
{t("upload_to_choice")}
</Typography>
<Stack sx={{ gap: "12px" }}>
<FocusVisibleButton
size="medium"

36
web/packages/new/photos/components/DevSettings.tsx
View File

@@ -149,24 +149,26 @@ const Form: React.FC<FormProps> = ({ initialAPIOrigin, onClose }) => {
? form.errors.apiOrigin
: " " /* always show an empty string to prevent a layout shift */
}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Link
href="https://help.ente.io/self-hosting/guides/custom-server/"
target="_blank"
rel="noopener"
>
<IconButton
aria-label={t("more_information")}
color="secondary"
edge="end"
slotProps={{
input: {
endAdornment: (
<InputAdornment position="end">
<Link
href="https://help.ente.io/self-hosting/guides/custom-server/"
target="_blank"
rel="noopener"
>
<InfoOutlinedIcon />
</IconButton>
</Link>
</InputAdornment>
),
<IconButton
aria-label={t("more_information")}
color="secondary"
edge="end"
>
<InfoOutlinedIcon />
</IconButton>
</Link>
</InputAdornment>
),
},
}}
/>
</DialogContent>

14
web/packages/new/photos/components/PeopleList.tsx
View File

@@ -21,7 +21,11 @@ export const SearchPeopleList: React.FC<SearchPeopleListProps> = ({
const isSmallWidth = useIsSmallWidth();
return (
<SearchPeopleContainer
sx={{ justifyContent: people.length > 3 ? "center" : "start" }}
sx={[
people.length > 3
? { justifyContent: "center" }
: { justifyContent: "start" },
]}
>
{people.slice(0, isSmallWidth ? 6 : 7).map((person) => (
<SearchPersonButton
@@ -195,10 +199,8 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
placeholderDimension,
}) => {
const [url, setURL] = useState<string | undefined>();
useEffect(() => {
let didCancel = false;
void faceCrop(faceID, file).then((url) => !didCancel && setURL(url));
return () => {
@@ -212,9 +214,9 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
<Skeleton
variant="circular"
animation="wave"
sx={{
backgroundColor: (theme) => theme.colors.background.elevated2,
}}
sx={(theme) => ({
backgroundColor: theme.colors.background.elevated2,
})}
width={placeholderDimension}
height={placeholderDimension}
/>

55
web/packages/new/photos/components/PlanSelector.tsx
View File

@@ -229,7 +229,7 @@ const PlanSelectorCard: React.FC<PlanSelectorCardProps> = ({
);
return (
<Stack spacing={3} p={1.5}>
<Stack sx={{ gap: 3, p: 1.5 }}>
{subscription && isSubscriptionActivePaid(subscription) ? (
<PaidSubscriptionPlanSelectorCard
{...commonCardData}
@@ -308,7 +308,7 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
children,
}) => (
<>
<Typography variant="h3" fontWeight={"bold"}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
{t("choose_plan")}
</Typography>
<Box>
@@ -318,7 +318,10 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
planPeriod={planPeriod}
togglePeriod={togglePeriod}
/>
<Typography variant="small" mt={0.5} color="text.muted">
<Typography
variant="small"
sx={{ mt: 0.5, color: "text.muted" }}
>
{t("two_months_free")}
</Typography>
</Box>
@@ -358,13 +361,13 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
children,
}) => (
<>
<Box pl={1.5} py={0.5}>
<Box sx={{ pl: 1.5, py: 0.5 }}>
<SpaceBetweenFlex>
<Box>
<Typography variant="h3" fontWeight={"bold"}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
{t("subscription")}
</Typography>
<Typography variant="small" color={"text.muted"}>
<Typography variant="small" sx={{ color: "text.muted" }}>
{bytesInGB(subscription.storage, 2)}{" "}
{t("storage_unit.gb")}
</Typography>
@@ -375,8 +378,8 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
</SpaceBetweenFlex>
</Box>
<Box px={1.5}>
<Typography color={"text.muted"} fontWeight={"bold"}>
<Box sx={{ px: 1.5 }}>
<Typography sx={{ color: "text.muted", fontWeight: "bold" }}>
<Trans
i18nKey="current_usage"
values={{
@@ -388,25 +391,30 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
<Box>
<Stack
spacing={3}
border={(theme) => `1px solid ${theme.palette.divider}`}
p={1.5}
borderRadius={(theme) => `${theme.shape.borderRadius}px`}
sx={(theme) => ({
border: `1px solid ${theme.palette.divider}`,
borderRadius: `${theme.shape.borderRadius}px`,
gap: 3,
p: 1.5,
})}
>
<Box>
<PeriodToggler
planPeriod={planPeriod}
togglePeriod={togglePeriod}
/>
<Typography variant="small" mt={0.5} color="text.muted">
<Typography
variant="small"
sx={{ mt: 0.5, color: "text.muted" }}
>
{t("two_months_free")}
</Typography>
</Box>
{children}
</Stack>
<Box py={1} px={1.5}>
<Typography color={"text.muted"}>
<Box sx={{ py: 1, px: 1.5 }}>
<Typography sx={{ color: "text.muted" }}>
{!isSubscriptionCancelled(subscription)
? t("subscription_status_renewal_active", {
date: subscription.expiryTime,
@@ -543,7 +551,7 @@ const PlanRow: React.FC<PlanRowProps> = ({
<TopAlignedFluidContainer>
<Typography variant="h1">{bytesInGB(plan.storage)}</Typography>
<FlexWrapper flexWrap={"wrap"} gap={1}>
<Typography variant="h3" color="text.muted">
<Typography variant="h3" sx={{ color: "text.muted" }}>
{t("storage_unit.gb")}
</Typography>
{popular &&
@@ -553,7 +561,7 @@ const PlanRow: React.FC<PlanRowProps> = ({
) && <Badge>{t("POPULAR")}</Badge>}
</FlexWrapper>
</TopAlignedFluidContainer>
<Box width="136px">
<Box sx={{ width: "136px" }}>
<PlanButton
sx={{
justifyContent: "flex-end",
@@ -563,11 +571,14 @@ const PlanRow: React.FC<PlanRowProps> = ({
size="large"
onClick={handleClick}
>
<Box textAlign={"right"}>
<Typography fontWeight={"bold"} variant="large">
<Box sx={{ textAlign: "right" }}>
<Typography variant="large" sx={{ fontWeight: "bold" }}>
{plan.price}{" "}
</Typography>{" "}
<Typography color="text.muted" variant="small">
<Typography
variant="small"
sx={{ color: "text.muted" }}
>
{`/ ${
plan.period === "month"
? t("month_short")
@@ -629,7 +640,7 @@ const FreePlanRow: React.FC<FreePlanRowProps> = ({ onClose, storage }) => (
<FreePlanRow_ onClick={onClose}>
<Box>
<Typography>{t("free_plan_option")}</Typography>
<Typography variant="small" color="text.muted">
<Typography variant="small" sx={{ color: "text.muted" }}>
{t("free_plan_description", {
storage: formattedStorageByteSize(storage),
})}
@@ -657,7 +668,7 @@ interface AddOnBonusRowsProps {
const AddOnBonusRows: React.FC<AddOnBonusRowsProps> = ({ addOnBonuses }) => (
<>
{addOnBonuses.map((bonus, i) => (
<Typography color="text.muted" key={i} sx={{ pt: 1 }}>
<Typography key={i} sx={{ color: "text.muted", pt: 1 }}>
<Trans
i18nKey={"add_on_valid_till"}
values={{

23
web/packages/new/photos/components/SearchBar.tsx
View File

@@ -320,13 +320,13 @@ const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
}}
>
<Box
sx={{
sx={(theme) => ({
display: "inline-flex",
// Match the default padding of the ValueContainer to make
// the icon look properly spaced and aligned.
pl: "8px",
color: (theme) => theme.colors.stroke.muted,
}}
color: theme.colors.stroke.muted,
})}
>
{iconForOption(props.getValue()[0])}
</Box>
@@ -433,7 +433,7 @@ const EmptyState: React.FC<
const SearchPeopleHeader: React.FC<ButtonishProps> = ({ onClick }) => (
<SearchPeopleHeaderButton {...{ onClick }}>
<Typography color="text.muted">{t("people")}</Typography>
<Typography sx={{ color: "text.muted" }}>{t("people")}</Typography>
</SearchPeopleHeaderButton>
);
@@ -456,14 +456,17 @@ const Option: React.FC<OptionProps<SearchOption, false>> = (props) => (
);
const OptionContents = ({ data: option }: { data: SearchOption }) => (
<Stack className="option-contents" gap="4px" px={2} py={1}>
<Typography variant="mini" color="text.muted">
<Stack className="option-contents" sx={{ gap: "4px", px: 2, py: 1 }}>
<Typography variant="mini" sx={{ color: "text.muted" }}>
{labelForOption(option)}
</Typography>
<Stack
direction="row"
gap={1}
sx={{ alignItems: "center", justifyContent: "space-between" }}
sx={{
gap: 1,
alignItems: "center",
justifyContent: "space-between",
}}
>
<Box>
<Typography
@@ -471,12 +474,12 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => (
>
{option.suggestion.label}
</Typography>
<Typography color="text.muted">
<Typography sx={{ color: "text.muted" }}>
{t("photos_count", { count: option.fileCount })}
</Typography>
</Box>
<Stack direction={"row"} gap={1}>
<Stack direction={"row"} sx={{ gap: 1 }}>
{option.previewFiles.map((file) => (
<ItemCard
key={file.id}

4
web/packages/new/photos/components/WhatsNew.tsx
View File

@@ -42,9 +42,9 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
maxWidth="xs"
fullWidth
>
<Box m={1}>
<Box sx={{ m: 1 }}>
<DialogTitle mt={2}>
<Typography variant="h4" color="text.muted">
<Typography variant="h4" sx={{ color: "text.muted" }}>
{ut("What's new")}
</Typography>
</DialogTitle>

30
web/packages/new/photos/components/gallery/BarImpl.tsx
View File

@@ -218,7 +218,14 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
);
const controls1 = isSmallWidth && (
<Box display="flex" alignItems={"center"} gap={1} minHeight={"64px"}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
minHeight: "64px",
}}
>
{mode != "people" && (
<>
<CollectionsSortOptions
@@ -235,7 +242,14 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
);
const controls2 = !isSmallWidth && mode != "people" && (
<Box display="flex" alignItems={"center"} gap={1} height={"64px"}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: 1,
height: "64px",
}}
>
<CollectionsSortOptions
activeSortBy={collectionsSortBy}
onChangeSortBy={onChangeCollectionsSortBy}
@@ -344,7 +358,7 @@ const ModeIndicator: React.FC<
const ModeButton = styled(UnstyledButton, {
shouldForwardProp: (propName) => propName != "active",
})<{ active: boolean }>(
({ active, theme }) => `
({ theme, active }) => `
p { color: ${active ? theme.colors.text.base : theme.colors.text.muted} }
p:hover { color: ${theme.colors.text.base} }
`,
@@ -367,11 +381,9 @@ const ScrollButtonBase_ = styled("button")`
border: none;
padding: 0;
margin: 0;
border-radius: 50%;
background-color: ${({ theme }) => theme.colors.backdrop.muted};
color: ${({ theme }) => theme.colors.stroke.base};
& > svg {
border-radius: 50%;
height: 30px;
@@ -383,7 +395,6 @@ const ScrollButtonLeft = styled(ScrollButtonBase)`
left: 0;
text-align: right;
transform: translate(-50%, 0%);
& > svg {
transform: rotate(180deg);
}
@@ -465,7 +476,6 @@ const ListItem = memo((props: ListChildComponentProps<ItemData>) => {
);
break;
}
case "people": {
const { people, activePerson, onSelectPerson } = data;
const person = people[index]!;
@@ -508,7 +518,7 @@ const CollectionBarCard: React.FC<CollectionBarCardProps> = ({
const CardText: React.FC<React.PropsWithChildren> = ({ children }) => (
<TileTextOverlay>
<Box height={"2.1em"}>
<Box sx={{ height: "2.1em" }}>
<Ellipsized2LineTypography variant="small">
{children}
</Ellipsized2LineTypography>
@@ -527,9 +537,7 @@ const CollectionBarCardIcon: React.FC<CollectionBarCardIconProps> = ({
{type == "favorites" && <FavoriteRoundedIcon />}
{type == "archived" && (
<ArchiveIcon
sx={(theme) => ({
color: theme.colors.white.muted,
})}
sx={(theme) => ({ color: theme.colors.white.muted })}
/>
)}
{type == "outgoingShare" && <PeopleIcon />}

4
web/packages/new/photos/components/gallery/ListHeader.tsx
View File

@@ -55,13 +55,13 @@ export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
<Stack
direction="row"
gap={1.5}
sx={{
gap: 1.5,
// Keep height the same even when there is no endIcon
minHeight: "24px",
}}
>
<Typography variant="small" color="text.muted">
<Typography variant="small" sx={{ color: "text.muted" }}>
{t("photos_count", { count: fileCount })}
</Typography>
{endIcon && (

10
web/packages/new/photos/components/gallery/PeopleHeader.tsx
View File

@@ -651,7 +651,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
? t("saved_choices")
: t("review_suggestions")}
</DialogTitle>
<Typography color="text.muted">
<Typography sx={{ color: "text.muted" }}>
{person.name ?? " "}
</Typography>
</Stack>
@@ -698,8 +698,10 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
) : state.suggestions.length == 0 ? (
<CenteredFill>
<Typography
color="text.muted"
sx={{ textAlign: "center" }}
sx={{
color: "text.muted",
textAlign: "center",
}}
>
{t("people_suggestions_empty")}
</Typography>
@@ -760,7 +762,7 @@ const SuggestionOrChoiceList: React.FC<SuggestionOrChoiceListProps> = ({
}}
>
<Stack sx={{ gap: "10px" }}>
<Typography variant="small" color="text.muted">
<Typography variant="small" sx={{ color: "text.muted" }}>
{/* Use the face count as as stand-in for the photo count */}
{t("photos_count", { count: item.faces.length })}
</Typography>

4
web/packages/new/photos/components/gallery/index.tsx
View File

@@ -38,7 +38,7 @@ export const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
fileCount,
}) => (
<GalleryItemsHeaderAdapter>
<Typography color="text.muted" variant="large">
<Typography variant="large" sx={{ color: "text.muted" }}>
{t("search_results")}
</Typography>
<GalleryItemsSummary
@@ -74,8 +74,8 @@ export const PeopleEmptyStateMessage: React.FC<React.PropsWithChildren> = ({
}) => (
<CenteredFill>
<Typography
color="text.muted"
sx={{
color: "text.muted",
mx: 1,
// Approximately compensate for the hidden section bar (86px),
// and then add a bit extra padding so that the message appears

66
web/packages/new/photos/components/sidebar/MLSettings.tsx
View File

@@ -89,7 +89,7 @@ export const MLSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
const Loading: React.FC = () => {
return (
<Box textAlign="center" pt={4}>
<Box sx={{ textAlign: "center", pt: 4 }}>
<ActivityIndicator />
</Box>
);
@@ -112,21 +112,20 @@ export const EnableML: React.FC<EnableMLProps> = ({
openURL("https://help.ente.io/photos/features/machine-learning");
return (
<Stack py={"20px"} px={"16px"} spacing={"32px"}>
<Typography color="text.muted">
<Stack sx={{ gap: "32px", py: "20px", px: "16px" }}>
<Typography sx={{ color: "text.muted" }}>
{t("ml_search_description")}
</Typography>
<Stack spacing={"8px"}>
<Stack sx={{ gap: "8px" }}>
<Button color={"accent"} size="large" onClick={onEnable}>
{t("enable")}
</Button>
<Button color="secondary" size="large" onClick={moreDetails}>
{t("more_details")}
</Button>
</Stack>
{showMagicSearchHint && (
<Typography color="text.faint" variant="small">
<Typography variant="small" sx={{ color: "text.faint" }}>
{t("ml_search_footnote")}
</Typography>
)}
@@ -153,7 +152,7 @@ const FaceConsentDrawer: React.FC<FaceConsentDrawerProps> = ({
{...{ open, onClose }}
onRootClose={handleRootClose}
>
<Stack spacing={"4px"} py={"12px"}>
<Stack sx={{ gap: "4px", py: "12px" }}>
<SidebarDrawerTitlebar
onClose={onClose}
onRootClose={handleRootClose}
@@ -187,16 +186,13 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
target="_blank"
href="https://ente.io/privacy#8-biometric-information-privacy-policy"
underline="always"
sx={{
color: "inherit",
textDecorationColor: "inherit",
}}
sx={{ color: "inherit", textDecorationColor: "inherit" }}
/>
);
return (
<Stack py={"20px"} px={"8px"} spacing={"32px"}>
<Typography component="div" color="text.muted" px={"8px"}>
<Stack sx={{ gap: "32px", py: "20px", px: "8px" }}>
<Typography component="div" sx={{ color: "text.muted", px: "8px" }}>
<Trans
i18nKey={"ml_consent_description"}
components={{ a: privacyPolicyLink }}
@@ -204,11 +200,7 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
</Typography>
<FormGroup sx={{ width: "100%" }}>
<FormControlLabel
sx={{
color: "text.muted",
ml: 0,
mt: 2,
}}
sx={{ color: "text.muted", ml: 0, mt: 2 }}
control={
<Checkbox
size="small"
@@ -219,7 +211,7 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
label={t("ml_consent_confirmation")}
/>
</FormGroup>
<Stack px={"8px"} spacing={"8px"}>
<Stack sx={{ gap: "8px", px: "8px" }}>
<Button
color={"accent"}
size="large"
@@ -286,8 +278,8 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
});
return (
<Stack px={"16px"} py={"20px"} gap={4}>
<Stack gap={3}>
<Stack sx={{ px: "16px", py: "20px", gap: 4 }}>
<Stack sx={{ gap: 3 }}>
<MenuItemGroup>
<EnteMenuItem
label={t("enabled")}
@@ -301,13 +293,15 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
<Stack>
<Stack
direction="row"
gap={2}
px={2}
pt={1}
pb={2}
justifyContent={"space-between"}
sx={{
gap: 2,
px: 2,
pt: 1,
pb: 2,
justifyContent: "space-between",
}}
>
<Typography color="text.faint">
<Typography sx={{ color: "text.faint" }}>
{t("indexing")}
</Typography>
<Typography>{status}</Typography>
@@ -315,16 +309,20 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
<Divider sx={{ marginInlineStart: 2 }} />
<Stack
direction="row"
gap={2}
px={2}
pt={2}
pb={1}
justifyContent={"space-between"}
sx={{
gap: 2,
px: 2,
pt: 2,
pb: 1,
justifyContent: "space-between",
}}
>
<Typography color="text.faint">
<Typography sx={{ color: "text.faint" }}>
{t("processed")}
</Typography>
<Typography textAlign="right">{processed}</Typography>
<Typography sx={{ textAlign: "right" }}>
{processed}
</Typography>
</Stack>
</Stack>
</Paper>

13
web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
View File

@@ -85,14 +85,17 @@ const SetupDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
return (
<Stack sx={{ px: "16px", py: "20px", alignItems: "center" }}>
<LockIcon
sx={{
sx={(theme) => ({
fontSize: "40px",
color: (theme) => theme.colors.text.muted,
}}
color: theme.colors.text.muted,
})}
/>
<Typography
sx={{ textAlign: "center", marginBlock: "32px 36px" }}
color="text.muted"
sx={{
color: "text.muted",
textAlign: "center",
marginBlock: "32px 36px",
}}
>
{t("two_factor_info")}
</Typography>

21
web/packages/new/photos/pages/duplicates.tsx
View File

@@ -561,7 +561,10 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
return (
<Stack
{...{ style }}
sx={{ paddingBlockEnd: "16px", opacity: checked ? 1 : 0.8 }}
sx={[
{ paddingBlockEnd: "16px" },
checked ? { opacity: 1 } : { opacity: 0.8 },
]}
>
<Stack
direction="row"
@@ -569,9 +572,15 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
justifyContent: "space-between",
alignItems: "center",
marginInline: 1,
paddingInline: `${layoutParams.paddingInline}px`,
paddingInline: "var(--layoutParams-paddingInline)px",
paddingBlock: "24px 0px",
}}
style={
{
"--layoutParams-paddingInline":
layoutParams.paddingInline,
} as React.CSSProperties
}
>
<Typography color={checked ? "text.base" : "text.muted"}>
{t("duplicate_group_description", { count, itemSize })}
@@ -581,10 +590,10 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
</Stack>
<Divider
variant="middle"
sx={{
opacity: hideDivider ? 0 : 0.8,
marginBlock: "4px 20px",
}}
sx={[
{ marginBlock: "4px 20px" },
hideDivider ? { opacity: 0 } : { opacity: 0.8 },
]}
/>
<ItemGrid {...{ layoutParams }}>
{items.map((item, j) => (