Proposal for : https://phabricator.wikimedia.org/T356436
Phabricator Proposal : https://phabricator.wikimedia.org/T359889

Profile Information

Name: Angel Sharma
Github: fillingtothemomo
Gmail: rockingpenny4@gmail.com
Phabricator: Rockingpenny4
Gerrit: rockingpenny4
Location: Mathura, India
Time Zone: IST(UTC+5.30)
Working hours: 3:00 PM to 3:00 AM (IST)

Synopsis

InlineComments (https://www.mediawiki.org/wiki/Extension:InlineComments) is a relatively new MediaWiki extension that provides a long-missing feature for MediaWiki: the ability to do inline annotation on pages, in the manner of Google Docs, Confluence and other content-management systems.
The extension works fairly well but some improvements can be added like adding user mentions to ping them in the comments, making sidebar creation more neutral and displaying correct date/time on adding a new comment with reloading the page.

Possible Mentor(s)
Yaron Koren and Brian Wolff

Have you contacted your mentors already?
Yes

Deliverables

• Add correct display of username and date/time of posting, on comment creation - currently, these are only displayed correctly for comments created before the page was loaded (T355943) This can be done by declaring a getCurrentTimestamp function in ApiAddAnnotation.php for comment creation and ApiAddReply.php for comment replies :
  
  rather than a separate API as that would lead to another request causing delay. Using the function , we can fetch the timestamp in sidenotes.js and makeComment.js :
  
  and appending it with the username in author.textContent :
  
  I have already implemented these features in my PRs listed below in past contributions

---

• Add user mentions, i.e. selecting a user or users to "ping" about the current discussion by typing "@" and then selecting a username from the dropdown (T355942)

The InlineComments should support "@"-style user mentions. That means the following:

• If a user types "@" in a comment (either a new comment or a reply), then an alphanumeric character afterwards, an autocompletion dropdown should appear, letting the user select from the set of usernames on the wiki that match what the user has typed.
• If the user selects one of those usernames from the dropdown, the username should appear, highlighted or bolded in some way. UI Mockup :
  
• Once a comment is saved, the username(s) in that comment should still be highlighted or bolded when the comment is displayed. UI Mockup :
  
• Any users who are "mentioned" in an inline comment should get notified, via the Echo extension. Source: https://www.mediawiki.org/wiki/Extension:Echo/Creating_a_new_notification_type Using EchoEvent::create() we can create a new event class that defines general events, collects information about the related page, user and wiki and inserts them into the database. As part of the definition of the event we detail which users receive a notification from this event. This is defined by the parameter 'user-locators' => array( ... ) , we can also use web or email notifications preferences. Using EchoPresentationModel we can create the model in which our notification will be presented by setting several parameters like getIconType, getSubjectMessage etc. After selecting users to notify from the dropdown simply locate those users and trigger the notification event.
  
  Example:
  
  This can be done in three main ways : an entirely custom solution, a solution involving a 3rd-party autocompletion JS library, or via the "@"-autocompletion feature in the DiscussionTools extension, which in turn relies on VisualEditor. If one were to go with the third approach, it would mean that every textarea in InlineComments would in reality be a VisualEditor input; if that were done, it may make sense to use JS or CSS to hide the VE toolbar from users. (It would also mean that three other MW extensions would be required for the InlineComments user mentions feature to work fully: VisualEditor, DiscussionTools and Echo.) On discussing , maybe a third party auto-completion library will be a better option if we could populate the user data as using the Visual Editor but hiding the toolbar seems kind of a hack.

---

• Make sidebar creation more skin-neutral - currently, the "sidebar" in which comments are displayed is created on somewhat of a skin-by-skin basis; it would be good to have the code handle all skins in a standard way, via CSS and/or JavaScript (T355948) Currently to render comments on the sidebar InlineComments has a default CSS file, but also custom CSS files for Vector, Vector 2022 and a few other skins.
  
  Example:
  
  However, this might be faulty for other skins that are not handled by the CSS so either we could make one css file for all skins which might lead to some duplicate code , or we could handle each skin differently based on different page width of elements and come up with a smart implementation using Javascript and some CSS.

---

Timeline

Pre-GSOC
Work on open issues on wikimedia phabricator and improve my skills and understanding of the mediawiki codebase , whilst still exploring the project codebase and gathering more information about features to be implemented during GSOC project. I have already contributed to various extensions like InlineComments, PageTriage, MobileFrontend, AdminLinks and WikiEduDashboard and learnt a lot from each PR made.
Community Bonding Period

Coding Period

Mid-Evaluation

Final- Evaluation

Post-GSOC
I am learning a lot by contributing to Wikimedia. Even after the GSoC period ends, I plan on contributing to this organization by adding to my past projects and working on open issues because of the familiarity of the technical stack and the new challenges that I am continually offered in the process.
Also, I would like to complete the future goals mentioned in my proposal. Having picked up many development skills, my primary focus would be to help the project and the community grow. I would also be interested in helping other people in getting started with their open-source journey and guide them in this fun process.

Future Goals
-Implement an edit feature for users' comments as it is something InlineComments lacks and will make it much more user-friendly
https://phabricator.wikimedia.org/T360965 -opened a task for this feature . Proposed approach is making a new API like ApiEditAnnotations.php in src/Api that has a method to fetch comments by their Id and a method to edit the comment and another method to save the edited comment to the server. This Api has to be integrated in makeComments.js and sidenotes.js in resources directory to work with comments and replies in thread. Approach might be changed on discussion with mentors.
-Suggest more changes and features during the GSOC period.

Participation
I am active on Email, Zulip, Discord and Slack. I will use Phabricator and Gerrit for issue discussions and code reviews. I plan on regularly meeting with my mentor to discuss my progress, resolve code reviews promptly and provide punctual check-ins and get feedback on my work. I can dedicate 40+ hours a week as I have no other commitments.

About Me

Education
College: Indian Institute of Technology(IIT), Roorkee
Year of Study: 2nd year
Field of Study: Mathematics and Computing(Bachelors of Science)

Skills

I am a member of IMG- Information and Management Group of my college and we are responsible for handling the entire college's data , the Institute official website and Channeli - a one stop application for student and faculty's entire information ranging from placement stats and noticeboard to lost and found and complaints and grievances ; and various other projects. Hence , I have a lot of experience working on production level apps used by thousands of people and working with an amazing and collaborative team that makes a huge impact.

• Javascript, jQuery ,HTML,CSS, Tailwind : Used vanilla JS in making projects like comic-book displaying website and basic games and CSS for styling.
• Django, PHP: Making backend for various applications
• React JS , Vue JS: Used for frontend development in full stack projects
• Flutter, Java : Used for app development in Android Studio
• Docker

How did you hear about this program?
After getting into college, I learned about Google Summer of Code from my seniors, and some of them were selected for it and after talking with them, I looked at the program with greater interest.

Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the program?
No, my current semester ends in May first week, and I will have holidays for 2.5 months where I can commit all my focus to this project, and I have no other commitments.

We advise all candidates eligible for Google Summer of Code and Outreachy to apply for both programs. Are you planning to apply to both programs and, if so, with what organization(s)?
I am 100% loyal to Wikimedia Foundation and only plan on applying to Google Summer of Code with the Wikimedia Foundation.

What does making this project happen mean to you?
I have always been excited by the prospect of converting ideas into products with real-world impact and that is exactly what the Wikimedia Foundation does, producing free and open-source applications that impart learning to millions of people over the globe.
I am highly interested in this project, and contributing to Wikimedia since December 2023 has been a really fantastic learning experience with assistance from all mentors; each PR teaches me something new, and each feedback and code review enhances my coding skills and understanding of the project. Getting to work on this project will teach me production-level code structures and massively impact my learning.

Past Experience

Contributions to Wikimedia

As a part of a microtask I created a small independent tool/web app that interacts with Wikimedia API and displays some information about an article. The tool has a frontend built using VueJS and the Wikimedia Codex UI library. Wiki_Word leverages mediawiki's opensearch API and Codex UI library for user to search a specific word in an article of language of their choice with a cool dark mode.
Deployed here

Past Projects
-DirecM
Worked on a project on app development using Flutter and Arduino using infrared sensors for a wayfinding app for blind and visually
impaired people under an event organized by a technical club of our college.

-ProTrack
My first major React project.Made a full stack application for managing personal groups and projects using React JS and Django backend with
MySQL and Tailwind CSS for styling.

-DRDO sensor Malware[Stealth Project]
Worked on developing malware apps for DRDO ( Defence Research and Development Organisation ), India, in a research internship under Dr. Sateesh K. Peddoju involving native android development.

Other open-source contributions
-Omniport-Docker
Official docker distribution of Omniport - one true portal for every educational institute.
-Circuitverse
CircuitVerse is a free, open-source platform that allows users to construct digital logic circuits online.