[KAN-2] UI Redesign

.archive/.env

@@ -0,0 +1 @@
+INTERNAL_SERVICE_PATH = "/Users/kyletennison/Avarok/citadel-internal-service"

.archive/.gitignore

@@ -0,0 +1,41 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules/
+out/
+dist/
+dist-ssr
+*.local
+target/
+debug/
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb
+
+/.next/
+./next-env.d.ts
+# Editor directories and files
+.vscode/
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+src-tauri/gen
+src-tauri/target
+package-lock.json
+yarn.lock
+src-tauri/Cargo.lock
+bun.lockb

.archive/README.md

@@ -0,0 +1,27 @@
+# Citadel Workspace
+
+When it comes to virtual workspace security, don't slack.
+
+Citadel Workspace is a highly cryptographically post-quantum secure work environment for individuals, businesses, and government. By using The Citadel Protocol, a protocol far more secure and adjustable than Signal and other projects, Citadel Workspace technologically stands out. Whether used for casual messaging and/or transferring highly sensitive material (whether through messages or file transfers), Citadel Workspace allows additional layers of encryption to be seamlessly added. Additionally, Citadel Workspaces allows for optional per-message re-keying, the option of pre-shared keys, and much, much more.
+
+All code is free and 100% open-source.
+
+### Manual Install
+
+Install `cargo install create-tauri-app`
+
+Run `cargo install tauri-cli --version 2.0.0-beta.1`
+
+Install Bun JS runtime dependencies `curl -fsSL https://bun.sh/install | bash`
+
+Install JS dependencies `bun install`
+
+### Running
+
+<i>Running the app from vscode's terminal can lead to an error, try running from your system terminal.</i>
+
+Run the desktop app with `cargo tauri dev`
+
+Run the web app with `bun run dev`
+
+Run Storybook server with `bun run sb`

components.json → .archive/components.json

@@ -12,4 +12,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components/common/Layout/Layout.tsx → .archive/components/common/Layout/Layout.tsx

@@ -30,7 +30,7 @@ export const Layout = ({ children }: Props) => {
   const [addServerOpen, setAddServerOpen] = useState(false);
   const [peerToConnect, setPeerToConnect] = useState('');
   const currentUsedSessionCid: string = useAppSelector(
-    (state) => state.context.sessions.current_used_session_server
+    (state) => state.context.sessions.current_used_session_server,
   );
 
   const [navigation, _] = useState([
@@ -43,11 +43,11 @@ export const Layout = ({ children }: Props) => {
   ]);
 
   const current_sessions = useAppSelector(
-    (state) => state.context.sessions.current_sessions
+    (state) => state.context.sessions.current_sessions,
   );
 
   const connectedPeers = useAppSelector(
-    (state) => state.context.sessions.connectedPeers
+    (state) => state.context.sessions.connectedPeers,
   );
 
   const peers = current_sessions[currentUsedSessionCid] ?? {};
@@ -138,7 +138,7 @@ export const Layout = ({ children }: Props) => {
                                     item.current
                                       ? 'bg-gray-800 text-white'
                                       : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                                   )}
                                 >
                                   <item.icon
@@ -164,7 +164,7 @@ export const Layout = ({ children }: Props) => {
                                     team.current
                                       ? 'bg-gray-800 text-white'
                                       : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                                   )}
                                 >
                                   <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">
@@ -198,7 +198,7 @@ export const Layout = ({ children }: Props) => {
                                     key
                                       ? 'bg-gray-800 text-white'
                                       : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                    'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                                   )}
                                 >
                                   <span className="relative inline-block">
@@ -260,7 +260,7 @@ export const Layout = ({ children }: Props) => {
                           <Link
                             href={`/peer/${peer}`}
                             className={classNames(
-                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                             )}
                           >
                             <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">
@@ -295,7 +295,7 @@ export const Layout = ({ children }: Props) => {
                     >
                       <span
                         className={clsx(
-                          peersTypeSelected === 'All Peers' && 'text-blue-800'
+                          peersTypeSelected === 'All Peers' && 'text-blue-800',
                         )}
                       >
                         All Peers
@@ -308,7 +308,7 @@ export const Layout = ({ children }: Props) => {
                     >
                       <span
                         className={clsx(
-                          peersTypeSelected === 'Registered' && 'text-blue-800'
+                          peersTypeSelected === 'Registered' && 'text-blue-800',
                         )}
                       >
                         Registered
@@ -336,7 +336,7 @@ export const Layout = ({ children }: Props) => {
                               key
                                 ? 'bg-gray-800 text-white'
                                 : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                             )}
                           >
                             <span className="relative inline-block">
@@ -371,7 +371,7 @@ export const Layout = ({ children }: Props) => {
                                 key
                                   ? 'bg-gray-800 text-white'
                                   : 'text-gray-400 hover:text-white hover:bg-gray-800',
-                                'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
+                                'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                               )}
                             >
                               <span className="relative inline-block">

components/ui/workspacesBar/WorkspaceBar.tsx → .archive/components/ui/workspacesBar/WorkspaceBar.tsx

@@ -14,15 +14,15 @@ function WorkspaceBar({
   setAddServerOpener: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const sessions = useAppSelector(
-    (state: RootState) => state.context.sessions.current_sessions
+    (state: RootState) => state.context.sessions.current_sessions,
   );
 
   const currentSessionInUse = useAppSelector(
-    (state) => state.context.sessions.current_used_session_server
+    (state) => state.context.sessions.current_used_session_server,
   );
 
   const currentNotification = useAppSelector(
-    (state) => state.notificationsContext
+    (state) => state.notificationsContext,
   );
 
   const dispatch = useAppDispatch();
@@ -48,7 +48,7 @@ function WorkspaceBar({
               key={key}
               className={clsx(
                 currentSessionInUse === key && 'bg-slate-300',
-                'rounded'
+                'rounded',
               )}
             >
               <Link
@@ -149,7 +149,7 @@ function WorkspaceBar({
                                     deleteFromNotificationsContext({
                                       cid: currentSessionInUse,
                                       peerCid: notification.peer_cid.value,
-                                    })
+                                    }),
                                   );
                                 }}
                                 className="inline-flex justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800"
@@ -164,7 +164,7 @@ function WorkspaceBar({
                                     deleteFromNotificationsContext({
                                       cid: currentSessionInUse,
                                       peerCid: notification.peer_cid.value,
-                                    })
+                                    }),
                                   );
                                 }}
                                 className="inline-flex cursor-pointer justify-center w-full px-2 py-1.5 text-xs font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700"
@@ -175,7 +175,7 @@ function WorkspaceBar({
                           </div>
                         </div>
                       );
-                    }
+                    },
                   )}
               </div>
             </div>

