LiquidThreads 3.0/Design

Note: This page is a work in progress. If you have any questions or suggestions, please put them on the Discussion page rather than editing here, please!

Nomenclature
The use of the term "thread" to describe individual conversations shall be deprecated. While semantically accurate, the term has significantly smaller linguistic penetration than "Discussion". New users, especially those without any form of technical background, may find it daunting.

In some languages, the "Talk" link is translated to mean "Discussion". This could create confusion (a "discussion" page with multiple "discussions"). In such instances, the term should be rebranded to the plural form ("Discussions").
 * I also like the word "topic". It is a discussion page with several topics.

Page Sections
Talk pages with Liquid Threads enabled should be looked as being comprised of four component sections:


 * 1) Introduction - This effectively the WikiText portion of the page. It occurs at the top of the page and is where things like notices, introductions, templates, and other "Global" wikitext elements for the page occur (such as Category placements).
 * 2) Table of Contents - This is the user's main "window" into all discussions for the page in question. It is a dynamic control.  It also contains tools for searching discussions, creating new discussions/topics, and marking all discussions/topics as read.
 * 3) Discussion Area - This section contains the actual "meat" of the individual discussions. This section is a AJAX-loaded (except on first load of the page, when it will load the ten most recently modified discussions).

Summaries
Discussion summaries are to be moved out of the first post in a discussion and made more prominent. They are a powerful tool when used correctly and thus the user should be encouraged to create meaningful summaries of discussions but only when the discussion calls for it. Discussions that consist of very few posts (say, less than 5) are likely to be easily understood in-place or are often simple question and answer discussions.

Users will be able to add summaries to a discussion at any time (through the "Add Summary" link in the threads themselves). However, until the reply threshold has been reached, the urgency of summary will be less apparent.

At 5 posts in a discussion, an "add summary" link will appear next to the discussion subject in the Table of Contents. After 15 posts, the default text of the summary box should change:

"This discussion has XX responses. Please [add a summary] of the current discussion."

At 25 posts, an alert icon can be introduced to bring further attention to the need for a summary.

All threshold numbers should be configurable on a per-wiki basis.

Summary Issues

 * Concluded Discussions One point of concern is that users may (incorrectly) conclude that a discussion has been finished when it has been summarized or that adding a summary to a discussion will subsequently close it. This problem may be offset with correct verbage.
 * Stale Summaries- An additional issue surrounds stale summaries. This can possibly be solved with urging users to edit the summary if needed after replying to the discussion.
 * Summary Length - Given that summaries can appear in-place within the Table of Contents control, there should be a maximum character length for any individual summary. This number, too, should be configurable (probably 500 characters).

Data Page Changes
To better distinguish LiquidThreads talk pages from the standard MediaWiki talk pages, the "Talk" tab should be modified to include a small icon indicating its threaded nature.

Page Updates and Refreshes
Individual pages will continually ping the server to check for updates to visible discussions, new discussions, and other changes (discussion splits, moves, etc.). These changes should be surfaced to the user in an intelligent manner.

There are issues regarding performance that must be addressed. A primary concern is if the user leaves the window running in the background and goes home for a weekend. The document will continue to ping and may cause the user to run out of ram (if the page DOM grows to large).

To solve this, we should track page interaction and stop pings after a set period of idle timeout.

Obviously, this feature will require javascript to be activated to function.

General Information/Behavior Notes

 * 1) The Table of Contents will only ever display ten (10) rows at a time. This works in conjunction with the infinite scrolling (see below).  Obviously, the specific number of lines to be displayed can be parametized; however, there is a hard link that should be taken into account (that is, the number of initial threads to be loaded in the page).
 * 2) The Table of Contents is to be considered a disparate entity from the content (visible threads) on the page. The Table of Contents is a 'control' and not content.  It is dynamic and its appearance may not reflect exactly what is within the Thread section of the page.
 * 3) Clicking on the subject of any Discussion will have the following results:
 * 4) The Table of Contents will alter it's order position so that the clicked-upon discussion becomes the "topmost visible" element in the stack and;
 * 5) The Discussion Area will reload, displaying the 10 Discussions that are visible in the Table of Contents.

