Update plugins<tab> menu

spotter-application · Dec 16, 2021 · e2c11e3 · e2c11e3
1 parent b8eeabe
commit e2c11e3
Show file tree

Hide file tree

Showing 29 changed files with 351 additions and 245 deletions.
diff --git a/apps/spotter/src/components/queryPanel/queryPanel.tsx b/apps/spotter/src/components/queryPanel/queryPanel.tsx
@@ -16,6 +16,105 @@ import { PluginOnQueryOption, PluginRegistryOption, SpotterThemeColors } from '.
 import { Subscription } from 'rxjs';
 import { Option } from '@spotter-app/core';
 
+export const QueryPanelLoading: FC<{
+  doing: string | null,
+  colors?: SpotterThemeColors,
+}> = ({ doing, colors }) => {
+  return <View style={{
+    opacity: 0.75,
+    position: 'absolute',
+    right: 3,
+    top: -8,
+    zIndex: 100,
+    display: 'flex',
+    flexWrap: 'nowrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }}>
+    {doing &&
+      <Text style={{
+        fontSize: 14,
+        color: colors?.text,
+        paddingRight: 30,
+      }}>{doing}</Text>
+    }
+    <ActivityIndicator
+      size="small"
+      color={colors?.text}
+      style={{
+        position: 'absolute',
+        right: 3,
+        top: -1,
+      }}
+    />
+  </View>
+}
+
+export const QueryPanelSystemOption: FC<{
+  systemOption: Option,
+  colors?: SpotterThemeColors,
+}> = ({ systemOption, colors }) => {
+  return <TouchableOpacity style={{
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 10,
+    backgroundColor: colors?.hoveredOptionBackground,
+  }} onPress={systemOption.onSubmit}>
+    <Text style={{
+      fontSize: 12,
+    }}>{systemOption.title}</Text>
+    <View style={{
+      marginTop: 2,
+      margin: 'auto',
+      alignItems: 'flex-end',
+    }}>
+      <Text style={{
+        fontSize: 9,
+        opacity: 0.5,
+      }}>{systemOption.subtitle}</Text>
+    </View>
+
+    <View style={{
+      position: 'absolute',
+      left: 4,
+      bottom: 3.2,
+      backgroundColor: colors?.background,
+      opacity: 0.3,
+      padding: 1,
+      paddingLeft: 4,
+      paddingRight: 4,
+      borderRadius: 5,
+    }}>
+      <Text style={{
+        fontSize: 8,
+        color: colors?.text,
+      }}>cmd + u</Text>
+    </View>
+  </TouchableOpacity>
+}
+
+export const QueryPanelSelectedOption: FC<{
+  selectedOption: PluginOnQueryOption | PluginRegistryOption
+  colors?: SpotterThemeColors,
+}> = ({ colors, selectedOption }) => {
+  return <View style={{
+    ...styles.selectedOptionContainer,
+    backgroundColor: colors?.activeOptionBackground,
+  }}>
+    <OptionIcon
+      style={{
+        paddingRight: 3,
+        height: 25,
+      }}
+      icon={selectedOption.icon}
+    ></OptionIcon>
+    <Text style={{
+      fontSize: 16,
+      color: colors?.activeOptionText
+    }}>{selectedOption.title}</Text>
+  </View>
+}
+
 export const QueryPanel: FC<{}> = () => {
 
   const {
@@ -79,42 +178,29 @@ export const QueryPanel: FC<{}> = () => {
   }, []);
 
   const displayOptions = !!options.length || displayedOptionsForCurrentWorkflow;
+  const placeholderValue = placeholder?.length
+    ? placeholder
+    : selectedOption
+      ? `${selectedOption.title} search...`
+      : 'Spotter search...';
+
   return <>
     <SafeAreaView>
       <View style={{
         backgroundColor: colors?.background,
         ...styles.input,
         ...(displayOptions ? styles.inputWithResults : {}),
       }}>
-        {
-          selectedOption ?
-          // TODO: Create component
-            <View style={{
-              ...styles.selectedOptionContainer,
-              backgroundColor: colors?.activeOptionBackground,
-            }}>
-              <OptionIcon
-                style={{
-                  paddingRight: 3,
-                  height: 25,
-                }}
-                icon={selectedOption.icon}
-              ></OptionIcon>
-              <Text style={{
-                fontSize: 16,
-                color: colors?.activeOptionText
-              }}>{selectedOption.title}</Text>
-            </View>
-          : null
+        {selectedOption &&
+          <QueryPanelSelectedOption
+            colors={colors}
+            selectedOption={selectedOption} 
+          />
         }
         <Input
           style={{ color: colors?.text }}
           value={query}
-          placeholder={
-            placeholder?.length
-              ? placeholder
-              : selectedOption ? `${selectedOption.title} search...` : 'Spotter search...'
-          }
+          placeholder={placeholderValue}
           hint={getHint(query, options[hoveredOptionIndex])}
           onChangeText={onQuery}
           onSubmit={onSubmit}
@@ -131,87 +217,31 @@ export const QueryPanel: FC<{}> = () => {
           marginLeft: 10,
         }}>
           {(loading || doing) &&
-            <View style={{
-              opacity: 0.75,
-            }}>
-              {doing &&
-                <Text style={{
-                  fontSize: 14,
-                  color: colors?.text,
-                  paddingRight: 30,
-                }}>{doing}</Text>
-              }
-              <ActivityIndicator
-                size="small"
-                color={colors?.text}
-                style={{
-                  position: 'absolute',
-                  right: 3,
-                  top: -1,
-                  zIndex: 100,
-                }}
-              />
-            </View>
+            <QueryPanelLoading
+              doing={doing}
+              colors={colors}
+            />
           }
-          {
-            (options[hoveredOptionIndex] && !loading && !systemOption && !doing) &&
+          {(options[hoveredOptionIndex] && !loading && !systemOption && !doing) &&
             <OptionIcon style={{
               opacity: loading ? 0.1 : 1,
             }} icon={options[hoveredOptionIndex].icon}></OptionIcon>
           }
-          {
-            (!loading && systemOption) &&
-            <TouchableOpacity style={{
-              paddingHorizontal: 10,
-              paddingVertical: 4,
-              borderRadius: 10,
-              backgroundColor: colors?.hoveredOptionBackground,
-            }} onPress={systemOption.onSubmit}>
-              <Text style={{
-                fontSize: 12,
-              }}>{systemOption.title}</Text>
-              <View style={{
-                marginTop: 2,
-                margin: 'auto',
-                alignItems: 'flex-end',
-              }}>
-                <Text style={{
-                  fontSize: 9,
-                  opacity: 0.5,
-                }}>{systemOption.subtitle}</Text>
-              </View>
-
-              <View style={{
-                position: 'absolute',
-                left: 4,
-                bottom: 3.2,
-                backgroundColor: colors?.background,
-                opacity: 0.3,
-                padding: 1,
-                paddingLeft: 4,
-                paddingRight: 4,
-                borderRadius: 5,
-              }}>
-                <Text style={{
-                  fontSize: 8,
-                  color: colors?.text,
-                }}>cmd + u</Text>
-              </View>
-            </TouchableOpacity>
+          {(!loading && systemOption) &&
+            <QueryPanelSystemOption
+              systemOption={systemOption}
+              colors={colors}
+            />
           }
         </View>
-
       </View>
-      {
-        <QueryPanelOptions
-          style={{ ...styles.options, backgroundColor: colors?.background }}
-          hoveredOptionIndex={hoveredOptionIndex}
-          displayOptions={displayOptions}
-          options={options}
-          onSubmit={onSubmit}
-        ></QueryPanelOptions>
-      }
-
+      <QueryPanelOptions
+        style={{ ...styles.options, backgroundColor: colors?.background }}
+        hoveredOptionIndex={hoveredOptionIndex}
+        displayOptions={displayOptions}
+        options={options}
+        onSubmit={onSubmit}
+      ></QueryPanelOptions>
     </SafeAreaView>
   </>
 }

diff --git a/apps/spotter/src/constants.ts b/apps/spotter/src/constants.ts
@@ -1,3 +1,7 @@
+import { SpotterPlugin } from "../plugin";
+import { PluginsManagerPlugin } from "./plugins/plugins-manager.plugin";
+import { SpotterThemesPlugin } from "./plugins/themes.plugin";
+
 export const SPOTTER_HOTKEY_IDENTIFIER = 'spotter';
 
 export const PLUGINS_REGISTRY = 'PLUGINS_REGISTRY'
@@ -42,9 +46,16 @@ export const DARK_THEME = '#212121,#ffffff,#3c3c3c,#ffffff,#0f60cf,#fefefe';
 
 export const PLUGINS_TO_INSTALL = [
   '@spotter-app/applications-plugin',
+  '@spotter-app/bluetooth-plugin',
   '@spotter-app/brave-plugin',
   '@spotter-app/calculator-plugin',
   '@spotter-app/emoji-plugin',
-  '@spotter-app/[email protected]',
+  '@spotter-app/spotify-plugin',
+  '@spotter-app/vscode-plugin',
   '@spotter-app/web-plugin',
 ];
+
+export const INTERNAL_PLUGINS: {[plugin: string]: typeof SpotterPlugin} = {
+  ['plugins-manager']: PluginsManagerPlugin,
+  ['spotter-themes']: SpotterThemesPlugin,
+}
diff --git a/apps/spotter/src/helpers.ts b/apps/spotter/src/helpers.ts
@@ -5,8 +5,8 @@ import {
   Option,
   SpotterPlugin,
 } from '@spotter-app/core';
+import { INTERNAL_PLUGINS } from './constants';
 import { PluginOnQueryOption, PluginRegistryOption, SpotterThemeColors } from './interfaces';
-import { INTERNAL_PLUGINS } from './plugins';
 import { History } from './providers';
 
 export const getHistoryPath = (

diff --git a/apps/spotter/src/interfaces.ts b/apps/spotter/src/interfaces.ts
@@ -4,6 +4,7 @@ import {
   ChannelForSpotter,
   SpotterOnQueryOption,
   SpotterRegistryOption,
+  PluginConnection,
 } from '@spotter-app/core';
 
 export type PluginCommand = Command & {
@@ -68,12 +69,8 @@ export interface SpotterHotkeyEvent {
   identifier: string,
 }
 
-export interface ActivePlugin {
-  name: string,
-  path: string,
+export type ActivePlugin = PluginConnection & {
   channel: ChannelForSpotter,
-  port: number,
-  pid: number,
 }
 
 export function isPluginOnQueryOption(

diff --git a/apps/spotter/src/plugins/index.ts b/apps/spotter/src/plugins/index.ts