Refactored to be more flexible. Now, it has three types
- solid
- outline
- ghost
and subtypes
- green
- grey
- red
- yellow
It defaults to solid and green when no className is provided. It
concatenates defaults if custom classNames are provided.
Adds a new setting for the gap size between tiles in a layout. Also
updates the resize handle calculations so they are dynamically generated
based on the gap size. Also updates the styling for the resize handles
to be more robust.
This also updates the default gap size to 3px.
This also slims out the Block Frame padding so it is just enough that
the blocks don't overlap when there's no gap.
Make the block content sizing update once when its node moves or becomes
magnified. By manually updating this inner sizing rather than letting
the block flow in the DOM, the animations of the block frames are much
smoother.
This also fixes an issue where two scrollbars were being rendered for
the Directory Preview widget.
This also sets zero padding on nodes when there's only a single node
being rendered.
This adds a new NodeModel, which can be passed from the TileLayout to
contained blocks. It contains all the layout data that the block should
care about, including focus status, whether a drag operation is
underway, whether the node is magnified, etc.
This also adds a focus stack for the layout, which will let the focus
switch to the last-focused node when the currently-focused one is
closed.
This also addresses a regression in the resize handles that caused them
to be offset from the cursor when dragged.
---------
Co-authored-by: sawka <mike.sawka@gmail.com>
This PR implements the [Window Controls Overlay
API](https://web.dev/articles/window-controls-overlay) to let us hide
the menu bar on Windows and Linux and directly embed the window controls
in our tab bar. With #239 merged, we no longer need the menu bar on
these platforms.
The overlaid window controls are transparent so they will take on the
background from the app. I've updated the tab bar to flow properly using
the API's CSS environment variables.
At some point, we may want to update the logic around the symbolColor so
that it can ensure a proper contrast between the background and the
symbols in the window controls. For now, setting them to white works for
all the backgrounds we currently support.
https://github.com/user-attachments/assets/8d19b512-5281-42b9-8abb-ccb9b850061f
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 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.
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.
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 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 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>
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>