Call Outs (Screen 1)

 * 1) Headers. All headers within the Table of Contents are sortable A-Z and Z-A.  Secondary sort will not be supported at this time.
 * 2) *Pages can be sorted by Subject (alphabetically), Number of Replies (numerically), and by timestamp of Last Reply.
 * 3) *In the future, additional sorting headers may be desired (such as timestamp of Thread Start). However, we have limited horizontal real-estate, so solutions (such as automatic hiding of columns at given widths) will need to be investigated in order to handle low-resolution scenarios.
 * 4) Sorted Header. The background on the header for the current sort is the inverse of non-sorted (upside down).  An arrow is included to indicate the direction of the sort.
 * 5) Thread Lines. Individual thread lines consist of several elements:
 * 6) *If there is a summary, there is a clickable arrow that will open the summary for that particular thread in place.
 * 7) *If there is not a summary, there will be an [add summary] link at the end of the title
 * 8) *If there are new replies for the reader, the number of replies will be indicated in the line.
 * 9) Reply Summary Hover Hovering over the "NN New Replies" text will cause a popup to display.  This will list the User names and the dates of the replies, indented as possible.It is not practical to display all responses in threads with a large number of new replies 'or' deep indents.  Therefore the following limitations should be applied to the popup:
 * 10) *Only four (4) depth levels of nesting should ever be displayed. If there are five depth levels of nesting, the fourth level should be replaced with the text "X more replies"
 * 11) *Only ten total lines of text should appear. If there are more than ten lines of text (this can include "X more replies" lines), then the last line should be "And X more replies".
 * 12) Infinite Scrolling. The concept of "pagination" in this system is problematic.Therefore, we are going to adopt an "infinite scrolling" system. Elements in the Table of Contents should then be seen as a "stack".  As the user scrolls the Table of Contents, as-yet-unseen threads will be added to the bottom of the "stack".  This is handled by AJAX calls.
 * For pages with large numbers of threads (exact value to be determined, likely by server performance), elements will be removed from the "top" of the stack (or bottom, depending upon which direction the user is scolling).
 * 1) * Non-Javascript/Screen Reader behavior In the case where Javascript has been disabled, or the user's browser does not support Javascript, infinite scrolling cannot be used. The system will then fall back upon a pagination system.
 * 2) Add Summary link - This link will only appear when the "reply threshold" (see above) has been reached. This will serve as an at-a-glance indicator that the thread should have a sumamry written.
 * Clicking this link will enable the user to add a summary to the thread in question. The optimal location for the summary editor to load in this situation (either in place in the Table of Contents or at the top of the Discussion) is yet to be determined.
 * 1) Table Of Contents Controls - There are three elements here:
 * 2) *Discussion Count - Lists the number of discussions included on the page.
 * 3) *Refresh Link - Refreshes the Table of Contents control. Does NOT mark any items read.
 * 4) *Mark All Read - Marks all visible threads read and refreshes the Table of Contents control. Responses that are new since the TOC loaded last are marked still shown as new.
 * 5) New Discussion Button - Clicking this will start a new discussion.
 * 6) Search Discussions Box - this executes a standard search across all posts associated with the given discussion page.
 * Note: The thickness and color of the search box's border are different than that of the main search box in Vector. The reason for this is to call additional attention to it as a control within the context of the table of contents.

Call Outs (Screen 2)

 * 1) Open Summary. Clicking on the arrow next to a subject with a summary will cause that summary to be displayed in-line.
 * 2) *It is possible for all summaries for all subjects visible in the Table of Contents to be opened.

Call Outs (Full Discussion)

 * 1) Summary Box
 * 2) Avatar, Signature, and Timestamp - In order to better facilitate community health, users will be given the ability to add an avatar (see Avatars).
 * 3) Thanks Button - Clicking this button will add the user to the "thanks list" for the specific post. This can only be done once per user, and only logged-in users will see this button.  It will not be possible to "say thanks" for your own posts.
 * 4) *Whether or not it is possible to "unthanks" a post remains in discussion.
 * 5) More Actions Popdown - On hover, this menu appears, allowing the user to select elements from it.
 * 6) *History - Takes the user to the history for this specific post.
 * 7) *Edit - Allows the user to edit this specific post.
 * -Note - We should develop a mechanism for indicating that someone other than the post's author has made a change here, or if the user has made a change. How to address this is still under review.
 * 1) *Link To - This will open a popup that contains the links to this specific post.
 * 2) *Split - This link is the same as "move" except that the user need not choose a position for the post to be dropped. It will always drop to the "root" level, and at the top (given that its timestamp will update).
 * 3) *Move - This will activate the "liquid move" behavior for the post set (thread).
 * 4) "To Top" Button - This button navigates the user to the top of the thread.
 * 5) * Note: It is intended to have two buttons here: To Discussion Start and To Parent. Comp will be updated to reflect change soonish.
 * 6) Thanks List - This line displays the list of people who have "given thanks" for the post in question. If there are 4 or fewer people in the "thanks list", all four will be displayed here. When there are more than 5 people in the "thanks list", everyone following the first three will be collapsed into a "and X others" system.
 * The final position of this element may change (it may drop to the bottom of a post).
 * 1) Thanks List Pulldown - This displays the "overflow" members of the thanks list that were hidden.
 * 2) *This list will split into multiple columns if the number of users in the thanks list is greater than 11. When the list numbers 12, two columns will appear (with 6 entries per).  Additional columns will be added until the maximum number of displayable names is reached (100).
 * A full methodology for this display is TBD.
 * 1) Collapsed Post Set - This illustrates what happens when the left-most arrow in a post is clicked, collapsing the discussion from that point down.
 * 2) Depth Marks - These are used as quick visual aids for two reasons:
 * 3) *Quick reference as to how deep within the discussion an individual response lies.
 * 4) *Provides a visual cue to the reader to quickly locate the parent post for any one post.

Call Outs (No Summary Screen)

 * 1) Summary Box When there is no summary present, the summary box will still appear. However, the text within the box indicates that the summary is missing and provides a call-to-action for the user to add a summary.  The call to action is a red link to better provide a visual cue.