hooks/c2s/useC2SConnect.ts → .archive/hooks/c2s/useC2SConnect.ts

@@ -11,21 +11,21 @@ export type RegisterAndConnectInput = {
 export const serverConnect = async (input: RegisterAndConnectInput) => {
   const response = invoke<RegisterAndConnectInput, string>(
     'register',
-    input
+    input,
   ).then((response) => {
     store.dispatch(
       addToContext({
         req_id: response,
         context_type: 'RegisterAndConnect',
-      })
+      }),
     );
     setTimeout(() => {
       invoke('get_sessions').then((req_id) => {
         store.dispatch(
           addToContext({
             req_id,
             context_type: 'GetSession',
-          })
+          }),
         );
       });
     }, 1000);

hooks/c2s/useDisconnect.ts → .archive/hooks/c2s/useDisconnect.ts

@@ -6,14 +6,14 @@ export type DisconnectInput = {
   cid: string;
 };
 export default async function useDisconnect(
-  input: DisconnectInput
+  input: DisconnectInput,
 ): Promise<string> {
   const response = await invoke<{ cid: string }, string>('disconnect', input);
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'Disconnect',
-    })
+    }),
   );
 
   return response;

hooks/c2s/useListAllPeers.ts → .archive/hooks/c2s/useListAllPeers.ts

@@ -6,17 +6,17 @@ export type ListAllPeersInput = {
   cid: string;
 };
 export const listAllPeers = async (
-  input: ListAllPeersInput
+  input: ListAllPeersInput,
 ): Promise<string> => {
   const response = await invoke<ListAllPeersInput, string>(
     'list_all_peers',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'ListAllPeers',
-    })
+    }),
   );
 
   return response;

hooks/localDB/useLocalDBClearAllKV.ts → .archive/hooks/localDB/useLocalDBClearAllKV.ts

@@ -8,17 +8,17 @@ export type LocalDBClearAllKVInput = {
 };
 
 export const useLocalDBClearAllKV = async (
-  input: LocalDBClearAllKVInput
+  input: LocalDBClearAllKVInput,
 ): Promise<string> => {
   const response = await invoke<LocalDBClearAllKVInput, string>(
     'local_db_clear_all_kv',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'LocalDBClearAllKV',
-    })
+    }),
   );
 
   return response;

hooks/localDB/useLocalDBDeleteKV.ts → .archive/hooks/localDB/useLocalDBDeleteKV.ts

@@ -9,17 +9,17 @@ export type LocalDBDeleteKVInput = {
 };
 
 export const useLocalDBDeleteKV = async (
-  input: LocalDBDeleteKVInput
+  input: LocalDBDeleteKVInput,
 ): Promise<string> => {
   const response = await invoke<LocalDBDeleteKVInput, string>(
     'local_db_delete_kv',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'LocalDBDeleteKV',
-    })
+    }),
   );
 
   return response;

hooks/localDB/useLocalDBGetAllKV.ts → .archive/hooks/localDB/useLocalDBGetAllKV.ts

@@ -8,17 +8,17 @@ export type LocalDBGetAllKVInput = {
 };
 
 export const useLocalDBGetAllKV = async (
-  input: LocalDBGetAllKVInput
+  input: LocalDBGetAllKVInput,
 ): Promise<string> => {
   const response = await invoke<LocalDBGetAllKVInput, string>(
     'local_db_get_all_kv',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'LocalDBGetAllKV',
-    })
+    }),
   );
 
   return response;

hooks/localDB/useLocalDBGetKV.ts → .archive/hooks/localDB/useLocalDBGetKV.ts

@@ -9,17 +9,17 @@ export type LocalDBGetKVInput = {
 };
 
 export const useLocalDBGetKV = async (
-  input: LocalDBGetKVInput
+  input: LocalDBGetKVInput,
 ): Promise<string> => {
   const response = await invoke<LocalDBGetKVInput, string>(
     'local_db_get_kv',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'LocalDBGetKV',
-    })
+    }),
   );
 
   return response;

hooks/localDB/useLocalDBSetKV.ts → .archive/hooks/localDB/useLocalDBSetKV.ts

@@ -10,17 +10,17 @@ export type LocalDBSetKVInput = {
 };
 
 export const useLocalDBSetKV = async (
-  input: LocalDBSetKVInput
+  input: LocalDBSetKVInput,
 ): Promise<string> => {
   const response = await invoke<LocalDBSetKVInput, string>(
     'local_db_set_kv',
-    input
+    input,
   );
   store.dispatch(
     addToContext({
       req_id: response,
       context_type: 'LocalDBSetKV',
-    })
+    }),
   );
 
   return response;