Infrastructure/zipline
1
Fork 0
mirror of https://github.com/diced/zipline.git synced 2025-04-11 23:31:17 -05:00
Code Issues Activity

feat: better v4 notice

Browse source
This commit is contained in:
diced 2025-02-14 11:51:03 -08:00
parent 956fafb826
commit 2de036c89f
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
2 changed files with 61 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/pages/Dashboard/Version4Notice.tsx Normal file
View file

@ -0,0 +1,56 @@
import { Alert, Stack, Anchor, Code, Text } from '@mantine/core';
import { IconExclamationCircle } from '@tabler/icons-react';
import { useCallback, useEffect, useState } from 'react';
export default function Version4Notice() {
const key = 'zipline-v4-notice';
const [isClosed, setClosed] = useState<boolean | null>(null);
useEffect(() => {
const dismissed = localStorage.getItem(key) === 'true';
setClosed(dismissed);
}, [key]);
const handleDismiss = useCallback(() => {
setClosed(true);
localStorage.setItem(key, 'true');
}, [key]);
if (isClosed === null) return null;
if (isClosed) return null;
return (
<Alert
withCloseButton
variant='outline'
icon={<IconExclamationCircle size='1rem' />}
title='⚠️ Important! ⚠️'
p='md'
mb='md'
onClose={handleDismiss}
color='red'
>
<Stack spacing='md'>
<Text>
Zipline v4 will be released soon, and is <b>NOT</b> compatible with v3 (the current version). If you
are using external software to automatically update Zipline on new releases, it is{' '}
<b>strongly advised</b> that you stop auto-updates for the time being until v4 is released. For more
information, please visit{' '}
<Anchor target='_blank' href='https://github.com/diced/zipline/tree/v4'>
the <Code>v4</Code> branch
</Anchor>{' '}
on GitHub to view the progress of v4. If you have any questions, feel free to{' '}
<Anchor target='_blank' href='https://zipline.diced.sh/discord'>
join our discord
</Anchor>
.
</Text>
<Text>
If you are not the server administrator, please consider notifying them of this important message.
</Text>
</Stack>
</Alert>
);
}

30
src/components/pages/Dashboard/index.tsx
View file

@ -1,4 +1,4 @@
import { ActionIcon, Anchor, Box, Code, Group, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
import { ActionIcon, Box, Group, Title, Tooltip } from '@mantine/core';
import { useClipboard } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import {
@ -22,6 +22,7 @@ import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import RecentFiles from './RecentFiles';
import { StatCards } from './StatCards';
import Version4Notice from './Version4Notice';
export default function Dashboard({ disableMediaPreview, exifEnabled, compress }) {
const user = useRecoilValue(userSelector);
@ -114,6 +115,8 @@ export default function Dashboard({ disableMediaPreview, exifEnabled, compress }
window.open(`${window.location.protocol}//${window.location.host}${file.url}`);
};
// local storage to whether to show alert or not
return (
<div>
{selectedFile && (
@ -130,30 +133,7 @@ export default function Dashboard({ disableMediaPreview, exifEnabled, compress }
/>
)}
<Paper withBorder p='md' mb='md'>
<Stack spacing='md'>
<Title order={3}>⚠️ Important! ⚠️</Title>
<Text>
Zipline v4 will be released soon, and is <b>NOT</b> compatible with v3 (the current version). If
you are using external software to automatically update Zipline, it is <b>strongly advised</b>{' '}
that you stop auto-updates for the time being until v4 is released. For more information, please
visit{' '}
<Anchor target='_blank' href='https://github.com/diced/zipline/tree/v4'>
the <Code>v4</Code> branch
</Anchor>{' '}
on GitHub to view the progress of v4. If you have any questions, feel free to{' '}
<Anchor target='_blank' href='https://zipline.diced.sh/discord'>
join our discord
</Anchor>
.
</Text>
<Text>
If you are not the server administrator, please consider notifying them of this important message.
</Text>
</Stack>
</Paper>
<Version4Notice />
<Title>Welcome back, {user?.username}</Title>
<MutedText size='md'>