Swap styles over to mirotone

AppExplorer/view-file.tsx

@@ -4,13 +4,15 @@ import React from "react";
 import type { AnnotationData, CodeSelection } from "~/lsp/components/code";
 import { Code, links as codeLinks } from "~/lsp/components/code";
 import type { LoaderArgs } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import * as lspServer from "~/lsp/lsp.server";
 import { CardFromSelection } from "~/plugin-utils/card-from-selection";
 import type { Project } from "~/lsp/Project";
 import * as fsPath from "path";
 import { fs } from "~/fs-promises.server";
 import { getRemoteURL, getCommitHash } from "~/models/git.server";
+import { getPathFromQuery } from "~/plugin-utils/require-file-from-query";
 
 export async function readCardData(fullPath: string, path: string, project: Project, projectName: string) {
   const [remote, content, commitHash] = await Promise.all([
@@ -33,13 +35,11 @@ export async function readCardData(fullPath: string, path: string, project: Proj
 export const links = codeLinks
 export const loader = async ({ params, request }: LoaderArgs) => {
   const [projectName, project] = await lspServer.requireProject(params);
-  const url = new URL(request.url)
-  const path = url.searchParams.get("path")
-  if (typeof path !== "string") {
-    throw new Response("Path is required", { status: 400 })
+  const { fullPath, path, stat } = await getPathFromQuery(request, project)
+  if (stat.isDirectory()) {
+    return redirect(`/lsp/${projectName}/?path=${path}`)
   }
 
-  const fullPath = lspServer.resolvePath(project, path);
 
   // TODO: Make this more generic, so that I can ask for the connection for a file instead of using
   // a specific language. Right now I'm exploring what I can do with the LSP.
@@ -63,8 +63,6 @@ export const loader = async ({ params, request }: LoaderArgs) => {
 
 export default function ViewFile() {
   const data = useLoaderData<typeof loader>()
-  const [searchParams] = useSearchParams()
-  const currentFile = (searchParams.get('path') ?? '')
 
   const [selection, setSelection] = React.useState<CodeSelection | null>(null)
   const handleNewSelection = (selection: CodeSelection) => {
@@ -106,25 +104,35 @@ export default function ViewFile() {
   };
   const annotation = data.symbols.flatMap(symbolToAnnotation.bind(null, ''))
 
+
   return (
     <div className="flex">
       <div>
-        <div>{currentFile}</div>
-        <hr />
-        {!selection && (
-          <Code
-            onSelection={handleNewSelection}
-            lines={lines}
-            annotations={annotation}
-          />
-        )}
-        {selection && (
-          <CardFromSelection
-            selection={selection}
-            onDrop={() => setSelection(null)}
-            data={data.cardData}
-          />
-        )}
+        <form method="get" action="./view-file">
+          <div className="form-group">
+            <div className="input-group">
+              <label className="h2">Filename:</label>
+              <input className="input" name="path" type="text" defaultValue={data.path} />
+              <button className="button button-primary" type="submit">
+                Go
+              </button>
+            </div>
+          </div>
+        </form>
+        <Code
+          onSelection={handleNewSelection}
+          lines={lines}
+          annotations={annotation}
+          peek={selection?.startLine}
+        >
+          {selection && (
+            <CardFromSelection
+              selection={selection}
+              onDrop={() => setSelection(null)}
+              data={data.cardData}
+            />
+          )}
+        </Code>
       </div>
     </div >
   );

app/lsp/components/FileOrDirectory.tsx

@@ -33,12 +33,12 @@ export function FileOrDirectory({ type, project, path, to, name }: FileOrDirecto
   if (type === 'file') {
     return (
       <li className={classNames(
-        "before:content-['_📄']",
         {
           "bg-dropboxBlue": isActive,
           "text-coconut": isActive,
         }
       )} >
+        📄
         <Link to={"/lsp/" + project + "/" + to + path} onClick={e => e.stopPropagation()}>
           {name}
         </Link>
@@ -47,9 +47,7 @@ export function FileOrDirectory({ type, project, path, to, name }: FileOrDirecto
   } else if (type === "directory") {
     return (
       <li
-        className={classNames('directory block', {
-          "before:content-['_📁']": expand === false,
-          "before:content-['_📂']": expand === true,
+        className={classNames('', {
           "bg-dropboxBlue": isActive,
           "text-coconut": isActive,
         })}
@@ -59,13 +57,10 @@ export function FileOrDirectory({ type, project, path, to, name }: FileOrDirecto
         }
         }
       >
+        {expand ? '📂' : '📁'}
         {name} /
         {expand && data?.type === 'directory' && (
-          <ul className={classNames(
-            "pl-4",
-            'bg-coconut',
-            'text-graphite'
-          )}>
+          <ul>
             {data.children.map((child) => (
               <FileOrDirectory
                 key={child.name}

app/lsp/components/code.css

@@ -1,5 +1,16 @@
 .code {
   counter-reset: line;
+  white-space: pre-wrap;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--blackAlpha80);
+  color: var(--white);
+}
+
+.code .peek {
+  background-color: var(--white);
+  color: var(--black);
+  padding: var(--space-small);
 }
 
 .code .line {
@@ -18,3 +29,7 @@
 .code .line:hover:before {
   color: #f00;
 }
+
+.annotation {
+  background-color: var(--blue900);
+}

app/lsp/components/code.tsx

@@ -21,9 +21,18 @@ export type CodeProps = {
   lines: Array<string>
   onSelection?: (data: CodeSelection) => void
   annotations?: Array<AnnotationData>
+  peek?: number
+  children: React.ReactNode,
 };
 
-export const Code = ({ lines, firstLine = 1, onSelection, annotations = [] }: React.PropsWithChildren<CodeProps>): JSX.Element => {
+export const Code = ({
+  lines,
+  peek,
+  children,
+  firstLine = 1,
+  onSelection,
+  annotations = []
+}: React.PropsWithChildren<CodeProps>): JSX.Element => {
   const [lineSelection, setLineSelection] = React.useState<number[]>([])
 
   const selectLine = React.useCallback((line: number) => {
@@ -64,7 +73,6 @@ export const Code = ({ lines, firstLine = 1, onSelection, annotations = [] }: Re
   }, [lineSelection, selectionRef, textSelection])
 
   const annotatedLines = React.useMemo(() => {
-
     return lines.map((line, i) => {
       const annotationsForLine = annotations.filter((annotation) => {
         return annotation.startLine <= i && annotation.endLine >= i
@@ -87,31 +95,28 @@ export const Code = ({ lines, firstLine = 1, onSelection, annotations = [] }: Re
           <span
             onClick={annotation.onClick}
             key={annotation.name}
-            className="bg-c-ocean text-coconut"
+            className="annotation"
           >
             {annotationText}
           </span>,
           suffix,
         ]
 
       }, [line])
-
-
     })
   }, [annotations, lines])
 
   return (
     <>
-      <div className="bg-graphite p-2 m-2 max-h-[75vh] overflow-auto">
-        <code
-          className={classNames("code whitespace-pre-wrap text-white flex flex-col", {
-          })}
-          style={{
-            counterSet: `line ${firstLine - 1}`,
-          }}
-        >
-
-          {annotatedLines.map((line, i) => (
+      <code
+        className="code"
+        style={{
+          counterSet: `line ${firstLine - 1}`,
+        }}
+      >
+
+        {annotatedLines.map((line, i) => (
+          <React.Fragment key={i}>
             <span
               onClick={() => selectLine(i)}
               className={classNames('line', {
@@ -120,9 +125,14 @@ export const Code = ({ lines, firstLine = 1, onSelection, annotations = [] }: Re
               key={i}>
               {line}
             </span>
-          ))}
-        </code>
-      </div>
+            {peek && peek === i && children && (
+              <div className="peek">
+                {children}
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </code>
     </>
   )
 }

app/lsp/components/miro-card.tsx

@@ -1,5 +1,4 @@
-import type { CardProps, DropEvent } from '@mirohq/websdk-types';
-import classNames from 'classnames';
+import type { CardProps, DropEvent, TagColor } from '@mirohq/websdk-types';
 import React, { useId } from 'react'
 import type { Meta } from './miro-shape';
 import { useLatestRef } from "./useLatestRef";
@@ -17,6 +16,8 @@ type Props<M extends Meta> = Pick<CardProps,
 > & React.PropsWithChildren<{
   onDrop: (card: CardProps) => void,
   meta?: M
+  editTitle?: JSX.Element,
+  editDescription?: JSX.Element,
 }>
 
 export const MiroCard = <M extends Meta>({
@@ -26,6 +27,8 @@ export const MiroCard = <M extends Meta>({
   height = 150,
   style = {},
   title,
+  editTitle,
+  editDescription,
   children: description,
   meta,
   fields,
@@ -79,26 +82,42 @@ export const MiroCard = <M extends Meta>({
   }, [handlerRef, id]);
 
 
-
   return (
-    <div
-      className={classNames(
-        'border-2 border-[#0000FF] border-l-8',
-        'miro-draggable relative p-2', {
-      }
-      )}
-      style={{
-        // backgroundColor: shapeStyle.fillColor,
-        aspectRatio: `${width}/${height}`,
-        // color: shapeStyle.color,
-        // borderColor: shapeStyle.borderColor,
-        // fontSize: shapeStyle.fontSize,
-      }}
-      data-id={id}>
-      {title}
-      <hr />
-      <span ref={self}>{description}</span>
+    <div className="app-card miro-draggable">
+      <h1 className="app-card--title">
+        {editTitle ?? title}
+      </h1>
+      <h1 className="app-card--description p-medium">
+        {editDescription ?? description}
+      </h1>
+      <span style={{ display: 'none' }} ref={self}>{description}</span>
+      <div className="app-card--body">
+        <div className="app-card--tags">
+          <Tag>
+            {meta?.projectName}
+          </Tag>
+          {fields?.map((field, i) => (
+            <Tag key={i}>
+              {field.value}
+            </Tag>
+          ))}
+
+        </div>
+      </div>
     </div>
   )
+}
+
+type TagProps = React.PropsWithChildren<{
+  background?: TagColor,
+}>
+
+function Tag({ children, background }: TagProps) {
+  return <span className="tag" style={{
+    // @ts-ignore TS doesn't seem to know about setting css variables
+    '--background': background,
+  }}>
+    {children}
+  </span>;
+}
 
-}