• implemented Refresh, Copy File Names and Copy File Paths context menu items. Relatively simple affair. Here’s the context menu:
• make context menu and selection work more like windows
  • lesson: I’m writing a tool for power users that is meant to behave like desktop file manager. It’s important to sweat small details like this so that the app works like the apps they’re already using. The smaller the difference between filerion and other desktop file managers, the better
• implement UI for file delete (but not yet the actual deletion). Here’s a dialog confirmation dialog:
• Filerion is a dual-pane file manager but if the width of the window if small it doesn’t make sense to show 2 narrow panes so I’ve implemented an auto-switch to single pane when window width is below 768 pixels
  • lesson: it’s implemented as a store which gets updated on debounced resize event. The lesson is in code simplicity and minimization. I found an existing package https://github.dev/cdellacqua/svelte-window-store which implements this functionality. Instead of importing this code blindly I just looked how it’s implemented and wrote my own, minimalistic version, which is only 10 lines of code:

export const viewportSize = writable(); // {dx, dy}
export const viewportWidth = writable();

function updateAfterResize() {
  const dx = window.innerWidth;
  const dy = window.innerHeight;
  viewportSize.set({ dx: dx, dy: dy });
  viewportWidth.set(dx);
}

window.addEventListener("resize", debounceEvent(updateAfterResize, 250));