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

Prettier & Format (#668)

Browse source 
* format

* fix lint issues
This commit is contained in:
Utku 2023-04-04 08:39:07 +03:00 committed by GitHub
parent 54a2eee827
commit 86c47dde4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 884 additions and 403 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc.js
View file

@ -23,5 +23,5 @@ module.exports = {
importOrderParserPlugins: ['importAssertions', 'typescript', 'jsx'], importOrderParserPlugins: ['importAssertions', 'typescript', 'jsx'],
pluginSearchDirs: false, pluginSearchDirs: false,
plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'], plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
tailwindConfig: 'packages/ui/tailwind.config.js' tailwindConfig: './packages/ui/tailwind.config.js'
}; };

140
.vscode/launch.json vendored
View file

@ -1,80 +1,62 @@
{ {
// Use IntelliSense to learn about possible attributes. // Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes. // Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"type": "lldb", "type": "lldb",
"request": "launch", "request": "launch",
"name": "Tauri Development Debug", "name": "Tauri Development Debug",
"cargo": { "cargo": {
"args": [ "args": [
"build", "build",
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml", "--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
"--no-default-features" "--no-default-features"
], ],
"problemMatcher": "$rustc", "problemMatcher": "$rustc"
}, },
"sourceLanguages": [ "sourceLanguages": ["rust"],
"rust" "preLaunchTask": "ui:dev"
], },
"preLaunchTask": "ui:dev" {
}, "type": "lldb",
{ "request": "launch",
"type": "lldb", "name": "Tauri Production Debug",
"request": "launch", "cargo": {
"name": "Tauri Production Debug", "args": ["build", "--release", "--manifest-path=./apps/desktop/src-tauri/Cargo.toml"],
"cargo": { "problemMatcher": "$rustc"
"args": [ },
"build", "sourceLanguages": ["rust"],
"--release", "preLaunchTask": "ui:build"
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml" },
], {
"problemMatcher": "$rustc", "type": "lldb",
}, "request": "launch",
"sourceLanguages": [ "name": "Debug unit tests in library 'sd-core'",
"rust" "cargo": {
], "args": ["test", "--no-run", "--lib", "--package=sd-core"],
"preLaunchTask": "ui:build" "filter": {
}, "name": "sd-core",
{ "kind": "lib"
"type": "lldb", }
"request": "launch", },
"name": "Debug unit tests in library 'sd-core'", "args": [],
"cargo": { "cwd": "${workspaceFolder}"
"args": [ },
"test", {
"--no-run", "type": "lldb",
"--lib", "request": "launch",
"--package=sd-core" "name": "Debug unit tests in library 'sd-crypto'",
], "cargo": {
"filter": { "args": ["test", "--no-run", "--lib", "--package=sd-crypto"],
"name": "sd-core", "filter": {
"kind": "lib" "name": "sd-crypto",
} "kind": "lib"
}, }
"args": [], },
"cwd": "${workspaceFolder}" "args": [],
}, "cwd": "${workspaceFolder}"
{ }
"type": "lldb", ]
"request": "launch", }
"name": "Debug unit tests in library 'sd-crypto'",
"cargo": {
"args": [
"test",
"--no-run",
"--lib",
"--package=sd-crypto"
],
"filter": {
"name": "sd-crypto",
"kind": "lib"
}
},
"args": [],
"cwd": "${workspaceFolder}"
},
]
}

55
.vscode/tasks.json vendored
View file

@ -4,28 +4,20 @@
{ {
"type": "cargo", "type": "cargo",
"command": "clippy", "command": "clippy",
"problemMatcher": [ "problemMatcher": ["$rustc"],
"$rustc"
],
"group": { "group": {
"kind": "build", "kind": "build",
"isDefault": true "isDefault": true
}, },
"label": "rust: cargo clippy", "label": "rust: cargo clippy",
"args": [ "args": ["--all-targets", "--all-features", "--all"]
"--all-targets",
"--all-features",
"--all"
]
}, },
{ {
"type": "npm", "type": "npm",
"script": "prep", "script": "prep",
"label": "pnpm: prep", "label": "pnpm: prep",
"group": "none", "group": "none",
"problemMatcher": [ "problemMatcher": ["$rustc"]
"$rustc"
]
}, },
{ {
"type": "shell", "type": "shell",
@ -40,12 +32,7 @@
}, },
"isBackground": true, "isBackground": true,
"command": "pnpm", "command": "pnpm",
"args": [ "args": ["desktop", "vite", "--clearScreen=false", "--mode=development"],
"desktop",
"vite",
"--clearScreen=false",
"--mode=development"
],
"runOptions": { "runOptions": {
"instanceLimit": 1 "instanceLimit": 1
} }
@ -55,49 +42,31 @@
"label": "ui:build", "label": "ui:build",
"problemMatcher": "$tsc", "problemMatcher": "$tsc",
"command": "pnpm", "command": "pnpm",
"args": [ "args": ["desktop", "vite", "build"]
"desktop",
"vite",
"build"
]
}, },
{ {
"type": "cargo", "type": "cargo",
"command": "run", "command": "run",
"args": [ "args": ["--manifest-path=./apps/desktop/src-tauri/Cargo.toml", "--no-default-features"],
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
"--no-default-features"
],
"env": { "env": {
"RUST_BACKTRACE": "short" "RUST_BACKTRACE": "short"
}, },
"problemMatcher": [ "problemMatcher": ["$rustc"],
"$rustc"
],
"group": "build", "group": "build",
"label": "rust: run spacedrive", "label": "rust: run spacedrive",
"dependsOn": [ "dependsOn": ["ui:dev"]
"ui:dev"
]
}, },
{ {
"type": "cargo", "type": "cargo",
"command": "run", "command": "run",
"args": [ "args": ["--manifest-path=./apps/desktop/src-tauri/Cargo.toml", "--release"],
"--manifest-path=./apps/desktop/src-tauri/Cargo.toml",
"--release"
],
"env": { "env": {
"RUST_BACKTRACE": "short" "RUST_BACKTRACE": "short"
}, },
"problemMatcher": [ "problemMatcher": ["$rustc"],
"$rustc"
],
"group": "build", "group": "build",
"label": "rust: run spacedrive release", "label": "rust: run spacedrive release",
"dependsOn": [ "dependsOn": ["ui:build"]
"ui:build"
]
} }
] ]
} }

4
apps/landing/src/components/AppEmbed.tsx
View file

