feat(editor): fetch current not-owned projects, add project forking #525

netux · 2025-03-13T11:37:54Z

When viewing other people's projects, show a "Fork" button in place of the "Edit" button that would be present for owned projects.

Also, ensure we have the name of the current project, even if not owned, by detecting when $currentProjectUUID is not present in $projects, then fetching and storing it.

Reuses `duplicateProject()`, with some adaptations to ensure the forked project is loaded so we can get its name

Add the current project to the $projects store. This will make the project's title appear in the projects dropdown

…gic to text utils

… in the store

Mitcheljager

I really like the idea, but I don't really agree with the implementation or the UX. I think it makes more sense to keep the projects dropdown strictly to the user's own projects. Perhaps the button could be kept to the same notice telling you the project is not yours? Something like this maybe:

Mitcheljager · 2025-03-14T22:33:58Z

app/javascript/src/components/editor/Editor.svelte

+  $: if ($currentProjectUUID && !$projects.some(({ uuid }) => uuid === $currentProjectUUID)) {
+    fetchProject($currentProjectUUID).then((currentProject) => {
+      $projects.push(currentProject)
+    })
+  }


I'd prefer $projects to not ever contain a project that is not owned by the user

Would you be okay with at least renaming it $user/ownProjects? Its naming is a bit vague otherwise.

I also noticed a lot of checks for $currentProject?.is_owner, making it seem like we could have a project in $projects that could be owned by some other user ($currentProject derives from $projects).

Mitcheljager · 2025-03-14T22:34:51Z

app/javascript/src/components/editor/ProjectsDropdown.svelte

+  let ownProjects = []
+  let filteredProjects = []

+  $: ownProjects = $projects.filter(({ is_owner }) => is_owner)


I don't really want the state of projects that are not part of your project to be handled in the projects dropdown, I think it would make more sense somewhere else.

Good point.
Considering my comment above, what do you think about renaming $projects to $user/ownProjects, and having a $projects that contains a cache of all known projects (essentially what I do here with the current $projects)?

Then $user/ownProjects can derive from $projects, filtering out any projects that have is_owner set to false.

Mitcheljager · 2025-03-14T22:36:56Z

app/javascript/src/components/editor/ProjectsDropdown.svelte

+    <button class="w-auto text-base ml-1/8" on:click={() => duplicateProject(true)}>
+      Fork
    </button>


The editor is meant as a bridge for users who aren't very familiar with programming just yet. The term "fork" is not exactly common outside of the programming world, so I'd prefer something else. Especially because this isn't a fork, it's just a copy. You aren't really forking off of some main branch.

Yeah, I was also thinking about that.

I decided to go with Fork anyway because we already use that terminology in workshop.codes itself for marking codes as forks of other projects. The term "fork" there also really means a project "being based off of" another project, so it doesn't quite line up with the way we use "fork" in the showbiz either.

I can rename this "Clone" or "Clone for myself" or something else that makes it clearer what this is about.

Maybe in the future we could consider having a sort of real forking system though? Where a project is marked as being based-off another project, and there is a button to merge changes coming from upstream (the original project) into the other project?

Ehh, maybe its not that useful. At that point just why not go and replicate Git completely, right?

Mitcheljager · 2025-03-14T22:37:48Z

app/javascript/src/utils/text.ts

  return string.toLowerCase().replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase())
 }
