tloncorp · dnbrwstr · Jun 15, 2023 · Jun 16, 2023 · Jun 17, 2023 · Jun 17, 2023
diff --git a/ui/.prettierrc.js b/ui/.prettierrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  ...require('@tloncorp/eslint-config/.prettierrc.js'),
+  tailwindConfig: './tailwind.config.js',
+  // rule overrides can be added here, e.g.:
+  semi: true,
+  trailingComma: 'es5',
+};
diff --git a/ui/index.html b/ui/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Surface</title>
   </head>
-  <body class="text-gray-800 bg-white text-base antialiased">
+  <body class="text-gray-800 bg-gray-100 text-base antialiased">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,6 @@
   "name": "home",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

diff --git a/ui/postcss.config.js b/ui/postcss.config.js
@@ -5,7 +5,7 @@ const config = {
     'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
-  }
+  },
 };
 
-export default config;
+module.exports = config;
diff --git a/ui/src/components/DocketImage.tsx b/ui/src/components/DocketImage.tsx
@@ -14,21 +14,30 @@ const sizeMap: Record<DocketImageSizes, string> = {
   xs: 'w-6 h-6 rounded',
   small: 'w-8 h-8 rounded-md',
   default: 'w-12 h-12 rounded-lg',
-  full: 'w-20 h-20 md:w-32 md:h-32 rounded-2xl'
+  full: 'w-20 h-20 md:w-32 md:h-32 rounded-2xl',
 };
 
