From 8458eec95efe329609034ceba8b91ab08dd6b6ff Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Tue, 26 Apr 2022 11:34:36 -0700
Subject: [PATCH 1/3] app UI cleanup

---
 packages/interface/src/App.tsx                              | 2 ++
 packages/interface/src/components/file/Sidebar.tsx          | 4 ++--
 packages/interface/src/screens/Overview.tsx                 | 6 +++---
 packages/interface/src/screens/settings/GeneralSettings.tsx | 5 +----
 .../interface/src/screens/settings/SecuritySettings.tsx     | 4 ++--
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx
index 1781dfe73..7365d695b 100644
--- a/packages/interface/src/App.tsx
+++ b/packages/interface/src/App.tsx
@@ -95,6 +95,8 @@ function SettingsRoutes({ modal = false }) {
           <Route path="media" element={<></>} />
           <Route path="keys" element={<></>} />
           <Route path="tags" element={<></>} />
+          <Route path="sync" element={<></>} />
+          <Route path="contacts" element={<></>} />
         </Route>
       </Routes>
     </SlideUp>
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 0aa0bcac3..a513c45ad 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -115,10 +115,10 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           <Icon component={CirclesFour} />
           Content
         </SidebarLink>
-        <SidebarLink to="debug">
+        {/* <SidebarLink to="debug">
           <Icon component={Code} />
           Debug
-        </SidebarLink>
+        </SidebarLink> */}
         {/* <SidebarLink to="explorer">
           <Icon component={MonitorPlay} />
           Explorer
diff --git a/packages/interface/src/screens/Overview.tsx b/packages/interface/src/screens/Overview.tsx
index a1c741076..300d729f4 100644
--- a/packages/interface/src/screens/Overview.tsx
+++ b/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"
diff --git a/packages/interface/src/screens/settings/GeneralSettings.tsx b/packages/interface/src/screens/settings/GeneralSettings.tsx
index 8fc571dfa..2e6539fec 100644
--- a/packages/interface/src/screens/settings/GeneralSettings.tsx
+++ b/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
diff --git a/packages/interface/src/screens/settings/SecuritySettings.tsx b/packages/interface/src/screens/settings/SecuritySettings.tsx
index b8c17ab1a..2935e22f8 100644
--- a/packages/interface/src/screens/settings/SecuritySettings.tsx
+++ b/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>

From a590dc3c5d1595790e49f5598111e4561031ac18 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Tue, 26 Apr 2022 16:44:08 -0700
Subject: [PATCH 2/3] better app embed loading

---
 apps/web/src/App.tsx                          |   6 +++-
 packages/interface/src/App.tsx                |   2 ++
 .../src/components/device/Device.tsx          |   3 +-
 .../components/primitive/InputContainer.tsx   |   5 ++-
 packages/interface/src/screens/Settings.tsx   |  13 +++----
 .../src/screens/settings/LibrarySettings.tsx  |  31 ++++++++++++++++
 packages/ui/style/style.scss                  |  34 ++++++++++++++++++
 pnpm-lock.yaml                                | Bin 230694 -> 231430 bytes
 8 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 packages/interface/src/screens/settings/LibrarySettings.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index c4a59ffb9..1d73a5341 100644
--- a/apps/web/src/App.tsx
+++ b/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> */}
diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx
index 7365d695b..ab6a15db7 100644
--- a/packages/interface/src/App.tsx
+++ b/packages/interface/src/App.tsx
@@ -28,6 +28,7 @@ import { CoreEvent } from '@sd/core';
 import clsx from 'clsx';
 import './style.scss';
 import { ContentScreen } from './screens/Content';
+import LibrarySettings from './screens/settings/LibrarySettings';
 
 const queryClient = new QueryClient();
 
@@ -92,6 +93,7 @@ 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={<></>} />
diff --git a/packages/interface/src/components/device/Device.tsx b/packages/interface/src/components/device/Device.tsx
index 5390cdaad..14314d6c1 100644
--- a/packages/interface/src/components/device/Device.tsx
+++ b/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}
diff --git a/packages/interface/src/components/primitive/InputContainer.tsx b/packages/interface/src/components/primitive/InputContainer.tsx
index f9fefe2f9..a3428de0f 100644
--- a/packages/interface/src/components/primitive/InputContainer.tsx
+++ b/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}
diff --git a/packages/interface/src/screens/Settings.tsx b/packages/interface/src/screens/Settings.tsx
index 259344d30..ca2b43625 100644
--- a/packages/interface/src/screens/Settings.tsx
+++ b/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
diff --git a/packages/interface/src/screens/settings/LibrarySettings.tsx b/packages/interface/src/screens/settings/LibrarySettings.tsx
new file mode 100644
index 000000000..4eaad1592
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/ui/style/style.scss b/packages/ui/style/style.scss
index 0b93a3fd3..0031571c5 100644
--- a/packages/ui/style/style.scss
+++ b/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;}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a151835c42ca2cf1a85b15ec66d806004e90d6f..d8259d41f782bade6b57b581c7b7086787d3c4aa 100644
GIT binary patch
delta 415
zcmZ41#n(20Z-W5G<QrO!oAo*NF^Qy>WhSTUrlgjnCYM+##2M)U;bg-ek;(eZJe&V>
z-DaFDpd&N+jiTRXR^C^P{HV%}rZ-GwQkra_#yeS|Pj<3_Do3+0f4eY0<91<wrZW|M
z$g1_hirvGig8dBBJsqn`LQ}H~ObbIp^edA*$^$Laa{UX#LJSLvD++>hLh=j?QVpE_
zwbSyvJiLQ^{KLZ&lTGuyEBq_U{0m(4%PmYYvJE}8T`N<Hyb8>N9Va_ZQdd{EvsEzA
zGc?gNQ0GzrgQC>L<PzPK{9G#qgyiH8B|6g|Ok+~zQ&1>P)GbIXDo!oZ%_^RrP|PGf
zeZfQ~w(a-YnLg~~LdZ@3kieu9YG6>Q?--F$VW1yeoabq3m==<3P~;Poo0yjA?(b`&
z@2{O#X=o5oY@Vi_rJrO`pdS@!Xjoa|n_iU{k?kLrZ{i-P?Oh(|ZW<cslkMZ4Syb%k
R95nrYIHSb&vyRM>&H#ETiBkXo

delta 82
zcmV-Y0ImOqkPfDb4zLgile{Y*lZXu<vvCNX0+)cp0tS;W0}PW8AO^EZ3)KOWyekls
o5G@(Ah7IfilVBDkgVhg*)eix;)ei#9c()sh0`IxEu0#V^L#x^z1poj5


From 7ad05fe10a198e5222d50dc714891d9971e3e515 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Tue, 26 Apr 2022 18:14:39 -0700
Subject: [PATCH 3/3] interfont

---
 apps/web/package.json                         |   1 +
 packages/interface/package.json               |   1 +
 packages/interface/src/App.tsx                |   2 ++
 .../interface/src/components/file/Sidebar.tsx |   8 ++++----
 packages/interface/src/style.scss             |   2 +-
 packages/ui/style/tailwind.js                 |   7 +++++++
 pnpm-lock.yaml                                | Bin 231430 -> 231788 bytes
 7 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 83170213f..3634640c7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/inter": "^4.5.7",
     "@sd/client": "*",
     "@sd/core": "*",
     "@sd/interface": "*",
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 06541872e..74ca74008 100644
--- a/packages/interface/package.json
+++ b/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",
diff --git a/packages/interface/src/App.tsx b/packages/interface/src/App.tsx
index ab6a15db7..fff7da3f2 100644
--- a/packages/interface/src/App.tsx
+++ b/packages/interface/src/App.tsx
@@ -30,6 +30,8 @@ import './style.scss';
 import { ContentScreen } from './screens/Content';
 import LibrarySettings from './screens/settings/LibrarySettings';
 
+import '@fontsource/inter/variable.css';
+
 const queryClient = new QueryClient();
 
 export const AppPropsContext = React.createContext<AppProps | null>(null);
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index a513c45ad..e6d28a73f 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/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 
@@ -115,10 +115,10 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           <Icon component={CirclesFour} />
           Content
         </SidebarLink>
-        {/* <SidebarLink to="debug">
+        <SidebarLink to="debug">
           <Icon component={Code} />
           Debug
-        </SidebarLink> */}
+        </SidebarLink>
         {/* <SidebarLink to="explorer">
           <Icon component={MonitorPlay} />
           Explorer
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
index 57cb82988..ad0bfca15 100644
--- a/packages/interface/src/style.scss
+++ b/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 */
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index 83582a0df..b61785400 100644
--- a/packages/ui/style/tailwind.js
+++ b/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',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d8259d41f782bade6b57b581c7b7086787d3c4aa..a27d152b931004972ce13b6edc23884f6508a3a2 100644
GIT binary patch
delta 370
zcmZph!1rbn-v&Mo$+Y~ulH&Z*qU2Ql%)FA+B6TZ;I1@cnJ@d)^+CGyzcojAma;#>N
zz@iMMN@lY@?<_Vv22B(d-F#K}C?ifo7Ect#ryt~ySJMP1^D47%ej~kv4W~IkC(BIM
z=Z%~!(9XY^TluuF2)eWNfsUTM&{;jy$TZuyB%`z-(cjf6wW2gsJIgWKy)ZM?J0Phv
zBe>L2yErq?rM$o})5$NRFfbs~%QDczrK~t2J>NOqIVsAd*geP9BGI`#DmOUC#j7YF
m#mmDld-?}PM#<)D1?|@g7`I<5U{d)tx$&~s_JC~WZ889>27=B2

delta 78
zcmV-U0I~n<k`9KD4zLaglQ|qivvUZ`1d~}KY_rP^K?ae@46`~E#Q~EY1go>l7EA@R
kIUN56vsoiXPJ>8the&b(w@7jVB>I;KZUb7kx@-fo9F0&NRR910