+
+export function trimmed(string: string, limit: number, ellipsis = "..."): string {


This is more commonly called truncate, but I think it might make more sense to do this via CSS so it's not screen width dependent.

I like truncate better also 👍

Suggested change

export function trimmed(string: string, limit: number, ellipsis = "..."): string {

export function truncate(string: string, limit: number, ellipsis = "..."): string {

Also 👍 to implementing this through CSS. I mostly just wanted to get rid of the inline logic in <ProjectsDropdown>, which came out of nowhere and was a bit of an eyesore to me 😅.
Moving that logic into a helper was the quickest solution.

Mitcheljager · 2025-03-14T22:43:30Z

app/javascript/src/components/editor/ProjectsDropdown.svelte

+      {#if $currentProject && !$currentProject.is_owner}
+        <small>(read-only)</small>
+      {/if}


It's not really read-only, you can still edit the project, just not save.

Yeah... I struggled to come up with a term that'd fit into the dropdown.

Maybe it'd be better if the title of a project not owned by the user is shown outside the projects dropdown, and the projects dropdown is left exclusively for navigating to your own projects.

netux · 2025-03-15T01:04:52Z

Perhaps the button could be kept to the same notice telling you the project is not yours? Something like this maybe:

👍 While we are at it, can we decrease the contrast on this little banner/pill thingy? Bright orange and white don't really go along well.

Mitcheljager · 2025-03-15T01:05:47Z

@netux Sure!

Makes an ellipsis appear on horizontal text overflow. Note that this should usually be combined with a static width for the overflow to trigger.

…jects endpoint Fixes projects not appearing in the projects dropdown.

Use `text-small` instead.

…ct" warning Simply removing `warning--orange` does the trick, since the default background color is also a darker shade of orange.

…cts not owned by the current user This is deceiving, because the projects _are_ editable, just not saveable. Besides, we already have the "You do not own this project" warning in <editor-actions>

netux · 2025-03-15T02:15:39Z

@Mitcheljager what do you think of like this "Clone and Save" button in place of the "Fork" button?

I like this more even because it triggers on the Ctrl + S keybind as well (I'm reusing the <Save> component), which matches what I've seen other online text editors do when you try to save on a file that's not yours.

Mitcheljager · 2025-03-15T02:17:08Z

@netux I think that works!

…ror" when a project fails to be created This is more in line with other helper methods in this file.

…ethod A little house-keeping. I noticed this was the only /projects API call which wasn't in utils/project.ts, since it really is only used once.

… projects that aren't owned by the user This replaces the previous "Fork" button. The new button is situated in place of the "Save" button that appears in projects owned by the user, and even shares the same component. This matches the behavior seen in other online IDEs/text editors, when attempting to save a file that isn't your own.

netux · 2025-03-15T14:52:20Z

@Mitcheljager any opinions on the $ownProjects store deriving from $projects?

Mitcheljager · 2025-03-15T15:03:01Z

@netux I don't think it's a good idea to ever put any projects in there that are not your own. Ideally no store is needed for a project that is someone else's.

netux added 5 commits March 13, 2025 08:34

feat(editor): add option to fork other user's projects

69552d3

Reuses `duplicateProject()`, with some adaptations to ensure the forked project is loaded so we can get its name

feat(editor): fetch current project, even if not owned

473ac00

Add the current project to the $projects store. This will make the project's title appear in the projects dropdown

refactor(editor projects dropdown): extract project title trimming lo…

68a028c

…gic to text utils

fix(editor projects dropdown): only show own projects

0d74401

fix(editor): correct check for whether the current project is already…

38e2eb4

… in the store

Mitcheljager requested changes Mar 14, 2025

View reviewed changes

netux added 8 commits March 14, 2025 22:13

refactor(editor utils): rename trimmed() → truncate()

08c837b

feat(text scss): add .text-truncate

230779e

Makes an ellipsis appear on horizontal text overflow. Note that this should usually be combined with a static width for the overflow to trigger.

refactor(editor projects dropdown): reimplement text truncation in CSS

d8025b9

fix(editor projects dropdown): truncate dropdown items

672da2b

fix(editor): add is_owner flag to projects fetched through user_pro…

16e6f2e

…jects endpoint Fixes projects not appearing in the projects dropdown.

refactor: remove font-size change from .warning--orange/warning

7504521

Use `text-small` instead.

feat(editor actions): reduce contrast from "You do not own this proje…

4863bdb

…ct" warning Simply removing `warning--orange` does the trick, since the default background color is also a darker shade of orange.

feat(editor projects dropdown): remove "read-only" labeling for proje…

43f0060

…cts not owned by the current user This is deceiving, because the projects _are_ editable, just not saveable. Besides, we already have the "You do not own this project" warning in <editor-actions>

netux marked this pull request as draft March 15, 2025 01:42

netux added 3 commits March 15, 2025 00:29

refactor(editor project utils): return a nullish value instead of "er…

17c852c

…ror" when a project fails to be created This is more in line with other helper methods in this file.

refactor(editor project save): move save API call to its own helper m…

1cc568b

…ethod A little house-keeping. I noticed this was the only /projects API call which wasn't in utils/project.ts, since it really is only used once.

	export function trimmed(string: string, limit: number, ellipsis = "..."): string {
	export function truncate(string: string, limit: number, ellipsis = "..."): string {

Uh oh!

feat(editor): fetch current not-owned projects, add project forking #525

Are you sure you want to change the base?

feat(editor): fetch current not-owned projects, add project forking #525

Uh oh!

Conversation

netux commented Mar 13, 2025

Uh oh!

Mitcheljager left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

netux Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

netux commented Mar 15, 2025

Uh oh!

Mitcheljager commented Mar 15, 2025

Uh oh!

netux commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mitcheljager commented Mar 15, 2025

Uh oh!

netux commented Mar 15, 2025

Uh oh!

Mitcheljager commented Mar 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netux Mar 15, 2025 •

edited

Loading

netux commented Mar 15, 2025 •

edited

Loading