colors, uuid, config

apps/desktop/src-tauri/tauri.conf.json

@@ -17,9 +17,9 @@
       "icon": ["icons/icon.icns"],
       "resources": [],
       "externalBin": [],
-      "copyright": "NerdHouse, Inc",
-      "shortDescription": "",
-      "longDescription": "",
+      "copyright": "Jamie Pine",
+      "shortDescription": "Your personal virtual cloud.",
+      "longDescription": "SpaceDrive is an open source virtual filesystem, a personal cloud powered by your everyday devices. Feature-rich benefits of the cloud, only its owned and hosted by you with security, privacy and ownership as a foundation. SpaceDrive makes it possible to create a limitless directory of your digital life that will stand the test of time.",
       "deb": {
         "depends": [],
         "useBootstrapper": false
@@ -52,8 +52,8 @@
     "windows": [
       {
         "title": "SpaceDrive",
-        "width": 1100,
-        "height": 600,
+        "width": 1300,
+        "height": 900,
         "resizable": true,
         "fullscreen": false,
         "alwaysOnTop": false,

apps/desktop/src/components/file/Sidebar.tsx

@@ -1,4 +1,5 @@
-import { CogIcon, PlusIcon, ServerIcon } from '@heroicons/react/solid';
+import { DownloadIcon, LockClosedIcon } from '@heroicons/react/outline';
+import { CogIcon, EyeOffIcon, PlusIcon, ServerIcon } from '@heroicons/react/solid';
 import { appWindow } from '@tauri-apps/api/window';
 import clsx from 'clsx';
 import { CirclesFour, EjectSimple, MonitorPlay, Planet } from 'phosphor-react';
@@ -78,7 +79,9 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           [{ name: `Jamie's Library`, selected: true }, { name: 'Subto' }],
           [
             { name: 'Library Settings', icon: CogIcon },
-            { name: 'Add Library', icon: PlusIcon }
+            { name: 'Add Library', icon: PlusIcon },
+            { name: 'Lock', icon: LockClosedIcon },
+            { name: 'Hide', icon: EyeOffIcon }
           ]
         ]}
       />
@@ -125,7 +128,13 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
       <div className="mb-2">
         <NavLink to="/settings/general">
           {({ isActive }) => (
-            <Button variant={isActive ? 'default' : 'default'} className="px-[4px]">
+            <Button
+              variant={isActive ? 'default' : 'default'}
+              className={clsx(
+                'px-[4px]'
+                // isActive && '!bg-gray-550'
+              )}
+            >
               <CogIcon className="w-5 h-5" />
             </Button>
           )}

apps/desktop/src/components/primitive/Dropdown.tsx

@@ -44,7 +44,7 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute left-0 w-44 mt-1 origin-top-left bg-white dark:bg-gray-950 divide-y divide-gray-100 dark:divide-gray-700 border dark:border-gray-700 rounded-md shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+          <Menu.Items className="absolute left-0 z-50 mt-1 origin-top-left bg-white border divide-y divide-gray-100 rounded shadow-xl w-44 dark:bg-gray-550 dark:divide-gray-500 dark:border-gray-600 ring-1 ring-black ring-opacity-5 focus:outline-none">
             {props.items.map((item, index) => (
               <div key={index} className="px-1 py-1">
                 {item.map((button, index) => (
@@ -52,11 +52,10 @@ export const Dropdown: React.FC<DropdownProps> = (props) => {
                     {({ active }) => (
                       <button
                         className={clsx(
-                          'text-sm group flex rounded-md items-center w-full px-2 py-1 mb-[2px] dark:hover:bg-gray-750',
+                          'text-sm group flex rounded items-center w-full px-2 py-1 mb-[2px] dark:hover:bg-gray-500',
                           {
-                            'bg-gray-300 dark:bg-gray-600 dark:hover:!bg-gray-750':
-                              active || button.selected,
-                            'text-gray-900 dark:text-gray-200': !active
+                            'bg-gray-300 dark:!bg-gray-500 dark:hover:bg-gray-500': button.selected
+                            // 'text-gray-900 dark:text-gray-200': !active
                           }
                         )}
                       >

apps/desktop/src/screens/Overview.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
+import ReactJson from 'react-json-view';
 import FileItem from '../components/file/FileItem';
+import { useAppState } from '../store/global';
 
 interface StatItemProps {
   name: string;
@@ -21,6 +23,7 @@ const StatItem: React.FC<StatItemProps> = (props) => {
 
 export const OverviewScreen: React.FC<{}> = (props) => {
   const [selectedFile, setSelectedFile] = useState<null | string>(null);
+  const app = useAppState();
 
   function handleSelect(key: string) {
     // if (selectedFile === key) setSelectedFile(null);
@@ -116,6 +119,23 @@ export const OverviewScreen: React.FC<{}> = (props) => {
           folder
         />
       </div>
+      <div className="mt-10 select-text">
+        <ReactJson
+          // collapsed
+          enableClipboard={false}
+          displayDataTypes={false}
+          theme="ocean"
+          src={app.config}
+          style={{
+            padding: 20,
+            borderRadius: 5,
+            backgroundColor: '#101016',
+            border: 1,
+            borderColor: '#1E1E27',
+            borderStyle: 'solid'
+          }}
+        />
+      </div>
     </div>
   );
 };

apps/desktop/src/screens/Settings.tsx

@@ -31,7 +31,7 @@ const Heading: React.FC<{ className?: string }> = ({ children, className }) => (
 export const SettingsScreen: React.FC<{}> = () => {
   return (
     <div className="flex flex-row w-full">
-      <div className="h-full p-5 border-r w-60 border-gray-550">
+      <div className="h-full p-5 border-r border-gray-100 w-60 dark:border-gray-550">
         <Heading className="mt-0">Client</Heading>
         <SidebarLink to="/settings/general">
           <Icon component={CogIcon} />
@@ -74,7 +74,7 @@ export const SettingsScreen: React.FC<{}> = () => {
           Contacts
         </SidebarLink>
       </div>
-      <div className="flex flex-grow-0 w-full h-full max-h-screen overflow-y-scroll bg-gray-600">
+      <div className="flex flex-grow-0 w-full h-full max-h-screen overflow-y-scroll">
         <div className="px-12 py-5">
           <Outlet />
           <div className="block h-20" />

apps/desktop/src/screens/settings/GeneralSettings.tsx

@@ -21,21 +21,12 @@ export default function GeneralSettings() {
 
   return (
     <div className="flex flex-col max-w-2xl space-y-4">
-      <div className="mb-6">
+      <div className="mt-3 mb-6">
         <h1 className="text-2xl font-bold">General Settings</h1>
         <p className="mt-1 text-sm text-gray-400">Basic settings related to this client</p>
-        <hr className="mt-4 border-gray-550" />
-      </div>
-      <div className="select-text">
-        <ReactJson
-          collapsed
-          enableClipboard={false}
-          displayDataTypes={false}
-          theme="ocean"
-          src={app.config}
-          style={{ padding: 20, borderRadius: 5 }}
-        />
+        {/* <hr className="mt-4 border-gray-550" /> */}
       </div>
+
       <InputContainer
         title="Quick scan directory"
         description="The directory for which this application will perform a detailed scan of the contents and sub directories"
@@ -62,6 +53,25 @@ export default function GeneralSettings() {
           </Button>
         </div>
       </InputContainer>
+      <InputContainer
+        title="Locations"
+        description="Local cache storage for media previews and thumbnails."
+      >
+        <div className="flex flex-row space-x-2">
+          <div className="flex flex-grow">
+            <Listbox
+              options={locations.map((location) => ({
+                key: location.name,
+                option: location.name,
+                description: location.path
+              }))}
+            />
+          </div>
+          <Button className="mb-3" variant="primary">
+            Add Location
+          </Button>
+        </div>
+      </InputContainer>
       <InputContainer
         title="Media cache directory"
         description="Local cache storage for media previews and thumbnails."
@@ -83,25 +93,6 @@ export default function GeneralSettings() {
           {/*<Input className="flex-grow" value="jeff" placeholder="/users/jamie/Desktop" />*/}
         </div>
       </InputContainer>
-      <InputContainer
-        title="Something about a vault"
-        description="Local cache storage for media previews and thumbnails."
-      >
-        <div className="flex flex-row space-x-2">
-          <div className="flex flex-grow">
-            <Listbox
-              options={locations.map((location) => ({
-                key: location.name,
-                option: location.name,
-                description: location.path
-              }))}
-            />
-          </div>
-          <Button className="mb-3" variant="primary">
-            Add Location
-          </Button>
-        </div>
-      </InputContainer>
 
       {/* <div className="">{JSON.stringify({ config })}</div> */}
     </div>

packages/core/lib/library/init.rs

@@ -22,6 +22,9 @@ pub async fn init_library() -> Result<()> {
         };
 
         client_config.libraries.push(library);
+
+        client_config.primary_library_id = uuid;
+
         client_config.save();
     }
 

packages/core/lib/state/client.rs

@@ -4,6 +4,7 @@ use serde::{Deserialize, Serialize};
 use std::fs;
 use std::io::{BufReader, Write};
 use std::sync::RwLock;
+use uuid::Uuid;
 
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct ClientState {
@@ -63,8 +64,10 @@ pub fn get() -> Result<ClientState> {
 
 impl ClientState {
     pub fn new(data_path: &str, client_name: &str) -> Result<Self> {
+        let uuid = Uuid::new_v4().to_string();
         // create struct and assign defaults
         let config = Self {
+            client_id: uuid,
             data_path: data_path.to_string(),
             client_name: client_name.to_string(),
             ..Default::default()