Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 08:43:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

more cleanups and ui improvements

Browse source
This commit is contained in:
ameer2468 2024-06-14 19:06:01 +03:00
parent eb5ac73990
commit 4b5a548963
2 changed files with 26 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
interface/app/$libraryId/debug/cloud.tsx
View file

@ -24,12 +24,19 @@ export const Component = () => {
const authSensitiveChild = () => {
if (authState.status === 'loggedIn') return <Authenticated />;
if (authState.status === 'notLoggedIn' || authState.status === 'loggingIn')
return <LoginButton />;
return (
<div className="flex items-center justify-center size-full">
<Card className="flex flex-col gap-4 !p-6">
<p>To access cloud related features, please login</p>
<LoginButton />
</Card>
</div>
);
return null;
};
return <div className="flex size-full flex-col items-start p-4">{authSensitiveChild()}</div>;
return <div className="flex flex-col items-start p-4 size-full">{authSensitiveChild()}</div>;
};
const DataBox = tw.div`max-w-[300px] rounded-md border border-app-line/50 bg-app-lightBox/20 p-2`;
@ -50,7 +57,7 @@ function Authenticated() {
return (
<Suspense
fallback={
<div className="flex size-full items-center justify-center">
<div className="flex items-center justify-center size-full">
<Loader />
</div>
}
@ -62,7 +69,7 @@ function Authenticated() {
<Instances instances={cloudLibrary.data.instances} />
</div>
) : (
<div className="relative flex size-full flex-col items-center justify-center">
<div className="relative flex flex-col items-center justify-center size-full">
<AuthRequiredOverlay />
<Button
disabled={createLibrary.isLoading}
@ -87,7 +94,7 @@ const Instances = ({ instances }: { instances: CloudInstance[] }) => {
return (
<div className="flex flex-col gap-3">
<div className="flex flex-row items-center gap-3">
<p className="text-medium font-bold">Instances</p>
<p className="font-bold text-medium">Instances</p>
<Count>{filteredInstances.length}</Count>
</div>
<div className="flex flex-row flex-wrap gap-2">
@ -111,13 +118,13 @@ const Instances = ({ instances }: { instances: CloudInstance[] }) => {
</div>
<div className="flex flex-col gap-1.5">
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
Id:{' '}
<span className="font-normal text-ink-dull">{instance.id}</span>
</p>
</DataBox>
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
UUID:{' '}
<span className="font-normal text-ink-dull">
{instance.uuid}
@ -125,7 +132,7 @@ const Instances = ({ instances }: { instances: CloudInstance[] }) => {
</p>
</DataBox>
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
Public Key:{' '}
<span className="font-normal text-ink-dull">
{instance.identity}
@ -149,7 +156,7 @@ const Library = ({ thisInstance, cloudLibrary }: LibraryProps) => {
const syncLibrary = useLibraryMutation(['cloud.library.sync']);
return (
<div className="flex flex-col gap-3">
<p className="text-medium font-bold">Library</p>
<p className="font-bold text-medium">Library</p>
<Card className="flex-row items-center gap-10">
<p className="font-medium">
Name: <span className="font-normal text-ink-dull">{cloudLibrary.name}</span>
@ -179,7 +186,7 @@ interface ThisInstanceProps {
const ThisInstance = ({ instance }: ThisInstanceProps) => {
return (
<div className="flex flex-col gap-3">
<p className="text-medium font-bold">This Instance</p>
<p className="font-bold text-medium">This Instance</p>
<Card className="flex-row items-center gap-8 bg-app-box/50 !p-5">
<div className="flex flex-col items-center gap-2">
<Icon
@ -196,17 +203,17 @@ const ThisInstance = ({ instance }: ThisInstanceProps) => {
</div>
<div className="flex flex-col gap-1.5">
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
Id: <span className="font-normal text-ink-dull">{instance.id}</span>
</p>
</DataBox>
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
UUID: <span className="font-normal text-ink-dull">{instance.uuid}</span>
</p>
</DataBox>
<DataBox>
<p className="truncate text-xs font-medium">
<p className="text-xs font-medium truncate">
Public Key:{' '}
<span className="font-normal text-ink-dull">{instance.identity}</span>
</p>

30
interface/app/$libraryId/settings/node/libraries/index.tsx
View file

@ -1,7 +1,5 @@
import { useRef } from 'react';
import { useNavigate } from 'react-router';
import { useBridgeQuery, useClientContext, useFeatureFlag, useLibraryContext, useZodForm } from '@sd/client';
import { Button, Dialog, dialogManager, useDialog, z } from '@sd/ui';
import { useBridgeQuery, useClientContext, useFeatureFlag, useLibraryContext } from '@sd/client';
import { Button, dialogManager } from '@sd/ui';
import { useLocale } from '~/hooks';
import { Heading } from '../../Layout';
@ -11,9 +9,7 @@ import ListItem from './ListItem';
export const Component = () => {
const librariesQuery = useBridgeQuery(['library.list']);
const cloudLibrariesQuery = useBridgeQuery(['cloud.library.list']);
const libraries = librariesQuery.data;
const cloudLibraries = cloudLibrariesQuery.data;
const cloudEnabled = useFeatureFlag('cloudSync');
@ -41,10 +37,12 @@ export const Component = () => {
</Button>
{cloudEnabled && (
<Button
variant="accent"
variant="outline"
size="sm"
onClick={() => {
dialogManager.create((dp) => <JoinDialog librariesCtx={librariesCtxData} {...dp} />);
dialogManager.create((dp) => (
<JoinDialog librariesCtx={librariesCtxData} {...dp} />
));
}}
>
{t('join_library')}
@ -68,22 +66,6 @@ export const Component = () => {
/>
))}
</div>
<div className="space-y-2">
<Heading title={'Cloud Libraries'} description={'Cloud Libraries'} />
{cloudLibraries
?.sort((a, b) => {
if (a.uuid === library.uuid) return -1;
if (b.uuid === library.uuid) return 1;
return 0;
})
.map((lib) => (
<ListItem
current={lib.uuid === library.uuid}
key={lib.uuid}
library={library}
/>
))}
</div>
</>
);
};