Merge branch 'landing-preview'

apps/web/package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/inter": "^4.5.7",
     "@sd/client": "*",
     "@sd/core": "*",
     "@sd/interface": "*",

apps/web/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import SpacedriveInterface from '@sd/interface';
 import { ClientCommand, ClientQuery, CoreEvent } from '@sd/core';
@@ -64,6 +64,10 @@ class Transport extends BaseTransport {
 }
 
 function App() {
+  useEffect(() => {
+    window.parent.postMessage('spacedrive-hello', '*');
+  }, []);
+
   return (
     <div className="App">
       {/* <header className="App-header"></header> */}

packages/interface/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",
+    "@fontsource/inter": "^4.5.7",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
     "@radix-ui/react-dialog": "^0.1.7",

packages/interface/src/App.tsx

@@ -28,6 +28,9 @@ import { CoreEvent } from '@sd/core';
 import clsx from 'clsx';
 import './style.scss';
 import { ContentScreen } from './screens/Content';
+import LibrarySettings from './screens/settings/LibrarySettings';
+
+import '@fontsource/inter/variable.css';
 
 const queryClient = new QueryClient();
 
@@ -92,9 +95,12 @@ function SettingsRoutes({ modal = false }) {
           <Route path="security" element={<SecuritySettings />} />
           <Route path="appearance" element={<></>} />
           <Route path="locations" element={<LocationSettings />} />
+          <Route path="library" element={<LibrarySettings />} />
           <Route path="media" element={<></>} />
           <Route path="keys" element={<></>} />
           <Route path="tags" element={<></>} />
+          <Route path="sync" element={<></>} />
+          <Route path="contacts" element={<></>} />
         </Route>
       </Routes>
     </SlideUp>

packages/interface/src/components/device/Device.tsx

@@ -78,8 +78,9 @@ export function Device(props: DeviceProps) {
       {/* <hr className="border-gray-700" />
       <hr className="border-gray-550" /> */}
       <div className="px-4 pb-3 mt-3">
-        {props.locations.map((location) => (
+        {props.locations.map((location, key) => (
           <FileItem
+            key={key}
             selected={selectedFile == location.name}
             onClick={() => handleSelect(location.name)}
             fileName={location.name}

packages/interface/src/components/file/Sidebar.tsx

@@ -21,7 +21,7 @@ export const SidebarLink = (props: NavLinkProps & { children: React.ReactNode })
     {({ isActive }) => (
       <span
         className={clsx(
-          'max-w mb-[2px] text-gray-550 dark:text-gray-150 rounded px-2 py-1 flex flex-row flex-grow items-center hover:bg-gray-100 dark:hover:bg-gray-600 text-sm',
+          'max-w mb-[2px] text-gray-550 dark:text-gray-150 rounded px-2 py-1 flex flex-row flex-grow items-center font-medium hover:bg-gray-100 dark:hover:bg-gray-600 text-sm',
           { '!bg-primary !text-white hover:bg-primary dark:hover:bg-primary': isActive },
           props.className
         )}
@@ -81,7 +81,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
       <Dropdown
         buttonProps={{
           justifyLeft: true,
-          className: `flex w-full text-left max-w-full mb-1 mt-1 shadow-xs rounded 
+          className: `flex w-full text-left max-w-full mb-1 mt-1 -mr-0.5 shadow-xs rounded 
           !bg-gray-50 
           border-gray-150 
           hover:!bg-gray-1000 

packages/interface/src/components/primitive/InputContainer.tsx

@@ -12,7 +12,10 @@ interface InputContainerProps extends DefaultProps {
 export const InputContainer: React.FC<InputContainerProps> = (props) => {
   return (
     <div className="flex flex-row">
-      <div className={clsx('flex flex-col w-full pb-6', props.className)} {...props}>
+      <div
+        className={clsx('flex flex-col w-full', !props.mini && 'pb-6', props.className)}
+        {...props}
+      >
         <h3 className="mb-1 font-medium text-gray-700 dark:text-gray-100">{props.title}</h3>
         {!!props.description && <p className="mb-2 text-sm text-gray-400 ">{props.description}</p>}
         {!props.mini && props.children}

packages/interface/src/screens/Overview.tsx

@@ -33,8 +33,8 @@ export const OverviewScreen: React.FC<{}> = (props) => {
     <div className="flex flex-col w-full h-screen overflow-x-hidden overflow-y-scroll no-scrollbar">
       <div data-tauri-drag-region className="flex flex-shrink-0 w-full h-7" />
       <div className="flex flex-col w-full h-screen px-3">
-        <div className="flex items-center w-full ml-4">
-          <div className="flex flex-wrap p-2 space-x-6">
+        <div className="flex items-center w-full">
+          <div className="flex flex-wrap pb-4 space-x-6">
             <StatItem name="Total capacity" value="26.5" unit="TB" />
             <StatItem name="Index size" value="103" unit="MB" />
             <StatItem name="Preview media" value="23.5" unit="GB" />
@@ -43,7 +43,7 @@ export const OverviewScreen: React.FC<{}> = (props) => {
             <StatItem name="Total backed up" value="25.3" unit="TB" />
           </div>
         </div>
-        <div className="mt-5" />
+        {/* <div className="mt-5" /> */}
         <div className="flex flex-col pb-4 space-y-4">
           <Device
             name="James' MBP"

packages/interface/src/screens/Settings.tsx

@@ -6,11 +6,11 @@ import {
   PhotographIcon,
   TagIcon,
   UsersIcon
-} from '@heroicons/react/solid';
+} from '@heroicons/react/outline';
 import React from 'react';
 // import { dummyIFile, FileList } from '../components/file/FileList';
 import { SidebarLink } from '../components/file/Sidebar';
-import { HardDrive, PaintBrush } from 'phosphor-react';
+import { Book, Database, HardDrive, PaintBrush } from 'phosphor-react';
 import clsx from 'clsx';
 import { Outlet } from 'react-router-dom';
 
@@ -47,14 +47,15 @@ export const SettingsScreen: React.FC<{}> = () => {
         </SidebarLink>
 
         <Heading>Library</Heading>
+        <SidebarLink to="/settings/library">
+          <Icon component={Database} />
+          Database
+        </SidebarLink>
         <SidebarLink to="/settings/locations">
           <Icon component={HardDrive} />
           Locations
         </SidebarLink>
-        <SidebarLink to="/settings/media">
-          <Icon component={PhotographIcon} />
-          Media
-        </SidebarLink>
+
         <SidebarLink to="/settings/keys">
           <Icon component={KeyIcon} />
           Keys

packages/interface/src/screens/settings/GeneralSettings.tsx

@@ -48,10 +48,7 @@ export default function GeneralSettings() {
         </div>
       </InputContainer> */}
 
-      <InputContainer
-        title="Locations"
-        description="Local cache storage for media previews and thumbnails."
-      >
+      <InputContainer title="Volumes" description="A list of volumes running on this device.">
         <div className="flex flex-row space-x-2">
           <div className="flex flex-grow">
             <Listbox

packages/interface/src/screens/settings/LibrarySettings.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button } from '@sd/ui';
+import { InputContainer } from '../../components/primitive/InputContainer';
+import { Toggle } from '../../components/primitive';
+
+type LibrarySecurity = 'public' | 'password' | 'vault';
+
+export default function LibrarySettings() {
+  // const locations = useBridgeQuery("SysGetLocation")
+
+  return (
+    <div className="flex flex-col flex-grow max-w-4xl space-y-4">
+      {/*<Button size="sm">Add Location</Button>*/}
+      <div className="mt-3 mb-3">
+        <h1 className="text-2xl font-bold">Library database</h1>
+        <p className="mt-1 text-sm text-gray-400">
+          The database contains all library data and file metadata.
+        </p>
+      </div>
+      <InputContainer
+        mini
+        title="Encrypt on cloud"
+        description="Enable if library contains sensitive data and should not be synced to the cloud without full encryption."
+      >
+        <div className="flex items-center h-full">
+          <Toggle initialState={true} size={'sm'} />
+        </div>
+      </InputContainer>
+    </div>
+  );
+}

packages/interface/src/screens/settings/SecuritySettings.tsx

@@ -6,8 +6,8 @@ export default function SecuritySettings() {
   return (
     <div className="space-y-4">
       <InputContainer
-        title="Something about a vault"
-        description="Local cache storage for media previews and thumbnails."
+        title="Vault"
+        description="You'll need to set a passphrase to enable the vault."
       >
         <div className="flex flex-row">
           <Button variant="primary">Enable Vault</Button>

packages/interface/src/style.scss

@@ -3,7 +3,7 @@ button {
   @apply cursor-default;
 }
 
-
+body { font-family: "InterVariable", sans-serif; }
 
 .no-scrollbar {
   -ms-overflow-style: none; /* for Internet Explorer, Edge */

packages/ui/style/style.scss

@@ -22,4 +22,38 @@
   background-image: url('/app.png');
   background-size: contain;
   background-repeat: no-repeat;
+  background-position: center;
+}
+
+
+.fade-in-image {
+  animation: fadeIn 1s;
+  -webkit-animation: fadeIn 1s;
+  -moz-animation: fadeIn 1s;
+  -o-animation: fadeIn 1s;
+  -ms-animation: fadeIn 1s;
+}
+@keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
 }

packages/ui/style/tailwind.js

@@ -11,6 +11,13 @@ module.exports = function (app, options) {
     darkMode: app == 'landing' ? 'class' : 'class',
     mode: 'jit',
     theme: {
+      // fontFamily: {
+      //   sans: ['Inter', 'ui-sans-serif', 'system-ui'],
+      //   serif: ['Inter', 'ui-serif', 'Georgia'],
+      //   mono: ['ui-monospace', 'SFMono-Regular'],
+      //   display: ['Inter'],
+      //   body: ['"Inter"']
+      // },
       fontSize: {
         'tiny': '.65rem',
         'xs': '.75rem',