-export function DocketImage({ color, image, className = '', size = 'full' }: DocketImageProps) {
-  const { tileColor } = useTileColor(color);
+export function DocketImage({
+  color,
+  image,
+  className = '',
+  size = 'full',
+}: DocketImageProps) {
+  const { tileColor } = useTileColor(color ?? 'black');
   const [imageError, setImageError] = useState(false);
 
   return (
     <div
-      className={cn('flex-none relative bg-gray-200 overflow-hidden', sizeMap[size], className)}
+      className={cn(
+        'relative flex-none overflow-hidden bg-gray-200',
+        sizeMap[size],
+        className
+      )}
       style={{ backgroundColor: tileColor }}
     >
       {image && !imageError && (
         <img
-          className="absolute top-0 left-0 h-full w-full object-cover"
+          className="absolute left-0 top-0 h-full w-full object-cover"
           src={image}
           alt=""
           onError={() => setImageError(true)}

diff --git a/ui/src/components/Surface.tsx b/ui/src/components/Surface.tsx
@@ -14,11 +14,7 @@ interface SurfacePaneProps {
 /**
  * Responsible for rendering an app in an iframe.
  */
-const SurfacePane = ({
-  id,
-  pane,
-  isActive,
-}: SurfacePaneProps) => {
+const SurfacePane = ({ id, pane, isActive }: SurfacePaneProps) => {
   const [shouldRender, setShouldRender] = React.useState(isActive);
   const { isDragging: dragInteractionInProgress } =
     useContext(InteractionContext);
@@ -42,21 +38,22 @@ const SurfacePane = ({
     <div
       style={{
         // by default, iframes will eat pointer events, which can cause issues during drag
-        pointerEvents: dragInteractionInProgress ? "none" : undefined,
+        pointerEvents: dragInteractionInProgress ? 'none' : undefined,
       }}
-      className={cn("flex flex-col overflow-hidden rounded-lg", {
-        "absolute left-0 top-0 w-0 h-0": !isActive,
-        "relative h-full w-full": isActive,
+      className={cn('flex flex-col rounded-lg', {
+        'absolute left-0 top-0 h-0 w-0': !isActive,
+        'relative h-full w-full': isActive,
       })}
     >
-      {pane.type === "app" ? (
+      {pane.type === 'app' ? (
         <iframe
           className="min-h-0 flex-1 overflow-hidden rounded-lg border-0 bg-white shadow-md"
           src={pane.path}
         />
-      )
-      : (
-        <WidgetGrid id={id} pane={pane}/>
+      ) : (
+        <div className="h-full rounded-lg border-2 border-gray-200 border-opacity-50">
+          <WidgetGrid id={id} pane={pane} />
+        </div>
       )}
     </div>
   ) : null;
@@ -71,7 +68,12 @@ const Surface = ({ surface }: SurfaceProps) => {
   const isActive = surface.id === activeSurface;
 
   return (
-    <div className={cn("absolute left-0 top-0 flex h-full w-full gap-2 p-2 pt-0", isActive ? 'z-30' : 'z-20' )}>
+    <div
+      className={cn(
+        'absolute left-0 top-0 flex h-full w-full gap-2 p-2 pt-0',
+        isActive ? 'z-30' : 'z-20'
+      )}
+    >
       {surface.panes.map((pane, index) => (
         <SurfacePane
           id={surface.id}
@@ -81,7 +83,7 @@ const Surface = ({ surface }: SurfaceProps) => {
         />
       ))}
     </div>
-  )
-}
+  );
+};
 
 export default Surface;
diff --git a/ui/src/components/WidgetSurface/ActivityWidget/Notification.tsx b/ui/src/components/WidgetSurface/ActivityWidget/Notification.tsx
@@ -48,7 +48,7 @@ function makePrettyTime(date: Date) {
 function getNotificationType(rope: Rope): NotificationType {
   if (
     ['/channel/edit', '/channel/add', '/channel/del', '/joins', '/leaves'].some(
-      thread => rope.thread.endsWith(thread)
+      (thread) => rope.thread.endsWith(thread)
     )
   ) {
     return 'group-meta';
@@ -69,7 +69,7 @@ const NotificationTrigger: React.FC<NotificationTrigger> = ({
   type,
   groups,
   rope,
-  ship
+  ship,
 }) => {
   switch (type) {
     case 'group-meta':
@@ -93,7 +93,7 @@ const NotificationContext: React.FC<NotificationContext> = ({
   groups,
   rope,
   charge,
-  app
+  app,
 }) => {
   switch (type) {
     case 'channel':
@@ -139,7 +139,7 @@ const NotificationContext: React.FC<NotificationContext> = ({
 
 const NotificationContent: React.FC<NotificationContent> = ({
   type,
-  content
+  content,
 }) => {
   const con = content;
   const mentionRe = new RegExp('mentioned');
@@ -247,7 +247,7 @@ export default function Notification({ bin, groups }: NotificationProps) {
       className={cn(
         'flex space-x-3 rounded-xl p-3 text-gray-600 transition-colors duration-1000',
         bin.unread
-          ? 'bg-blue-50 mix-blend-multiply dark:mix-blend-screen'
+          ? 'bg-blue-50'
           : 'bg-white'
       )}
     >

diff --git a/ui/src/components/WidgetSurface/ActivityWidget/Notifications.tsx b/ui/src/components/WidgetSurface/ActivityWidget/Notifications.tsx
@@ -61,8 +61,11 @@ export const Notifications = () => {
   const groups = useGroups();
 
   return (
-    <div className="h-full overflow-y-scroll rounded-md bg-gray-50">
-      <section className="w-full">
+    <div className="bg-white h-full overflow-hidden rounded-3xl border-2 border-gray-50 ">
+      <section className="w-full h-full overflow-y-scroll">
+      <h2 className="p-4 text-md pt-5 font-bold text-black">
+        Recent Notifications
+      </h2>
         {loaded ? (
           notifications.length === 0 ? (
             <div className="mt-3 flex w-full items-center justify-center">
@@ -73,12 +76,9 @@ export const Notifications = () => {
           ) : (
             notifications.map(grouping => (
               <div
-                className="mb-4 rounded-xl bg-gray-50 p-4"
+                className="mb-2 rounded-xl px-4 py-0"
                 key={grouping.date}
               >
-                <h2 className="mb-4 text-lg font-bold text-gray-400">
-                  {grouping.date}
-                </h2>
                 <ul className="space-y-2">
                   {grouping.skeins.map(b => (
                     <li key={b.time}>

diff --git a/ui/src/components/WidgetSurface/AppTileWidget/AppTileWidget.tsx b/ui/src/components/WidgetSurface/AppTileWidget/AppTileWidget.tsx
@@ -1,83 +1,22 @@
 import { ChargeWithDesk, useInstalledApps } from '@/state/docket';
 import { WidgetProps } from '@/widgets';
-import WidgetEditor from '@/components/WidgetSurface/WidgetEditor';
-import { getQueryParam } from '@/logic/utils';
-import { Tile } from './Tile';
-import {
-  useEditWidget,
-  usePaneFromWidget,
-  useSurface,
-} from '@/state/surface';
 import { useEffect, useMemo, useState } from 'react';
-import { RJSFSchema } from '@rjsf/utils';
+import { Tile } from './Tile';
 
 export default function AppTileWidget({
   widget,
-  editingWidget,
-  setEditingWidget
 }: WidgetProps<{ desk: string }>) {
-  const [charge, setCharge] = useState<ChargeWithDesk | null>(null);
   const apps = useInstalledApps();
-  const surfaceId = getQueryParam('surface') ?? 'default';
-  const surface = useSurface(surfaceId);
-  const pane = usePaneFromWidget(surfaceId, widget.id);
-  const handleEditWidget = useEditWidget(
-    surfaceId,
-    widget.id,
-    setEditingWidget
-  );
 
-  useEffect(() => {
-    if (!widget.config.desk && setEditingWidget) {
-      setEditingWidget(true);
-    }
-  }, [widget.config.desk]);
-
-  useEffect(() => {
-    if (apps && widget.config.desk) {
-      const charge = apps.find(c => c.desk === widget.config.desk);
-      if (!charge) {
-        return;
-      }
-      setCharge(charge);
+  const charge = useMemo(() => {
+    if (!apps) {
+      return null;
     }
+    return apps.find((c) => c.desk === widget.config.desk) ?? apps[0];
   }, [apps, widget.config.desk]);
 
-  const params: RJSFSchema = useMemo(() => {
-    return {
-      properties: {
-        desk: {
-          type: 'string',
-          title: 'App',
-          oneOf: apps.map(app => ({
-            const: app.desk,
-            title: app.title
-          }))
-        }
-      }
-    };
-  }, [apps]);
-
-  if (!pane || !surface) {
-    return "Loading...";
-  }
-
-  if (editingWidget) {
-    return (
-      <WidgetEditor
-        widget={widget}
-        onSubmit={handleEditWidget}
-        showPreview={false}
-        onCancel={
-          setEditingWidget && charge ? () => setEditingWidget(false) : undefined
-        }
-        params={params}
-      />
-    );
-  }
-
   if (!charge) {
-    return "Loading...";
+    return null;
   }
 
   return <Tile charge={charge} desk={widget.config.desk} />;