This simplifies the rect calculations by making the gap between pixels
into a padding applied directly to the leaf nodes. This means the gaps
won't be present in the overlay layer, so when dragging a node around it
is always over an OverlayNode and the pendingAction won't be unset.
Also simplifies onDrop handling
Adds a new setting that emulates the prefers-reduced-motion media query, allowing users to disable Wave animations without affecting other apps on their system. It also honors the prefers-reduced-motion query in case a system-level configuration is present.
This PR is a large refactoring of the layout code to move as much of the
layout state logic as possible into a unified model class, with atoms
and derived atoms to notify the display logic of changes. It also fixes
some latent bugs in the node resize code, significantly speeds up
response times for resizing and dragging, and sets us up to fully
replace the React-DnD library in the future.
This PR swaps usage of the `uuid` library for the built-in
`crypto.randomUUID` function, which is available in both NodeJS and the
browser. The built-in function is around 12x faster than the `uuid`
library. The strings produced by the built-in function are fully
compatible with the UUIDv4 standard, so it's an easy switch.
This PR adds back WebGL acceleration (enabled by default) for XTerm. It
also adds back link handling and adds a new option (disabled by default)
to open all links internally as a new web block.
---------
Co-authored-by: sawka <mike.sawka@gmail.com>
This improves the app updater so that it doesn't rely on unreliable
system notifications. Now, a banner in the tab bar will display when an
update is available. Clicking this will prompt the user to restart the
app and complete the installation.
This also updates the tab bar to move to the smaller tab size earlier so
we don't need to make the tab bar scrollable as much.
I'm updating the magnify button to be always visible and animate a
transition between being a "Magnify" button and a "Minimize" button.
This also cleans up some text shrinking behavior in the block frame
header so the end icons are always visible.
Also fixes some height discrepancies in the block frame header.
Also implements a `prefers-reduced-motion` query for the tilelayout and
block frame to ensure transitions are not set if the user does not want
them.
This will ensure that the webview cannot capture the pointer events and
disrupt the drag functionality.
This also fixes an issue where greedy and imprecise bounds calculations
could result in thrashing of the layoutState.pendingAction field, which
could cause the placeholder to flicker.
This also fixes issues where some React Effects that were supposed to be
debounced or throttled were being invoked too much. This is because
useEffect regenerates the callback when it is run, resulting in the
debounce or throttle never taking effect. Moving the throttled or
debounced logic to a separate callback solves this.
The column headers for the directory preview were a solid color, which
was conflicting with the translucent colors for the rest of the UI. I've
changed this to be more consistent. I've also updated a border color
that was conflicting with the rest of the UI.
The code blocks in the markdown preview were also solid colored and the
actions were causing the whole window UI to lose its transparency when
they were hovered over. This was due to it applying a backdrop-filter,
which breaks the window transparency. I've removed this blur and an
invalid color variable.
This also fixes the bottom margins for both blocks so there's more space
when scrolled all the way to the bottom of the block. Before, the
overlay scrollbars were obscuring the content.
Adds the implementation for the "Magnify Block" context menu item. This
will pop a block out of the layout and bring it to the foreground.
This also cleans up some block styling to make radii more consistent.
<img width="814" alt="image"
src="https://github.com/user-attachments/assets/c81521e1-c91f-4bb5-9eec-ff0eda178268">
This brings over the AI context from the previous app. In particular, it
makes it so each block has its own context that persists after the app
is reloaded.
Note that this does not provide the app with the cli-specific context
from the previous app.
Adds support for window blur via the Vibrancy feature on macOS and the
BackgroundMaterial feature on Windows. The setting has no effect on
Linux. If both transparency and blur are set, transparency will take
precedence.
This adds the ability to open a directory as a terminal in a new block.
it uses the directory table items for child directories and the block
header for the current directory.
- Set all cols of navigation row(first row) to - except the first col
- Fixed the issue where it scrolls right on load or when you click back
from the file preview
- Use OverlayScrollbars
This brings over a simplified version of the open ai feature from the
previous app but in widget form. It still needs some work to reach
parity with that version, but this includes all of the basic building
blocks to get that working.
This PR fixes an issue where the resize state could fall out of sync.
I've noticed that there is still some drift in other elements when the
resize changes. I am trying to figure out what is causing this, but I
don't view this as blocking since this is already a big improvement over
the previous experience
This adds a new global atom to track whether a window is in full screen.
It also updates the behavior of the tab bar so that it will only add an
extra left indent on macOS windows that are not in full screen.
Otherwise, the indent will be much smaller.
Adds a new set of configurations for managing whether the app will
automatically check for updates. Ports over the auto update code from
the old app. In this version, the main difference is that updates can be
manually checked for using a menu bar item, even if auto updates are
disabled.
Adds electron-builder, which we will use to package and distribute our
application, same as in the existing app.
Replaces explicit port assignments with dynamic ones, which are then
stored into environment variables.
Adds a ~/.w2-dev folder for use when running a dev build.
The build-helper pipeline from the old repo is included here too, but it
is not updated yet so it will fail.
Also removes some redundant utility functions and cleans up some let vs.
const usage.
The packaging can be run using the `package:prod` and `package:dev`
tasks.
---------
Co-authored-by: sawka <mike.sawka@gmail.com>
lots of changes. new wshrpc implementation. unify websocket, web,
blockcontroller, domain sockets, and terminal inputs to all use the new
rpc system.
lots of moving files around to deal with circular dependencies
use new wshrpc as a client in wsh cmd
Mostly small style changes so far.
- allow scrolling the table horizontally
- minimum sizes on columns
- datetime format changes
- left/right justify on some columns
This makes the following changes
- allow directory rows to overflow their container on resize (allowing
scroll as a temporary test)
- fix directory width to account for resizer width
- add ellipsis to name column on table resize
- add the rightmost resizer back (more as a temporary test)
- do not search when the filtered contents are empty
- cap the index to the end of the list of the number of entries becomes
less than the current index
- do not redo backend call on filter or search of directory results
- add letter spacing on header row
move codeedit to directory. new useLongClick hook. show quick navigation for directoryview on longclick of folder icon. lots more generic
stuff for header
new fitaddon for xtermjs
more fixes for xtermjs scrollbars
This change is to make general directory formatting match the current
designs in figma. It doesn't change the resize behavior yet, but that
will be added very soon.
This make the following changes:
- widen column resize handles
- pin the `..` directory to the top row when it is visible
- add some clarification to datetime format
- fix arrow keys for directory parsing to only be local
- switch to using keyutil for keypresses
- only use the block's dummy focus if another focus element doesn't
exist
- add a gray background to directory nav buttons when they are focused
- typing into search box works as long as the focus is in the directory
view block
- add a popup in the table to notify when searching/filtering
- remove original search box
Adds resizability to the layout system.
Hovering in the margins of a block will highlight the available resize
handle and show a cursor indicating its resize direction. Dragging will
cause the resizing nodes to blur out and be replaced by an outline.
Releasing the handle will commit the new resize operation and cause the
underlying nodes to update to their new sizes.
We'll want to refactor this in the future to move all layout and resize
logic into a shared model that the TileLayout code can talk to, but
that's a future improvement. For now, this makes some compromises,
mainly that the logic is kind of distributed around.
---------
Co-authored-by: sawka <mike.sawka@gmail.com>
Fixes the New Window menu item so that it shows the new window after it
loads and captures any errors that occur. Also adds a keyboard shortcut
for new window and uses the native shortcut for close window.
Adds the following changes
- rename "Permissions" to "Perm"
- use a "-" if the mimetype is unknown
- add a button to hide and show hidden files
- fix the datetime to format based on how far in the past the date is
This change:
- now clears the search box when entering a new directory
- fixes some styling issues
- adds a .. to the path
- uses the correct path (except on the initial start of the directory
widget)
This adds a frontend directory search by filtering out files that don't
match. It also allows navigation of the directory using the arrow keys
while maintaining focus on the search box.
This implements the behavior for the context menu recently added to the
directories. Open New Block simply opens the file in a preview in a new
block.
Delete files will delete the selected file, but it does not trigger a
rerender at this time. To see the change, you must navigate to a
different directory and then return. This will be fixed in a future
update.
This enables directory sorting by clicking on the header for the column
you want to sort. It also pops up a different context menu for items in
the directory view. The behavior for the context menu items still needs
to be implemented.
This adds several new columns to the directory view. It adds a last
modified timestamp, a logo for the type, human-readable file sizes, and
permissions. Several of these are configurable via the
config/settings.json file.
Update the computeMove function to only set pendingAction if the action
is not a no-op (i.e. it will not place the node adjacent to itself at
the same level). Also clears the pendingAction if the user hovers over
the node that is being dragged.
Adds the ability to swap nodes by dragging to the center of a tile.
Also fixes a bug where moving a node to a new lesser index under the
same parent would produce a no-op.
This sets us back up to use Vite via the electron-vite package. This
will let us continue to build our testing suite on Vitest and take
advantage of Vite features like Hot Module Reloading, etc.
---------
Co-authored-by: sawka <mike.sawka@gmail.com>
I found that the drag preview images would get unset when the app went idle. I am now caching the preview image and resetting it every time a user hovers over a TileNode. I am also updating the logic for the placeholder slightly to reduce the number of variables floating around.
It turns out that WebKit uses its own prefix for user-select so I'm adding this everywhere we currently define user-select, as well as a few new places
Insert the node at the new location before removing it from its old location. With the old order, removing a node from its parent could change the indexing of the parent node, if moving a node to a new location under the same parent.
This PR adds support for Outer variants of each DropDirection.
When calculating the drop direction, the cursor position is calculated
relevant to the box over which it is hovering. The following diagram
shows how drop directions are calculated. The colored in center is
currently not supported, it is assigned to the top, bottom, left, right
direction for now, though it will ultimately be its own distinct
direction.
When an outer drop direction is provided for a move operation, if the
reference node flexes in the same axis as the drop direction, the new
node will be inserted at the same level as the parent of the reference
node. If the reference node flexes in a different direction or the
reference node does not have a grandparent, the operation will fall back
to its non-Outer variant.
This also removes some chatty debug statements, adds a blur to the
currently-dragging node to indicate that it cannot be dropped onto, and
simplifies the deriving of the layout state atom from the tab atom so
there's no longer another intermediate derived atom for the layout node.
This also adds rudimentary support for rendering custom preview images
for any tile being dragged. Right now, this is a simple block containing
the block ID, but this can be anything. This resolves an issue where
letting React-DnD generate its own previews could take up to a half
second, and would block dragging until complete. For Monaco, this was
outright failing.
It also fixes an issue where the tile layout could animate on first
paint. Now, I use React Suspense to prevent the layout from displaying
until all the children have loaded.
This change passes the file name to monaco, so it can use its own
detection to determine highlighting of supported files. It also resolves
some of the mimetypes with more common use cases for a terminal.
I noticed that the display nodes weren't getting updated when the browser zoom level changed. I found that using ResizeObserver was a better mechanism to capture this signal.
I am updating the layout node setup to write to its own wave object.
The existing setup requires me to plumb the layout updates through every
time the tab gets updated, which produces a lot of annoying and
unintuitive design patterns. With this new setup, the tab object doesn't
get written to when the layout changes, only the layout object will get
written to. This prevents collisions when both the tab object and the
layout node object are getting updated, such as when a new block is
added or deleted.
This cleans up the unused/unnecessary css properties added around the
same time as the modal component. This mostly refers to variables that
started with --app. They have been removed and their uses have been
replaced with other defaults. The --warning-color and --success-color
properties still exist despite being unused since they seem to fit with
the --error-color which is already in use.
This fixes two bugs. The first had to do with the path library not
working in prod. That involved making a simple version of it that works
in the meantime. The other is rendering a different number of hooks
which required moving hooks outside of an if statement.
This mainly focuses on passing directory info to the front end. It isn't
a complete version of that, but it's enough to plan out some details of
the styling