@ -68,7 +68,7 @@ const AppEmbed = () => {
<div className="relative z-30 mx-6 mt-8 h-[255px] px-1 sm:mt-16 sm:h-[428px] md:h-[428px] lg:h-[628px]"> <div className="relative z-30 mx-6 mt-8 h-[255px] px-1 sm:mt-16 sm:h-[428px] md:h-[428px] lg:h-[628px]">
<div <div
className={clsx( className={clsx(
'border-gray-550 relative m-auto h-full max-w-7xl rounded-lg border opacity-0 transition-opacity', 'relative m-auto h-full max-w-7xl rounded-lg border border-gray-550 opacity-0 transition-opacity',
renderBloom && '!opacity-100', renderBloom && '!opacity-100',
renderImage && 'border-none bg-transparent' renderImage && 'border-none bg-transparent'
)} )}
@ -78,7 +78,7 @@ const AppEmbed = () => {
ref={iFrame} ref={iFrame}
referrerPolicy="origin-when-cross-origin" referrerPolicy="origin-when-cross-origin"
className={clsx( className={clsx(
'shadow-iframe inset-center bg-gray-850 z-30 h-full w-full rounded-lg', 'shadow-iframe inset-center z-30 h-full w-full rounded-lg bg-gray-850',
iFrameAppReady ? 'fade-in-app-embed opacity-100' : 'ml-[-10000px] opacity-0' iFrameAppReady ? 'fade-in-app-embed opacity-100' : 'ml-[-10000px] opacity-0'
)} )}
src={`${ src={`${

2
apps/landing/src/components/DocsLayout.tsx
View file

@ -25,7 +25,7 @@ export default function DocsLayout(props: Props) {
pageWrapId="page-container" pageWrapId="page-container"
className="shadow-2xl shadow-black" className="shadow-2xl shadow-black"
> >
<div className="custom-scroll doc-sidebar-scroll bg-gray-650 visible h-screen overflow-x-hidden px-7 pb-20 pt-7 sm:invisible"> <div className="custom-scroll doc-sidebar-scroll visible h-screen overflow-x-hidden bg-gray-650 px-7 pb-20 pt-7 sm:invisible">
<Button <Button
onClick={() => setMenuOpen(!menuOpen)} onClick={() => setMenuOpen(!menuOpen)}
className="-ml-0.5 mb-3 !border-none !px-1" className="-ml-0.5 mb-3 !border-none !px-1"

4
apps/landing/src/components/DocsSidebar.tsx
View file

@ -57,14 +57,14 @@ export default function DocsSidebar(props: Props) {
<li <li
className={clsx( className={clsx(
'flex border-l border-gray-600', 'flex border-l border-gray-600',
active && 'border-primary border-l-2' active && 'border-l-2 border-primary'
)} )}
key={page.title} key={page.title}
> >
<a <a
href={`/docs/${page.url}`} href={`/docs/${page.url}`}
className={clsx( className={clsx(
'text-gray-350 w-full rounded px-3 py-1 text-[14px] font-normal no-underline hover:text-gray-50', 'w-full rounded px-3 py-1 text-[14px] font-normal text-gray-350 no-underline hover:text-gray-50',
active && '!font-medium !text-white ' active && '!font-medium !text-white '
)} )}
> >

4
apps/landing/src/components/Footer.tsx
View file

@ -24,13 +24,13 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
export function Footer() { export function Footer() {
return ( return (
<footer id="footer" className="border-gray-550 bg-gray-850 z-50 w-screen border-t pt-3"> <footer id="footer" className="z-50 w-screen border-t border-gray-550 bg-gray-850 pt-3">
<div className="min-h-64 m-auto grid max-w-[100rem] grid-cols-2 gap-6 p-8 pt-10 pb-20 text-white sm:grid-cols-2 lg:grid-cols-6"> <div className="min-h-64 m-auto grid max-w-[100rem] grid-cols-2 gap-6 p-8 pt-10 pb-20 text-white sm:grid-cols-2 lg:grid-cols-6">
<div className="col-span-2"> <div className="col-span-2">
<img src={AppLogo} className="mb-5 h-10 w-10" /> <img src={AppLogo} className="mb-5 h-10 w-10" />
<h3 className="mb-1 text-xl font-bold">Spacedrive</h3> <h3 className="mb-1 text-xl font-bold">Spacedrive</h3>
<p className="text-gray-350 text-sm"> <p className="text-sm text-gray-350">
&copy; Copyright {new Date().getFullYear()} Spacedrive Technology Inc. &copy; Copyright {new Date().getFullYear()} Spacedrive Technology Inc.
</p> </p>
<div className="mt-6 mb-10 flex flex-row space-x-3"> <div className="mt-6 mb-10 flex flex-row space-x-3">

4
apps/landing/src/components/HomeCTA.tsx
View file

@ -81,7 +81,7 @@ export function HomeCTA() {
useWorker useWorker
zIndex={-1} zIndex={-1}
/> */} /> */}
<div className="animation-delay-2 fade-in z-30 flex h-10 flex-row items-center space-x-4"> <div className="animation-delay-2 z-30 flex h-10 flex-row items-center space-x-4 fade-in">
{!showWaitlistInput ? ( {!showWaitlistInput ? (
<> <>
<Button <Button
@ -166,7 +166,7 @@ export function HomeCTA() {
)} )}
</div> </div>
<p <p
className={clsx('animation-delay-3 fade-in text-gray-450 z-30 px-6 text-center text-sm', { className={clsx('animation-delay-3 z-30 px-6 text-center text-sm text-gray-450 fade-in', {
'mt-10': waitlistError, 'mt-10': waitlistError,
'mt-3': !waitlistError 'mt-3': !waitlistError
})} })}

4
apps/landing/src/components/NavBar.tsx
View file

@ -75,7 +75,7 @@ export default function NavBar() {
<div className="relative inline"> <div className="relative inline">
<NavLink link="/careers">Careers</NavLink> <NavLink link="/careers">Careers</NavLink>
{positions.length > 0 ? ( {positions.length > 0 ? (
<span className="bg-primary/80 absolute -top-1 -right-2 rounded-md px-[5px] text-xs"> <span className="absolute -top-1 -right-2 rounded-md bg-primary/80 px-[5px] text-xs">
{` ${positions.length} `} {` ${positions.length} `}
</span> </span>
) : null} ) : null}
@ -118,7 +118,7 @@ export default function NavBar() {
<Dropdown.Item icon={Academia} {...link('/careers')}> <Dropdown.Item icon={Academia} {...link('/careers')}>
Careers Careers
{positions.length > 0 ? ( {positions.length > 0 ? (
<span className="bg-primary ml-2 rounded-md px-[5px] py-px text-xs"> <span className="ml-2 rounded-md bg-primary px-[5px] py-px text-xs">
{positions.length} {positions.length}
</span> </span>
) : null} ) : null}

6
apps/landing/src/components/NewBanner.tsx
View file

@ -10,13 +10,13 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
return ( return (
<aside <aside
onClick={() => (window.location.href = href)} onClick={() => (window.location.href = href)}
className="fade-in-whats-new hover:border-gray-550 hover:bg-gray-750 z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800/50 px-5 py-1.5 text-xs transition sm:w-auto sm:text-base" className="fade-in-whats-new z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-600 bg-gray-800/50 px-5 py-1.5 text-xs transition hover:border-gray-550 hover:bg-gray-750 sm:w-auto sm:text-base"
> >
<strong className="text-gray-350 truncate font-semibold">{headline}</strong> <strong className="truncate font-semibold text-gray-350">{headline}</strong>
<div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" /> <div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" />
<a <a
href={href} href={href}
className="font-regular from-primary-400 decoration-primary-600 shrink-0 bg-gradient-to-r to-blue-600 bg-clip-text text-transparent" className="font-regular shrink-0 bg-gradient-to-r from-primary-400 to-blue-600 bg-clip-text text-transparent decoration-primary-600"
> >
{link} <span aria-hidden="true">&rarr;</span> {link} <span aria-hidden="true">&rarr;</span>
</a> </a>

2
apps/landing/src/components/TeamMember.tsx
View file

@ -66,7 +66,7 @@ export function TeamMember(props: TeamMemberProps) {
{props.role} {props.role}
</p> </p>
{props.investmentRound && ( {props.investmentRound && (
<p className="text-gray-450 my-0 text-sm font-semibold">{props.investmentRound}</p> <p className="my-0 text-sm font-semibold text-gray-450">{props.investmentRound}</p>
)} )}
<div className="mt-auto flex flex-row space-x-2"> <div className="mt-auto flex flex-row space-x-2">
{props.socials?.twitter && ( {props.socials?.twitter && (

1
apps/landing/src/pages/blog/index.page.tsx
View file

@ -1,4 +1,3 @@
/* eslint-disable tailwindcss/classnames-order */
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { BlogTag } from '../../components/BlogTag'; import { BlogTag } from '../../components/BlogTag';
import { BlogPosts } from './api'; import { BlogPosts } from './api';

16
apps/landing/src/pages/careers.page.tsx
View file

@ -109,8 +109,8 @@ function Page() {
<h1 className="fade-in-heading mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-5xl"> <h1 className="fade-in-heading mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-5xl">
Build the future of files. Build the future of files.
</h1> </h1>
<div className="fade-in animation-delay-1 z-30 flex flex-col items-center"> <div className="animation-delay-1 z-30 flex flex-col items-center fade-in">
<p className="text-gray-350 z-40 text-center text-lg"> <p className="z-40 text-center text-lg text-gray-350">
Spacedrive is redefining the way we think about our personal data, building a open Spacedrive is redefining the way we think about our personal data, building a open
ecosystem to help preserve your digital legacy and make cross-platform file management a ecosystem to help preserve your digital legacy and make cross-platform file management a
breeze. breeze.
@ -129,11 +129,11 @@ function Page() {
{values.map((value, index) => ( {values.map((value, index) => (
<div <div
key={value.title + index} key={value.title + index}
className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10" className="flex flex-col rounded-md border border-gray-500 bg-gray-550/50 p-10"
> >
<value.icon className="text-[32px]" weight="bold" /> <value.icon className="text-[32px]" weight="bold" />
<h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3> <h3 className="mt-4 mb-1 text-2xl font-bold leading-snug">{value.title}</h3>
<p className="text-gray-350 mt-1 mb-0">{value.desc}</p> <p className="mt-1 mb-0 text-gray-350">{value.desc}</p>
</div> </div>
))} ))}
</div> </div>
@ -147,7 +147,7 @@ function Page() {
<div <div
key={value.title + index} key={value.title + index}
style={{ backgroundColor: value.color + '10', borderColor: value.color + '30' }} style={{ backgroundColor: value.color + '10', borderColor: value.color + '30' }}
className="bg-gray-550/30 flex flex-col rounded-md border p-8" className="flex flex-col rounded-md border bg-gray-550/30 p-8"
> >
<value.icon className="text-[32px]" weight="bold" color={value.color} /> <value.icon className="text-[32px]" weight="bold" color={value.color} />
<h3 className="mt-4 mb-1">{value.title}</h3> <h3 className="mt-4 mb-1">{value.title}</h3>
@ -162,14 +162,14 @@ function Page() {
<p className="mt-2 mb-4">If any open positions suit you, apply now!</p> <p className="mt-2 mb-4">If any open positions suit you, apply now!</p>
<div className="mt-5 grid w-full grid-cols-1 gap-4"> <div className="mt-5 grid w-full grid-cols-1 gap-4">
{positions.length === 0 ? ( {positions.length === 0 ? (
<p className="text-gray-350 m-0 text-center"> <p className="m-0 text-center text-gray-350">
There are no positions open at this time. Please check back later! There are no positions open at this time. Please check back later!
</p> </p>
) : ( ) : (
positions.map((value, index) => ( positions.map((value, index) => (
<div <div
key={value.name + index} key={value.name + index}
className="bg-gray-550/50 flex flex-col rounded-md border border-gray-500 p-10" className="flex flex-col rounded-md border border-gray-500 bg-gray-550/50 p-10"
> >
<div className="flex flex-col sm:flex-row"> <div className="flex flex-col sm:flex-row">
<h3 className="m-0 text-2xl leading-tight">{value.name}</h3> <h3 className="m-0 text-2xl leading-tight">{value.name}</h3>
@ -184,7 +184,7 @@ function Page() {
</span> </span>
</div> </div>
</div> </div>
<p className="text-gray-350 mt-3 mb-0">{value.description}</p> <p className="mt-3 mb-0 text-gray-350">{value.description}</p>
</div> </div>
)) ))
)} )}

4
apps/landing/src/pages/docs/doc.page.tsx
View file

@ -9,7 +9,7 @@ import { SingleDocResponse } from './api';
function BottomCard(props: PropsWithChildren) { function BottomCard(props: PropsWithChildren) {
return ( return (
<div className="hover:border-primary hover:!text-primary hover:shadow-primary/10 group flex flex-row items-center rounded-lg border border-gray-700 p-4 text-sm !text-gray-200 transition-all duration-200 hover:translate-y-[-2px] hover:shadow-xl"> <div className="group flex flex-row items-center rounded-lg border border-gray-700 p-4 text-sm !text-gray-200 transition-all duration-200 hover:translate-y-[-2px] hover:border-primary hover:!text-primary hover:shadow-xl hover:shadow-primary/10">
{props.children} {props.children}
</div> </div>
); );
@ -31,7 +31,7 @@ function Page({ doc, navigation, nextDoc }: SingleDocResponse) {
<DocsLayout doc={doc} navigation={navigation}> <DocsLayout doc={doc} navigation={navigation}>
<Markdown classNames="sm:mt-[105px] mt-6 min-h-screen "> <Markdown classNames="sm:mt-[105px] mt-6 min-h-screen ">
<h5 className="text-primary mb-2 text-sm font-semibold lg:min-w-[700px]"> <h5 className="mb-2 text-sm font-semibold text-primary lg:min-w-[700px]">
{doc.categoryName} {doc.categoryName}
</h5> </h5>
<div dangerouslySetInnerHTML={{ __html: doc?.html as string }} /> <div dangerouslySetInnerHTML={{ __html: doc?.html as string }} />

2
apps/landing/src/pages/docs/index.page.tsx
View file

@ -20,7 +20,7 @@ function Page({ navigation }: { navigation: DocsNavigation }) {
need to get started with Spacedrive. need to get started with Spacedrive.
</p> </p>
<a <a
className="text-primary-600 hover:text-primary-500 transition" className="text-primary-600 transition hover:text-primary-500"
href="/docs/product/getting-started/introduction" href="/docs/product/getting-started/introduction"
> >
Get Started → Get Started →

6
apps/landing/src/pages/index.page.tsx
View file

@ -23,7 +23,7 @@ function Section(props: SectionProps = { orientation: 'left' }) {
<div className="px-4 py-10 sm:px-10"> <div className="px-4 py-10 sm:px-10">
{props.heading && <h1 className="text-2xl font-black sm:text-4xl">{props.heading}</h1>} {props.heading && <h1 className="text-2xl font-black sm:text-4xl">{props.heading}</h1>}
{props.description && ( {props.description && (
<p className="text-md text-gray-450 mt-5 sm:text-xl">{props.description}</p> <p className="text-md mt-5 text-gray-450 sm:text-xl">{props.description}</p>
)} )}
</div> </div>
); );
@ -119,7 +119,7 @@ function Page() {
<h1 className="fade-in-heading z-30 mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-6xl"> <h1 className="fade-in-heading z-30 mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-6xl">
A file explorer from the future. A file explorer from the future.
</h1> </h1>
<p className="animation-delay-1 fade-in-heading text-md leading-2 text-gray-450 z-30 mt-1 mb-8 max-w-4xl text-center lg:text-lg lg:leading-8"> <p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mt-1 mb-8 max-w-4xl text-center text-gray-450 lg:text-lg lg:leading-8">
Combine your drives and clouds into one database that you can organize and explore from any Combine your drives and clouds into one database that you can organize and explore from any
device. device.
<br /> <br />
@ -141,7 +141,7 @@ function Page() {
<br /> <br />
<br /> <br />
<a <a
className="text-primary-600 hover:text-primary-500 transition" className="text-primary-600 transition hover:text-primary-500"
href="/docs/product/getting-started/introduction" href="/docs/product/getting-started/introduction"
> >
Find out more → Find out more →

6
apps/landing/src/pages/roadmap.page.tsx
View file

@ -152,14 +152,14 @@ function Page() {
<div <div
className={ className={
'flex h-full w-full ' + 'flex h-full w-full ' +
(item.completed ? 'bg-primary-500 z-10' : 'bg-gray-550') (item.completed ? 'z-10 bg-primary-500' : 'bg-gray-550')
} }
> >
{item?.when !== undefined ? ( {item?.when !== undefined ? (
<div <div
className={clsx( className={clsx(
'absolute z-20 mt-5 h-4 w-4 -translate-y-1/2 -translate-x-1/4 rounded-full border-2 border-gray-200 group-first:mt-0 group-first:self-start lg:mt-0', 'absolute z-20 mt-5 h-4 w-4 -translate-y-1/2 -translate-x-1/4 rounded-full border-2 border-gray-200 group-first:mt-0 group-first:self-start lg:mt-0',
items[i - 1]?.completed || i === 0 ? 'bg-primary-500 z-10' : 'bg-gray-550' items[i - 1]?.completed || i === 0 ? 'z-10 bg-primary-500' : 'bg-gray-550'
)} )}
> >
&zwj; &zwj;
@ -182,7 +182,7 @@ function Page() {
</> </>
))} ))}
</section> </section>
<section className="bg-gray-850 space-y-2 rounded-xl p-8"> <section className="space-y-2 rounded-xl bg-gray-850 p-8">
<h2 className="my-1">That's not all.</h2> <h2 className="my-1">That's not all.</h2>
<p> <p>
We're always open to ideas and feedback over{' '} We're always open to ideas and feedback over{' '}

4
apps/landing/src/style.scss
View file

@ -169,7 +169,7 @@ html {
} }
.slot-block { .slot-block {
@apply bg-app-box border-app-line mb-2 rounded border-l-4 py-3 px-4; @apply mb-2 rounded border-l-4 border-app-line bg-app-box py-3 px-4;
} }
.slot-block.note { .slot-block.note {
@apply border-yellow-400 bg-yellow-300/20; @apply border-yellow-400 bg-yellow-300/20;
@ -243,6 +243,6 @@ html {
@apply my-[10px] rounded-[6px] bg-[#00000006] dark:bg-[#00000030]; @apply my-[10px] rounded-[6px] bg-[#00000006] dark:bg-[#00000030];
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@apply bg-app-selected rounded-[6px]; @apply rounded-[6px] bg-app-selected;
} }
} }

4
apps/storybook/.storybook/preview-head.html
View file

@ -1,3 +1,3 @@
<script> <script>
window.global = window; window.global = window;
</script> </script>

20
apps/storybook/index.html
View file

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Vite + React + TS</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

12
interface/ErrorFallback.tsx
View file

@ -29,17 +29,17 @@ export function ErrorPage({
<div <div
data-tauri-drag-region data-tauri-drag-region
role="alert" role="alert"
className="border-app-divider bg-app flex h-screen w-screen flex-col items-center justify-center rounded-lg border p-4" className="flex h-screen w-screen flex-col items-center justify-center rounded-lg border border-app-divider bg-app p-4"
> >
<p className="text-ink-faint m-3 text-sm font-bold">APP CRASHED</p> <p className="m-3 text-sm font-bold text-ink-faint">APP CRASHED</p>
<h1 className="text-ink text-2xl font-bold">We're past the event horizon...</h1> <h1 className="text-2xl font-bold text-ink">We're past the event horizon...</h1>
<pre className="text-ink m-2">Error: {message}</pre> <pre className="m-2 text-ink">Error: {message}</pre>
{debug.enabled && ( {debug.enabled && (
<pre className="text-ink-dull m-2 text-sm"> <pre className="m-2 text-sm text-ink-dull">
Check the console (CMD/CTRL + OPTION + i) for stack trace. Check the console (CMD/CTRL + OPTION + i) for stack trace.
</pre> </pre>
)} )}
<div className="text-ink flex flex-row space-x-2"> <div className="flex flex-row space-x-2 text-ink">
{reloadBtn && ( {reloadBtn && (
<Button variant="accent" className="mt-2" onClick={reloadBtn}> <Button variant="accent" className="mt-2" onClick={reloadBtn}>
Reload Reload

6
interface/app/$libraryId/404.tsx
View file

@ -5,14 +5,14 @@ export const Component = () => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="bg-app/80 w-full"> <div className="w-full bg-app/80">
<div <div
role="alert" role="alert"
className="flex h-full w-full flex-col items-center justify-center rounded-lg p-4" className="flex h-full w-full flex-col items-center justify-center rounded-lg p-4"
> >
<p className="text-ink-faint m-3 text-sm font-semibold uppercase">Error: 404</p> <p className="m-3 text-sm font-semibold uppercase text-ink-faint">Error: 404</p>
<h1 className="text-4xl font-bold">There's nothing here.</h1> <h1 className="text-4xl font-bold">There's nothing here.</h1>
<p className="text-ink-dull mt-2 text-sm"> <p className="mt-2 text-sm text-ink-dull">
Its likely that this page has not been built yet, if so we're on it! Its likely that this page has not been built yet, if so we're on it!
</p> </p>
<div className="flex flex-row space-x-2"> <div className="flex flex-row space-x-2">

4
interface/app/$libraryId/Explorer/File/DecryptDialog.tsx
View file

@ -125,7 +125,7 @@ export default (props: Props) => {
/> />
<span className="ml-3 mt-0.5 text-xs font-medium">Automatically mount key</span> <span className="ml-3 mt-0.5 text-xs font-medium">Automatically mount key</span>
<Tooltip label="The key linked with the file will be automatically mounted"> <Tooltip label="The key linked with the file will be automatically mounted">
<Info className="text-ink-faint ml-1.5 mt-0.5 h-4 w-4" /> <Info className="ml-1.5 mt-0.5 h-4 w-4 text-ink-faint" />
</Tooltip> </Tooltip>
</div> </div>
)} )}
@ -145,7 +145,7 @@ export default (props: Props) => {
/> />
<span className="ml-3 mt-0.5 text-xs font-medium">Save to Key Manager</span> <span className="ml-3 mt-0.5 text-xs font-medium">Save to Key Manager</span>
<Tooltip label="This key will be saved to the key manager"> <Tooltip label="This key will be saved to the key manager">
<Info className="text-ink-faint ml-1.5 mt-0.5 h-4 w-4" /> <Info className="ml-1.5 mt-0.5 h-4 w-4 text-ink-faint" />
</Tooltip> </Tooltip>
</div> </div>
</> </>

3
interface/app/$libraryId/Explorer/TopBar.tsx
View file

@ -198,9 +198,8 @@ export default (props: TopBarProps) => {
<> <>
<div <div
data-tauri-drag-region data-tauri-drag-region
// eslint-disable-next-line tailwindcss/no-contradicting-classname
className={clsx( className={clsx(
'max-w bg-app duration-250 z-20 flex h-[46px] shrink-0 items-center overflow-hidden border-b border-transparent pl-3 transition-[background-color] transition-[border-color] ease-out', 'max-w duration-250 z-20 flex h-[46px] shrink-0 items-center overflow-hidden border-b border-transparent bg-app pl-3 transition-[background-color] transition-[border-color] ease-out',
props.showSeparator && 'top-bar-blur !bg-app/90' props.showSeparator && 'top-bar-blur !bg-app/90'
)} )}
> >

18
interface/app/$libraryId/KeyManager/Key.tsx
View file

@ -63,7 +63,7 @@ export const KeyDropdown = ({
'flex flex-col', 'flex flex-col',
'z-50 m-2 space-y-1 px-4 py-2', 'z-50 m-2 space-y-1 px-4 py-2',
'cursor-default select-none rounded-lg', 'cursor-default select-none rounded-lg',
'text-ink text-left text-sm', 'text-left text-sm text-ink',
'bg-app-overlay/80 backdrop-blur', 'bg-app-overlay/80 backdrop-blur',
// 'border border-app-overlay', // 'border border-app-overlay',
'shadow-2xl shadow-black/60 ', 'shadow-2xl shadow-black/60 ',
@ -96,7 +96,7 @@ export const Key = ({ data }: { data: Key }) => {
return ( return (
<div <div
className={clsx( className={clsx(
'shadow-app-shade/10 bg-app-box flex items-center justify-between rounded-lg px-2 py-1.5 text-sm shadow-lg' 'flex items-center justify-between rounded-lg bg-app-box px-2 py-1.5 text-sm shadow-lg shadow-app-shade/10'
)} )}
> >
<div className="flex items-center"> <div className="flex items-center">
@ -124,19 +124,19 @@ export const Key = ({ data }: { data: Key }) => {
{data.stats ? ( {data.stats ? (
<div className="mt-[1px] flex flex-row space-x-3"> <div className="mt-[1px] flex flex-row space-x-3">
{data.stats.objectCount && ( {data.stats.objectCount && (
<div className="text-ink-dull text-[8pt] font-medium opacity-30"> <div className="text-[8pt] font-medium text-ink-dull opacity-30">
{data.stats.objectCount} Objects {data.stats.objectCount} Objects
</div> </div>
)} )}
{data.stats.containerCount && ( {data.stats.containerCount && (
<div className="text-ink-dull text-[8pt] font-medium opacity-30"> <div className="text-[8pt] font-medium text-ink-dull opacity-30">
{data.stats.containerCount} Containers {data.stats.containerCount} Containers
</div> </div>
)} )}
</div> </div>
) : ( ) : (
!data.mounted && ( !data.mounted && (
<div className="text-ink-dull text-[8pt] font-medium opacity-30"> <div className="text-[8pt] font-medium text-ink-dull opacity-30">
{data.queue.has(data.id) ? 'Key mounting...' : 'Key not mounted'} {data.queue.has(data.id) ? 'Key mounting...' : 'Key not mounted'}
</div> </div>
) )
@ -147,14 +147,14 @@ export const Key = ({ data }: { data: Key }) => {
{data.mounted && ( {data.mounted && (
<Tooltip label="Browse files"> <Tooltip label="Browse files">
<Button size="icon"> <Button size="icon">
<Eye className="text-ink-faint h-4 w-4" /> <Eye className="h-4 w-4 text-ink-faint" />
</Button> </Button>
</Tooltip> </Tooltip>
)} )}
<KeyDropdown <KeyDropdown
trigger={ trigger={
<Button size="icon"> <Button size="icon">
<DotsThree className="text-ink-faint h-4 w-4" /> <DotsThree className="h-4 w-4 text-ink-faint" />
</Button> </Button>
} }
> >
@ -220,7 +220,7 @@ export const KeyDropdownItem = (props: {
}) => { }) => {
return ( return (
<DropdownMenu.DropdownMenuItem <DropdownMenu.DropdownMenuItem
className="text-menu-ink !cursor-default select-none py-0.5 focus:outline-none active:opacity-80" className="!cursor-default select-none py-0.5 text-menu-ink focus:outline-none active:opacity-80"
onClick={props.onClick} onClick={props.onClick}
hidden={props.hidden} hidden={props.hidden}
> >
@ -231,7 +231,7 @@ export const KeyDropdownItem = (props: {
export const DummyKey = (props: { text: string }) => { export const DummyKey = (props: { text: string }) => {
return ( return (
<div className="shadow-app-shade/10 bg-app-box flex items-center justify-between rounded-lg p-2 py-1.5 text-sm shadow-lg"> <div className="flex items-center justify-between rounded-lg bg-app-box p-2 py-1.5 text-sm shadow-lg shadow-app-shade/10">
<div className="flex items-center"> <div className="flex items-center">
<KeyIcon className="ml-1 mr-3 h-5 w-5 text-gray-400/80" /> <KeyIcon className="ml-1 mr-3 h-5 w-5 text-gray-400/80" />
<div className="flex flex-col "> <div className="flex flex-col ">

4
interface/app/$libraryId/KeyManager/Mounter.tsx
View file

@ -77,7 +77,7 @@ export default () => {
</div> </div>
<span className="ml-3 text-xs font-medium">Sync with Library</span> <span className="ml-3 text-xs font-medium">Sync with Library</span>
<Tooltip label="This key will be registered with all devices running your Library"> <Tooltip label="This key will be registered with all devices running your Library">
<Info className="text-ink-faint ml-1.5 h-4 w-4" /> <Info className="ml-1.5 h-4 w-4 text-ink-faint" />
</Tooltip> </Tooltip>
<div className="grow" /> <div className="grow" />
<div className="space-x-2"> <div className="space-x-2">
@ -93,7 +93,7 @@ export default () => {
</div> </div>
<span className="ml-3 text-xs font-medium">Automount</span> <span className="ml-3 text-xs font-medium">Automount</span>
<Tooltip label="This key will be automatically mounted every time you unlock the key manager"> <Tooltip label="This key will be automatically mounted every time you unlock the key manager">
<Info className="text-ink-faint ml-1.5 h-4 w-4" /> <Info className="ml-1.5 h-4 w-4 text-ink-faint" />
</Tooltip> </Tooltip>
</div> </div>

6
interface/app/$libraryId/KeyManager/index.tsx
View file

@ -39,7 +39,7 @@ const Unlocked = () => {
variant="subtle" variant="subtle"
className="text-ink-faint" className="text-ink-faint"
> >
<Lock className="text-ink-faint h-4 w-4" /> <Lock className="h-4 w-4 text-ink-faint" />
</Button> </Button>
<ButtonLink <ButtonLink
to={`/${library.uuid}/settings/library/keys`} to={`/${library.uuid}/settings/library/keys`}
@ -47,7 +47,7 @@ const Unlocked = () => {
variant="subtle" variant="subtle"
className="text-ink-faint" className="text-ink-faint"
> >
<Gear className="text-ink-faint h-4 w-4" /> <Gear className="h-4 w-4 text-ink-faint" />
</ButtonLink> </ButtonLink>
</Tabs.List> </Tabs.List>
</div> </div>
@ -75,7 +75,7 @@ const Keys = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="border-app-line flex w-full rounded-b-md border-t p-2"> <div className="flex w-full rounded-b-md border-t border-app-line p-2">
<Button <Button
size="sm" size="sm"
variant="gray" variant="gray"

2
interface/app/$libraryId/Layout/Sidebar/DebugPopover.tsx
View file

@ -14,7 +14,7 @@ export default () => {
<Popover <Popover
className="p-4 focus:outline-none" className="p-4 focus:outline-none"
trigger={ trigger={
<h1 className="text-ink-faint/50 ml-1 w-full text-[7pt]"> <h1 className="ml-1 w-full text-[7pt] text-ink-faint/50">
v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'} v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
</h1> </h1>
} }

9
interface/app/$libraryId/Layout/Sidebar/JobManager.tsx
View file

@ -97,7 +97,7 @@ export function JobsManager() {
return ( return (
<div className="h-full overflow-hidden pb-10"> <div className="h-full overflow-hidden pb-10">
<div className="border-app-line/50 bg-app-button/70 z-20 flex h-10 w-full items-center rounded-t-md border-b px-2"> <div className="z-20 flex h-10 w-full items-center rounded-t-md border-b border-app-line/50 bg-app-button/70 px-2">
<CategoryHeading className="ml-2">Recent Jobs</CategoryHeading> <CategoryHeading className="ml-2">Recent Jobs</CategoryHeading>
<div className="grow" /> <div className="grow" />
@ -124,7 +124,7 @@ export function JobsManager() {
<Job key={job.id} job={job} /> <Job key={job.id} job={job} />
))} ))}
{jobs.data?.length === 0 && runningJobs.data?.length === 0 && ( {jobs.data?.length === 0 && runningJobs.data?.length === 0 && (
<div className="text-ink-dull flex h-32 items-center justify-center">No jobs.</div> <div className="flex h-32 items-center justify-center text-ink-dull">No jobs.</div>
)} )}
</div> </div>
</div> </div>
@ -141,8 +141,7 @@ function Job({ job }: { job: JobReport }) {
const isRunning = job.status === 'Running'; const isRunning = job.status === 'Running';
return ( return (
// Do we actually need bg-opacity-60 here? Where is the bg? // Do we actually need bg-opacity-60 here? Where is the bg?
// eslint-disable-next-line tailwindcss/migration-from-tailwind-2 <div className="flex items-center border-b border-app-line/50 bg-opacity-60 p-2 pl-4">
<div className="border-app-line/50 flex items-center border-b bg-opacity-60 p-2 pl-4">
<Tooltip label={job.status}> <Tooltip label={job.status}>
<niceData.icon className={clsx('mr-3 h-5 w-5')} /> <niceData.icon className={clsx('mr-3 h-5 w-5')} />
</Tooltip> </Tooltip>
@ -155,7 +154,7 @@ function Job({ job }: { job: JobReport }) {
<ProgressBar value={job.completed_task_count} total={job.task_count} /> <ProgressBar value={job.completed_task_count} total={job.task_count} />
</div> </div>
)} )}
<div className="text-ink-faint flex items-center truncate"> <div className="flex items-center truncate text-ink-faint">
<span className="text-xs"> <span className="text-xs">
{isRunning ? 'Elapsed' : job.status === 'Failed' ? 'Failed after' : 'Took'}{' '} {isRunning ? 'Elapsed' : job.status === 'Failed' ? 'Failed after' : 'Took'}{' '}
{job.seconds_elapsed {job.seconds_elapsed

6
interface/app/$libraryId/Layout/Sidebar/LibrariesDropdown.tsx
View file

@ -13,10 +13,10 @@ export default () => {
<Dropdown.Button <Dropdown.Button
variant="gray" variant="gray"
className={clsx( className={clsx(
`text-ink w-full`, `w-full text-ink`,
// these classname overrides are messy // these classname overrides are messy
// but they work // but they work
`!bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line ring-offset-sidebar`, `!border-sidebar-line/50 !bg-sidebar-box ring-offset-sidebar active:!border-sidebar-line active:!bg-sidebar-button ui-open:!border-sidebar-line ui-open:!bg-sidebar-button`,
(library === null || libraries.isLoading) && '!text-ink-faint' (library === null || libraries.isLoading) && '!text-ink-faint'
)} )}
> >
@ -27,7 +27,7 @@ export default () => {
} }
// we override the sidebar dropdown item's hover styles // we override the sidebar dropdown item's hover styles
// because the dark style clashes with the sidebar // because the dark style clashes with the sidebar
className="dark:bg-sidebar-box dark:border-sidebar-line dark:divide-menu-selected/30 data-[side=bottom]:slide-in-from-top-2 mt-1 shadow-none" className="mt-1 shadow-none data-[side=bottom]:slide-in-from-top-2 dark:divide-menu-selected/30 dark:border-sidebar-line dark:bg-sidebar-box"
alignToTrigger alignToTrigger
> >
{libraries.data?.map((lib) => ( {libraries.data?.map((lib) => (

10
interface/app/$libraryId/Layout/Sidebar/index.tsx
View file

@ -51,7 +51,7 @@ export default () => {
return ( return (
<div <div
className={clsx( className={clsx(
'border-sidebar-divider bg-sidebar relative flex min-h-full w-44 shrink-0 grow-0 flex-col space-y-2 border-r px-2.5 pb-2', 'relative flex min-h-full w-44 shrink-0 grow-0 flex-col space-y-2 border-r border-sidebar-divider bg-sidebar px-2.5 pb-2',
macOnly(os, 'bg-opacity-[0.65]') macOnly(os, 'bg-opacity-[0.65]')
)} )}
> >
@ -121,9 +121,9 @@ const LibrarySection = () => {
})} })}
{(locations.data?.length || 0) < 4 && ( {(locations.data?.length || 0) < 4 && (
<AddLocationButton <AddLocationButton
className="border-sidebar-line hover:border-sidebar-selected cursor-normal className="cursor-normal mt-1 w-full
text-ink-faint mt-1 w-full rounded border border-dashed px-2 py-1 rounded border border-dashed border-sidebar-line px-2 py-1 text-center text-xs
text-center text-xs font-medium transition" font-medium text-ink-faint transition hover:border-sidebar-selected"
/> />
)} )}
</Section> </Section>
@ -246,7 +246,7 @@ const Footer = () => {
<Button <Button
size="icon" size="icon"
variant="subtle" variant="subtle"
className="radix-state-open:bg-sidebar-selected/50 text-ink-faint ring-offset-sidebar" className="text-ink-faint ring-offset-sidebar radix-state-open:bg-sidebar-selected/50"
disabled={!library} disabled={!library}
> >
{library && ( {library && (

8
interface/app/$libraryId/Layout/Toasts.tsx
View file

@ -21,8 +21,8 @@ export default () => {
'radix-state-closed:animate-toast-hide', 'radix-state-closed:animate-toast-hide',
'radix-swipe-end:animate-toast-swipe-out', 'radix-swipe-end:animate-toast-swipe-out',
'translate-x-radix-toast-swipe-move-x', 'translate-x-radix-toast-swipe-move-x',
'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]', 'radix-swipe-cancel:ease-[ease] radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200',
'focus-visible:ring-accent/75 border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring' 'border-2 border-white/10 shadow-2xl focus:outline-none focus-visible:ring focus-visible:ring-accent/75'
)} )}
> >
<div className="flex"> <div className="flex">
@ -44,7 +44,7 @@ export default () => {
{toast.actionButton && ( {toast.actionButton && (
<ToastPrimitive.Action <ToastPrimitive.Action
altText="view now" altText="view now"
className="text-accent focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring" className="flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-accent hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring focus-visible:ring-accent/75"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
toast.actionButton?.onClick(); toast.actionButton?.onClick();
@ -56,7 +56,7 @@ export default () => {
)} )}
</div> </div>
<div className="flex h-0 flex-1"> <div className="flex h-0 flex-1">
<ToastPrimitive.Close className="text-ink-faint focus-visible:ring-accent/75 flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring"> <ToastPrimitive.Close className="flex w-full items-center justify-center rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-ink-faint hover:bg-white/10 focus:z-10 focus:outline-none focus-visible:ring focus-visible:ring-accent/75">
Dismiss Dismiss
</ToastPrimitive.Close> </ToastPrimitive.Close>
</div> </div>

2
interface/app/$libraryId/index.tsx
View file

@ -14,7 +14,7 @@ export default [
{ path: 'spaces', lazy: () => import('./spaces') }, { path: 'spaces', lazy: () => import('./spaces') },
{ path: 'debug', lazy: () => import('./debug') }, { path: 'debug', lazy: () => import('./debug') },
{ path: 'spacedrop', lazy: () => import('./spacedrop') }, { path: 'spacedrop', lazy: () => import('./spacedrop') },
{ path: 'sync', lazy: () => import("./sync") } { path: 'sync', lazy: () => import('./sync') }
] ]
}, },
{ path: 'location/:id', lazy: () => import('./location/$id') }, { path: 'location/:id', lazy: () => import('./location/$id') },

2
interface/app/$libraryId/location/$id.tsx
View file

@ -24,7 +24,7 @@ export const Component = () => {
useEffect(() => { useEffect(() => {
explorerState.locationId = location_id; explorerState.locationId = location_id;
if (location_id !== null) quickRescan.mutate({ location_id, sub_path: path }); if (location_id !== null) quickRescan.mutate({ location_id, sub_path: path });
}, [location_id, path]); }, [explorerState, location_id, path, quickRescan]);
if (location_id === null) throw new Error(`location_id is null!`); if (location_id === null) throw new Error(`location_id is null!`);

4
interface/app/$libraryId/overview.tsx
View file

@ -144,10 +144,10 @@ interface CategoryButtonProps {
function CategoryButton({ category, icon: Icon }: CategoryButtonProps) { function CategoryButton({ category, icon: Icon }: CategoryButtonProps) {
return ( return (
<Card className="items-center !px-3"> <Card className="items-center !px-3">
<Icon weight="fill" className="text-ink-dull mr-3 h-6 w-6 opacity-20" /> <Icon weight="fill" className="mr-3 h-6 w-6 text-ink-dull opacity-20" />
<div> <div>
<h2 className="text-sm font-medium">{category}</h2> <h2 className="text-sm font-medium">{category}</h2>
<p className="text-ink-faint text-xs">23,324 items</p> <p className="text-xs text-ink-faint">23,324 items</p>
</div> </div>
</Card> </Card>
); );

2
interface/app/$libraryId/settings/Layout.tsx
View file

@ -40,7 +40,7 @@ export const Heading = (props: HeaderProps) => {
<p className="mt-1 text-sm text-gray-400">{props.description}</p> <p className="mt-1 text-sm text-gray-400">{props.description}</p>
</div> </div>
{props.rightArea} {props.rightArea}
<hr className="border-gray-550 mt-4" /> <hr className="mt-4 border-gray-550" />
</div> </div>
); );
}; };

2
interface/app/$libraryId/settings/ModalLayout.tsx
View file

@ -38,7 +38,7 @@ const BackButton = () => {
return ( return (
<Button variant="outline" size="icon" onClick={() => navigate(-1)}> <Button variant="outline" size="icon" onClick={() => navigate(-1)}>
<div className="flex h-4 w-4 justify-center"> <div className="flex h-4 w-4 justify-center">
<CaretLeft weight="bold" className="text-ink-dull w-[12px] " aria-hidden="true" /> <CaretLeft weight="bold" className="w-[12px] text-ink-dull " aria-hidden="true" />
</div> </div>
</Button> </Button>
); );

2
interface/app/$libraryId/settings/Sidebar.tsx
View file

@ -26,7 +26,7 @@ export default () => {
const os = useOperatingSystem(); const os = useOperatingSystem();
return ( return (
<div className="border-app-line/50 custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r pb-5"> <div className="custom-scroll no-scrollbar h-full w-60 max-w-[180px] shrink-0 border-r border-app-line/50 pb-5">
{os !== 'browser' ? ( {os !== 'browser' ? (
<div data-tauri-drag-region className="h-5 w-full" /> <div data-tauri-drag-region className="h-5 w-full" />
) : ( ) : (

6
interface/app/$libraryId/settings/client/general.tsx
View file

@ -26,7 +26,7 @@ export const Component = () => {
</div> </div>
</div> </div>
<hr className="border-app-line mt-2 mb-4" /> <hr className="mt-2 mb-4 border-app-line" />
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
<div className="flex flex-col"> <div className="flex flex-col">
<NodeSettingLabel>Node Name</NodeSettingLabel> <NodeSettingLabel>Node Name</NodeSettingLabel>
@ -50,7 +50,7 @@ export const Component = () => {
</div> </div>
<div className="mt-5 flex items-center space-x-3"> <div className="mt-5 flex items-center space-x-3">
<Switch size="sm" checked /> <Switch size="sm" checked />
<span className="text-ink-dull text-sm font-medium">Run daemon when app closed</span> <span className="text-sm font-medium text-ink-dull">Run daemon when app closed</span>
</div> </div>
<div className="mt-3"> <div className="mt-3">
<div <div
@ -59,7 +59,7 @@ export const Component = () => {
platform.openLink(node.data.data_path); platform.openLink(node.data.data_path);
} }
}} }}
className="text-ink-faint text-sm font-medium" className="text-sm font-medium text-ink-faint"
> >
<b className="mr-2 inline truncate"> <b className="mr-2 inline truncate">
<Database className="mr-1 mt-[-2px] inline h-4 w-4" /> Data Folder <Database className="mr-1 mt-[-2px] inline h-4 w-4" /> Data Folder

8
interface/app/$libraryId/settings/library/keys/index.tsx
View file

@ -54,7 +54,7 @@ export const KeyMounterDropdown = ({
'flex flex-col', 'flex flex-col',
'z-50 m-2 space-y-1', 'z-50 m-2 space-y-1',
'cursor-default select-none rounded-lg', 'cursor-default select-none rounded-lg',
'text-ink text-left text-sm', 'text-left text-sm text-ink',
'bg-app-overlay/80 backdrop-blur', 'bg-app-overlay/80 backdrop-blur',
// 'border border-app-overlay', // 'border border-app-overlay',
'shadow-2xl shadow-black/60 ', 'shadow-2xl shadow-black/60 ',
@ -138,7 +138,7 @@ export const Component = () => {
</Button> </Button>
{!enterSkManually && ( {!enterSkManually && (
<div className="relative flex grow"> <div className="relative flex grow">
<p className="text-accent mt-2" onClick={() => setEnterSkManually(true)}> <p className="mt-2 text-accent" onClick={() => setEnterSkManually(true)}>
or enter secret key manually or enter secret key manually
</p> </p>
</div> </div>
@ -162,12 +162,12 @@ export const Component = () => {
variant="subtle" variant="subtle"
className="text-ink-faint" className="text-ink-faint"
> >
<Lock className="text-ink-faint h-4 w-4" /> <Lock className="h-4 w-4 text-ink-faint" />
</Button> </Button>
<KeyMounterDropdown <KeyMounterDropdown
trigger={ trigger={
<Button size="icon" variant="subtle" className="text-ink-faint"> <Button size="icon" variant="subtle" className="text-ink-faint">
<Plus className="text-ink-faint h-4 w-4" /> <Plus className="h-4 w-4 text-ink-faint" />
</Button> </Button>
} }
> >

6
interface/app/$libraryId/settings/library/locations/ListItem.tsx
View file

@ -32,8 +32,8 @@ export default ({ location }: Props) => {
<Folder size={30} className="mr-3" /> <Folder size={30} className="mr-3" />
<div className="grid min-w-[110px] grid-cols-1"> <div className="grid min-w-[110px] grid-cols-1">
<h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1> <h1 className="pt-0.5 text-sm font-semibold">{location.name}</h1>
<p className="text-ink-dull mt-0.5 select-text truncate text-sm"> <p className="mt-0.5 select-text truncate text-sm text-ink-dull">
<span className="bg-app-selected mr-1 rounded py-[1px] px-1">{location.node.name}</span> <span className="mr-1 rounded bg-app-selected py-[1px] px-1">{location.node.name}</span>
{location.path} {location.path}
</p> </p>
</div> </div>
@ -49,7 +49,7 @@ export default ({ location }: Props) => {
className="pointer-events-none flex !py-1.5 !px-2" className="pointer-events-none flex !py-1.5 !px-2"
> >
<div className={clsx('h-2 w-2 rounded-full', online ? 'bg-green-500' : 'bg-red-500')} /> <div className={clsx('h-2 w-2 rounded-full', online ? 'bg-green-500' : 'bg-red-500')} />
<span className="text-ink-dull ml-1.5 text-xs">{online ? 'Online' : 'Offline'}</span> <span className="ml-1.5 text-xs text-ink-dull">{online ? 'Online' : 'Offline'}</span>
</Button> </Button>
<Button <Button
variant="gray" variant="gray"

2
interface/app/$libraryId/settings/node/libraries/ListItem.tsx
View file

@ -18,7 +18,7 @@ export default (props: Props) => (
{props.library.config.name} {props.library.config.name}
{props.current && <Pill>Current</Pill>} {props.current && <Pill>Current</Pill>}
</h3> </h3>
<p className="text-ink-dull mt-0.5 text-xs">{props.library.uuid}</p> <p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
</div> </div>
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<Button className="!p-1.5" variant="gray"> <Button className="!p-1.5" variant="gray">

2
interface/app/$libraryId/settings/node/p2p.tsx
View file

@ -25,7 +25,7 @@ export const Component = () => {
<div className="mt-1 flex flex-col"> <div className="mt-1 flex flex-col">
<Input className="grow" disabled defaultValue="https://p2p.spacedrive.com" /> <Input className="grow" disabled defaultValue="https://p2p.spacedrive.com" />
<div className="mt-1 flex justify-end"> <div className="mt-1 flex justify-end">
<a className="text-accent hover:text-accent p-1 text-sm font-bold">Change</a> <a className="p-1 text-sm font-bold text-accent hover:text-accent">Change</a>
</div> </div>
</div> </div>
</Setting> </Setting>

4
interface/app/$libraryId/settings/resources/about.tsx
View file

@ -18,8 +18,8 @@ export const Component = () => {
<h1 className="text-2xl font-bold"> <h1 className="text-2xl font-bold">
Spacedrive {os !== 'unknown' && <>for {currentPlatformNiceName}</>} Spacedrive {os !== 'unknown' && <>for {currentPlatformNiceName}</>}
</h1> </h1>
<span className="text-ink-dull mt-1 text-sm">The file manager from the future.</span> <span className="mt-1 text-sm text-ink-dull">The file manager from the future.</span>
<span className="text-ink-faint/80 mt-1 text-xs"> <span className="mt-1 text-xs text-ink-faint/80">
v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'} v{buildInfo.data?.version || '-.-.-'} - {buildInfo.data?.commit || 'dev'}
</span> </span>
</div> </div>

4
interface/app/$libraryId/spacedrop.tsx
View file

@ -52,13 +52,13 @@ function DropItem(props: DropItemProps) {
return ( return (
<div <div
className={clsx(classes.honeycombItem, 'bg-app-box/20 hover:bg-app-box/50 overflow-hidden')} className={clsx(classes.honeycombItem, 'overflow-hidden bg-app-box/20 hover:bg-app-box/50')}
> >
<div className="group relative flex h-full w-full flex-col items-center justify-center "> <div className="group relative flex h-full w-full flex-col items-center justify-center ">
{/* <SubtleButtonContainer className="absolute left-[12px] top-[55px]"> {/* <SubtleButtonContainer className="absolute left-[12px] top-[55px]">
<SubtleButton icon={Star} /> <SubtleButton icon={Star} />
</SubtleButtonContainer> */} </SubtleButtonContainer> */}
<div className="bg-app-button h-14 w-14 rounded-full">{icon}</div> <div className="h-14 w-14 rounded-full bg-app-button">{icon}</div>
<SubtleButtonContainer className="absolute right-[12px] top-[55px] rotate-90"> <SubtleButtonContainer className="absolute right-[12px] top-[55px] rotate-90">
<SubtleButton /> <SubtleButton />
</SubtleButtonContainer> </SubtleButtonContainer>

4
interface/app/onboarding/Layout.tsx
View file

@ -37,7 +37,7 @@ export const Component = () => {
<div <div
className={clsx( className={clsx(
macOnly(os, 'bg-opacity-[0.75]'), macOnly(os, 'bg-opacity-[0.75]'),
'bg-sidebar text-ink flex h-screen flex-col' 'flex h-screen flex-col bg-sidebar text-ink'
)} )}
> >
<DragRegion className="z-50 h-9" /> <DragRegion className="z-50 h-9" />
@ -48,7 +48,7 @@ export const Component = () => {
<Progress /> <Progress />
</div> </div>
<div className="flex justify-center p-4"> <div className="flex justify-center p-4">
<p className="text-ink-dull text-xs opacity-50">&copy; 2022 Spacedrive Technology Inc.</p> <p className="text-xs text-ink-dull opacity-50">&copy; 2022 Spacedrive Technology Inc.</p>
</div> </div>
<div className="absolute -z-10"> <div className="absolute -z-10">
<div className="relative h-screen w-screen"> <div className="relative h-screen w-screen">

2
interface/app/onboarding/Progress.tsx
View file

@ -40,7 +40,7 @@ export default function OnboardingProgress() {
disabled={!obStore.unlockedScreens.includes(path)} disabled={!obStore.unlockedScreens.includes(path)}
onClick={() => navigate(`/onboarding/${path}`)} onClick={() => navigate(`/onboarding/${path}`)}
className={clsx( className={clsx(
'hover:bg-ink h-2 w-2 rounded-full transition disabled:opacity-10', 'h-2 w-2 rounded-full transition hover:bg-ink disabled:opacity-10',
currentScreenKey === path ? 'bg-ink' : 'bg-ink-faint' currentScreenKey === path ? 'bg-ink' : 'bg-ink-faint'
)} )}
/> />

4
interface/app/onboarding/new-library.tsx
View file

@ -55,7 +55,7 @@ export default function OnboardingNewLibrary() {
<Button onClick={handleImport} variant="accent" size="sm"> <Button onClick={handleImport} variant="accent" size="sm">
Import Import
</Button> </Button>
<span className="text-ink-faint px-2 text-xs font-bold">OR</span> <span className="px-2 text-xs font-bold text-ink-faint">OR</span>
<Button onClick={() => setImportMode(false)} variant="outline" size="sm"> <Button onClick={() => setImportMode(false)} variant="outline" size="sm">
Create new library Create new library
</Button> </Button>
@ -74,7 +74,7 @@ export default function OnboardingNewLibrary() {
<Button type="submit" variant="accent" size="sm"> <Button type="submit" variant="accent" size="sm">
New library New library
</Button> </Button>
<span className="text-ink-faint px-2 text-xs font-bold">OR</span> <span className="px-2 text-xs font-bold text-ink-faint">OR</span>
<Button onClick={() => setImportMode(true)} variant="outline" size="sm"> <Button onClick={() => setImportMode(true)} variant="outline" size="sm">
Import library Import library
</Button> </Button>

2
interface/app/onboarding/privacy.tsx
View file

@ -54,7 +54,7 @@ export default function OnboardingPrivacy() {
{shareTelemetry.options.map(({ value, heading, description }) => ( {shareTelemetry.options.map(({ value, heading, description }) => (
<RadioGroup.Item key={value} value={value}> <RadioGroup.Item key={value} value={value}>
<h1 className="font-bold">{heading}</h1> <h1 className="font-bold">{heading}</h1>
<p className="text-ink-faint text-sm">{description}</p> <p className="text-sm text-ink-faint">{description}</p>
</RadioGroup.Item> </RadioGroup.Item>
))} ))}
</RadioGroup.Root> </RadioGroup.Root>

2
interface/app/onboarding/start.tsx
View file

@ -7,7 +7,7 @@ export default function OnboardingStart() {
<OnboardingContainer> <OnboardingContainer>
<OnboardingImg src={AppLogo} className="mb-8 h-36 w-36 shrink-0" /> <OnboardingImg src={AppLogo} className="mb-8 h-36 w-36 shrink-0" />
<h1 className="text-ink mb-2 text-center text-4xl font-bold"> <h1 className="mb-2 text-center text-4xl font-bold text-ink">
The file explorer from the future. The file explorer from the future.
</h1> </h1>
<OnboardingDescription> <OnboardingDescription>

6
interface/app/style.scss
View file

@ -61,7 +61,7 @@ body {
@apply rounded-[6px] bg-transparent; @apply rounded-[6px] bg-transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@apply bg-app-box rounded-[6px]; @apply rounded-[6px] bg-app-box;
} }
} }
.page-scroll { .page-scroll {
@ -73,7 +73,7 @@ body {
@apply my-[10px] rounded-[6px] bg-transparent; @apply my-[10px] rounded-[6px] bg-transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@apply bg-app-box rounded-[6px]; @apply rounded-[6px] bg-app-box;
} }
} }
.inspector-scroll { .inspector-scroll {
@ -86,7 +86,7 @@ body {
@apply my-[8px] bg-transparent; @apply my-[8px] bg-transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
@apply bg-app/70 rounded-[6px] opacity-0; @apply rounded-[6px] bg-app/70 opacity-0;
} }
&:hover { &:hover {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {

2
interface/components/PasswordMeter.tsx
View file

@ -24,7 +24,7 @@ export const PasswordMeter = (props: PasswordMeterProps) => {
{scoreText} {scoreText}
</span> </span>
<div className="flex grow"> <div className="flex grow">
<div className="bg-app-box/50 mt-2 w-full rounded-full"> <div className="mt-2 w-full rounded-full bg-app-box/50">
<div <div
style={{ style={{
width: `${score !== 0 ? score * 25 : 12.5}%` width: `${score !== 0 ? score * 25 : 12.5}%`

2
interface/hooks/useScrolled.tsx
View file

@ -14,7 +14,7 @@ export const useScrolled = (ref: React.RefObject<HTMLDivElement>, y = 1) => {
onScroll(); onScroll();
ref.current?.addEventListener('scroll', onScroll); ref.current?.addEventListener('scroll', onScroll);
() => ref.current?.removeEventListener('scroll', onScroll); () => ref.current?.removeEventListener('scroll', onScroll);
}, [ref.current, y]); }, [ref, y]);
return { isScrolled }; return { isScrolled };
}; };

4
package.json
View file

@ -36,8 +36,8 @@
"@trivago/prettier-plugin-sort-imports": "^4.1.1", "@trivago/prettier-plugin-sort-imports": "^4.1.1",
"cspell": "^6.12.0", "cspell": "^6.12.0",
"markdown-link-check": "^3.10.3", "markdown-link-check": "^3.10.3",
"prettier": "^2.8.4", "prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.5", "prettier-plugin-tailwindcss": "^0.2.6",
"rimraf": "^4.1.1", "rimraf": "^4.1.1",
"turbo": "^1.5.5", "turbo": "^1.5.5",
"turbo-ignore": "^0.3.0", "turbo-ignore": "^0.3.0",

10
packages/config/eslint/base.js
View file

@ -12,7 +12,6 @@ module.exports = {
'plugin:react/recommended', 'plugin:react/recommended',
'plugin:react-hooks/recommended', 'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended',
'plugin:tailwindcss/recommended',
'prettier', 'prettier',
'turbo' 'turbo'
], ],
@ -33,19 +32,12 @@ module.exports = {
'@typescript-eslint/no-empty-interface': 'off', '@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/no-empty-function': 'off', '@typescript-eslint/no-empty-function': 'off',
'no-control-regex': 'off', 'no-control-regex': 'off',
'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'], 'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs']
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/no-contradicting-classname': 'warn'
}, },
ignorePatterns: ['dist', '**/*.js', '**/*.json', 'node_modules'], ignorePatterns: ['dist', '**/*.js', '**/*.json', 'node_modules'],
settings: { settings: {
react: { react: {
version: 'detect' version: 'detect'
},
tailwindcss: {
config: 'packages/ui/style/tailwind.js',
callees: ['classnames', 'clsx', 'ctl', 'cva', 'tw', `twStyle`],
tags: ['tw', 'twStyle']
} }
} }
}; };

10
packages/config/eslint/reactNative.js
View file

@ -1,5 +1,5 @@
module.exports = { module.exports = {
extends: [require.resolve('./base.js')], extends: [require.resolve('./base.js'), 'plugin:tailwindcss/recommended'],
env: { env: {
'react-native/react-native': true 'react-native/react-native': true
}, },
@ -22,11 +22,15 @@ module.exports = {
// } // }
] ]
} }
] ],
'tailwindcss/no-custom-classname': 'off',
'tailwindcss/no-contradicting-classname': 'warn'
}, },
settings: { settings: {
tailwindcss: { tailwindcss: {
config: 'apps/mobile/tailwind.config.js' config: './apps/mobile/tailwind.config.js',
callees: ['classnames', 'clsx', 'ctl', 'cva', 'tw', `twStyle`],
tags: ['tw', 'twStyle']
} }
} }
}; };

12
packages/config/package.json
View file

@ -10,14 +10,14 @@
"eslint-react.js" "eslint-react.js"
], ],
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.51.0", "@typescript-eslint/eslint-plugin": "^5.57.0",
"@typescript-eslint/parser": "^5.51.0", "@typescript-eslint/parser": "^5.57.0",
"eslint": "^8.33.0", "eslint": "^8.37.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.8.0",
"eslint-config-turbo": "^0.0.7", "eslint-config-turbo": "^1.8.8",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-tailwindcss": "^3.8.3", "eslint-plugin-tailwindcss": "^3.10.3",
"vite-plugin-html": "^3.2.0", "vite-plugin-html": "^3.2.0",
"vite-plugin-svgr": "^2.2.1" "vite-plugin-svgr": "^2.2.1"
} }

4
packages/ui/src/CheckBox.tsx
View file

@ -27,11 +27,11 @@ export interface RadixCheckboxProps extends ComponentProps<typeof Checkbox.Root>
export const RadixCheckbox = (props: RadixCheckboxProps) => ( export const RadixCheckbox = (props: RadixCheckboxProps) => (
<div className="align-center flex"> <div className="align-center flex">
<Checkbox.Root <Checkbox.Root
className="bg-app-button flex h-[17px] w-[17px] shrink-0 rounded-md" className="flex h-[17px] w-[17px] shrink-0 rounded-md bg-app-button"
id={props.name} id={props.name}
{...props} {...props}
> >
<Checkbox.Indicator className="bg-accent flex h-[17px] w-[17px] items-center justify-center rounded-md"> <Checkbox.Indicator className="flex h-[17px] w-[17px] items-center justify-center rounded-md bg-accent">
<Check weight="bold" /> <Check weight="bold" />
</Checkbox.Indicator> </Checkbox.Indicator>
</Checkbox.Root> </Checkbox.Root>

2
packages/ui/src/ContextMenu.tsx
View file

@ -134,7 +134,7 @@ const ItemInternals = ({ icon, label, rightArrow, keybind, iconProps }: ContextM
{label && <span className="flex-1 truncate">{label}</span>} {label && <span className="flex-1 truncate">{label}</span>}
{keybind && ( {keybind && (
<span className="text-menu-faint group-radix-highlighted:text-white text-xs font-medium"> <span className="text-xs font-medium text-menu-faint group-radix-highlighted:text-white">
{keybind} {keybind}
</span> </span>
)} )}

8
packages/ui/src/Dialog.tsx
View file

@ -147,7 +147,7 @@ export function Dialog<S extends FieldValues>({
<DialogPrimitive.Portal forceMount> <DialogPrimitive.Portal forceMount>
<DialogPrimitive.Overlay asChild forceMount> <DialogPrimitive.Overlay asChild forceMount>
<animated.div <animated.div
className="z-49 bg-app/50 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl" className="z-49 fixed inset-0 m-[1px] grid place-items-center overflow-y-auto rounded-xl bg-app/50"
style={{ style={{
opacity: styles.opacity opacity: styles.opacity
}} }}
@ -166,18 +166,18 @@ export function Dialog<S extends FieldValues>({
dialog.onSubmit?.(); dialog.onSubmit?.();
setOpen(false); setOpen(false);
}} }}
className="bg-app-box border-app-line text-ink shadow-app-shade !pointer-events-auto min-w-[300px] max-w-[400px] rounded-md border" className="!pointer-events-auto min-w-[300px] max-w-[400px] rounded-md border border-app-line bg-app-box text-ink shadow-app-shade"
> >
<div className="p-5"> <div className="p-5">
<DialogPrimitive.Title className="mb-2 font-bold"> <DialogPrimitive.Title className="mb-2 font-bold">
{props.title} {props.title}
</DialogPrimitive.Title> </DialogPrimitive.Title>
<DialogPrimitive.Description className="text-ink-dull text-sm"> <DialogPrimitive.Description className="text-sm text-ink-dull">
{props.description} {props.description}
</DialogPrimitive.Description> </DialogPrimitive.Description>
{props.children} {props.children}
</div> </div>
<div className="bg-app-selected border-app-line flex flex-row justify-end space-x-2 border-t p-3"> <div className="flex flex-row justify-end space-x-2 border-t border-app-line bg-app-selected p-3">
{form.formState.isSubmitting && <Loader />} {form.formState.isSubmitting && <Loader />}
<div className="grow" /> <div className="grow" />
<DialogPrimitive.Close asChild> <DialogPrimitive.Close asChild>

4
packages/ui/src/Dropdown.tsx
View file

@ -67,7 +67,7 @@ export const Button = forwardRef<HTMLButtonElement, UI.ButtonProps>(
{children} {children}
<span className="grow" /> <span className="grow" />
<CaretDown <CaretDown
className="text-ink-dull group-radix-state-open:rotate-180 group-radix-state-open:translate-y-[-1px] ui-open:rotate-180 ui-open:translate-y-[-1px] ml-2 w-[12px] shrink-0 translate-y-[1px] transition-transform" className="ml-2 w-[12px] shrink-0 translate-y-[1px] text-ink-dull transition-transform ui-open:translate-y-[-1px] ui-open:rotate-180 group-radix-state-open:translate-y-[-1px] group-radix-state-open:rotate-180"
aria-hidden="true" aria-hidden="true"
/> />
</UI.Button> </UI.Button>
@ -100,7 +100,7 @@ export const Root = (props: PropsWithChildren<DropdownRootProps>) => {
> >
<Menu.Items <Menu.Items
className={clsx( className={clsx(
'divide-menu-line shadow-menu-shade/30 bg-menu border-menu-line text-menu-ink absolute top-full z-50 w-full min-w-fit divide-y rounded-md border shadow-xl focus:outline-none', 'absolute top-full z-50 w-full min-w-fit divide-y divide-menu-line rounded-md border border-menu-line bg-menu text-menu-ink shadow-xl shadow-menu-shade/30 focus:outline-none',
props.itemsClassName, props.itemsClassName,
{ 'left-0': props.align === 'left' }, { 'left-0': props.align === 'left' },
{ 'right-0': props.align === 'right' } { 'right-0': props.align === 'right' }

9
packages/ui/src/DropdownMenu.tsx
View file

@ -37,9 +37,12 @@ const Root = ({
}: PropsWithChildren<DropdownMenuProps>) => { }: PropsWithChildren<DropdownMenuProps>) => {
const [width, setWidth] = useState<number>(); const [width, setWidth] = useState<number>();
const measureRef = useCallback((ref: HTMLButtonElement | null) => { const measureRef = useCallback(
alignToTrigger && ref && setWidth(ref.getBoundingClientRect().width); (ref: HTMLButtonElement | null) => {
}, []); alignToTrigger && ref && setWidth(ref.getBoundingClientRect().width);
},
[alignToTrigger]
);
return ( return (
<RadixDM.Root> <RadixDM.Root>

2
packages/ui/src/Input.tsx
View file

@ -75,7 +75,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
<input <input
className={clsx( className={clsx(
'placeholder:text-ink-faint flex-1 truncate border-none bg-transparent px-3 text-sm outline-none', 'flex-1 truncate border-none bg-transparent px-3 text-sm outline-none placeholder:text-ink-faint',
(right || (icon && iconPosition === 'right')) && 'pr-0', (right || (icon && iconPosition === 'right')) && 'pr-0',
icon && iconPosition === 'left' && 'pl-0' icon && iconPosition === 'left' && 'pl-0'
)} )}

4
packages/ui/src/Popover.tsx
View file

@ -19,9 +19,9 @@ export const Popover = ({ trigger, children, disabled, className, ...props }: Pr
'flex flex-col', 'flex flex-col',
'z-50 m-2 min-w-[11rem]', 'z-50 m-2 min-w-[11rem]',
'cursor-default select-none rounded-lg', 'cursor-default select-none rounded-lg',
'text-ink text-left text-sm', 'text-left text-sm text-ink',
'bg-app-overlay', 'bg-app-overlay',
'border-app-line border', 'border border-app-line',
'shadow-2xl', 'shadow-2xl',
'animate-in fade-in', 'animate-in fade-in',
className className

2
packages/ui/src/ProgressBar.tsx
View file

@ -16,7 +16,7 @@ export const ProgressBar = memo((props: ProgressBarProps) => {
> >
<ProgressPrimitive.Indicator <ProgressPrimitive.Indicator
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
className="bg-accent h-full duration-300 ease-in-out " className="h-full bg-accent duration-300 ease-in-out "
/> />
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
); );

4
packages/ui/src/RadioGroup.tsx
View file

@ -21,14 +21,14 @@ export const Root = forwardRef<HTMLDivElement, RootProps>(
export interface ItemProps extends RadioGroup.RadioGroupItemProps {} export interface ItemProps extends RadioGroup.RadioGroupItemProps {}
export const Item = ({ children, ...props }: ItemProps) => { export const Item = ({ children, ...props }: ItemProps) => {
return ( return (
<div className="border-app-line bg-app-box/50 flex max-w-sm space-x-2 rounded-md border px-4 py-3"> <div className="flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3">
<RadioGroup.Item <RadioGroup.Item
id={'radio' + props.value} id={'radio' + props.value}
className={cx( className={cx(
'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-transparent', 'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-transparent',
'radix-state-checked:bg-accent', 'radix-state-checked:bg-accent',
'radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900', 'radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900',
'focus-visible:ring-accent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800' 'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
)} )}
{...props} {...props}
> >

12
packages/ui/src/Select.tsx
View file

@ -22,8 +22,8 @@ export function Select(props: PropsWithChildren<SelectProps>) {
> >
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
className={clsx( className={clsx(
'bg-app-box inline-flex items-center border py-0.5 pl-2', 'inline-flex items-center border bg-app-box py-0.5 pl-2',
'border-app-line shadow-app-shade/10 rounded-md shadow outline-none', 'rounded-md border-app-line shadow shadow-app-shade/10 outline-none',
props.className props.className
)} )}
> >
@ -32,12 +32,12 @@ export function Select(props: PropsWithChildren<SelectProps>) {
</span> </span>
<SelectPrimitive.Icon> <SelectPrimitive.Icon>
<ChevronDouble className="text-ink-dull mr-0.5 h-3 w-3" /> <ChevronDouble className="mr-0.5 h-3 w-3 text-ink-dull" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
<SelectPrimitive.Portal className="relative"> <SelectPrimitive.Portal className="relative">
<SelectPrimitive.Content className="bg-app-box border-app-line shadow-app-shade/20 absolute z-50 w-full rounded-md border p-1 shadow-2xl "> <SelectPrimitive.Content className="absolute z-50 w-full rounded-md border border-app-line bg-app-box p-1 shadow-2xl shadow-app-shade/20 ">
<SelectPrimitive.ScrollUpButton className="hidden "> <SelectPrimitive.ScrollUpButton className="hidden ">
<CaretDown /> <CaretDown />
</SelectPrimitive.ScrollUpButton> </SelectPrimitive.ScrollUpButton>
@ -54,8 +54,8 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) {
<SelectPrimitive.Item <SelectPrimitive.Item
className={clsx( className={clsx(
'relative flex items-center px-1 py-0.5 pl-6 pr-4 text-xs', 'relative flex items-center px-1 py-0.5 pl-6 pr-4 text-xs',
'font-sm text-ink cursor-pointer select-none rounded', 'font-sm cursor-pointer select-none rounded text-ink',
'radix-disabled:opacity-50 hover:bg-accent hover:text-white focus:outline-none ' 'hover:bg-accent hover:text-white focus:outline-none radix-disabled:opacity-50 '
)} )}
value={props.value} value={props.value}
> >

6
packages/ui/src/Slider.tsx
View file

@ -6,11 +6,11 @@ export const Slider = (props: SliderPrimitive.SliderProps) => (
{...props} {...props}
className={clsx('relative flex h-6 w-full select-none items-center', props.className)} className={clsx('relative flex h-6 w-full select-none items-center', props.className)}
> >
<SliderPrimitive.Track className="bg-app-box relative h-2 grow rounded-full outline-none"> <SliderPrimitive.Track className="relative h-2 grow rounded-full bg-app-box outline-none">
<SliderPrimitive.Range className="bg-accent absolute h-full rounded-full outline-none" /> <SliderPrimitive.Range className="absolute h-full rounded-full bg-accent outline-none" />
</SliderPrimitive.Track> </SliderPrimitive.Track>
<SliderPrimitive.Thumb <SliderPrimitive.Thumb
className="bg-accent ring-accent/30 z-50 block h-5 w-5 rounded-full font-bold shadow-lg shadow-black/20 outline-none transition focus:ring-4" className="z-50 block h-5 w-5 rounded-full bg-accent font-bold shadow-lg shadow-black/20 outline-none ring-accent/30 transition focus:ring-4"
data-tip="1.0" data-tip="1.0"
/> />
</SliderPrimitive.Root> </SliderPrimitive.Root>

746
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff